INTERNAL USE ONLY

    CWS Brand Guidelines

    Design system documentation for California Waste Services. This page is hidden from public navigation.

    Color System

    All colors defined as HSL values in index.css and mapped in tailwind.config.ts

    Primary Colors (Brand Greens)

    The core brand identity. Three shades: darkest for text, medium for buttons, white for text on green.

    Primary (Brand Green)

    HEX: #285943

    HSL: 152 38% 25%

    CSS: --primary

    Primary buttons, icon backgrounds, text links, main brand identity

    Primary Foreground

    HEX: #FFFFFF

    HSL: 0 0% 100%

    CSS: --primary-foreground

    Text on primary backgrounds (buttons, badges)

    Foreground (Text Green)

    HEX: #1B4D3E

    HSL: 152 35% 18%

    CSS: --foreground

    All headings, body copy, navbar text - the darkest green

    Accent Colors (CTA Orange)

    High-visibility orange for urgent actions. Use sparingly for maximum impact.

    Accent (Vibrant Orange)

    HEX: #FF6600

    HSL: 24 100% 50%

    CSS: --accent

    Urgent CTAs ('Get a Quote', 'Schedule Now'), badges, highlights

    Accent Foreground

    HEX: #FFFFFF

    HSL: 0 0% 100%

    CSS: --accent-foreground

    Text on accent buttons

    Surface & Section Colors

    Backgrounds for pages, cards, and alternating sections.

    Background

    HEX: #FFFFFF

    HSL: 0 0% 100%

    CSS: --background

    Main page backgrounds

    Card

    HEX: #FFFFFF

    HSL: 0 0% 100%

    CSS: --card

    Card backgrounds, elevated surfaces

    Section Alt

    HEX: #F3F4F6

    HSL: 220 14% 96%

    CSS: --section-alt

    Alternating section backgrounds for visual separation

    Muted

    HEX: #F3F4F6

    HSL: 220 14% 96%

    CSS: --muted

    Subtle backgrounds, disabled states, code blocks

    Utility Colors

    Borders, dividers, and secondary text.

    Border

    HEX: #E5E7EB

    HSL: 220 13% 91%

    CSS: --border

    Card borders, dividers, input borders

    Muted Foreground

    HEX: #6B7F76

    HSL: 152 15% 45%

    CSS: --muted-foreground

    Use sparingly - captions, timestamps. Prefer foreground for legibility.

    Button System

    All buttons use the shadcn Button component with consistent variants.

    Primary Button

    Standard actions, navigation, secondary CTAs

    variant="default"

    Accent Button

    Urgent CTAs - quotes, scheduling, phone calls

    variant="accent"

    Outline Button

    Secondary actions, filters, toggles

    variant="outline"

    Ghost Button

    Tertiary actions, navigation links, icon buttons

    variant="ghost"

    White Button (on dark)

    Used on hero sections and dark backgrounds

    variant="white"

    Button Sizes

    size="sm"

    size="default"

    size="lg"

    size="icon"

    Typography

    Inter is the sole typeface. Clean, modern, highly legible.

    Font Family

    Inter

    Fallback: system-ui, sans-serif

    All UI text, headings, body copy

    Type Scale

    Hero H1

    36px / 48px / 60px

    Sample Text

    text-4xl md:text-5xl lg:text-6xl

    Page H1

    30px / 36px / 48px

    Sample Text

    text-3xl md:text-4xl lg:text-5xl

    Section H2

    24px / 30px

    Sample Text

    text-2xl md:text-3xl

    Card H3

    18px / 20px

    Sample Text

    text-lg md:text-xl

    Body Large

    18px / 20px

    Sample Text

    text-lg md:text-xl

    Body

    16px

    Sample Text

    text-base

    Body Small

    14px

    Sample Text

    text-sm

    Caption

    12px

    Sample Text

    text-xs

    Spacing System

    Consistent spacing creates visual rhythm and hierarchy.

    Section Padding

    Value: py-16 md:py-24

    Pixels: 64px / 96px

    Vertical padding for page sections

    Hero Padding

    Value: pt-40 pb-28 md:pt-52 md:pb-36

    Pixels: 160px/112px / 208px/144px

    Hero section vertical spacing

    Container Max Width

    Value: max-w-7xl

    Pixels: 1280px

    Content container width

    Card Padding

    Value: p-6 md:p-8

    Pixels: 24px / 32px

    Internal card padding

    Component Gap

    Value: gap-6

    Pixels: 24px

    Space between cards/components

    Element Gap

    Value: gap-4

    Pixels: 16px

    Space between smaller elements

    Border Radius

    Rounded corners create a modern, approachable feel.

    Base Radius

    0.75rem

    Default for cards, buttons, inputs

    Rounded Full

    rounded-full

    Badges, pills, avatar containers

    Rounded XL

    rounded-xl

    Cards, larger containers

    Rounded 2XL

    rounded-2xl

    Hero cards, prominent containers

    Rounded LG

    rounded-lg

    Buttons, inputs, smaller elements

    Shadows

    Elevation creates depth and visual hierarchy.

    Card Shadow

    shadow-lg

    Elevated cards, featured items

    Hover Shadow

    shadow-xl

    Cards on hover state

    Button Shadow

    shadow-lg

    Primary CTA buttons

    Hero Card

    shadow-2xl

    Quote form and prominent widgets

    Animations

    Subtle motion adds polish without distraction.

    Fade In

    Class: animate-fade-in

    Duration: 0.3s

    Element entrance animations

    Pulse

    Class: animate-pulse

    Duration: 2s infinite

    Status indicators, live badges

    Hover Scale

    Class: hover:scale-105

    Duration: 0.2s

    Buttons, interactive cards

    Hover Lift

    Class: hover:-translate-y-1

    Duration: 0.3s

    Cards on hover

    Icon Hover

    Class: group-hover:scale-110

    Duration: 0.3s

    Icons within hoverable containers

    Design Principles

    Core values that guide all design decisions.

    Eco-Industrial Modern

    Clean, spacious, and highly professional. The design balances industrial utility with modern environmental consciousness.

    Clarity Over Cleverness

    Industrial, operational, trustworthy tone. Prioritize fast answers over storytelling. Users want efficiency, not marketing language.

    Full Legibility

    No opacity on text. All copy uses text-foreground for maximum readability. Muted text is reserved for truly secondary information only.

    Decision Hub Model

    Homepage functions as a "What are you looking to do today?" hub with clear routing to specific services rather than traditional marketing flow.