Branding Implementation

Apply branding guidelines to create aesthetically clean websites.

Workflow

1. Review Page Sections - Identify all sections on the page
2. Apply 60-30-10 Rule - Distribute colors appropriately
3. Alternate Backgrounds - Create visual rhythm
4. Check Visual Hierarchy - Ensure proper emphasis
5. Verify Consistency - Match overall brand style

60-30-10 Color Rule

See references/design-rules.md for details.

60% - Dominant (Background)

• Main page background: bg-background
• Most section backgrounds
• Creates visual foundation

30% - Secondary (Supporting)

• Alternating sections: bg-muted
• Cards and containers
• Creates depth and separation

10% - Accent (Emphasis)

• CTAs and buttons: bg-primary
• Highlights and important elements
• Draws attention to key actions

Section Background Pattern

Alternate backgrounds for visual rhythm:

Section 1 (Hero):      bg-background
Section 2 (Logos):     bg-muted
Section 3 (Features):  bg-background
Section 4 (Process):   bg-muted
Section 5 (Pricing):   bg-background
Section 6 (Testimonial): bg-muted
Section 7 (FAQ):       bg-background
Section 8 (CTA):       bg-primary (accent - 10%)
Section 9 (Footer):    bg-muted or bg-background

Visual Hierarchy Guidelines

Primary Focus (10%):

• Hero headline
• Primary CTA buttons
• Key statistics

Secondary Focus (30%):

• Section titles
• Feature highlights
• Pricing cards

Supporting Content (60%):

• Body text
• Descriptions
• Background elements

Section Styling

Hero Section

<section className="bg-background">
  {/* Full-width, prominent */}
</section>

Feature Sections

<section className="bg-muted py-16 md:py-24">
  <div className="container">
    {/* Contained content */}
  </div>
</section>

CTA Section

<section className="bg-primary text-primary-foreground py-16">
  {/* Accent color, draws attention */}
</section>

Spacing Consistency

Standard section padding:

• Mobile: py-12 or py-16
• Tablet: md:py-20
• Desktop: lg:py-24

Container usage:

<div className="container">
  {/* All content centered, max-width applied */}
</div>

Output

• Sections with appropriate backgrounds
• 60-30-10 color distribution
• Consistent spacing
• Clear visual hierarchy
• Professional, clean appearance