Framer AI Design System

Overview

Framer's AI landing page is a masterclass in dark-mode product storytelling. The entire experience unfolds on a {colors.surface-soft} (pure #000000) canvas, creating an immersive theater where the product itself—the canvas-based website editor—becomes the visual protagonist. Brand voltage concentrates in a single electric blue ({colors.primary} at #0066ff) that appears sparingly but decisively: the Publish button inside the app preview, the active state accents, and the glowing focus rings that signal interactivity.

The typographic voice is defined by aggressive negative letter-spacing on display faces. {typography.display-lg} (54px GT Walsheim Medium at -2.16px tracking) and {typography.title-md} (44px at -1.76px) compress horizontally to create a dense, modern headline texture that feels simultaneously architectural and approachable. This tight tracking is the system's single most distinctive typographic move—headlines never breathe freely; they're engineered for impact. Body text relaxes into {typography.body-md} (14px Inter Variable), which carries UI labels, navigation items, and supporting copy with neutral clarity.

Shape language favors the practical over the playful: {rounded.pill} (50%) terminates all primary CTAs and tag-like elements, while {rounded.lg} (15px) rounds the corners of the signature app-preview container and its internal panels. The preview itself is a meta-composition—a Framer-built site showcasing Framer's interface—with a three-column layout (sidebar, canvas viewport, properties panel) that mirrors the actual product's architecture.

A sub-system worth noting is the app-preview dialect: surfaces within the simulated editor use a layered dark grayscale ({colors.surface}, {colors.surface-elevated}, {colors.overlay}) that creates depth without color, reserving {colors.primary} exclusively for the Publish action—the one moment where brand color breaks through the monochrome interior. This self-referential design move (building the marketing page in the tool being marketed) is the conceptual spine of the entire experience.

Key Characteristics:

