base2Services Website Design Rules

Core Design Principles

1. Use Existing Styles Only

• NEVER create new CSS classes or inline styles
• ALWAYS use existing classes from the stylesheet
• ONLY add new styles when explicitly agreed upon by both parties
• Follow the established design system patterns

2. Standard Layout Patterns

Home Page Format

• Use the home page (_layouts/home.html.haml) as the gold standard
• Follow the banner, services, and content structure
• Maintain the established visual hierarchy

Service Pages Format

• Follow the pattern established in:
  • artificialintelligence/aifactory/index.html.haml
  • devops/what-you-get/index.html.haml
• Use .container.inner.partner-page.no-padding.no-bg for main content
• Use .grid-2-1-column.no-padding for layout structure
• Use .two-of-three-column-layout.padding.bg-white for main content area

3. Established CSS Classes to Use

Layout Classes

• .container.inner - Main content container
• .grid-2-1-column.no-padding - Two-column layout
• .two-of-three-column-layout.padding.bg-white - Main content area
• .one-of-three-column-layout - Sidebar area

Card Classes

• .cards.two - Two-card layout
• .cards.three - Three-card layout
• .cards.four - Four-card layout
• .card - Individual card
• .card.white - White card variant
• .card.blue - Blue card variant
• .card__title - Card title
• .card__text - Card content

Button Classes

• .btn-primary - Primary button
• .btn-primary.blue - Blue primary button
• .btn-primary.white - White primary button
• .findoutmore - CTA button modifier

Typography Classes

• .section-title - Section headings
• .de-em - Emphasized text in titles
• .big.headline - Large headlines
• .card__title.center - Centered card titles

4. Content Structure Rules

Partner Pages

• Focus on partnership and integration messaging
• Highlight credentials and expertise
• Emphasize collaboration over sales
• Use two-card layout for key services

Service Pages

• Use established service page patterns
• Include feature lists with .card__text
• Add comparison sections using existing partials
• Include CTAs with proper button classes

5. What NOT to Do

• ❌ Don't create new CSS classes
• ❌ Don't use inline styles unless absolutely necessary
• ❌ Don't deviate from established layout patterns
• ❌ Don't add custom colors or gradients
• ❌ Don't create new card layouts
• ❌ Don't modify existing button styles

6. What TO Do

• ✅ Use existing classes from the stylesheet
• ✅ Follow established layout patterns
• ✅ Use proper card and button classes
• ✅ Maintain visual consistency
• ✅ Reference existing pages as templates
• ✅ Use established typography classes

Reference Pages

Layout Templates

• Home Page: _layouts/home.html.haml
• Service Pages: artificialintelligence/aifactory/index.html.haml
• Partner Pages: partners/partner-pages/aws.html.haml

Component Examples

• Service Cards: _partials/front_page/services_columns.html.haml
• Comparison Sections: _partials/compare/ directory
• Button Patterns: Throughout existing pages

Remember: When in doubt, look at existing pages and copy their patterns exactly. The design system is already established - use it!