We Are ROAST

Overview

We Are ROAST is a performance marketing agency brand built on **Architectural Minimalism with Bold Accents**—a design philosophy that pairs austere, high-contrast surfaces with a commanding yellow signature color (#ffce03) that demands action. The brand serves B2B and enterprise clients seeking measurable ROI, and the UI evokes precision, confidence, and forward momentum. Every interaction is intentional: the beige canvas (#fbf8f4) provides calm, the charcoal text (#262626) ensures legibility, and the yellow punctuation drives conversion. The emotional response is one of clarity and control—no noise, no ambiguity, only results.

The voice is direct, data-driven, and unapologetically ambitious. ROAST speaks in active verbs and concrete metrics: "Return On Advertising Spend," "We're driven by constant exploration and a focus on real outcomes – not theory." The vocabulary avoids jargon-heavy abstractions; instead, it grounds itself in measurable impact and second-decade growth. Tone is confident without arrogance, professional without coldness. Example sentence in the brand's voice: "Tomorrow's campaign hits 2.3M impressions—here's what we learned."

Colors

The ROAST color system is built on **high-contrast duality**: a warm, neutral canvas paired with a vibrant accent system. Primary (#fbf8f4) is the dominant surface—a soft beige that reduces cognitive load and provides a sophisticated, editorial backdrop. On-surface (#262626) is a deep charcoal that ensures WCAG AAA contrast (21:1) against the primary surface, making every word legible at 12px. The secondary accent, yellow (#ffce03), is the brand's signature action color—used exclusively on primary CTAs (buttons, links, highlights), form states, and brand moments. It appears at 100% opacity on dark backgrounds and at reduced saturation (#e6b903) on hover to signal interactivity. Secondary (#5fbfba) and tertiary (#e9506c) are supporting accents: teal for data visualization and success states

Typography

The type system pairs **Bodoni** (serif, display-only) with **Galano Grotesque** (sans-serif, UI/buttons) and **sofia-pro** (humanist sans-serif, body text). This tri-font approach creates visual hierarchy through family, not weight: Bodoni at 83px fontWeight 500 commands hero sections with editorial gravitas; Galano Grotesque at 12px fontWeight 500 (label-md) brings precision to buttons and form labels; sofia-pro at 16px fontWeight 400 (body-md) provides warm, readable body copy. Letter-spacing is conservative (-0.02em on display, 0em on body) to maintain tightness and confidence. Line-height is generous (1.5x on body, 1.1x on display) to ensure readability on beige backgrounds and support scanning. On small labels (12px) over busy backgrounds, apply text-shadow: 0 1px 2px rgba(0,0,0,0.08

Layout

The layout system uses a **12-column grid with a 1280px max-width**, centered with equal gutters (24px on desktop, 16px on mobile). Sections are separated by lg spacing (40px on mobile, 64px on desktop) to create breathing room without excessive whitespace. The page rhythm alternates between full-width hero sections (beige background, no padding) and contained content blocks (white cards, md padding). Container max-width is enforced at 1280px; content never bleeds edge-to-edge except for hero imagery and background color shifts. Horizontal padding uses the gutter token (24px) on desktop, reducing to 16px on tablet and 12px on mobile. Vertical spacing follows the semantic scale: xxl (96px) for section breaks, lg (40px) for component groups, md (24px) for internal card padding, sm (12px) for

Elevation & Depth

Depth in ROAST is achieved through **subtle shadow and surface-color shifts**, not dramatic layering. The system uses three elevation levels: Level 1 (Base) is the beige surface (#fbf8f4) with no shadow. Level 2 (Cards/Modals) applies box-shadow: 0 4px 28px rgba(0,0,0,0.08) and backgroundColor: #ffffff to create a floating effect. Level 3 (Hover/Active) increases shadow to 0 8px 40px rgba(0,0,0,0.12) and shifts background to surface-container-high (#e2dfdc), signaling interactivity. Buttons use no shadow; instead, they rely on color contrast (yellow on beige, charcoal on white) and rounded cor

Shapes

The shape philosophy is **Geometric Precision with Soft Edges**—a balance between technical sharpness and approachability. Buttons and form inputs use 20px border-radius (rounded.lg), creating a modern, friendly appearance without the softness of full-rounded corners. Cards and containers use 8px border-radius (rounded.DEFAULT) for a more technical, grid-aligned feel. Modals and popovers use 40px border-radius (rounded.xl) to signal importance and create a distinct visual container. The full-rounded token (100px) is reserved for badges and avatar containers. This graduated scale creates a visu

Components

Action Elements Buttons are the primary interaction mechanism. **button-primary** uses backgroundColor: #ffce03, textColor: #262626, padding: 12px 20px, height: 44px, rounded: 20px, and fontFamily: Galano Grotesque, fontWeight: 500, fontSize: 12px. On hover, the background shifts to #e6b903 (a darker yellow) with a 150ms ease transition. **button-secondary** inverts the colors: backgroundColor: #262626, textColor: #ffffff, maintaining the same padding and height. On hover, it darkens to #3b3b3b. **button-tertiary** is transparent with a 1px border (outline color #c9c6c3) and text color #262626; on hover, the background becomes surface-container-high (#e2dfdc). All buttons use cursor: pointer and transition: all 150ms ease-out.

Containers & Surfaces **card** is the foundational con

Do's and Don'ts

**Do**

• Do use yellow (#ffce03) exclusively on primary CTAs, form highlights, and brand moments—it is the signature accent and loses impact if overused.
• Do maintain the beige background (#fbf8f4) for long-form content sections to reduce eye strain and reinforce the editorial, premium aesthetic.
• Do apply the full 12-column grid with 24px gutters on desktop; never allow content to exceed 1280px max-width.
• Do use Bodoni (serif) only for display-level headlines (h1, hero titles); never use it for body text or UI labels.
• Do pair button hover states with a 150ms ease transition and a 2-step shadow increase (md to lg elevation) to signal interactivity.
• Do use the surface-container-high (#e2dfdc) for hover states on cards and list items; it creates a subtle, professional interaction without introducing new colors.

**Don't**

• Don't use yellow on secondary buttons or neutral UI elements; reserve it for actions that drive conversion and brand recognition.
• Don't apply shadows deeper than 0 8px 40px rgba(0,0,0,0.12); the system is minimalist and excessive depth undermines the aesthetic.
• Don't use pure white (#ffffff) as the primary background; the warm beige (#fbf8f4) is the brand canvas and provides superior readability and warmth.
• Don't mix serif and sans-serif fonts within a single headline or button; Bodoni is display-only, Galano Grotesque is UI-only, sofia-pro is body-only.
• Don't apply border-radius greater than 40px on cards or containers; the system uses graduated radii (8px, 20px, 40px) to signal hierarchy.
• Don't use the secondary accent colors (teal #5fbfba, pink #e9506c) on primary CTAs; they are supporting accents for data visualization and secondary actions only.