• Pure {colors.surface-soft} (#000000) canvas with no gradient washes or textured backdrops—confidence through minimalism
• Electric {colors.primary} (#0066ff) reserved for CTAs and interactive focus states only; never used as decorative fill
• Display typography uses GT Walsheim Medium at weight 500 with aggressively negative tracking ({typography.display-lg} at -2.16px)
• All buttons use {rounded.pill} geometry regardless of prominence; shape consistency signals clickability
• The app-preview container ({component.app-preview-container}) is the visual centerpiece—a functional product mockup, not a static illustration
• Internal UI surfaces within the preview use {colors.surface-elevated} (#242424) and {colors.surface} (#111111) to create layer separation without color
• Monospace {typography.mono} (Input Mono 13px) appears in technical contexts: file paths, dimension labels, code-like identifiers
• {colors.on-dark-subtle} (60% white opacity) handles secondary text; {colors.on-dark-faint} (40% white) is nearly invisible, used for truly tertiary information
• Shadow vocabulary is restrained: {extensions.shadows.glow} for primary-brand elements, {extensions.shadows.hairline} for surface separation, {extensions.shadows.deep} for dramatic elevation

Colors

Brand & Accent

• Primary ({colors.primary} — #0066ff): The core brand blue, used exclusively for the Publish button inside the app preview and as the foundational color for all primary interactive states. This is the single source of chromatic voltage on the page.
• Primary Glow ({colors.primary-glow} — #0099ff): A lighter, more luminous blue variant used for glow effects around focused elements and as the canvas background token in the design system (though rendered as transparent on this specific page). It represents the "active" or "energized" state of the brand.
• Primary Active ({colors.primary-active} — #0052cc): Darkened primary for pressed/active states on buttons and interactive elements.
• Primary Disabled ({colors.primary-disabled} — #3385ff): Lightened, desaturated primary for disabled button states.

Surface

• Canvas ({colors.canvas} — #0099ff): Defined in the token system as the page-level background; on this dark landing, it serves as the conceptual root while {colors.surface-soft} provides the literal backdrop.
• Surface Soft ({colors.surface-soft} — #000000): Pure black. The dominant background of the entire page—nav, hero band, footer, and the outer wrapper of the app preview. This absolute darkness is what makes the white typography and blue accents pop.
• Surface ({colors.surface} — #111111): Near-black, used for the main content areas inside the app preview (the canvas frame body, the right panel background).
• Surface Strong ({colors.surface-strong} — #1f1f1f): Slightly lighter black, appearing in deeper nested containers.
• Surface Elevated ({colors.surface-elevated} — #242424): The workhorse raised surface—sidebar item hovers, the canvas header bar, search inputs, select dropdowns, and panel cards. This is how the system says "this thing is above that thing."
• Surface Overlay ({colors.surface-overlay} — #303030): The lightest grayscale surface, used for the highest elevated elements within the preview.
• Surface Glass ({colors.surface-glass} — rgba(255, 255, 255, 0.07)): A barely-there white tint at 7% opacity, used for subtle surface differentiation on hover or selection states where a full elevation step would be too heavy.
• Surface Glass Strong ({colors.surface-glass-strong} — rgba(255, 255, 255, 0.1)): White at 10% opacity, used for pressed/hover states on secondary buttons and interactive regions.

Text

• Ink ({colors.ink} — #000000): Pure black text, appearing on light-colored surfaces (the Sign Up button's interior).
• Body ({colors.body} — #0000ee): Standard link blue, used for hyperlinks and the semantic link token.
• On Dark ({colors.on-dark} — #ffffff): Pure white. The primary text color for all headings, body copy, and prominent UI labels against dark backgrounds.
• On Dark Muted ({colors.on-dark-muted} — rgba(255, 255, 255, 0.8)): White at 80% opacity. Used for sub-headlines, descriptions, and text that needs to be clearly readable but visually subordinate to {colors.on-dark}.
• On Dark Subtle ({colors.on-dark-subtle} — rgba(255, 255, 255, 0.6)): White at 60% opacity. The standard secondary text color—navigation links, toolbar icons, sidebar item labels, placeholder text.
• On Dark Faint ({colors.on-dark-faint} — rgba(255, 255, 255, 0.4)): White at 40% opacity. Tertiary information: timestamps, metadata, hints, de-emphasized captions.
• On Primary ({colors.on-primary} — #ffffff): White text rendered on {colors.primary} backgrounds (the Publish button).
• Muted ({colors.muted} — #999999): A mid-gray for deprecated or neutral text in non-dark contexts.
• Muted Medium ({colors.muted-medium} — #666666): Darker gray for subdued body text.
• Muted Light ({colors.muted-light} — #cccccc): Light gray for subtle dividers and secondary text on light surfaces.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(255, 255, 255, 0.1)): White at 10% opacity. The default border/divider color for separating regions within the app preview (toolbar separators, panel edges).
• Border Strong ({colors.border-strong} — rgba(255, 255, 255, 0.07)): White at 7% opacity. Even subtler than hairline, used for input focus outlines and very faint container boundaries.
• Focus Ring ({colors.focus-ring} — rgba(0, 153, 255, 0.22)): Blue-tinted overlay at 22% opacity. The distinctive glow that appears around focused elements, particularly visible on the canvas frame's active state.

Semantic

• Link ({colors.link} — #0000ee): Standard web blue for anchor text.
• Success ({colors.success} — #00c853): Green for positive states (not visibly deployed on this page but available in the palette).
• Error ({colors.error} — #ff1744): Red for destructive/error states.
• Warning ({colors.warning} — #ffab00): Amber for caution states.
• Info ({colors.info} — #0099ff): Informational blue matching the primary glow.

Typography

Font Family

The type system rests on four distinct families, each assigned a clear role:

GT Walsheim Medium is the voice of authority—all display headings (H1 at 54px, H2 at 44px) render in this proprietary geometric sans-serif at weight 500. It has a slightly humanist warmth despite its geometric skeleton, and its medium weight (never bold, never light) gives headlines presence without aggression. This is Framer's brand typeface and does not appear anywhere below the heading hierarchy.

Inter Variable carries the entire UI layer: navigation links (14px), body copy (14–16px), button labels (14px), captions (12–13px), and small metadata. It renders at weight 400 for almost everything, bumping to 500 only for button text and label headers. Inter's excellent legibility at small sizes and its variable font capabilities make it ideal for the dense information environment of the app preview.

Geist Variable appears in a single role on this page: the H4-equivalent internal heading ("AI research for human well-being") at 35px, weight 400. Geist serves as a secondary display face when a second tier of large type is needed below the GT Walsheim headlines—slightly more neutral, slightly less branded.

Input Mono (Regular at 400, Bold at 700) handles all technical identifiers: the "Desktop 1200" label in the canvas header, file path references, and any code-like string. At 13px, it's compact and distinctly machine-readable, signaling "this is a system-generated value" to the user.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 64px | 500 | 1 (-2.56px) | Reserved for oversized hero moments (not used on this page but in system) | | {typography.display-lg} | 54px | 500 | 1 (-2.16px) | Hero headline: "AI website builder for designers and teams" | | {typography.title-md} | 44px | 500 | 1.1 (-1.76px) | Section headlines, major product feature titles | | {typography.title-sm} | 35px | 400 | 1 (-0.525px) | Internal preview headlines: "AI research for human well-being" | | {typography.heading-sm} | 18px | 400 | 1.35 (-0.2px) | Subsection headers, card titles | | {typography.body-lg} | 16px | 400 | 1.5 (-0.01px) | Supporting paragraph text, descriptions | | {typography.body-md} | 14px | 400 | 1 (-0.01px) | Navigation links, UI labels, list items | | {typography.body-sm} | 14px | 400 | 1.4 (0) | Sidebar items, panel text | | {typography.caption} | 12px | 400 | 1.33 (0) | Timestamps, badges, metadata, tiny labels | | {typography.button} | 14px | 500 | 1 (0) | Primary and secondary button text | | {typography.button-sm} | 12px | 400 | 1 (0) | Small buttons: Invite, Publish | | {typography.label} | 12px | 500 | 1.33 (0) | Tab labels, section headers in sidebar/panels | | {typography.mono} | 13px | 400 | 1.4 (0) | Technical strings, file references, dimensions | | {typography.mono-bold} | 13px | 700 | 1.4 (0) | Emphasized technical strings |

Principles

The typography system's defining principle is size and tracking carry hierarchy, not weight. Notice that every display and title role uses either weight 400 or 500—never 600, never 700. The visual distinction between a 54px headline and a 14px navigation link comes from the ~4x size difference and the -2.16px letter-spacing compression on the large type. This is a deliberate choice: it keeps the page feeling "designed" rather than "typeset"—the headlines feel like graphic elements, not just big text.

Negative tracking is the secret weapon. Every GT Walsheim role uses it: -2.16px at 54px, -1.76px at 44px, -0.525px at 35px (Geist), and even -0.2px at 18px (Inter subheading). This horizontal compression makes large type feel tighter, more modern, and more "product-y"—it's a hallmark of contemporary SaaS design language. The tracking value scales proportionally with font size, maintaining consistent visual density across the hierarchy.

Opacity, not color change, indicates text importance on dark backgrounds. Rather than graying out secondary text (which would introduce new hues into the strictly black/white/blue palette), the system uses white at reduced opacity: 100% for primary, 80% for muted, 60% for subtle, 40% for faint. This keeps the color math simple and ensures all text reads as "white text at different emphasis levels" rather than "different colored texts."

Monospace is semantic, not stylistic. When you see Input Mono, you're looking at a system-generated value: a filename, a viewport dimension, a status code. The mono face acts as a visual marker for "this is data, not content."

Note on Font Substitutes

GT Walsheim Medium is a proprietary typeface owned by VNF (Volkswagen Type Foundry) and not available via Google Fonts. The closest open-source substitute is DM Sans (weights 500–700) from Google Fonts, which shares similar geometric proportions and a slightly humanist warmth. For implementation, define:

--font-display: "GT Walsheim Medium", "DM Sans", "SF Pro Display", sans-serif;

Inter Variable is free and available from RSMS/inter or via Google Fonts as "Inter." No substitution needed.

Geist Variable is Vercel's custom typeface. The closest substitute is Plus Jakarta Sans (weight 400) or Manrope, both available on Google Fonts. Define:

--font-alt: "Geist Variable", "Plus Jakarta Sans", "Inter", sans-serif;

Input Mono is a commercial font from FontBureau. Substitute with JetBrains Mono or Fira Code (both Google Fonts):

--font-mono: "Input Mono Regular", "JetBrains Mono", "Fira Code", monospace;

Layout

Spacing System

• Base unit: The system doesn't enforce a strict 4px/8px base, but the most frequent spacing value from extracted CSS is {spacing.lg} (10px), followed closely by {spacing.3xl} (20px) and {spacing.2xl} (15px).

• Tokens:

  • {spacing.xxs} (1px) — hairline borders, 1px dividers
  • {spacing.xs} (2px) — tight internal gaps, badge padding
  • {spacing.sm} (3px) — icon-to-text gaps, micro-spacer
  • {spacing.md} (5px) — navigation link padding horizontal
  • {spacing.base} (8px) — toolbar button gaps, sidebar item vertical rhythm
  • {spacing.lg} (10px) — the most common padding value; button internals, card padding
  • {spacing.xl} (11px) — slight variation on 10px for specific components
  • {spacing.2xl} (15px) — button vertical padding, larger internal gaps
  • {spacing.3xl} (20px) — section-internal spacing, card-to-card gaps
  • {spacing.4xl} (25px) — generous internal padding in panels
  • {spacing.section} (40px) — vertical rhythm between major page sections
  • {spacing.hero-top} (100px) — top padding of the hero band
  • {spacing.hero-bottom} (60px) — bottom padding of the hero band

• Section padding (vertical): {spacing.hero-top} (100px) above the hero headline, {spacing.hero-bottom} (60px) below the CTA row. Footer uses {spacing.section} (40px).

• Card internal padding: The {component.panel-card} uses {spacing.lg} (roughly 16px equivalent); {component.canvas-body} uses {spacing.3xl} / {spacing.4xl} (20px/25px) for generous content breathing room.

• Gutters: Horizontal page gutter is 20px (from the container padding). Internal column gutters within the app preview appear to be approximately 0–8px depending on adjacency.

Grid & Container

• Max content width: 1440px (extracted from both section and header container widths). The layout is designed for large desktop viewports and does not constrain content to a narrower "reading" column—the hero headline spans nearly full width.
• Density choice: Marketplace/product density. This is not an editorial page with a narrow reading column; it's a product showcase that uses width to display the app preview at a meaningful scale. The three-column app preview (sidebar ~240px, canvas ~flexible, right panel ~280px) occupies roughly 1100–1200px of the 1440px container.
• Hero column split: The hero area uses an implicit two-column grid: left column (roughly 55–60% width) holds the headline + CTA row; right column (40–45%) holds the "Watch demo ▶" link aligned to the baseline of the CTA buttons. Below both, the full-width app preview container begins.
• App preview internal grid: A classic three-panel layout—fixed-width left sidebar (~240px), flexible center canvas (remaining space), fixed-width right panel (~280px). The center canvas contains a nested "frame" element that simulates a browser viewport.

Whitespace Philosophy

The system practices confident darkness: the {colors.surface-soft} canvas isn't "empty"—it's a deliberate void that makes the white type and the app preview feel like illuminated objects floating in space. Whitespace is vertical more than horizontal: the 100px gap above the hero headline and 60px below create a cinematic framing. Inside the app preview, whitespace is tighter—this is a tool interface, after all, and tool interfaces reward density.

Header Architecture

|<- 1440px max-width ->|
|                                      |
| [Logo] Platform v  Solutions v  ...  Log In  [Sign up] |
|__________navigation bar, 64px height________________|

The top navigation is a single-row flex layout: logo flush-left, navigation items (Platform, Solutions, Resources, Enterprise, Pricing) with chevron indicators for dropdown menus, then utility actions (Log In text link, Sign Up pill button) flush-right. Background is transparent, letting the {colors.surface-soft} page background show through. Height is 64px. Horizontal padding is 20px on each side.

Hero Section

|<- 1440px ->|
|                                        |
|  AI website builder for          Watch demo ▶ |
|  designers and teams                          |
|                                             |
|  [Get started for free]  [Download app ⬇]    |
|                                             |
|  +---------------------------------------+  |
|  |  [App Preview Container]              |  |
|  |  [Sidebar] [Canvas Area] [Right Panel]|  |
|  +---------------------------------------+  |
|_____________________________________________|

The hero bands together: (1) the H1 headline in {typography.display-lg}, (2) a CTA row with {component.button-primary} (white filled, black text) and {component.button-secondary} (ghost, white text with border), (3) a "Watch demo ▶" link aligned to the right edge of the CTA row's baseline, and (4) the full-width {component.app-preview-container} showing the editor interface. Vertical rhythm: 100px above headline, ~32px between headline and CTAs, ~40px between CTAs and preview container.

App Preview Layout (Signature Component)

+----------------------------------------------------------+
| [Canvas v] [+] [⊞] [T] [△]        Site • ↗ main  [👤👤+12][▶][Invite][Publish] |
|----------toolbar-----------------------------------------|
| [Pages][Layers][Assets]                                  |
| [Q Search... ]                                           |
|                                                          |
| Pages                              +------------------+   |
| 🏠 Home         |  [Desktop 1200] +|  Agent  Style  |   |
| ∨ /research     |  +-----------+  |                  |   |
|   📄 Research.. |  |  BLOOM*   |  | [Vertical Her..v]|   |
|   📄 commitmen..|  |           |  |  Change the her..|   |
| ∨ /learn        |  |  AI re-   |  |  to a vertical..|   |
|   📄 News Pages |  |  search.. |  |  [img]       [↻]|   |
|   📄 try-bloom   |  |  for hum..|  +------------------+   |
|   📄 support     |  |           |  |                    |   |
| ∨ /legal         |  | [image]   |  |                    |   |
|                   |  +-----------+  |                    |   |
+----------------------------------------------------------+

This is the page's centerpiece: a fully-rendered simulation of Framer's canvas editor. Left rail: paginated sidebar with tree navigation. Center: a "canvas" showing a frame labeled "Desktop 1200" containing a page preview titled "BLOOM*" with a gradient image and headline. Right rail: properties panel with "Agent"/"Style" tabs and a layout selector card.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, {colors.surface-soft} background | Page canvas, nav bar background | | 1 (Hairline) | {extensions.shadows.hairline} — 1px rgba(255,255,255,0.1) border | Surface separation lines, toolbar dividers | | 2 (Soft raise) | {extensions.shadows.soft} — subtle offset shadow | Buttons on hover, cards slightly lifted | | 3 (Inset focus) | {extensions.shadows.inset-focus} — 1.5px solid #111 inset | Focus ring on inputs, active canvas frame | | 4 (Glow) | {extensions.shadows.glow} — dual-layer blue shadow | Primary button/Publish button glow, brand-colored focal points | | 5 (Deep) | {extensions.shadows.deep} — 22px blur black shadow | Dramatic elevation for modals, dropdowns (inferred) |

The elevation philosophy is layered grayscale, not shadow-heavy. Because the page is dark-mode, traditional drop shadows (which are black) would be invisible. Instead, depth is communicated through: (a) background value steps (#000000 → #111111 → #1f1f1f → #242424 → #303030), (b) 1px hairline borders in low-opacity white, and (c) the rare blue glow ({extensions.shadows.glow}) for the single brand-colored element (Publish button). This is a "light-on-dark" elevation system where brighter = higher.

Decorative Depth

The canvas frame inside the app preview contains a gradient image (blue-to-purple abstract bloom/gel texture) that provides the only photographic/decorative element on the page. This image sits inside {component.canvas-body} and serves as the visual proof-point for "AI generated" output. Its presence breaks the otherwise strict UI-only aesthetic and adds a moment of organic warmth.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 5px | Small buttons, sidebar items on hover, search inputs | | {rounded.DEFAULT} | 6px | Default UI element rounding (toolbar buttons) | | {rounded.md} | 8px | Cards, panels, the canvas frame itself | | {rounded.lg} | 15px | The app preview container, major panel corners | | {rounded.xl} | 16px | Variant for slightly larger containers | | {rounded.pill} | 50% | ALL buttons (primary, secondary, publish, invite), badges, tag-like elements | | {rounded.full} | 9999px | Avatars, perfectly circular elements |

The shape system has a clear bifurcation: interactive elements are always pills (50% radius), while container elements use modest rounding (5–15px). This creates a visual grammar where "round = clickable" and "squarish = content region." The {rounded.pill} on every button—regardless of whether it's the hero CTA or a tiny Invite button—is a strong and consistent signal.

Photography Geometry

The single image on the page (the BLOOM gradient inside the canvas preview) appears to be roughly 4:5 or 3:4 portrait aspect ratio, contained within the canvas frame with no additional border-radius beyond the frame's own {rounded.md} (8px). Images in this system are treated as content within frames, not as standalone decorative elements—they're always "inside something."

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-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.top-nav-link} — Navigation menu items in the header bar (Platform, Solutions, Resources, etc.). Transparent background, {colors.on-dark} text at {typography.body-md}, horizontal padding {spacing.md} {spacing.lg}. Includes a chevron indicator (implied by the "v" suffix in labels) suggesting dropdown behavior. On hover, likely shows a subtle background or underline.

{component.nav-button-signup} — The "Sign up" button in the top-right corner. {colors.on-dark} (white) background with {colors.ink} (black) text—inverted from the page's normal dark-mode scheme, making it pop as the primary nav action. Uses {typography.button} at 14px/500, {rounded.pill} geometry, padding 8px 16px. Its inverted coloring is a deliberate contrast play: on a black page, the white button draws the eye immediately.

{component.button-primary} — "Get started for free" hero CTA. White ({colors.on-dark}) filled background, black ({colors.ink}) text, same inverted scheme as the nav Sign Up button. {typography.button} 14px/500, {rounded.pill}, padding 12px 24px. This is the page's principal conversion action. Active state: {component.button-primary-active} switches to {colors.surface-elevated} background with {colors.on-dark} text—a "pressed-in" darkening effect.

{component.button-secondary} — "Download app" hero CTA. Ghost/outline style: transparent background, {colors.on-dark} text, likely with a subtle {colors.hairline} border. Same {rounded.pill} geometry and {typography.button} sizing as primary. Paired directly beside {component.button-primary}. Active state ({component.button-secondary-active}) fills with {colors.surface-glass-strong} (10% white).

{component.publish-button} — The "Publish" button inside the app preview's toolbar. This is where {colors.primary} (#0066ff) finally appears as a background! Blue fill with {colors.on-primary} (white) text, {typography.button-sm} 12px, {rounded.pill}, 8px 16px padding. Its placement inside the simulated editor is conceptually significant: the brand color lives inside the product, not on the marketing shell around it.

{component.invite-button} — "Invite" button next to Publish. Ghost style, {colors.on-dark} text, {typography.button-sm}, {rounded.pill}. Serves as the secondary action in the preview's toolbar pair.

{component.button-icon-only} — Square/minimal buttons containing only an icon (e.g., the play button next to avatars, toolbar action buttons). Transparent background, {colors.on-dark-subtle} text color (for the icon), {rounded.sm} (5px), 32×32px size. These are densely packed in the toolbar row.

Cards & Containers

{component.app-preview-container} — The signature component: the large rounded rectangle containing the simulated Framer editor. {colors.surface} (#111111) background, {rounded.lg} (15px) corners, no internal padding (children manage their own). This container casts {extensions.shadows.deep} (the 22px blur shadow) giving it dramatic lift from the page canvas. It spans nearly the full 1440px width and is the visual anchor below the hero text.

{component.app-toolbar} — The top bar inside the app preview showing "Canvas" dropdown, tool icons (plus, frame, text, triangle), site indicator ("Site • ↗ main"), user avatars, and action buttons. {colors.surface} background, {colors.on-dark-subtle} text at {typography.caption}, {rounded.lg} on top corners only (bottom is open to content), padding {spacing.lg} {spacing.xl}. Contains {component.toolbar-button} instances and {component.toolbar-divider} elements.

{component.sidebar} — Left navigation rail inside the preview. {colors.surface} background, rounded on right side only (0 {rounded.lg} {rounded.lg} 0). Contains tab headers ({component.sidebar-tab} for "Pages/Layers/Assets"), a search field ({component.sidebar-search}), section headers ({component.sidebar-section-header}), and a collapsible tree of page items ({component.sidebar-item}, {component.sidebar-item-active}). The active item ("Home") shows {colors.surface-elevated} background with {rounded.sm}.

{component.canvas-area} — The central editable region. {colors.surface-soft} (pure black) background—this simulates the infinite canvas. Contains the {component.canvas-frame} element centered within it. Padding {spacing.xl} around the frame.

{component.canvas-frame} — The "browser window" shown on the canvas. {colors.surface} background, {rounded.md} (8px) corners. Split into {component.canvas-header} (the "Desktop 1200" mono label bar) and {component.canvas-body} (the page preview content showing the BLOOM headline and gradient image).

{component.right-panel} — Properties/config panel on the right side of the preview. {colors.surface} background, rounded on left side only. Contains {component.panel-tabs} ("Agent"/"Style"), a {component.panel-select} dropdown ("Vertical Hero Layout"), and a {component.panel-card} showing instructions text.

{component.panel-card} — Content card inside the right panel. {colors.surface-elevated} background, {rounded.md}, padding {spacing.lg}. Holds descriptive text about changing the hero layout, plus a thumbnail image and refresh icon.

Inputs & Forms

{component.sidebar-search} — "Search..." input in the sidebar. {colors.surface-elevated} background (dark gray box), {colors.on-dark-subtle} placeholder text at {typography.caption}, {rounded.md} (8px), 8px 12px padding, 32px height. No visible border—background value alone defines the input region.

{component.text-input} — Generic text input (observed in textarea form in extracted CSS). Transparent background, {colors.on-dark} text, no border, no border-radius. This minimal style suggests that inputs in this system are often "invisible" until focused, relying on context (label, container) to define their boundaries.

{component.text-input-canvas} — Canvas-specific input variant. Same minimal styling as {component.text-input}. The canvas editor likely uses contenteditable-style inputs that blend into the canvas background.

Navigation

{component.top-nav} — The global header/navigation bar spanning the full viewport width. Transparent background, 64px height, {colors.on-dark} text at {typography.body-md}. Contains logo, dropdown nav links, and utility actions. Fixed or sticky positioning is likely (standard pattern for SaaS navs).

{component.sidebar-tab} — Tab switcher in the sidebar ("Pages", "Layers", "Assets"). Transparent background, {colors.on-dark-subtle} text at {typography.label} (12px/500), no rounded corners (full-width tabs). Active state ({component.sidebar-tab-active}) shows {colors.surface-elevated} background.

{component.sidebar-item} — Individual page/folder item in the sidebar tree. Transparent background, {colors.on-dark-subtle} text at {typography.body-sm}, {rounded.sm} (5px), horizontal padding {spacing.base} {spacing.xl}. Hover state ({component.sidebar-item-hover}) fills with {colors.surface-elevated}. Active/selected state ({component.sidebar-item-active}) also uses {colors.surface-elevated} with {colors.on-dark} text (full opacity instead of 60%).

{component.watch-demo-link} — "Watch demo ▶" text link positioned to the right of the hero CTA row. Transparent background, {colors.on-dark} text at {typography.body-md}, includes a play-triangle icon (▶). Functions as a secondary conversion path.

Signature Components

{component.avatar-stack} — Overlapping avatar group showing multiple users (visible as "👤👤+12" near the preview toolbar). Each avatar is {rounded.full} (circle), 28px size, with a count badge ({component.badge-count}) overlaid.

{component.avatar-single} — Individual user avatar (the circular profile images). {colors.surface-elevated} background (or actual photo), {rounded.full}, 32px size.

{component.badge-count} — Numeric badge showing "+12" next to avatar stack. {colors.surface-elevated} background, {colors.on-dark-subtle} text at {typography.caption}, {rounded.pill} geometry, 2px 8px padding.

{component.toolbar-divider} — Vertical 1px line separating toolbar button groups. {colors.hairline} (white 10% opacity), 1px wide × 20px tall. Used between the triangle tool and the "Site" indicator, and between the avatar stack and the play button.

{component.panel-select} — Dropdown selector in the right panel ("Vertical Hero Layout"). {colors.surface-elevated} background, {colors.on-dark} text at {typography.body-sm}, {rounded.md} (8px), {spacing.lg} padding. Includes a chevron-down indicator (implied).

Do's and Don'ts

Do

• Do use {colors.surface-soft} (#000000) as the page background and reserve {colors.primary} (#0066ff) exclusively for the primary CTA inside the app preview—this asymmetric color placement is intentional and brand-defining.
• Do apply {rounded.pill} (50%) to every button regardless of hierarchy; the pill shape is the universal "clickable" signifier in this system.
• Do use aggressive negative letter-spacing on GT Walsheim headlines ({typography.display-lg} at -2.16px, {typography.title-md} at -1.76px)—this compression is the typographic signature of the brand.
• Do express text hierarchy through opacity on dark backgrounds: {colors.on-dark} (100%) for primary, {colors.on-dark-muted} (80%) for secondary, {colors.on-dark-subtle} (60%) for tertiary, {colors.on-dark-faint} (40%) for metadata.
• Do use background value steps for elevation on dark surfaces: {colors.surface} → {colors.surface-strong} → {colors.surface-elevated} → {colors.surface-overlay} as elements rise.
• Do apply {typography.mono} (Input Mono 13px) to all technical identifiers—file names, viewport dimensions, status codes—to semantically mark them as system-generated data.
• Do give the {component.app-preview-container} {rounded.lg} (15px) corners and the deep shadow ({extensions.shadows.deep})—it should feel like a lifted object floating above the page.
• Do keep the Sign Up and "Get started for free" buttons inverted (white background, black text) on the dark page—this inversion is their visual superpower.
• Do use {colors.hairline} (white 10% opacity) for all internal dividers and borders within the app preview—anything stronger will look harsh against the dark surfaces.
• Do limit the {extensions.shadows.glow} (blue dual-shadow) to the {component.publish-button} only—brand-colored shadows are a rare special effect, not a general-purpose tool.

Don't

• Don't use {colors.primary} (#0066ff) for the hero CTA buttons—the hero buttons are white/black inverted; the blue is reserved for the Publish button inside the preview.
• Don't round container corners beyond {rounded.lg} (15px)—the app preview container is the maximum radius in the system; anything rounder looks like a button.
• Don't use font weights above 500 for any typography role—GT Walsheim stays at 500, Inter stays at 400 (except buttons at 500). Bold (700) is reserved for {typography.mono-bold} only.
• Don't add gradient backgrounds to the hero band or page sections—the canvas is pure {colors.surface-soft} (#000000) with zero texture or gradient.
• Don't use colored text for secondary information on dark backgrounds—always reduce white opacity instead of introducing gray hex values.
• Don't make the sidebar items fully rounded ({rounded.pill})—they use {rounded.sm} (5px) to distinguish them from buttons.
• Don't omit the negative letter-spacing on display type—without it, GT Walsheim headlines lose their compressed, modern character and look generic.
• Don't place the "Watch demo" link on its own line—it sits on the same baseline as the CTA button row, aligned to the right, creating a balanced hero composition.
• Don't use shadows for elevation on dark surfaces—background brightness steps and hairline borders communicate depth more effectively in dark mode.
• Don't expand the color palette beyond the defined tokens—if you need a "slightly lighter gray" for a new component, use one of the existing {colors.surface-*} or opacity tokens rather than inventing a new hex.

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-box-shadow: box-shadow 200ms cubic-bezier(0, 0, 1, 1);
--transition-all: all 200ms ease;

The extracted CSS shows transitions using a linear-ish cubic-bezier (0, 0, 1, 1) which is nearly instant with no deceleration—this creates a snappy, responsive feel appropriate for a tool interface. Duration is consistently 200ms across color, background, and shadow transitions.

Keyframe Animations

• __framer-blink-input — Cursor blink animation for text input fields (standard caret pulse).
• shimmer-R2mmoqnlraal5dp — Shimmer/loading sweep effect, likely used for skeleton loading states or progressive image reveals.
• ghostFlow — Probable subtle movement or flow animation for ghost/placeholder elements.
• doubleSlow — Slow double-animation cycle, possibly for decorative ambient motion.
• danceSpark — Playful spark/shimmer animation, likely for celebratory micro-interactions (e.g., successful publish).

Interaction Patterns

• Button press state: Background color transitions to darker variant ({colors.surface-elevated} or {colors.surface-glass-strong}) over 200ms with the default easing.
• Sidebar item hover: Background fills with {colors.surface-elevated} smoothly, text opacity bumps from 60% to 100%.
• Focus rings on canvas frame: The {colors.focus-ring} (blue-tinted 22% overlay) appears as a glow around the active frame, likely with a subtle scale or shadow transition.
• Toolbar button hover: Icon buttons show {colors.surface-glass} background fill on hover with 200ms transition.
• Dropdown reveal: Navigation dropdowns (Platform ▼, Solutions ▼) likely animate from top with fade, though this is inferred.
• Scroll-triggered entrance: The app preview container may fade/slide up on scroll-into-view (common Framer pattern), leveraging the shimmer keyframe for initial reveal polish.
• Avatar stack interaction: Hovering the "+12" badge likely triggers a tooltip or expansion animation.

If implementing added motion beyond what's extracted: recommend 200–300ms duration, cubic-bezier(0.25, 0.1, 0.25, 1) (ease-out) for entrances, cubic-bezier(0.4, 0, 0.2, 1) (standard ease) for state changes. Keep motion "subtle" per the brand voice—this is a professional tool, not a playful consumer app.

Imagery Style

• The page features exactly one image: an abstract gradient photograph inside the canvas preview (blue-to-purple gel/bloom texture with circular glass-like elements floating in the foreground).
• Style: Abstract, atmospheric, high-saturation gradient photography with a shallow depth-of-field feel—suggesting AI-generated or heavily processed digital art.
• Color treatment: The image uses blues and purples that harmonize with {colors.primary-glow} (#0099ff) without matching it exactly. It feels "of the brand family" without being a literal brand color application.
• Role: The image serves as proof-of-concept—it demonstrates what the AI builder can produce. It's content within the product simulation, not decorative marketing imagery.
• Composition: Portrait orientation (approximately 4:5), occupying the right portion of the canvas frame, with white headline text ("AI research for human well-being") overlaid on the left side of the frame.
• Treatment: No border-radius on the image itself (it fills its container), no filter effects, no overlay gradients—the image is presented raw as "this is what you can make."
• Absence elsewhere: Notably, there are no illustrations, no 3D renders, no icon illustrations, no team photos, no customer logos—this page relies entirely on the product UI as its visual content. The single gradient image is the sole exception.
• Implication: The design system treats imagery as user-generated content to be framed by UI chrome, not as a design material in its own right. Image containers (like {component.canvas-body}) provide the frame; the image provides the variable content.

Icon System

• Library: Custom SVG icons (no detected third-party library—Framer uses its own icon set).
• Specific icons observed:
  • Framer logo (the stylized "F" mark) in the top-left nav
  • Chevron down (▼) for navigation dropdowns: Platform, Solutions, Resources
  • Download arrow (⬇) on "Download app" button
  • Play triangle (▶) on "Watch demo" link and toolbar play button
  • Canvas/frame tool icons in toolbar: plus (+), rectangle/frame (⊞), text (T), triangle (△)
  • External link (↗) next to "Site" indicator
  • Home icon (🏠) for the Home page item
  • Folder/document icons (📄) for page items in sidebar
  • Expand/collapse arrows (∨) for tree navigation
  • Search magnifier (Q) in sidebar search
  • Plus (+) for "add new" actions (next to Pages header)
  • Refresh/reload (↻) on the panel card
  • User/avatar placeholders (👤)
• Treatment: Icons are stroke-based (not filled), rendered in currentColor which inherits from the parent's color property. Size varies by context: 16px in navigation, 20px in toolbar, 24px for standalone decorative icons (play button).
• Alignment: Icons are vertically centered with adjacent text, with a consistent 6–8px gap between icon and label. In button-icon-only variants, the icon is centered within the 32×32px touch target.

Recommended Frontend Stack

- Framework:      Next.js (App Router) or Framer's own canvas-based runtime
- Styling:        CSS-in-JS (Framer's internal styling) or Tailwind CSS with dark-mode tokens
- Fonts:          GT Walsheim (self-hosted or via Framer CDN), Inter Variable (Google Fonts/RSMS), Geist Variable (Vercel CDN), Input Mono (self-hosted or substitute JetBrains Mono)
- Animation:      Framer Motion (native to the platform) for scroll-triggered reveals and micro-interactions
- Icons:          Custom SVG set (Framer's internal icon library)
- Component lib:  Framer's built-in component system (canvas-based, not traditional DOM components)

Note on framework detection: The extracted CSS shows framer- prefixed class names throughout (e.g., framer-rc2Tf, framer-1pjvk2z, framer-7JImb), indicating this page was built using Framer's own visual development platform rather than hand-coded HTML/CSS. The framework field is therefore "framer" — this is a Framer-published site showcasing Framer's capabilities.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single column; app preview stacks below hero text; nav collapses to hamburger; sidebar hidden behind toggle | | Tablet | 640px – 1024px | Two-column hero (text + preview narrower); app preview may simplify to single-panel view | | Desktop | 1024px – 1440px | Full layout as shown: three-column app preview, full nav, hero side-by-side text/CTA | | Wide | > 1440px | Max-width container (1440px) centers with auto margins; background extends full-viewport |

Touch Targets

• {component.button-primary} and {component.button-secondary}: ~44px height (12px padding × 2 + ~20px text), well within WCAG AAA 44×44 minimum.
• {component.nav-button-signup}: ~36px height (8px padding × 2 + ~20px text) — may need padding increase to 10px for mobile touch compliance.
• {component.publish-button}: ~36px height — similar consideration for touch targets.
• {component.sidebar-item}: ~32px height (8px × 2 + ~16px text) — adequate for mouse, borderline for touch; mobile likely increases this.
• {component.toolbar-button}: 32×32px — meets minimum but feels small for fat-finger touch; likely expands to 40×40px on tablet/mobile.

Collapsing Strategy

• Navigation bar: On mobile, the horizontal nav links (Platform, Solutions, etc.) collapse into a hamburger menu; the Sign Up button remains visible or moves into the menu.
• Hero section: The headline + CTA row stacks vertically on mobile (headline first, then CTAs full-width stacked), with "Watch demo" moving below CTAs or into an overflow menu.
• App preview container: The three-column layout (sidebar + canvas + right panel) cannot fit mobile width. Likely behaviors: (a) sidebar becomes a bottom sheet or slide-over drawer, (b) right panel hides or moves below canvas, (c) canvas frame scales to fill available width with horizontal scroll if needed.
• App preview canvas frame: On narrow viewports, the "Desktop 1200" frame likely scales down proportionally or switches to a "Mobile" breakpoint view internally.
• Footer: Multi-column footer layout (if present below fold) collapses to single-column stacking on mobile.

Image Behavior

• The gradient image inside the canvas preview is contained within {component.canvas-body} and will scale proportionally with its parent frame. On mobile, the frame narrows, so the image narrows—maintaining aspect ratio.
• No art-direction or image swapping detected; the same image asset serves all breakpoints (appropriate for a product demo, not a hero banner).
• Avatars ({component.avatar-stack}, {component.avatar-single}) maintain fixed pixel sizes (28px, 32px) across breakpoints—they don't scale with viewport.

Iteration Guide

1. Build a landing page that closely mimics the design system in this DESIGN.md. Use Next.js with Tailwind CSS (dark mode enabled) or Framer's canvas if replicating the exact authoring experience. Initialize your theme with the YAML frontmatter tokens as CSS custom properties or Tailwind config values.

2. Pull every color, font, radius, and spacing value from the YAML frontmatter via the {section.token} paths. Never hard-code a value that has a token—for example, always write var(--color-surface-elevated) or theme(colors.surface.elevated), never #242424.

3. Add state variants (-hover, -disabled, -focus, -active) per your stack's conventions; the spec documents Default and Active/Pressed only. For hover, darken backgrounds slightly (use the next-darker surface token or reduce opacity). For focus, apply the {extensions.shadows.inset-focus} or {colors.focus-ring} glow.

4. When adding a new component, decide first which sub-system it belongs to: marketing shell (nav, hero, footer) uses {colors.surface-soft} background and {colors.on-dark} text; app-preview dialect (inside the simulated editor) uses layered {colors.surface} → {colors.surface-elevated} backgrounds and reserves {colors.primary} for the Publish button only.

5. Variants of an existing component live as separate frontmatter entries (button-primary-active, sidebar-item-hover)—never nest variants inside a single component definition. Each variant gets its own prose description in the Components section.

6. Run npx @google/design.md lint DESIGN.md after edits — broken-ref, contrast-ratio, and orphaned-tokens warnings flag issues automatically. Pay particular attention to contrast ratios on the dark surfaces: white text on #111111 passes easily, but {colors.on-dark-faint} (40% white) on {colors.surface-elevated} (#242424) may fall below WCAG AA for small text.

7. When in doubt about emphasis: bigger type before bolder type (the system never goes above weight 500 for Latin text), opacity reduction before color change for secondary text on dark backgrounds, background value step before shadow for elevation on dark surfaces. The brand's visual hierarchy is built on size, opacity, and brightness—not weight, hue, or shadow intensity.

8. Implement the app-preview container as the visual centerpiece—it should be the largest element on the page below the hero, with {rounded.lg} corners and the deep shadow. Inside it, build the three-column layout (sidebar/canvas/panel) with accurate surface color layering. Getting this component right delivers 80% of the page's visual impact.

9. For the typography, ensure GT Walsheim headlines have the correct negative letter-spacing applied. Test at 54px with -2.16px tracking—this is the most distinctive typographic detail and the easiest to overlook. If GT Walsheim is unavailable, substitute DM Sans at 500 weight with similar tracking values.

10. Font Setup: Define these CSS variables (or Tailwind theme overrides) mapping to your font sources:

    :root {
      --font-display: "GT Walsheim Medium", "DM Sans", "SF Pro Display", sans-serif;
      --font-body: "Inter Variable", "Inter", system-ui, sans-serif;
      --font-alt: "Geist Variable", "Plus Jakarta Sans", "Inter", sans-serif;
      --font-mono: "Input Mono Regular", "JetBrains Mono", "Fira Code", monospace;
    }
    

    Load Inter from Google Fonts or RSMS. Self-host GT Walsheim (if licensed) or use DM Sans substitute. Load Geist from Vercel's CDN or use Plus Jakarta Sans substitute. Load JetBrains Mono from Google Fonts as Input Mono substitute.

Known Gaps

• Hover state styling: Per the no-hover policy, hover backgrounds, border changes, and transform lifts on buttons, sidebar items, and cards are documented as separate -active or -hover component entries but the exact color/opacity values for hover are inferred rather than extracted.
• Loading skeletons / pending states: While a shimmer keyframe was detected in the CSS, the exact appearance of skeleton loading states (which elements get shimmer, what the base/ highlight colors are) could not be determined from the static screenshot.
• Form validation states beyond focus: Error, success, and warning states for inputs (red/green/amber borders, accompanying message text) are defined as semantic color tokens but their exact application to form fields is unobserved.
• Authenticated-only flows: The page shows "Log In" and "Sign up" entry points but not the dashboard, settings, or project management surfaces that follow authentication. Those surfaces likely extend the design system with additional components (data tables, notification toasts, modal dialogs) not visible here.
• Sub-brand palettes: Framer offers different tiers (Free, Pro, Mini, Enterprise) that may have distinct accent colors or feature badges on pricing pages—those are outside the scope of this single-page extraction.
• Pixel-exact values for translucent surfaces: Tokens like {colors.surface-glass} (rgba(255,255,255,0.07)) and {colors.on-dark-subtle} (rgba(255,255,255,0.6)) are extracted from CSS but their exact rendering can vary slightly across monitors due to alpha compositing against different black levels.
• Misleading CSS variables: The extracted CSS contains Framer-internal variables like --token-958e2cd1-b113-4aa3-9235-7a2b959c8feb that map to the canvas background color. These hashed variable names are auto-generated by Framer's runtime and should not be treated as semantic tokens—always use the human-readable token names defined in this DESIGN.md's frontmatter.
• Dropdown and popover contents: Navigation dropdowns (Platform ▼, Solutions ▼) are visible in the header but their expanded contents (menu items, icons, section dividers) are not observable from the static screenshot.
• Mobile-specific layouts: The entire extraction is based on a desktop viewport (1440px width). How the three-column app preview, navigation, and hero layout reflow at mobile breakpoints is inferred from common responsive patterns but not directly observed.