--- name: Glif tagline: Near-black Manrope on near-white, anchored by one confident green CTA — a playful creative-agent canvas. updated_at: 2026-05-28T23:11:41.344Z published_at: 2026-05-28T23:11:41.344Z author: webdesignhot source_url: https://glif.app spec: webdesignhot/0.1 quality: curated featured: false categories: [ai, dev-tools] tags: [light, playful, sans, ai, workflow, multi-theme] preview_swatch: ['#fcfaf6', '#2e9e4f', '#fffaef'] related: [] description: 'Glif sells "the creative agent platform" with a deliberately light, unfussy canvas: a near-white off-cream ground, near-black Manrope (`#0e0e10`) carrying both display and body, and a single confident green CTA (`#2e9e4f`, "Get Started Free", 6px radius) as the one chromatic commitment. Where most AI tooling leans dark-terminal or gradient-maximalist, Glif stays bright and editorial — the green button is the only loud move on the page, and the small 6px corner radius keeps the whole thing reading as a workmanlike creative tool rather than a hype machine.' # Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger). # Maps role names to this entry's actual token names so role-aware # downstream tools resolve `theme.background` → entry's `bg`, etc. # Auto-generated by scripts/add-aliases.mjs — do not edit manually; # regenerate after changing color token names. aliases: background: bg foreground: text primary: brand primary-foreground: on-brand accent: accent-warm muted: text-muted border: border ring: border-focus themes: default: light available: [light, dark] switch-via: 'data-theme attribute on , toggled via a header button and persisted in localStorage; the green brand CTA is invariant across both themes.' colors: light: bg: '#fcfaf6' # near-white off-cream canvas bg-soft: '#f6f3ec' # secondary stripe surface bg-elev: '#f1ede4' # tertiary tint surface: '#ffffff' # default card base — pure white over the cream ground surface-2: '#f6f3ec' # hover card surface-3: '#ebe6db' # pressed text: '#0e0e10' # primary body & display — near-black (live token) text-strong: '#000000' # rare max-contrast display text-muted: '#55555a' # secondary copy text-soft: '#86868c' # tertiary / helper text-faint: '#b8b8be' # disabled brand: '#2e9e4f' # green primary CTA (live token) brand-hover: '#28893f' # darker green on hover brand-active: '#22742f' # pressed green brand-soft: '#e6f4ea' # faint green wash for selected / info tint on-brand: '#fffaef' # warm off-white label on the green CTA (live token) accent-warm: '#fffbf6' # off-white secondary button surface (live token) accent-warm-deep: '#f3ece0' # warm tonal block accent-lilac: '#efeaff' # rare playful tint for feature blocks accent-sky: '#e6f1fb' # rare playful tint border: '#0000000f' # 6% black hairline border-strong: '#0000001f' # 12% black border-subtle: '#00000008' # 3% black border-focus: '#2e9e4f' # green focus ring success: '#2e9e4f' # reuses brand green success-bg: '#e6f4ea' warning: '#d98a00' warning-bg: '#fdf2dc' danger: '#d83a3a' danger-bg: '#fbe7e7' info: '#2e9e4f' info-bg: '#e6f4ea' dark: bg: '#0e0e10' # near-black canvas (mirrors light/text) bg-soft: '#161618' # secondary stripe on dark bg-elev: '#1d1d20' # tertiary tint surface: '#18181b' # default dark card surface-2: '#212125' # hover dark card surface-3: '#2a2a2f' # pressed text: '#f5f3ee' # near-white warm (mirrors light/accent-warm) text-strong: '#ffffff' text-muted: '#a4a4ac' text-soft: '#7a7a82' text-faint: '#4a4a52' brand: '#34b059' # green lifted slightly for legibility on dark brand-hover: '#3ec066' brand-active: '#2e9e4f' brand-soft: 'rgba(46, 158, 79, 0.18)' on-brand: '#0e0e10' # near-black label on the brighter dark-mode green accent-warm: '#1d1d20' accent-warm-deep: '#26241f' accent-lilac: 'rgba(170, 150, 255, 0.16)' accent-sky: 'rgba(120, 170, 230, 0.16)' border: '#ffffff14' # 8% white hairline border-strong: '#ffffff26' # 15% white border-subtle: '#ffffff0a' # 4% white border-focus: '#34b059' success: '#34b059' success-bg: 'rgba(46, 158, 79, 0.20)' warning: '#e0a020' warning-bg: 'rgba(217, 138, 0, 0.20)' danger: '#e05656' danger-bg: 'rgba(216, 58, 58, 0.20)' info: '#34b059' info-bg: 'rgba(46, 158, 79, 0.20)' typography: display: family: 'Manrope, system-ui, -apple-system, sans-serif' weights: [500, 600, 700] body: family: 'Manrope, system-ui, -apple-system, sans-serif' weights: [400, 500, 600] mono: family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace' weights: [400, 500] scale: display-hero: { size: 80, weight: 700, lineHeight: 1.0, tracking: '-0.03em', family: display } display-lg: { size: 56, weight: 700, lineHeight: 1.05, tracking: '-0.02em', family: display } h1: { size: 54, weight: 600, lineHeight: 1.1, tracking: '-0.018em', family: display } h2: { size: 40, weight: 600, lineHeight: 1.15, tracking: '-0.015em', family: display } h3: { size: 32, weight: 600, lineHeight: 1.2, tracking: '-0.012em', family: display } h4: { size: 24, weight: 600, lineHeight: 1.25, tracking: '-0.005em', family: display } h5: { size: 20, weight: 600, lineHeight: 1.3, tracking: '0', family: body } body-lg: { size: 18, weight: 400, lineHeight: 1.55, tracking: '0', family: body } body: { size: 16, weight: 500, lineHeight: 1.55, tracking: '0', family: body } body-sm: { size: 14, weight: 400, lineHeight: 1.5, tracking: '0', family: body } label: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0', family: body } caption: { size: 12, weight: 500, lineHeight: 1.4, tracking: '0.02em', family: body } eyebrow: { size: 12, weight: 600, lineHeight: 1.4, tracking: '0.06em', family: body } code: { size: 14, weight: 400, lineHeight: 1.6, tracking: '0', family: mono } code-micro: { size: 12, weight: 500, lineHeight: 1.5, tracking: '0', family: mono } radius: micro: 2 sm: 4 md: 8 lg: 12 xl: 16 pill: 9999 spacing: base: 4 scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96] layout: page-width: 1280 prose-width: 720 header-height: 64 hero-y: 96 section-y: 80 gutter: 24 components: button-primary: { bg: '#2e9e4f', text: '#fffaef', radius: 6, paddingX: 16, paddingY: 10, font: 'Manrope 600 / 14px', hover: 'bg #28893f' } button-secondary: { bg: '#fffbf6', text: '#0e0e10', radius: 6, paddingX: 16, paddingY: 10, font: 'Manrope 600 / 14px', border: '1px solid #0000001f', hover: 'bg #f6f3ec' } button-ghost: { bg: 'transparent', text: '#0e0e10', radius: 6, paddingX: 16, paddingY: 10, font: 'Manrope 600 / 14px', hover: 'bg #f6f3ec' } button-link: { bg: 'transparent', text: '#2e9e4f', radius: 0, font: 'Manrope 600 / 14px', hover: 'underline' } card: { bg: '#ffffff', border: '1px solid #0000000f', radius: 12, padding: 24, shadow: '0 1px 2px rgba(14,14,16,0.05)' } input: { bg: '#ffffff', border: '1px solid #0000001f', text: '#0e0e10', radius: 8, paddingX: 12, paddingY: 8, focus: 'border #2e9e4f + ring 2px rgba(46,158,79,0.25)' } badge: { bg: '#e6f4ea', text: '#22742f', radius: 9999, paddingX: 10, paddingY: 3, font: 'Manrope 600 / 12px' } motion: ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)' ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)' ease-bounce: 'cubic-bezier(0.34, 1.56, 0.64, 1)' duration-fast: 150 duration-standard: 240 duration-slow: 320 reduced-motion: 'respects prefers-reduced-motion: reduce — hover lifts collapse to opacity-only, scroll reveals become static, generation-preview loops freeze on a single frame' breakpoints: mobile: 640 tablet: 1024 desktop: 1280 wide: 1536 shadows: none: 'none' ambient: '0 1px 2px rgba(14,14,16,0.05)' standard: '0 4px 12px rgba(14,14,16,0.08)' elevated: '0 12px 28px rgba(14,14,16,0.12), 0 2px 6px rgba(14,14,16,0.05)' deep: '0 24px 56px rgba(14,14,16,0.16), 0 8px 16px rgba(14,14,16,0.06)' glow-green: '0 0 0 4px rgba(46,158,79,0.18)' ring: '0 0 0 2px rgba(46,158,79,0.25)' accessibility: contrast-text-on-bg: 18.3 # AAA — #0e0e10 on #fcfaf6 contrast-muted-on-bg: 7.2 # AAA — #55555a on #fcfaf6 contrast-on-brand: 5.0 # AA — #fffaef on #2e9e4f contrast-text-on-surface: 19.1 # AAA — #0e0e10 on #ffffff focus-ring: '2px solid #2e9e4f with 2px offset' reduced-motion-honored: true keyboard-nav: 'visible green focus ring on every interactive; never outline:none without replacement' dark-mode: optional # Glif ships both; light is the documented marketing default --- ## 1. Visual Theme & Atmosphere Glif's site has a job that most AI tooling solves badly: convince a creative person — an artist, a hobbyist remixer, a small studio — that an "agent platform" is for *making things*, not for reading a whitepaper. The visual posture answers that by getting out of the way. The canvas is a near-white off-cream (`#fcfaf6`), the type is near-black Manrope (`#0e0e10`), and the only loud chromatic decision on the entire page is a single green CTA — `#2e9e4f`, reading "Get Started Free". Everything else is calm so that one button can carry the energy. The hero anchors on a big Manrope headline at 54px / 600 weight, set in the same near-black as the body copy — no display gradient, no oversized weight, no decorative chrome. Beneath it sits a row of two buttons: the green primary and a warm off-white secondary (`#fffbf6`, "Image & Editing"). The restraint is the point. Where Lovable runs a pink-violet gradient and Cursor leans dark-terminal, Glif leans *editorial* — it looks closer to a well-set product blog or a modern documentation site than to a hype-driven launch page, and that legibility is what makes the creative-output thumbnails (which Glif's product generates) pop when they appear on the page. The atmosphere is playful-creative but never childish. Playfulness arrives through content — generated images, remix grids, community glifs — rather than through the chrome. The chrome itself is disciplined: tight 6px button corners, 12px cards, a 16px body set at Manrope 500 for a touch of confidence, and warm off-cream tints that keep the whole thing from feeling like a cold clinical SaaS dashboard. The warmth is subtle (a few percent toward cream) but it matters: pure `#ffffff` would read sterile, and Glif wants to feel like a studio, not a console. Depth is almost absent. Cards rest on hairline borders and the faintest 5%-black ambient shadow; there is no heavy elevation, no glassmorphism, no neon glow. The page reads flat-and-honest, which lets the generated creative content provide all the visual richness. The green CTA is the one element allowed a focus glow, because it is the one element the whole layout is funneling you toward. The result is a brand that signals *capable and approachable* simultaneously. Near-black-on-near-white is the most legible pairing there is; Manrope's geometric-humanist letterforms read friendly without tipping into novelty; and the lone green button does the work of a hundred gradients. It is confidence through subtraction. **Key Characteristics** - Near-white off-cream canvas (`#fcfaf6`), never sterile pure white at page level - Near-black Manrope (`#0e0e10`) carrying both display and body — one family throughout - A single green CTA (`#2e9e4f`) as the only loud chromatic commitment - Small 6px button radius / 12px card radius — workmanlike, not bubbly - Body set at 16px Manrope 500 — a touch of weight for confidence - Warm off-white secondary surfaces (`#fffbf6`) instead of grey - Flat depth: hairline borders + 5%-black ambient shadow, no neon or glass - Editorial legibility over launch-page spectacle - Playfulness lives in the generated content, not the chrome - Calm, high-contrast, studio-not-console temperament ## 2. Color Palette & Roles ### Primary - **bg** (`#fcfaf6`): near-white off-cream canvas — the calm, slightly warm ground - **bg-soft** (`#f6f3ec`): secondary stripe surface for alternating bands - **bg-elev** (`#f1ede4`): tertiary tint for nested tonal blocks - **text** (`#0e0e10`) [live token]: primary body & display — near-black, never pure `#000` - **text-strong** (`#000000`): rare max-contrast display moments - **on-brand** (`#fffaef`) [live token]: warm off-white label sitting on the green CTA ### Brand - **brand** (`#2e9e4f`) [live token, lab 47.7 -30 22.5]: the green primary CTA — the single chromatic identity of the site - **brand-hover** (`#28893f`): darker green on hover - **brand-active** (`#22742f`): pressed green - **brand-soft** (`#e6f4ea`): faint green wash for selected rows, info tints, badge fills The green is the brand. It is **never gradient-ed, never duplicated as a second hue, never applied to body text** — it lives on the primary CTA, focus rings, and the occasional success signal. One green, doing one job. ### Accent - **accent-warm** (`#fffbf6`) [live token]: off-white secondary button surface — warmer than the canvas, used on the "Image & Editing"-style secondary actions - **accent-warm-deep** (`#f3ece0`): warm tonal block for feature backgrounds - **accent-lilac** (`#efeaff`): rare playful tint reserved for a single feature block - **accent-sky** (`#e6f1fb`): rare playful tint, a quiet cool counterpoint Accents are background-only and rationed. They tint feature sections; they **never appear on action surfaces** (that's the green's job). ### Interactive - **link**: `#2e9e4f` — green, the same as brand; underlines grow on hover - **link-hover**: `#22742f` with underline - **selected**: `#e6f4ea` — soft green tint - **disabled**: `#b8b8be` text on `#f6f3ec` bg ### Neutral Scale - **text** `#0e0e10` — heading & body - **text-muted** `#55555a` — secondary copy - **text-soft** `#86868c` — tertiary / helper - **text-faint** `#b8b8be` — disabled - **border** `#0000000f` (6% black) — default hairline - **border-strong** `#0000001f` (12% black) — emphasis / input borders - **border-subtle** `#00000008` (3% black) — softest divider ### Surface - **surface** `#ffffff` — default card base; pure white reads as a clean tile *against* the off-cream canvas - **surface-2** `#f6f3ec` — hover surface - **surface-3** `#ebe6db` — pressed surface The deliberate inversion — pure-white cards on an off-cream page — is what gives Glif's cards their subtle lift without needing heavy shadows. ### Shadow Colors Shadows are **neutral near-black** at very low alpha — `rgba(14,14,16, …)` derived from the text color. There is no tinted or coloured shadow here; depth is honest and minimal, in keeping with the editorial posture. - **ambient** `rgba(14,14,16,0.05)` — card resting - **standard** `rgba(14,14,16,0.08)` — card hover - **elevated** `rgba(14,14,16,0.12)` — popovers - **glow-green** `rgba(46,158,79,0.18)` — the one coloured shadow, reserved for the focused CTA ### Semantic - **success** `#2e9e4f` on `#e6f4ea` — reuses the brand green (success *is* on-brand here) - **warning** `#d98a00` on `#fdf2dc` - **danger** `#d83a3a` on `#fbe7e7` - **info** `#2e9e4f` on `#e6f4ea` — uses brand green rather than a generic blue ## 3. Typography Rules ### Font Family - **Display & Body**: Manrope — a single geometric-humanist sans carrying the entire system, weighted 400 through 700 - **Mono**: system mono stack (`ui-monospace`, SF Mono, Menlo) — used only for inline code, IDs, and prompt snippets - **No serif anywhere** — Manrope's warmth provides all the friendliness the system needs ### Hierarchy | Role | Font | Size | Weight | Line H | Tracking | Notes | |---|---|---|---|---|---|---| | display-hero | Manrope | 80 | 700 | 1.0 | -0.03em | Reserved campaign hero | | display-lg | Manrope | 56 | 700 | 1.05 | -0.02em | Section opener | | h1 | Manrope | 54 | 600 | 1.1 | -0.018em | **Primary hero headline (live: 53.6px / 600)** | | h2 | Manrope | 40 | 600 | 1.15 | -0.015em | Feature header | | h3 | Manrope | 32 | 600 | 1.2 | -0.012em | Subsection header | | h4 | Manrope | 24 | 600 | 1.25 | -0.005em | Card title | | h5 | Manrope | 20 | 600 | 1.3 | 0 | Inline / component title | | body-lg | Manrope | 18 | 400 | 1.55 | 0 | Hero subhead | | body | Manrope | 16 | 500 | 1.55 | 0 | **Default paragraph (live: 16px / 500)** | | body-sm | Manrope | 14 | 400 | 1.5 | 0 | Captions, dense copy | | label | Manrope | 13 | 500 | 1.4 | 0 | Form & button labels | | caption | Manrope | 12 | 500 | 1.4 | 0.02em | Meta below cards | | eyebrow | Manrope | 12 | 600 | 1.4 | 0.06em | Section taglines, ALL CAPS | | code | system mono | 14 | 400 | 1.6 | 0 | Inline code / prompt snippets | | code-micro | system mono | 12 | 500 | 1.5 | 0 | IDs, version strings | ### Principles - **One family, top to bottom** — Manrope is the display *and* body face; the hierarchy is driven by size and weight, not by family contrast - **Display tops out at 600, not 700** — the live hero headline is 53.6px / 600; the heavier 700 is reserved for rare campaign moments - **Body carries a touch of weight (500)** — the live body is Manrope 500, not 400, which reads slightly more confident and holds up on the warm canvas - **Tracking is moderate-negative on display** — `-0.018em` at the hero, never tighter than `-0.03em` - **No italics, no all-caps body** — capitals appear only on the 12px eyebrow label, tracked +0.06em - **Mono is rare** — reserved for prompt strings, IDs, and inline code, never for UI chrome - **Near-black, not pure black** — display and body share `#0e0e10`, which softens the contrast just enough to feel warm ## 4. Component Stylings ### Buttons **Primary CTA** — the green button - bg `#2e9e4f`, text `#fffaef`, radius `6px` - padding `10px 16px`, Manrope 600 14px - hover: bg `#28893f`; active: bg `#22742f` - focus: green ring `2px solid #2e9e4f` + 2px offset, optional `glow-green` - use: every primary action — "Get Started Free", "Sign up", "Start creating" **Secondary Button** — the warm off-white - bg `#fffbf6`, text `#0e0e10`, radius `6px`, border `1px solid #0000001f` - padding `10px 16px`, Manrope 600 14px - hover: bg `#f6f3ec` - use: parallel-to-primary action — "Image & Editing", "Browse glifs", "Watch demo" **Ghost Button** - bg transparent, text `#0e0e10`, radius `6px` - padding `10px 16px`, Manrope 600 14px - hover: bg `#f6f3ec` - use: tertiary action — "Learn more", toolbar actions **Link Button** - bg transparent, text `#2e9e4f` (green), no radius - Manrope 600 14px - hover: underline grow - use: inline navigation, "View all", footer links ### Cards **Card Default** - bg `#ffffff` (pure white on the off-cream canvas), radius `12px`, padding `24px` - border `1px solid #0000000f`, shadow `ambient` (`0 1px 2px rgba(14,14,16,0.05)`) - hover: shadow `standard` + 1px translateY lift - use: feature tiles, glif preview cards, pricing tiers **Glif Preview Tile** - bg `#ffffff`, radius `12px`, padding `0` (generated image fills) + 12px caption strip - border `1px solid #0000000f`, shadow `ambient` - hover: shadow `standard`, reveal author + "Remix" link - the generated image is the hero of the card; chrome stays minimal ### Inputs & Forms **Text Input** - bg `#ffffff`, border `1px solid #0000001f`, radius `8px` - padding `8px 12px`, Manrope 500 16px - focus: border `#2e9e4f` + ring `2px rgba(46,158,79,0.25)` - placeholder: `#86868c` **Prompt / Search Field** - larger variant, 8px radius, full-width - often paired with an inline green "Run" / "Create" button on the right - placeholder suggests a creative prompt ("a watercolor fox in a snowstorm…") ### Badges & Tags **Badge Brand** - bg `#e6f4ea` (soft green), text `#22742f`, radius `9999px` - padding `3px 10px`, Manrope 600 12px - use: "New", "Featured", "Free" labels **Tag Neutral** - bg `#f6f3ec`, text `#55555a`, radius `9999px` - padding `3px 10px`, Manrope 500 12px - use: category chips on glif tiles ("image", "editing", "agent") **Eyebrow Tag** - bg transparent, text `#86868c`, ALL CAPS, tracking `0.06em`, Manrope 600 12px - use: section taglines ### Navigation **Top Nav** - bg `#fcfaf6` (or `rgba(252,250,246,0.85)` blurred when sticky) - height `64px`, 24px gutters - wordmark left, link cluster center (Explore / Pricing / Docs), green CTA right - bottom hairline `#0000000f` appears on scroll **Footer** - bg `#fcfaf6` with top hairline `#0000000f` - multi-column link grid, Manrope 500 14px in `#55555a`, 64–96px vertical padding - wordmark + copyright row at the bottom ## 5. Layout Principles ### Spacing System - **base** `4px`, scale `[0, 4, 8, 12, 16, 24, 32, 48, 64, 96]` - Density philosophy: **comfortable-but-efficient**. Tighter than Lovable, looser than a data dashboard. Cards carry 24px internal padding; sections breathe at 64–96px. ### Grid & Container - **page-width** `1280px` with 24px gutters - 12-column grid with an 8px rhythm baseline - Glif preview grids run 3–4 columns of square-ish 12px-radius tiles - **prose-width** `720px` — used for docs and blog reading measure ### Whitespace Philosophy Vertical rhythm runs 64–96px between sections — enough air for each band to read as its own chapter, but not the cathedral-scale spacing of a consumer landing page. The hero gets the most room (96px); dense feature/community grids tighten toward 64px so more generated content fits the fold. ### Section Cadence The page alternates between the warm canvas and faint tonal washes: 1. Off-cream hero with headline + dual CTA 2. White-card feature grid on the off-cream ground 3. `#f6f3ec` soft band — community / featured glifs 4. White band — how-it-works walkthrough 5. Faint accent tint (`#efeaff` or `#e6f1fb`) for a single playful feature 6. Off-cream pricing 7. Off-cream footer The tints are subtle (a few percent of saturation) so the generated creative thumbnails and the green CTA always stay the loudest things on screen. ## 6. Shapes & Radius Scale | Tier | Value | Use | |---|---|---| | Micro | 2px | Inline code, tiny chips | | Small | 4px | Nested controls, segmented toggles | | Standard | 6px | **Buttons** — the signature Glif button radius | | Comfortable | 8px | Inputs, search fields | | Relaxed | 12px | **Default card** — feature & glif tiles | | Large | 16px | Modals, large feature panels | | Pill | 9999px | Badges, tags, avatars | Glif runs **noticeably tighter** than the rounded-friendly cohort (Lovable's 14px buttons / 24px cards). The 6px button corner is the signature decision: small enough to read workmanlike and tool-like, soft enough to avoid the hard-edged enterprise look. Cards stop at 12px — relaxed, never bubbly. ## 7. Depth & Elevation | Level | Treatment | Use | |---|---|---| | 0 | Flat — no shadow, no border | Hero text on canvas | | 1 | 1px hairline `#0000000f` | Resting cards, nav on scroll | | 2 | shadow-ambient `0 1px 2px rgba(14,14,16,0.05)` | Default cards / glif tiles | | 3 | shadow-standard `0 4px 12px rgba(14,14,16,0.08)` | Hovered cards, dropdowns | | 4 | shadow-elevated `0 12px 28px rgba(14,14,16,0.12)` | Popovers, menus | | 5 | shadow-deep `0 24px 56px rgba(14,14,16,0.16)` | Modals, command palette | ### Shadow Philosophy Glif's shadows are **neutral near-black at low alpha**, derived from the text color (`rgba(14,14,16,…)`) — no coloured or tinted shadows anywhere. Most cards rest on a single hairline plus the faintest ambient shadow; deeper elevation appears only on transient surfaces (menus, modals). The one coloured shadow in the system is `glow-green` on the focused primary CTA. The aesthetic is **flat-honest**: depth via tonal layering (pure-white cards on an off-cream ground) far more than via heavy elevation. ## 8. Interaction & Motion ### Easing Curves - **ease-standard** `cubic-bezier(0.4, 0, 0.2, 1)` — most state changes - **ease-emphasized** `cubic-bezier(0.2, 0, 0, 1)` — panel and modal entry - **ease-bounce** `cubic-bezier(0.34, 1.56, 0.64, 1)` — rare playful product moments (a generated result popping in) ### Duration Buckets - **fast** `150ms` — hover state shifts, button color change - **standard** `240ms` — card hover, dropdown reveal - **slow** `320ms` — modal entry, section reveal ### Per-Component Recipes - **Primary CTA hover**: bg `#2e9e4f` → `#28893f`, 150ms ease-standard; focus adds `glow-green` - **Card hover**: shadow ambient → standard + 1px translateY, 240ms ease-standard - **Glif tile hover**: reveal author + "Remix" overlay, 240ms; the generated image stays still - **Input focus**: border greys → green + 2px green ring, 150ms - **Link hover**: underline grow + color deepen to `#22742f` ### Page Transitions - Section reveals on scroll: fade-up 8px, 320ms slow ease-emphasized - Glif tiles cascade in: 50ms stagger, fade + 6px up - Generated-preview loops play subtly in feature sections (looping creative output) ### Reduced Motion Strategy Glif respects `prefers-reduced-motion: reduce`: - Hover lifts collapse to opacity-only - Scroll reveals become static (no fade-up) - Generation-preview loops freeze on a single representative frame - Stagger cascades replaced with a single instant render ## 9. Accessibility & A11y ### Contrast Pairs - text `#0e0e10` on bg `#fcfaf6`: **18.3** — AAA all sizes - text `#0e0e10` on surface `#ffffff`: **19.1** — AAA all sizes - text-muted `#55555a` on bg `#fcfaf6`: **7.2** — AAA body and large - on-brand `#fffaef` on brand `#2e9e4f`: **5.0** — AA body, AAA large — keep button labels at 14px 600 - text-soft `#86868c` on bg `#fcfaf6`: **3.6** — AA Large only — restrict to helper text ≥18px or decorative meta - brand `#2e9e4f` as link on bg `#fcfaf6`: **3.4** — pair with underline for non-size-dependent link affordance ### Focus Indicators - 2px solid `#2e9e4f` (brand green) with 2px offset, optionally backed by `glow-green` - Visible on every interactive: buttons, links, inputs, cards-as-links - Never `outline: none` without an equivalent replacement ### ARIA Patterns - Search / prompt field: `role="searchbox"` + `aria-label="Search glifs"` or "Describe what to create" - Glif preview tiles (cards-as-links): wrapped in `` with descriptive `aria-label` - Modal / command palette: `role="dialog"` + `aria-modal="true"` + focus trap - Theme toggle: `aria-pressed` reflecting current mode ### Keyboard Nav - Tab order matches DOM source order - ENTER submits the prompt / activates a tile; ESC closes overlays - ARROW keys navigate within tag groups and the command palette - All interactives reachable in a single tab cycle ### Screen Reader Hints - Generated preview images carry `alt` text describing the output (or the prompt that made it) - Decorative tonal blocks and looping previews are `aria-hidden="true"` - "New" / "Free" badges carry visible text plus appropriate `role` - The green CTA's purpose is in its visible label, not conveyed by color alone ### Reduced Motion - Honored across the site - Preview loops, cascades, and scroll reveals all disabled - Loading indicators respect reduced motion (no infinite spin; static or stepped state) ## 10. Responsive Behavior ### Breakpoints | Tier | Min-width | Use | |---|---|---| | mobile | 0–639px | Single-column, CTAs stack full-width | | tablet | 640–1023px | 2-column glif grid | | desktop | 1024–1279px | 3-column glif grid | | wide | 1280px+ | 4-column glif grid, container caps at 1280 | ### Touch Targets Minimum 44×44px on mobile. The primary CTA scales padding from `10px 16px` (desktop) toward `12px 20px` (mobile) for a comfortable 48px+ tap area; stacked CTAs go full-width. ### Collapsing Strategy - **Hero headline**: 54px → 40px → 32px down the cascade - **Glif grid**: 4-col → 3-col → 2-col → 1-col - **Top nav**: full link bar → hamburger drawer at <1024px - **Dual CTA row**: side-by-side → stacked full-width on mobile - **Section rhythm**: 96px → 64px → 48px ### Image Behavior - Glif preview images: aspect-ratio kept square or 4:3, `object-fit: cover` - Generated-output thumbnails are lazy-loaded below the fold - Decorative tonal washes are CSS-only (no image weight) ### Container Queries Glif uses container queries on the glif-tile grid — when a tile narrows below ~260px the caption strip wraps from a single row (avatar + title + tag) to a stacked layout. ## 11. Content & Voice ### Tone **Maker-friendly and plainspoken.** Glif talks to creative people who want to *make* something now — "the creative agent platform" rather than "an enterprise-grade orchestration layer". Second-person, concrete, low-jargon; the product's capability is shown through generated output, not described in adjectives. Confident but not hype-y, which matches the calm visual posture. ### Microcopy Patterns - **Button verbs**: "Get Started Free", "Start creating", "Remix this", "Run", "Browse glifs" - **Empty states**: "Nothing here yet — make your first glif." (Invitation, not apology.) - **Errors**: "That didn't generate — try tweaking the prompt." (Practical, creator-aware.) - **Success**: "Done." / a generated thumbnail appears. (Show, don't tell.) - **Loading**: "Generating…" (Verb in progress, sets expectation.) ### CTA Verb Conventions The primary CTA is consistently **"Get Started Free"** across hero, pricing, and footer — the "Free" is load-bearing for a creative-tool audience. Secondary actions describe a capability ("Image & Editing", "Browse glifs") rather than a generic "Learn more". ### Empty States Empty states are framed as invitations to create — a prompt field, a "make your first glif" nudge, or a remix suggestion — never a dead-end apology. The platform's whole pitch is "start making", so empty space is treated as an open canvas. ## 12. Dark Mode & Theming Glif ships **both light and dark**, toggled via a header button and persisted in `localStorage` (the theme-toggle audit confirms a text toggle, a Tailwind `dark` class, a `colorScheme` JS hook, and a persisted preference). **Light is the documented marketing default** — the near-white off-cream canvas with near-black Manrope is the face the brand leads with, because it lets the colourful generated output and the lone green CTA carry all the visual energy. In dark mode the canvas inverts to the same near-black used for light-mode text (`#0e0e10`), surfaces step up through `#18181b` / `#212125`, and body type becomes a warm near-white (`#f5f3ee`). The green brand is **lifted slightly** to `#34b059` so it stays legible and vivid on the dark ground, and the CTA label flips to near-black (`#0e0e10`) for contrast on the brighter green. The green's *role* never changes — it remains the single chromatic commitment in both themes. ```yaml # dark-mode token deltas (see frontmatter colors.dark) bg: '#0e0e10' # canvas = light-mode text color surface: '#18181b' text: '#f5f3ee' # warm near-white brand: '#34b059' # green lifted for legibility on dark on-brand: '#0e0e10' # near-black label on the brighter green border: '#ffffff14' # 8% white hairline ``` ## 13. Lineage & Influences Glif sits in the 2024–2025 generation of creative AI tooling that reframed "AI workflow builder" as a *maker's playground* rather than an enterprise pipeline. Its visual lineage is editorial and Swiss-adjacent: a near-monochrome, high-contrast type system (near-black on near-white) where a single accent colour does all the chromatic work. That single-accent-on-neutral-canvas discipline is the same instinct behind Stripe's early sites and Vercel's monochrome-plus-one approach, but Glif warms the neutral toward cream and picks an unexpected green rather than the default blue or black. Within its own cohort, Glif rejects the two loudest house styles — it does *not* go dark-terminal like Cursor, and it does *not* go gradient-maximalist like Lovable. Instead it leans on Manrope's geometric-humanist warmth and the legibility of a documentation-grade type system to keep the creative output (the colourful, varied, generated thumbnails) as the most interesting thing on the page. The chrome is quiet so the content can be loud. The result reads closer to a well-made product blog or a modern docs site than to a hype-driven launch page — a deliberate "studio, not console" posture. **Named Influences** - **Manrope** ([manropefont.com](https://manropefont.com)) — The geometric-humanist sans that defines the entire type voice, used for display and body alike - **Stripe** ([stripe.com](https://stripe.com)) — Clean light canvas with a single confident accent and high-legibility type as the brand's restraint - **Vercel** ([vercel.com](https://vercel.com)) — Monochrome-plus-one discipline; neutral ground letting one accent and the content carry the page - **Linear** ([linear.app](https://linear.app)) — Tight radii and hairline-bordered cards without heavy elevation - **Replit** ([replit.com](https://replit.com)) — Maker-first, approachable creative-tooling posture aimed at builders rather than enterprises ## 14. Do's and Don'ts ### Do - Keep the green CTA (`#2e9e4f`) as the single loud element — it carries the whole page's energy - Set both display and body in Manrope; drive the hierarchy with size and weight, not family contrast - Hold the hero headline at ~54px / 600 — heavier weight tips it toward shouting - Set body at 16px Manrope 500 — the slight weight reads confident on the warm canvas - Warm the canvas to off-cream (`#fcfaf6`) rather than sterile pure white at the page level - Put pure-white cards (`#ffffff`) on the off-cream ground for a subtle lift without heavy shadows - Keep button corners tight at 6px and cards at 12px — workmanlike, not bubbly - Use neutral near-black shadows at low alpha; reserve the one coloured glow for the focused CTA - Let the generated creative output be the visual richness — keep the chrome quiet - Use near-black `#0e0e10` for text, never pure `#000`, to keep the contrast warm ### Don't - Add a second loud brand colour or gradient the green — one green, one job - Apply green to body text, dividers, or interior chrome; it lives on the CTA, focus ring, and success - Push the hero headline to 700 weight or 80px on standard pages — that's reserved for rare campaigns - Round buttons past ~6px or cards past 12px; the tight radius is part of the workmanlike read - Use a sterile pure-white page background — the off-cream warmth is load-bearing - Tint or colour the shadows (except the single green CTA glow) — depth here is honest neutral - Introduce a second display typeface; Manrope carries everything - Crowd sections below ~64px vertical rhythm — the editorial calm depends on the air - Bury the "Free" in the primary CTA copy — "Get Started Free" is the load-bearing verb - Let chrome compete with the generated thumbnails for attention ## 15. Agent Prompt Guide ### Quick Color Reference ``` bg: #fcfaf6 (near-white off-cream) surface: #ffffff (pure-white card) text: #0e0e10 (near-black) text-muted: #55555a brand: #2e9e4f (green CTA) brand-hover: #28893f on-brand: #fffaef (warm off-white label) accent-warm: #fffbf6 (secondary button surface) brand-soft: #e6f4ea (badge / selected tint) border: #0000000f (6% black) ``` ### Example Component Prompts 1. *"Create a hero in Glif style: off-cream background (#fcfaf6), near-black Manrope headline at 54px / 600 weight tracked -0.018em reading 'The creative agent platform', 18px Manrope 400 subhead in #55555a, then a button row — a green primary (#2e9e4f, #fffaef label, 6px radius, 10×16px padding, Manrope 600 14px) reading 'Get Started Free' beside a warm off-white secondary (#fffbf6, #0e0e10 label, 1px #0000001f border, 6px radius)."* 2. *"Design a Glif glif-tile grid: 4-column on desktop, each tile a pure-white card (#ffffff) with 12px radius, 1px #0000000f border, faint ambient shadow (0 1px 2px rgba(14,14,16,0.05)), a generated square preview image filling the top, and a 12px caption strip with an avatar, Manrope 600 14px title, and a neutral pill tag (#f6f3ec bg, #55555a text); hover reveals a green 'Remix' link."* 3. *"Build a primary CTA in Glif style: #2e9e4f green background, #fffaef warm-off-white Manrope 600 14px label saying 'Get Started Free', 6px radius, 10×16px padding, hover darkens to #28893f, focus adds a 2px green ring with a soft green glow (rgba(46,158,79,0.18))."* 4. *"Compose a Glif feature card: pure-white bg, 12px radius, 24px padding, 1px #0000000f border, Manrope 600 24px title in #0e0e10, Manrope 500 16px body in #0e0e10, and a small soft-green badge (#e6f4ea bg, #22742f text, pill radius) reading 'New' at the top-left."* 5. *"Create a Glif prompt field: pure-white bg, 1px #0000001f border, 8px radius, 8×12px padding, Manrope 500 16px text in #0e0e10, placeholder 'a watercolor fox in a snowstorm…' in #86868c, with an inline green 'Run' button on the right; on focus the border turns green (#2e9e4f) with a 2px green ring."* 6. *"Design a Glif top nav: 64px height, off-cream bg (#fcfaf6) with backdrop blur on scroll, near-black Manrope wordmark left, a center link cluster (Explore / Pricing / Docs in Manrope 500 14px #55555a), and a green pill-adjacent CTA right (6px radius) reading 'Get Started Free'; a 6% black hairline appears under the bar on scroll."* ### Iteration Guide 1. **Start by subtracting.** If the design feels too loud or AI-hype, strip color until only one green CTA remains. Glif's identity is restraint plus a single confident accent. 2. **Warm the canvas.** If the page background is pure `#ffffff`, shift to off-cream `#fcfaf6` and make the cards the pure-white element — the inversion is what gives Glif its subtle lift. 3. **Tighten the corners.** If buttons land at 10–14px or cards at 16–24px, pull buttons to 6px and cards to 12px. Glif runs deliberately tighter than the rounded-friendly cohort. 4. **One green, one job.** If green has leaked onto text, dividers, or a second button, pull it back to the primary CTA, focus ring, and success state only. 5. **Set everything in Manrope.** If a second display face has crept in, remove it — the hierarchy comes from size and weight within one family. 6. **Add weight to body.** If body type is Manrope 400, bump to 500 — the live site runs the heavier body for a touch more confidence on the warm ground. 7. **Keep shadows honest.** If a card has a coloured or heavy shadow, swap to a neutral near-black ambient (`rgba(14,14,16,0.05)`); reserve the only coloured glow for the focused green CTA. 8. **Let the output be the color.** If feature sections feel chromatically thin, don't add brand color — add generated creative thumbnails. The content is the palette; the chrome stays quiet. --- *Theme-toggle audit: score=9, signals=[theme-toggle-button-text, tailwind-dark-class, colorScheme-js, localStorage-theme]*