# DESIGN.md — decagon.ai ## 1. Visual Theme & Atmosphere Decagon presents an AI enterprise product through a palette that is simultaneously neutral and quietly expressive. The base is a cool off-white (`#f4f4f5`), avoiding both clinical pure-white and dark-mode conventions. A violet-purple accent (`#6b5cff`) carries brand identity through CTAs and borders. What distinguishes Decagon visually is a case study palette inset into the otherwise neutral page — displaying client brand colors (navy, lime green, violet, amber, deep plum) as named swatches. The site uses GSAP for smooth scroll-driven transitions, giving it a sense of controlled kinetic energy beneath the calm surface. FK Grotesk Neue, the chosen typeface, is corporate-modern without being generic — slightly geometric, slightly editorial. --- ## 2. Color Palette & Roles ### Foundation - **Off-White** (`rgb(244, 244, 245)` = `#f4f4f5`): The universal page background. Slightly cool, clearly intentional — not white, not gray. - **Near-Black** (`rgb(17, 17, 17)` = `#111111`): Footer surface. Maximum contrast anchor. - **Dark Text** (`rgb(19, 19, 19)` = `#131313`): Primary text color across all headings and body. ### Brand Accent - **Violet** (`rgb(111, 92, 255)` = `#6b5cff`): Primary brand accent. Used on link borders, CTAs, and interactive highlights. Sits between indigo and purple — distinctly tech-forward without being a standard blue. ### Interactive / UI - **Pure White** (`rgb(255, 255, 255)`): Card surfaces, nav backgrounds, announcement bars. - **Muted Gray** (`rgb(107, 107, 118)` = `#6b6b76`): Input placeholder and secondary text. - **Progress Gray** (`rgb(224, 225, 224)`): Tab progress bar track background. - **Tab Active** (`rgb(232, 232, 232)`): Inactive tab indicator fill. ### Case Study Brand Colors (decorative swatches) - **Navy** (`rgb(47, 74, 115)`): Client case study swatch - **Lime Green** (`rgb(88, 204, 2)`): Client case study swatch - **Amber** (`rgb(255, 173, 21)`): Client case study swatch - **Dark Plum** (`rgb(79, 45, 61)`): Client case study swatch These are client brand colors displayed in a case study grid — they are not Decagon's own palette and should not be used outside that context. --- ## 3. Typography Rules **FK Grotesk Neue**: The sole typeface. A contemporary geometric grotesque, licensed from Fontwerk. All text — display, body, labels, nav — is set in this single family. Scale: - **Hero**: 68.8px / 68.8px (1:1 line-height), weight 500 — tight leading creates dense, impactful headlines - **Section head**: 40px / 44px, weight 400 — open, readable subheadings - **Labels/Nav**: 14–16px, weight 500 — consistent medium-weight for UI copy - **Body**: 15–16px, weight 400, line-height ~24px - **Small UI**: 13–14px, weight 400–500 The 68.8px / 68.8px hero setting (equal font size and line-height) is a specific stylistic choice — no extra leading, headlines sit tightly stacked. Custom properties `--_typography---font-family--body` confirm the typeface is systematically applied. No serif, no monospace, no system fonts. Single-family discipline throughout. --- ## 4. Component Styling - **Primary Button**: Dark background with white text. Border radius from 80px (pill) to 800px — all buttons are pill-shaped. - **Announcement Banner**: Transparent background, white text. Hover: text fades to 52% opacity white — a subtle dimming rather than a color change. - **Links**: Violet border (`#6b5cff`) on anchor elements. CTAs lean on the violet identity. - **Cards**: White surface (`#fff`) on the off-white page — one step of contrast. Single shadow: `rgba(0,0,0,0.1) 0px 4px 8px 0px`. - **Input fields**: Transparent background, gray placeholder text, no visible border on default state. - **Tab / Progress**: Progress bar track in light gray, fills dynamically — indicates a timed or scroll-driven section transition. - **Border Radius**: 80px and 800px for pill shapes, 20px for standard cards, 8px for small components, 100% for circular avatars. --- ## 5. Layout Principles Webflow powers the layout with GSAP scroll animations. The extensive breakpoint list (26 values, from 371px to 1920px) reflects Webflow's fine-grained responsive system — essentially continuous responsive control rather than a few snap points. The case study grid, progress-tab section, and announcement bar suggest a classic marketing site structure: hero → social proof → product features → case studies → CTA. Max content width likely around 1200–1440px with generous left/right padding. --- ## 6. Depth & Elevation One shadow in the system: `rgba(0,0,0,0.1) 0px 4px 8px 0px` on card elements. This is the only depth signal. Everything else is flat. The off-white background provides a ground that makes white cards feel naturally elevated without additional shadow. GSAP handles perceived depth through scroll-parallax and entrance animations. --- ## 7. Do's and Don'ts **Do:** - Use FK Grotesk Neue exclusively. The brand is built on single-typeface discipline. - Keep the hero at tight line-height (1:1 ratio at large sizes). - Apply violet (`#6b5cff`) to CTAs and interactive link borders only — one accent, used consistently. - Render all buttons as pill shapes (radius 80–800px). No square or mildly-rounded buttons. - Use case study swatches only in the case study grid context — never as brand colors. **Don't:** - Use the case study brand colors (navy, lime, amber, plum) outside their swatch context. - Add heavy shadow systems. One subtle card shadow is the ceiling. - Introduce a second typeface — the single-family discipline is the identity. - Use pure black as a background. The footer is `#111`, never `#000`. - Set hero headlines above weight 500 — the design relies on medium weight at large sizes. --- ## 8. Responsive Behavior Webflow's 26 breakpoints enable highly granular control from 371px (small phones) to 1920px (wide screen). The hero 68.8px headline will scale down significantly at mobile — expect 32–40px at 375px. Pill buttons remain pill-shaped at all sizes. The announcement bar collapses or hides on small screens. Tab/progress sections likely convert to vertical accordion on mobile. Off-white background persists across all breakpoints. --- ## 9. Agent Prompt Guide > Build an AI enterprise landing page matching decagon.ai: off-white background (`#f4f4f5`), near-black text (`#131313`), near-black footer (`#111111`). FK Grotesk Neue weight 500 for hero at 68.8px with 1:1 line-height, weight 400 for body. Violet accent (`#6b5cff`) on CTAs and link borders. All buttons pill-shaped (radius 80px+). White cards with single shadow: `rgba(0,0,0,0.1) 0px 4px 8px 0px`. One typeface, flat surfaces, GSAP scroll animations. --- *Generated by Sparkbites — extracted from live CSS analysis*