Caide

Overview

Caide embodies a design philosophy of **Vibrant Pragmatism**—combining bold, saturated color blocking with clean, efficient typography to communicate that AI-powered automation is both powerful and approachable. The brand serves B2B sales teams who are tired of manual outreach; the visual language transforms a traditionally dry category (lead generation) into something energetic and human-centered. The UI uses a high-contrast palette of deep navy (#0d0431), electric yellow (#fec901), soft lavender (#e4cdfb), and mint cyan (#d4fdf7) to create visual rhythm and guide attention without feeling chaotic. The emotional response is one of relief: "Finally, a tool that makes this effortless."

Caide's voice is direct, conversational, and slightly irreverent—never corporate-speak, always action-oriented. The brand personality is that of a confident colleague who knows the pain of cold outreach and has built something to eliminate it. Vocabulary leans into concrete outcomes ("hot leads," "conversations," "confirmed meetings") rather than abstract features. Example sentence in brand voice: "Stop pretending your spreadsheet is a CRM. Let Caide handle the chaos while you close deals."

Colors

The color system is organized around **intentional contrast and emotional signaling**. Primary (#0d0431, deep navy) is the brand's anchor—used for body text, primary buttons, and the logo—establishing trust and professionalism. Secondary (#fec901, electric yellow) is the energy color, deployed on accent blocks, highlights, and call-to-action backgrounds to signal action and opportunity. Tertiary (#d4fdf7, mint cyan) provides a softer, supportive accent for secondary UI elements, notifications, and container backgrounds, creating visual breathing room. The surface stack (#ffffff to #f3f3f3 to #e9ecef) provides neutral hierarchy without coldness; the light purple container (#e4cdfb) bridges primary and secondary, used for elevated sections and hover states.

Usage rules: Primary buttons use

Typography

The type system pairs **Unbounded** (geometric, bold, modern) for headlines with **Switzer** (clean, humanist, readable) for body copy. This pairing communicates both innovation (Unbounded's distinctive letterforms) and clarity (Switzer's accessibility). Display (60px, 700 weight) is reserved for hero headlines; Headline-lg (50px, 500 weight) is used for major section titles; Headline-md (36px, 500 weight) for subsections. Body-lg (18px, 400 weight) is the primary reading size with 28px line-height for comfortable scanning. Body-md (16px, 400 weight) is used for UI copy and form labels. Label-md (14px, 600 weight) is applied to buttons and badges with 0.01em letter-spacing for crisp, scannable UI. All headlines use -0.02em to -0.04em letter-spacing to tighten the geometric forms and increa

Layout

The layout follows a **12-column grid with fluid container scaling** up to 1280px max-width. The gutter is 24px, providing consistent rhythm across breakpoints. Section padding uses the spacing scale: lg (40px) for major section separation, md (24px) for card padding and internal spacing, sm (12px) for compact UI elements. The hero section spans full-width with a 80px vertical padding, creating a generous, breathing composition. Color-blocked sections (yellow, cyan, lavender) break the grid intentionally, extending to viewport edges to create visual drama and break monotony. White-space philosophy prioritizes clarity over density: cards have 24px padding minimum, form fields have 12px internal padding, and list items have 12px vertical spacing. Container max-width is 1280px; on mobile, the

Elevation & Depth

Depth is conveyed through **layered shadows and color blocking** rather than subtle gradients. The elevation system uses three distinct levels: Level 1 (Base) is the white surface (#ffffff) with no shadow, representing the default plane. Level 2 (Cards & Inputs) uses box-shadow: 0 3px 8px rgba(0,0,0,0.15), applied to cards, notification badges, and input fields to lift them slightly above the base. Level 3 (Modals & Elevated Sections) uses box-shadow: 0 8px 24px rgba(0,0,0,0.12) for full-screen overlays and hero sections. Color-blocked sections (yellow, cyan, lavender) create pseudo-elevation

Shapes

The shape philosophy is **Soft-Technical**: rounded corners are used consistently but not excessively, creating a balance between approachability and precision. Buttons use 0.75rem (12px) border-radius, giving them a slightly rounded, friendly appearance while maintaining clear clickability. Cards and containers use 1rem (16px) border-radius for a softer, more inviting feel. Input fields use 0.5rem (8px) border-radius to signal their utilitarian purpose. Badges and pills use 9999px (full) border-radius to create a distinct, compact visual identity. The rationale: smaller radius (8px) for funct

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use #0d0431 background, white text, 2px solid border, 12px horizontal padding, and 48px height with 0.75rem border-radius. On hover, the background shifts to #1a0d4d (primary-container) with a smooth 200ms transition. On focus, add a 3px outline at rgba(13,4,49,0.2) with 2px offset. Secondary buttons are transparent with a 2px #0d0431 border and #0d0431 text; on hover, the background becomes #e4cdfb (surface-container-high) while maintaining the border. All buttons use label-md typography (14px, 600 weight) with 0.01em letter-spacing. Icon buttons (if used) maintain the 48px minimum touch target and use the same hover/focus treatment.

Containers & Surfaces Cards are the primary content container: white ba

Do's and Don'ts

**Do**

• Do use the yellow (#fec901) accent block for hero sections and primary CTAs—it's the brand's energy signal and should dominate above the fold.
• Do maintain 48px minimum touch targets on all interactive elements (buttons, links, form fields) to ensure mobile accessibility.
• Do pair Unbounded headlines with Switzer body copy; never reverse this pairing or use Unbounded for body text.
• Do apply the md shadow (0 3px 8px rgba(0,0,0,0.15)) to cards and inputs; reserve the lg shadow for modals and hero sections only.
• Do use the full color palette (navy, yellow, cyan, lavender) across the page to create visual rhythm; avoid monochrome sections.
• Do include a 2px solid border on all buttons—it reinforces the brand's technical precision and improves visual clarity.

**Don't**

• Don't use yellow (#fec901) text on white backgrounds—the contrast is insufficient (WCAG AA fails). Use yellow only as a background or accent fill.
• Don't apply rounded corners larger than 1.5rem (24px) to cards or containers; it dilutes the Soft-Technical aesthetic and reads as overly playful.
• Don't use the primary navy (#0d0431) as a background for large sections—it's reserved for text and buttons. Use white or light purple instead.
• Don't mix Unbounded and Switzer weights arbitrarily; follow the typography scale strictly (Unbounded for headlines only, Switzer for body and UI).
• Don't apply shadows to color-blocked sections (yellow, cyan, lavender); their saturation and contrast create sufficient visual hierarchy.
• Don't use the error color (#f85b52) for non-error states; reserve it for validation messages, alerts, and destructive actions only.