Framer Design System

Overview

Framer's landing page is a masterclass in dark-mode brand expression: a pure {colors.canvas} black void that makes every illuminated element pop with theatrical intent. The design trusts its electric {colors.primary} blue to carry all brand voltage—appearing only on the primary CTA ({component.button-primary}), the sign-up button in navigation, and as the luminous glow wrapping the chat-interface demo that dominates the fold. This is not a shy palette; it's a controlled explosion of contrast where white type at massive scale ({typography.display-lg} at 54px) does the heavy lifting of hierarchy, and the single blue accent acts as an exclamation point.

The typography system splits duties cleanly: {typography.display-lg} and {typography.title-md} live in GT Walsheim Medium at weight 500 with aggressively negative letter-spacing (–2.16px at display size), producing headlines that feel both architectural and urgent. Body text defaults to Inter Variable at 400 weight—a neutral workhorse that recedes visually, letting the Walsheim headlines command attention. Monospace elements (Input Mono) appear sparingly, likely for version strings or technical labels within the chat demo, adding a developer-tool credibility to the visual voice.

Shape language leans toward the confidently rounded: {rounded.pill} buttons dominate CTAs, while cards and input containers settle into the comfortable {rounded.md} (8px) to {rounded.xxl} (20px) range. The chat demo's container uses {rounded.xxl} to signal its distinct, almost app-like boundary within the page flow. Nothing here is sharp-edged; even the most utilitarian surfaces carry a softness that reads as modern and approachable rather than stark.

The hero section introduces a sub-system—the chat interface dialect—that functions as both visual anchor and product demonstration. This isn't mere decoration; it's a fully-rendered UI preview complete with dropdown selectors, textarea inputs, toolbars, and a signature glowing focus ring in {colors.primary-glow}. The glow treatment (documented in {component.chat-input-glow} and extensions.shadows.chat-glow) is the single most distinctive visual gesture on the page: a cyan-blue halo that suggests AI aliveness without resorting to animation in a static spec.

Key Characteristics:

• Pure {colors.canvas} black background with no gradient washes or texture overlays—void-as-canvas philosophy
• Single brand color {colors.primary} (#0066ff) reserved exclusively for primary actions and the chat glow effect
• Headlines in {typography.display-lg} (GT Walsheim Medium, 54px/500 weight/–2.16px tracking) set in {colors.on-dark} white
• Body text in {typography.body-md} (Inter Variable, 14px/400 weight) with tight 1.0 line-height for dense information display
• Pill-shaped {rounded.pill} buttons for all CTAs; {rounded.md} through {rounded.xxl} for containers
• Chat demo sub-system with {colors.surface-medium} (#1e1e1e) surfaces and glowing {colors.primary-glow} focus state
• Surface elevation via subtle value shifts: {colors.surface-soft} (#242424), {colors.surface-medium} (#1e1e1e), {colors.surface-strong} (#111111)
• Muted text hierarchy using opacity variants of white: 100%, 80%, 60%, 40%

Colors

Brand & Accent

• Primary ({colors.primary} — #0066ff): The sole brand color. Used on {component.button-primary}, the "Sign up" nav button, and as the core hue for the chat-input glow effect. Electric, trustworthy, distinctly "SaaS-blue."
• Primary Hover ({colors.primary-hover} — #0055dd): Darkened primary for interactive states on buttons and links.
• Primary Active ({colors.primary-active} — #0044bb): Pressed/depressed state for primary buttons—deep enough to register tactile feedback.
• Primary Glow ({colors.primary-glow} — #0099ff): Lighter cyan-shifted blue used exclusively in the chat demo's focus ring and glow shadow ({extensions.shadows.chat-glow}). Suggests AI energy.
• Accent Green ({colors.accent-green} — #00bb88): Success/confirmation semantic color; appears in surface tints like {colors.surface-glass-green} for positive status indicators.

Surface

• Canvas ({colors.canvas} — #000000): The page background—pure black, no tint. Every section rests on this void.
• Surface Soft ({colors.surface-soft} — #242424): Default elevated surface for cards, dropdowns, and input fields. The workhorse gray.
• Surface Medium ({colors.surface-medium} — #1e1e1e): Slightly darker than soft—used for the chat demo's main container background to nest it visually below the nav layer.
• Surface Strong ({colors.surface-strong} — #111111): Deepest gray surface, nearly black. Used for maximum-contrast nested panels.
• Surface Elevated ({colors.surface-elevated} — #1f1f1f): Between medium and soft—for buttons like {component.button-ghost} and {component.chat-add-button} that need to feel pressable but not prominent.
• Surface Overlay ({colors.surface-overlay} — rgba(34, 34, 34, 0.8)): Semi-transparent dark for modal backdrops or floating panel backgrounds.
• Surface Glass ({colors.surface-glass} — rgba(255, 255, 255, 0.1)): White-at-10% transparency for subtle hover states on dark surfaces (e.g., {component.button-secondary-hover}, {component.button-icon}).
• Surface Glass Green ({colors.surface-glass-green} — rgba(0, 187, 136, 0.1)): Tinted glass variant for success-tinted surfaces.

Text

• Ink ({colors.ink} — #000000): Text-on-light token (present for completeness; rarely used on this dark page).
• On Dark ({colors.on-dark} — #ffffff): Primary text color—pure white for maximum contrast against {colors.canvas}.
• On Dark Muted ({colors.on-dark-muted} — rgba(255, 255, 255, 0.8)): Secondary text—slightly dimmed white for subtitles, descriptions, and supporting copy.
• On Dark Disabled ({colors.on-dark-disabled} — rgba(255, 255, 255, 0.6)): Tertiary text—placeholder text in inputs, disabled labels, metadata.
• On Dark Faint ({colors.on-dark-faint} — rgba(255, 255, 255, 0.4)): Quaternary text—very subdued for timestamps, hints, or decorative elements.
• Muted ({colors.muted} — #999999): Mid-gray for less-important text that still needs to be readable.
• Muted Strong ({colors.muted-strong} — #666666): Darker gray for borders or very secondary content.
• On Primary ({colors.on-primary} — #ffffff): Text color atop {colors.primary} backgrounds—always white for AA contrast compliance.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(255, 255, 255, 0.08)): Subtle white-at-8% divider lines—barely visible, used for separating nav items or section boundaries without harshness.
• Border Input ({colors.border-input} — #767676): Standard form field border gray—visible but not aggressive on {colors.surface-soft} backgrounds.
• Focus Ring ({colors.focus-ring} — #0099ff): The glow color for focused interactive elements—matches {colors.primary-glow}.

Semantic

• Link ({colors.link} — #0000ee): Traditional web blue for inline links (distinct from brand primary).
• Success ({colors.success} — #00bb88): Maps to {colors.accent-green}—used for confirmation states, checkmarks, positive indicators.
• Error ({colors.error} — #ff4444): Red for validation errors, destructive actions, alerts (inferred from standard patterns).

Typography

Font Family

The system employs three typefaces in clearly delineated roles. GT Walsheim Medium (with fallback to "GT Walsheim Medium Placeholder", sans-serif) owns all display and title typography—it's a proprietary geometric sans-serif with confident letterforms and a slightly condensed width that packs punch at large sizes. Inter Variable (falling back to "Inter Variable Placeholder", sans-serif) handles everything else: body copy, buttons, captions, navigation, and UI labels. Its variable nature allows for precise weight interpolation, though the system predominantly sits at 400 (regular) for body and 500 for small button text. Input Mono (with placeholder fallback) appears in monospace contexts—likely version strings ("Opus 4.8"), code snippets, or technical identifiers within the chat demo. A bold companion, Input Mono Bold, exists at 700 weight for emphasis within monospace passages.

The font stack explicitly includes placeholder names (e.g., "GT Walsheim Medium Placeholder") which suggest this is a Framer-hosted site using their custom font management system that substitutes local or CDN-served fonts at runtime.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 64px | 500 | 1.0 | –2.56px | Hero-level headlines (reserved for larger breakpoints) | | {typography.display-lg} | 54px | 500 | 1.0 | –2.16px | Primary hero headline | | {typography.title-md} | 44px | 500 | 1.1 | –1.76px | Section headings, major sub-headlines | | {typography.title-sm} | 18px | 400 | 1.35 | –0.2px | Card titles, feature headings | | {typography.body-md} | 14px | 400 | 1.0 | –0.01px | Primary body text, navigation items | | {typography.body-sm} | 13px | 400 | 1.4 | 0 | Secondary body, descriptions | | {typography.caption} | 12px | 400 | 1.35 | 0 | Metadata, timestamps, toolbar labels | | {typography.button} | 14px | 500 | 1.25 | 0 | Primary and secondary button text | | {typography.button-sm} | 12px | 400 | 1.25 | 0 | Small button text, ghost buttons | | {typography.mono} | 13px | 400 | 1.4 | 0 | Version strings, technical labels | | {typography.mono-bold} | 13px | 700 | 1.4 | 0 | Emphasized monospace text |

Principles

The typography system's most striking decision is its refusal to use bold weight for emphasis in headlines. GT Walsheim sits at 500 (medium) even at 54px—this is deliberate. Hierarchy comes from size differential (54px → 44px → 18px → 14px) and color contrast (white headlines vs. 80% white subtext vs. 60% white body), never from weight jumps. The negative letter-spacing on display type (–2.16px at 54px, scaling proportionally) tightens the letterforms into a blocky, architectural mass that feels engineered rather than typeset—a fitting metaphor for a "design agent" product.

Line heights are intentionally tight: 1.0 (or 100%) on {typography.display-lg} and {typography.body-md} means the leading equals the font size exactly, producing dense, compact text blocks that maximize vertical space. This is a dark-mode optimization—inverted polarity (light text on dark) naturally reads with slightly more breathing room, so the system can afford tighter metrics without feeling cramped. Inter's tall x-height and open apertures maintain readability even at these compressed settings.

Monospace usage is surgical. {typography.mono} at 13px matches the caption size, signaling that technical strings (model names like "Opus 4.8") are metadata, not content. When emphasis is needed in monospace, {typography.mono-bold} at 700 provides the only true bold weight in the entire system—a special-case tool for drawing eyes to version numbers or status codes within the chat interface.

Note on Font Substitutes

GT Walsheim Medium is a proprietary typeface from Village Type Foundry. For open-source substitution, use DM Sans (Google Fonts) at weight 500–600—it shares the geometric skeleton, slightly condensed proportions, and confident personality. Define CSS variables:

--font-headline: 'DM Sans', 'GT Walsheim Medium', sans-serif;
--font-body: 'Inter', 'Inter Variable', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', 'Input Mono', 'Fira Code', monospace;

Inter Variable is freely available from Google Fonts and should be loaded directly—no substitution needed. Input Mono can be replaced with JetBrains Mono or Fira Code for the monospace role; both offer similar character widths and excellent screen readability at 13px.

Layout

Spacing System

• Base unit: 1px (the system uses {spacing.xxs} as atomic foundation).
• Tokens: {spacing.xxs} (1px — hairlines/borders), {spacing.xs} (2px — tight gaps), {spacing.sm} (3px — icon padding), {spacing.md} (5px — inline element gaps), {spacing.base} (6px — list item spacing), {spacing.lg} (8px — component internal gaps), {spacing.xl} (10px — button padding, form padding), {spacing.2xl} (15px — card internal spacing), {spacing.3xl} (20px — section-internal margins), {spacing.4xl} (25px — large component gaps), {spacing.5xl} (30px — major vertical rhythm), {spacing.6xl} (40px — section separators), {spacing.section} (100px — hero top padding), {spacing.nav-top} (100px — header top offset).
• Section padding (vertical): {spacing.section} (100px) — used in {component.hero-band} to push content below the fixed/sticky navigation zone.
• Card internal padding: {spacing.xl} (10px) horizontally for compact cards like {component.button-ghost}; {spacing.2xl} (15px) for standard cards; {spacing.xl} to {spacing.3xl} for the chat demo's internal padding.
• Gutters: Page-level horizontal gutter is {spacing.xl} (20px) based on nav/container padding; internal grid gutters range from {spacing.md} (5px) to {spacing.xl} (10px).

Grid & Container

• Max content width: 1440px (extracted from main and section container widths).
• Density choice: Editorial-spacious — the hero occupies full viewport width with generous left-padding, and the headline column takes roughly 60% of the width before the chat demo begins.
• Desktop grid behavior: The hero uses a two-column asymmetrical layout — left column for text (headline + CTAs + badge), right column for the chat demo illustration. No explicit 12-column grid detected; this appears to be a flex-based or absolute-positioned composition common in Framer's canvas-based layouts.
• Hero column split: Approximately 55-60% text column, 40-45% demo column, with the demo column starting around the vertical midpoint of the text block.

Whitespace Philosophy

The system practices aggressive vertical compression paired with horizontal generosity. Line heights at 1.0 on body text and 1.0 on display type pack information densely vertically, while horizontal padding ({spacing.xl} = 10px inside buttons, 20px page gutters) gives elements room to breathe laterally. This creates a "tall and narrow" reading experience that feels modern and scroll-friendly. The pure black {colors.canvas} background amplifies perceived whitespace—dark mode naturally expands visual space because there's no paper-like edge to contain the eye.

Header Architecture

┌─────────────────────────────────────────────────────────────────┐
│ [◀ Framer]   Platform ▾  Solutions ▾  Resources ▾  Enterprise  │
│                          Pricing        [Log in]  [Sign up]    │
└─────────────────────────────────────────────────────────────────┘
  ↑logo         ↓dropdown nav items                   ↑utility   ↑primary CTA
                 (on-dark text)                       link       button

Navigation is a single-row flex bar with: logo flush-left, dropdown menu items with chevrons (Platform, Solutions, Resources), static links (Enterprise, Pricing), and flush-right utility area (Log in text link + Sign up primary button). Height is approximately 64px per {component.top-nav}. Background is transparent {colors.canvas}, letting the page content show through if the nav is overlaid (common in Framer sites).

Hero Section

┌──────────────────────────────────────────────────────────────┐
│  (100px top pad — {spacing.section})                         │
│                                                              │
│  ┌─────────────────────────────────┐  ┌──────────────────┐   │
│  │ Framer is the design agent      │  │                  │   │
│  │ for every step from idea        │  │   ┌────────────┐  │   │
│  │ to launch                       │  │   │ New Chat ▾│  │   │
│  │                                 │  │   ├────────────┤  │   │
│  │ [Get started] [Download app ↘]  │  │   │ Ask Framer..│  │   │
│  │                                 │  │   │             │  │   │
│  │                    New: Skills →│  │   │ Opus 4.8 ▾ │  │   │
│  └─────────────────────────────────┘  │   └────────────┘  │   │
│                                       └──────────────────┘   │
│                                              ↑glow ring       │
└──────────────────────────────────────────────────────────────┘

The hero follows a classic SaaS pattern with a left-aligned text block and right-aligned product demo. The headline ({typography.display-lg}) stacks 3 lines at 54px. Below it, two CTAs sit in a row: {component.button-primary} ("Get started for free") followed by {component.button-secondary} ("Download app") with a download icon. A "New: Skills →" badge floats to the right of the CTAs at {typography.body-sm} size in {colors.on-dark-muted}. The chat demo is rendered as a realistic UI mockup with its own internal components (dropdown, textarea, toolbar, add button) all styled per the component tokens.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, {colors.canvas} background | Page base, nav bar, hero band | | 1 (Hairline) | {colors.hairline} border (rgba(255,255,255,0.08)) | Subtle dividers between sections | | 2 (Soft raise) | {extensions.shadows.xs} (0 1px 2px rgba(0,0,0,0.1)) | Floating tooltips, small popovers | | 3 (Card) | {extensions.shadows.sm} (0 2px 6px rgba(0,0,0,0.2)) | Cards, dropdown panels, {component.button-ghost} | | 4 (Modal) | {extensions.shadows.md} (0 16px 26px rgba(0,0,0,0.2)) | Modal dialogs, large overlays | | 5 (Demo/Elevated) | {extensions.shadows.lg} (0 26px 42px rgba(0,0,0,0.2)) | Chat demo container, featured panels | | 6 (Spotlight) | {extensions.shadows.xl} (0 36px 57px rgba(0,0,0,0.2)) | Hero-level featured elements | | Glow (Special) | {extensions.shadows.chat-glow} (blue halo) | Focused chat input, brand moments |

The elevation philosophy is layered-shadow-dominant with a special-case glow exception. Unlike light-mode systems that use background color shifts to indicate depth (lighter = higher), this dark system relies almost entirely on shadow diffusion radius to communicate z-position. Shadows are purely black-alpha (no blue/cool tinting), keeping the depth language neutral and letting {colors.primary} own all color expression.

The glow treatment ({extensions.shadows.chat-glow}) breaks this rule deliberately—it's a brand-elevation signal that says "this element is alive/AI-powered." The double-layer shadow (inner 20px spread at 40% opacity, outer 60px spread at 20% opacity, both in {colors.primary-glow}) creates a neon-halo effect that feels electric without being garish.

Decorative Depth

Beyond functional elevation, the chat demo introduces decorative depth via the glow effect described above. There is no gradient mesh, no noise texture, no photographic depth—just the pure black canvas, the layered grayscale surfaces, and the singular blue glow as the only chromatic depth cue. This restraint is intentional: in a dark environment, any additional visual noise would compete with the brand moment.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.xs} | 4px | Small internal elements, tags | | {rounded.sm} | 5px | Icon buttons ({component.button-icon}), tiny controls | | {rounded.DEFAULT} | 6px | General-purpose default | | {rounded.md} | 8px | Cards, inputs, dropdowns, standard buttons | | {rounded.lg} | 12px | Larger cards, panel corners | | {rounded.xl} | 15px | Major containers, chat demo inner elements | | {rounded.xxl} | 20px | Chat demo outer container, hero-scale panels | | {rounded.pill} | 9999px | All CTA buttons (primary, secondary) | | {rounded.full} | 50% | Circular elements (avatar placeholders, toolbar icons) |

The shape vocabulary clusters tightly in the 4–20px range for rectangular elements, with {rounded.pill} reserved exclusively for action buttons. This creates a visual grammar where pill shape = clickable action and rounded rectangle = container/surface. The jump from {rounded.xxl} (20px) to {rounded.pill} (infinite) is the single largest shape distinction in the system—an intentional binary that helps users identify interactives at glance.

Photography Geometry

No significant photography is present in the above-fold screenshot. The chat demo is a rendered UI illustration (vector/canvas-based), not a photograph. If imagery were added to lower sections (team photos, customer logos, device mockups), the system would likely apply {rounded.md} (8px) to {rounded.lg} (12px) corner rounding to maintain consistency with the card language, potentially with a subtle {extensions.shadows.sm} lift.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g., {component.button-primary-hover}, {component.chat-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-primary} — The principal call-to-action button. Background {colors.primary} (#0066ff), text {colors.on-primary} (white), type {typography.button} (14px/500), {rounded.pill} shape, padding 10px 20px. Appears as "Get started for free" in the hero and "Sign up" in the navigation. State variants: {component.button-primary-hover} (darkens to {colors.primary-hover}), {component.button-primary-active} (deepens to {colors.primary-active}). No visible border or shadow in default state—relies on color contrast alone for visibility.

{component.button-secondary} — Ghost/outline-style secondary action. Transparent background, text {colors.on-dark} (white), same {typography.button} and {rounded.pill} geometry as primary. Padding 10px 20px. Appears as "Download app" with a download icon. Hover state ({component.button-secondary-hover}) adds {colors.surface-glass} background for tactile feedback. This is the "quiet sibling" to primary—used when the action is important but not the conversion path.

{component.button-ghost} — Tertiary utility button for embedded UI contexts. Background {colors.surface-elevated} (#1f1f1f), text {colors.on-dark}, smaller {typography.button-sm} (12px/400), {rounded.md} (8px). Height constrained to 32px. Used for actions within cards or panels (e.g., "Copy" buttons detected in the CSS). These feel like chrome rather than CTAs.

{component.button-icon} — Square icon-only button. Background {colors.surface-glass} (white-10%), text/icon {colors.on-dark}, {rounded.sm} (5px), size 28×28px. Used for toolbar actions, close buttons, or toggle controls within the chat demo. Subtle enough to not compete with content.

{component.chat-add-button} — Large square action button specific to the chat interface. Background {colors.surface-elevated}, icon/text in {colors.on-dark-disabled} (white-60%), {rounded.md} (8px), size 48×48px. The "+" button next to the "New Chat" dropdown—visually weighted to be findable but not promotional.

Cards & Containers

{component.chat-demo-container} — The outermost wrapper for the hero's chat illustration. Transparent background (lets {colors.canvas} show through), {rounded.xxl} (20px) for soft envelope shape. Contains {component.chat-demo-surface} internally. No padding of its own—acts as a clipping/glow boundary.

{component.chat-demo-surface} — The visible background surface of the chat mockup. {colors.surface-medium} (#1e1e1e) background, {rounded.xxl} matching its container, padding {spacing.xl} (10px) internally. This is the "window chrome" of the simulated chat UI. Would carry {extensions.shadows.lg} or {extensions.shadows.xl} in production to float it off the canvas.

{component.card-surface} — Generic elevated card for content blocks. {colors.surface-soft} (#242424) background, text {colors.on-dark}, {typography.body-md}, {rounded.md} (8px), padding {spacing.xl} (10px). Reusable for feature lists, testimonial blocks, or pricing tiers below the fold.

{component.tag-badge} — Small pill-shaped label for categorization or status. {colors.surface-glass} background (white-10%), text {colors.on-dark}, {typography.caption} (12px), {rounded.pill}, padding 4px 10px. Used for "New:" badges, feature tags, or version labels.

Inputs & Forms

{component.chat-input-field} — The primary text entry area in the chat demo. {colors.surface-soft} (#242424) background (darker than the chat surface to create input well), placeholder text in {colors.on-dark-disabled} (white-60%) reading "Ask Framer...", {typography.body-md}, {rounded.md} (8px), generous padding {spacing.xl} (10px) all around. This is a multi-line textarea in practice despite being labeled "field"—the height accommodates several lines of input.

{component.chat-input-focus} — The focused/active state of the chat input. Same surface and text colors as default, but would gain the {colors.focus-ring} (#0099ff) outline or glow effect. In the screenshot, the input visibly carries the blue glow ({extensions.shadows.chat-glow}), indicating it's rendered in its focused state as part of the demo's "alive" presentation.

{component.chat-dropdown} — Selector/dropdown trigger showing "New Chat". {colors.surface-soft} background, text {colors.on-dark}, {typography.body-md}, {rounded.md}, padding 8px 10px. Includes a chevron indicator (down-arrow icon). Functions as a session/model selector within the chat UI.

{component.chat-toolbar} — Bottom toolbar strip in the chat input area. Transparent background, text {colors.on-dark_DISABLED} (white-60%) for the model selector label ("Opus 4.8"), {typography.caption} (12px). Contains {component.chat-toolbar-button} children.

{component.chat-toolbar-button} — Circular icon button within the chat toolbar. {colors.surface-glass} background (white-10%), icon in {colors.on-dark-disabled}, {rounded.full} (50% — perfectly circular), size 32×32px. Used for send, attach, and add actions in the toolbar row.

{component.chat-input-glow} — Not a traditional component but a visual treatment layer. Transparent background (or the glow color at very low opacity), text/color {colors.primary-glow} (#0099ff), {rounded.xxl} matching the input container. This is applied as a box-shadow or pseudo-element halo around the focused chat input, creating the signature "AI is listening" effect.

Navigation

{component.top-nav} — The global navigation bar. {colors.canvas} background (transparent/black), text {colors.on-dark}, {typography.body-md} (14px), fixed height 64px. Contains logo, menu items with dropdown arrows, static links, and utility actions. Spans full viewport width with ~20px horizontal padding.

{component.nav-link} — Individual navigation menu item. Transparent background, text {colors.on-dark}, {typography.body-md}, padding 5px 8px. Items like "Platform," "Solutions," "Resources" include dropdown chevrons (noted by ▾ suffix); "Enterprise" and "Pricing" are direct links. Hover state ({component.nav-link-hover}) likely underlines or brightens text.

{component.hero-badge} — The "New: Skills →" annotation in the hero. Transparent background, text {colors.on-dark-muted} (white-80%), {typography.body-sm} (13-14px), positioned to the right of the CTA group. Functions as a contextual breadcrumb or announcement.

Signature Components

{component.hero-band} — The full-width hero section container. {colors.canvas} background, text {colors.on-dark}, contains the headline typography at {typography.display-lg} scale. Padding {spacing.nav-top} (100px) top to clear navigation, {spacing.xl} (20px) horizontal, {spacing.xl} bottom. This is the "stage" for the entire above-fold experience.

{component.hero-headline} — The h1 text block specifically. Inherits from {component.hero-band} but warrants separate tokening because its {typography.display-lg} (54px/500/–2.16px tracking) is the most distinctive typographic moment on the page. Text reads "Framer is the design agent for every step from idea to launch."

{component.hero-subtext} — Supporting text below the headline (if present; in this screenshot, the CTAs appear directly under the headline). Would use {colors.on-dark-muted} and {typography.body-md} for descriptive copy.

{component.hero-cta-group} — Container for the hero's action buttons. Transparent background, holds {component.button-primary} and {component.button-sidecondary} in a flex row with {spacing.xl} (10px) gap. Top-padded by {spacing.xl} to separate from the headline.

{component.footer} — Page footer (inferred from pattern, may appear below fold). {colors.canvas} background, text {colors.muted} (gray-999), {typography.caption} (12px), generous padding {spacing.5xl} (30px) vertical. Would contain legal links, social icons, copyright.

Do's and Don'ts

Do

• Do reserve {colors.primary} (#0066ff) exclusively for primary conversion actions and the chat glow effect—never use it for body text, borders, or decorative elements.
• Do apply {typography.display-lg} (GT Walsheim Medium, 54px, –2.16px tracking) to all hero-level headlines, and maintain the negative letter-spacing proportionally at smaller sizes (–1.76px at 44px).
• Do use {rounded.pill} (9999px) for every CTA button—this shape is the universal signifier of "clickable action" in this system.
• Do layer surfaces using the value-based progression: {colors.surface-strong} (#111111) for deepest nesting, {colors.surface-medium} (#1e1e1e) for mid-level containers, {colors.surface-soft} (#242424) for cards and inputs.
• Do express text hierarchy through the opacity阶梯: {colors.on-dark} (100%) for headlines, {colors.on-dark-muted} (80%) for subtitles, {colors.on-dark-disabled} (60%) for body, {colors.on-dark-faint} (40%) for metadata.
• Do apply {extensions.shadows.chat-glow} (the dual-layer blue halo) only to the focused chat input or equivalent "AI-active" states—this is a special-effect token, not a general elevation tool.
• Do keep line heights at 1.0 for {typography.display-lg} and {typography.body-md}—the tight leading is intentional for dark-mode density.
• Do use {typography.mono} (Input Mono, 13px) for technical strings like model versions ("Opus 4.8")—it signals "this is a system identifier, not content."
• Do pad the hero section top by {spacing.section} (100px) to account for fixed navigation height and maintain optical centering.
• Do pair {component.button-secondary} (transparent background, white text, pill shape) with {component.button-primary} in CTA groups—the contrast between filled and outlined creates clear primary/secondary hierarchy.

Don't

• Don't use {colors.link} (#0000ee, traditional web blue) interchangeably with {colors.primary} (#0066ff)—they serve different semantic roles (inline links vs. brand actions).
• Don't apply font weights above 500 to GT Walsheim headlines—the system intentionally stops at medium weight; bolder text would break the refined, architectural feel.
• Don't add gradient backgrounds or texture overlays to {colors.canvas}—the pure black void is a deliberate brand choice, not a missing style.
• Don't round card corners below {rounded.md} (8px) for content containers—smaller radii ({rounded.xs} 4px, {rounded.sm} 5px) are reserved for internal controls and icon buttons.
• Don't use white text at 100% opacity ({colors.on-dark}) for anything other than headlines and primary labels—body copy should always be {colors.on-dark-muted} (80%) or dimmer to establish hierarchy.
• Don't apply the chat glow effect to non-chat elements—the glow is semantically tied to "AI interaction context" and loses meaning if overused.
• Don't expand the spacing scale beyond the defined tokens—if you need a value between {spacing.xl} (10px) and {spacing.2xl} (15px), choose one rather than inventing 12px.
• Don't substitute Inter for GT Walsheim in display roles—even though Inter supports variable weights up to 900, the geometric Walsheim face carries brand identity that a humanist grotesque cannot replicate.
• Don't render the chat demo as a static image—if implementing interactively, ensure the focus glow, dropdown states, and toolbar buttons function as real components per their tokens.

Motion & Animation

Transition Tokens

--transition-color: color 200ms cubic-bezier(0, 0, 1, 1);
--transition-background: background-color 200ms cubic-bezier(0, 0, 1, 1);
--transition-shadow: box-shadow 200ms cubic-bezier(0, 0, 1, 1);
--transition-all: all 200ms ease;

The extracted CSS shows transitions using a linear-out easing (cubic-bezier(0, 0, 1, 1) which decelerates sharply at the end) at approximately 200ms duration. This produces a snappy, responsive feel—appropriate for a tool-brand that wants to feel performant. Color, background, and shadow transitions are grouped separately in some contexts (color cubic-bezier(0, 0, 1, 1) and background, box-shadow as combined properties), suggesting the system avoids animating layout properties (width, height, transform) via CSS transitions, reserving those for JS-driven or Framer-motion orchestrated animations.

Keyframe Animations

• __framer-blink-input — Cursor blink animation for text input fields (standard caret pulse).
• shimmer-Raqqqhlrael5dp — Shimmer/loading sweep effect, likely used for skeleton screens or image loading states.
• betterGrainWebpFramesV22 — Film-grain or texture animation, possibly for subtle surface noise on the dark canvas.
• ghostFlow — Likely a fade or opacity transition for appearing/disappearing elements.
• doubleSlow — Slow-paced dual-stage animation, possibly for parallax or ambient movement.
• danceSpark — Particle or sparkle effect, probably associated with the AI/chat glow or celebration moments.

These keyframe names follow Framer's auto-generated naming convention (appended with hashes), indicating they're produced by Framer's visual animation tools rather than hand-authored. The presence of shimmer, grain, and spark animations suggests the production site has richer motion than the static screenshot captures—including loading states, ambient texture, and "delight" micro-interactions.

Interaction Patterns

• Focus glow on chat input: The chat textarea gains {extensions.shadows.chat-glow} (blue halo) on focus, creating the "AI is listening" visual feedback. This is likely triggered by :focus-visible or JS focus state.
• Dropdown reveal: The "New Chat" dropdown ({component.chat-dropdown}) would animate open on click, likely with a Y-axis translate + opacity transition.
• Button hover lift: {component.button-primary} and {component.button-secondary} likely gain subtle Y-translate (-1px or -2px) on hover, paired with their respective background color shifts.
• Nav dropdown menus: Platform, Solutions, and Resources items show ▾ chevrons, indicating they reveal sub-menus on hover or click—probably with a staggered fade-in for menu items.
• Shimmer loading: Detected via shimmer-Raqqqhlrael5dp keyframe—content blocks may show a horizontal light-sweep while loading.
• Cursor blink: Standard input caret pulsing via __framer-blink-input for all text-entry fields.
• Ambient grain: betterGrainWebpFramesV22 may apply a subtle animated noise overlay to the {colors.canvas} background, preventing banding on OLED displays and adding tactile quality.

Imagery Style

• Primary visual: The hero features a rendered UI mockup (chat interface) rather than photography or illustration. This is a "show-the-product" approach where the interface itself is the imagery.
• Chat mockup style: Flat-design UI with subtle depth via {extensions.shadows.lg}, {colors.surface-medium} background, and the signature blue glow. No skeuomorphism, no gradients on surfaces (except the glow), pure vector-clean rendering.
• Color treatment: The mockup uses the same dark-mode palette as the page itself, creating visual continuity—the demo doesn't look like a "sticker" placed on the page; it looks like a window into the product.
• Glow as imagery: The {colors.primary-glow} halo around the chat input functions as both interaction feedback and decorative element—it's the single most "image-like" visual on the page, drawing the eye like a light source in a dark room.
• Icon style: Icons (download arrow, chevrons, plus signs, send plane) appear to be stroke-based, thin-weight (likely 1.5px or 2px stroke), rendered in currentColor. They match Inter's humanist geometry rather than using a contrasting icon set.
• No photography detected: The above-fold contains zero photographic elements. If lower sections include team photos or customer logos, they would likely be treated with {rounded.md} rounding and possibly desaturated or duotoned to fit the dark aesthetic.
• Illustration absence: No custom illustrations, 3D renders, or abstract shapes appear in the hero. The design trusts typography and the product UI to carry visual interest.

Icon System

• Library: Custom SVG icons (no external icon library detected in framework.iconLibs). Icons are likely inline SVGs or part of Framer's component system.
• Specific icons observed:
  • Download/down-arrow (on "Download app" button)
  • Chevron/down-arrow (on "Platform ▾", "Solutions ▾", "Resources ▾", "New Chat ▾", "Opus 4.8 ▾")
  • Right-arrow (on "Skills →" badge)
  • Plus/add (+) (on chat add button and toolbar)
  • Send/paper-plane (on chat toolbar)
  • Attach/clip (on chat toolbar, inferred)
  • Framer logo mark (play-button triangle in square, top-left nav)
• Treatment: Stroke-based icons, thin weight (~1.5-2px stroke), colored via currentColor (inherits parent text color). Size varies by context: 16px for inline icons (download arrow), 20px for standalone icons (chevrons), 24px for toolbar icons.
• Alignment: Icons are optically centered with adjacent text, with ~4-6px gap between icon and label. In button contexts, icon appears to the right of text (download arrow) or stands alone (plus button).

Recommended Frontend Stack

- Framework:      Next.js (App Router) or Framer Sites (the platform this site is built on)
- Styling:        CSS Modules or Framer's visual canvas output (Tailwind unlikely based on 
                  framework detection; custom CSS with CSS variables for theming)
- Fonts:          GT Walsheim Medium (via Framer's font hosting or self-hosted WOFF2),
                  Inter Variable (Google Fonts CDN @ fontweight 400-500),
                  Input Mono (self-hosted or Google Fonts substitute JetBrains Mono)
- Animation:      Framer Motion (native to the platform) for scroll-triggered reveals,
                  glow effects, and staggered entrance animations
- Icons:          Custom SVG components (inline React components matching the stroke style)
- Component lib:  Framer's built-in component system (buttons, inputs, cards as 
                  canvas-placed components with variant props)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column layout; chat demo stacks below headline or hides; nav collapses to hamburger; headline scales down to ~32-36px | | Tablet | 640px – 1024px | Two-column hero maintained but narrowed; chat demo reduces to ~50% width; padding compresses to {spacing.3xl} (20px) | | Desktop | 1024px – 1440px | As designed: 1440px max container, 55/45 hero split, full navigation | | Wide | > 1440px | Container centers with auto margins; hero text column maxes at ~800px; chat demo scales proportionally |

Touch Targets

• {component.button-primary}: ~40px height × variable width (padding 10px 20px + text) — exceeds WCAG AAA 44×44 minimum comfortably.
• {component.button-secondary}: Same dimensions as primary — compliant.
• {component.chat-add-button}: 48×48px — exceeds minimum, easy touch target.
• {component.chat-toolbar-button}: 32×32px diameter — below 44px AAA target; may need increased padding on mobile or should be spaced generously.
• {component.button-icon}: 28×28px — below AAA minimum; acceptable only if surrounded by ample tap-safe margin.
• {component.chat-dropdown}: ~40px+ height — compliant when considering full hit area including padding.

Collapsing Strategy

• Navigation: At mobile breakpoint, the horizontal nav items (Platform, Solutions, Resources, Enterprise, Pricing) collapse into a hamburger menu. "Log in" and "Sign up" may remain visible as compact text links or move into the menu drawer.
• Hero columns: The two-column asymmetrical layout (text left, chat demo right) stacks vertically on mobile: headline + CTAs occupy full width, chat demo either moves below (full-width) or becomes a smaller inset illustration. The 54px headline scales down significantly (likely to {typography.title-md} 44px or smaller) to fit narrow viewports.
• Chat demo: On mobile, the chat mockup may simplify—reducing internal padding, hiding the toolbar, or converting to a static image to save space. The glow effect may be removed or simplified on low-power devices.
• Button group: {component.hero-cta-group} switches from horizontal row to vertical stack on mobile, with {component.button-primary} on top (full-width) and {component.button-secondary} below.
• Spacing compression: {spacing.section} (100px) top padding on hero reduces to {spacing.5xl} (30-40px) on mobile to avoid excessive scroll-before-content.

Image Behavior

• Chat demo illustration: Scales proportionally with container width, maintaining aspect ratio. At mobile, may switch to width: 100% with reduced internal complexity (fewer visible UI elements).
• Logo: Framer logo mark remains constant size (~24-32px) across breakpoints; wordmark may hide on mobile, showing only the icon.
• No hero photography: N/A for this design, but if added, would use object-fit: cover with {rounded.md} and likely darken via CSS filter: brightness(0.7) to match dark aesthetic.

Iteration Guide

1. Build a dark-mode landing page closely mimicking this design system using Next.js with CSS Modules (or Framer Sites if replicating the exact platform). Start with {colors.canvas} (#000000) as your background-color on <body>.

2. Pull every color, font, radius, and spacing value from the YAML frontmatter via the {section.token} paths. Define CSS custom properties for all tokens (e.g., --color-primary: #0066ff; --radius-pill: 9999px;) and reference them throughout—never hard-code a hex or px value that has a token.

3. Implement the dual-typeface system first: import GT Walsheim Medium (or DM Sans substitute) for {typography.display-lg} and {typography.title-md} roles, Inter Variable for everything else. Set up CSS classes .font-display and .font-body that apply the correct font-family.

4. Add the hero section as your first layout milestone: 100px top padding, two-column flex/grid with ~60/40 split, GT Walsheim headline at 54px with –2.16px letter-spacing, CTA button pair using {rounded.pill}. Get the chat demo positioned in the right column before styling its internals.

5. Build the chat demo sub-system as a self-contained component tree: outer container ({rounded.xxL}) > surface ({colors.surface-medium}) > dropdown + textarea + toolbar. Implement the focus glow as a box-shadow or ::before pseudo-element using {extensions.shadows.chat-glow} values.

6. Create state variants (-hover, -focus, -active, -disabled) for all interactive components following your stack's conventions (CSS :hover/:focus, or React state props). The spec documents Default and Active/Focus only—you'll need to interpolate hover states reasonably (darken background 8-12%, slight Y-lift).

7. Run accessibility checks: verify {colors.primary} (#0066ff) on {colors.on-primary} (#ffffff) achieves WCAG AA (it does: contrast ratio ~4.6:1). Check that {colors.on-dark-muted} (white-80%) on {colors.canvas} (black) exceeds 4.5:1 for body text (it does: ~15:1).

8. When adding new components below the fold (pricing, features, testimonials), decide which surface tier they inhabit: {colors.surface-soft} for standard cards, {colors.surface-medium} for nested panels, {colors.surface-elevated} for interactive elements. Never introduce new background colors outside the defined palette.

9. For animations, implement the transition tokens first: define --transition-color, --transition-background, --transition-shadow as CSS variables with the cubic-bezier(0, 0, 1, 1) easing and 200ms duration. Apply transition: var(--transition-color), var(--transition-background) to all interactive elements.

10. Font setup for development (substituting proprietary fonts):

:root {
  --font-display: 'DM Sans', 'GT Walsheim Medium', sans-serif;
  --font-body: 'Inter', 'Inter Variable', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Input Mono', 'Fira Code', monospace;
}
/* Load from Google Fonts: DM Sans (weights 500, 600), Inter (weights 400, 500), JetBrains Mono */

Known Gaps

• Hover state styling: Per the no-hover policy, exact hover background colors, transforms, and timing are not documented. The frontmatter includes {button-primary-hover} and {button-secondary-hover} with reasonable color shifts, but lift/shadow changes are inferred.
• Loading/skeleton states: While a shimmer keyframe was detected in the CSS, the exact appearance of loading skeletons (border-radius, animation direction, color values for the shimmer sweep) could not be determined from the static screenshot.
• Form validation states: Only {component.chat-input-focus} is documented. Error states (red border, error message text), disabled states on inputs, and success post-submit states are not visible in the provided data.
• Mobile navigation pattern: Whether the nav collapses to a drawer, a bottom sheet, or a full-screen overlay at mobile breakpoints cannot be confirmed from the desktop screenshot.
• Below-fold sections: The screenshot captures only the hero area. Pricing tables, feature grids, testimonial cards, FAQ accordions, and footer structure are not visible and thus not tokenized.
• Exact glow implementation: The chat input's blue glow could be implemented as a box-shadow, a drop-shadow filter, a radial-gradient background, or a separate absolutely-positioned <div> with blur. The visual result is clear; the DOM/CSS technique is inferred as box-shadow based on the shadow-token pattern.
• Dropdown menu contents: The navigation dropdowns (Platform, Solutions, Resources) show chevron indicators but their expanded contents, item counts, and hover states are not visible.
• Framer-specific CSS variables: The source contains token references like var(--token-958e2cd1-b113-4aa3-9235-7a2b959c8feb, rgb(0...)) with UUID-style names. These are Framer's internal design token system and should not be confused with semantic tokens—their values map to the colors documented above but their naming is auto-generated and non-portable.