daydream

Overview

daydream is a B2B SaaS platform delivering full-service organic search through AI-powered SEO agents paired with human expertise. The brand embodies 'Warm Minimalism'—a design philosophy that balances technical precision with approachable, human-centered warmth. The aesthetic combines a cream-white canvas (#fffffb) with playful pastel accents (sky blue #b7ebff, soft purple #eed1ff, mint green #c3f2d0) and a grounded dark ink (#1f1f1f) for typography and CTAs. The UI evokes clarity and confidence: users feel they're working with both cutting-edge automation and real people who understand their challenges.

The brand voice is conversational yet authoritative—direct without being cold, optimistic without hype. daydream speaks in concrete outcomes ('unfair advantage in organic search') and avoids jargon-heavy abstractions. Tone example: 'SEO is hard to win. We make it less hard.' The visual language reinforces this duality: clean geometric illustrations sit alongside organic, hand-drawn flourishes; technical data visualizations are wrapped in warm color palettes; and every interaction feels intentional, never sterile.

Colors

The color system is built on a warm, light foundation (#fffffb background, #f0f0eb surface-container) with a dark ink primary (#1f1f1f) for all text and primary CTAs. This high-contrast pairing ensures accessibility (WCAG AA+) while maintaining warmth through secondary and tertiary accent colors. Primary (#1f1f1f) is used exclusively for call-to-action buttons ('Join the waitlist', 'Explore Full-Service'), navigation text, and all body copy—it's the brand's signature interaction color, appearing on 48px button heights with 12px 24px padding and 1rem border-radius. Secondary (#b7ebff, a soft sky blue) supports informational elements, badges, and accent borders; it appears frequently in hero illustrations and secondary UI containers. Tertiary (#eed1ff, a gentle lavender) is reserved for high

Typography

The type system uses Raleway exclusively, a geometric sans-serif that balances technical clarity with friendly approachability. Display (64px, fontWeight 500, lineHeight 72px, letterSpacing -0.02em) anchors hero sections and major page titles like 'SEO is hard to win'; headline-lg (40px, fontWeight 600) breaks up content sections; body-md (16px, fontWeight 400, lineHeight 24px) carries all body copy and ensures readability at standard viewing distances. Label-md (14px, fontWeight 600, letterSpacing 0.01em) is applied to all button text and form labels, creating visual hierarchy through weight rather than size. The type pairing communicates 'approachable expertise': Raleway's geometric letterforms feel modern and technical, while its generous x-height and open counters prevent coldness. On

Layout

The layout uses a 12-column grid with a max-width of 1120px, centered on the viewport with 24px horizontal gutters on mobile and tablet. Sections are separated using lg spacing (40px) for major content breaks and md spacing (24px) for subsections, creating a breathing rhythm that prevents cognitive overload. The hero section occupies the full viewport height with centered text (h1 at 64px, body copy at 18px) and dual CTAs positioned at 24px below the copy block. Container max-widths vary by section (920px for narrow content, 1120px for full-width imagery) to accommodate different content types without creating visual monotony. White-space is generous but purposeful: the 40px lg spacing between sections allows illustrations and data visualizations to breathe, while the 12px sm spacing withi

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids harsh drop-shadows, instead using soft, diffuse shadows that suggest light diffusion rather than dramatic layering. Level 1 (Base): the cream background (#fffffb) with no shadow, establishing the ground plane. Level 2 (Standard Cards & Inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a subtle shadow that lifts elements 4-8px above the surface, used on cards, input fields, and secondary buttons. Level 3 (Elevated Modals & Hover States): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a softer but larger shadow suggesting 12-16px el

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are used strategically to soften the geometric precision of the layout without introducing organic or playful excess. Buttons use lg radius (1rem / 16px), creating a pill-like appearance that feels friendly and clickable while maintaining clear affordance. Cards and containers use xl radius (1.5rem / 24px) for major content blocks, establishing a visual hierarchy where larger surfaces feel more approachable. Input fields use DEFAULT radius (0.5rem / 8px), a subtle rounding that signals interactivity without competing with buttons. Icon b

Components

Action Elements Buttons are the primary interaction mechanism and use a two-tier system: primary buttons (backgroundColor: {colors.primary} #1f1f1f, textColor: {colors.on-primary} #fff7f0, height: 48px, padding: 12px 24px, rounded: {rounded.lg} 1rem) for main CTAs like 'Join the waitlist' and 'Explore Full-Service'; secondary buttons (backgroundColor: transparent, border: 2px solid {colors.primary}, textColor: {colors.primary}) for alternative actions like 'Book a call'. On hover, primary buttons transition to {colors.primary-container} (#232323) with a 150ms ease, creating a subtle darkening effect. All button text uses {typography.label-md} (14px, fontWeight 600) and includes a 2px vertical padding adjustment (4px 14px in computed styles) for optical centering. Buttons support icon +

Do's and Don'ts

**Do**

• Do use primary (#1f1f1f) exclusively for CTAs, navigation, and body text—never for backgrounds or decorative elements.
• Do apply the md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to all elevated surfaces and transition to lg shadow (0 8px 24px rgba(0, 0, 0, 0.12)) on hover with 150ms easing.
• Do maintain 24px gutters and 40px section spacing (lg token) to create breathing room and prevent cognitive overload.
• Do use Raleway exclusively across all typography scales—never mix typefaces or fall back to system fonts.
• Do apply 1rem border-radius to buttons and 1.5rem to cards to maintain the Soft-Technical aesthetic.
• Do ensure all text meets WCAG AA contrast ratios (4.5:1 minimum) by testing primary (#1f1f1f) on secondary (#b7ebff) and tertiary (#eed1ff) backgrounds.

**Don't**

• Don't use secondary or tertiary colors for primary CTAs—primary (#1f1f1f) is the only button background color for main actions.
• Don't apply harsh drop-shadows (e.g., 0 20px 40px rgba(0, 0, 0, 0.3))—use only the defined elevation shadows (md or lg) to maintain warmth.
• Don't exceed 1120px container max-width or use asymmetric gutters—the grid must remain consistent across all breakpoints.
• Don't introduce new typefaces or weights beyond Raleway 400, 500, 600, 700—geometric consistency is critical to brand recognition.
• Don't round corners beyond 1.5rem on cards or 1rem on buttons—excessive rounding undermines the Soft-Technical balance.
• Don't use pure black (#000) or pure white (#fff) in the color palette—always use {colors.primary} (#1f1f1f) and {colors.on-primary} (#fff7f0) to maintain warmth.