AI Prompt Studio - Intelligent Prompt Library

# Lithic — Style Reference > Warm marble briefing room for card architects — confident, earthy, deliberate. **Theme:** light Lithic operates as a warm briefing room for card-issuing architects: cream marble surfaces, a single confident sans-serif, and three deliberate accent colors that each carry distinct semantic weight. The page alternates a deep black hero — a vault-like stage for physical card imagery and concentric arc patterns — with generously spaced warm-neutral sections where orange, violet, and green act as functional punctuation rather than decoration. Components feel editorial: thin hairline borders, 24px rounded corners, deep floating shadows on elevated cards, and cream-tinted surfaces that stack into a quiet hierarchy. Density is comfortable, rhythm is built from 8px and 24px increments, and the single Monument Grotesk family at weights 400/500 is allowed to carry every tonal shift from whisper to emphasis through size and tracking alone. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ember Orange | `#ff6600` | `--color-ember-orange` | Primary action fill on CTA buttons, contact links, and key navigation entry points — warm saturated orange against cream and black grounds commands without feeling aggressive | | Architect Violet | `#5c2999` | `--color-architect-violet` | Decorative stroke and border accent for feature panels, concentric arc illustrations, and iconography — deep saturated violet that frames content without competing with orange CTAs | | Lichen Green | `#00cc88` | `--color-lichen-green` | Green outline accent for tags, dividers, and focused UI edges. Use as a supporting accent, not as a status color | | Sandstone | `#aa8855` | `--color-sandstone` | Muted warm stroke and illustration tone used in decorative arc patterns, card imagery borders, and secondary outline accents |

# Nornorm — Style Reference > Scandinavian showroom, cobalt punctuation — a white-walled furniture gallery where one deep blue stroke cuts through warm bone and ink. **Theme:** light Nornorm's visual system is a near-monochromatic Scandinavian showroom: a white canvas warmed by a bone surface, a single deep cobalt as the only chromatic voice, and a custom geometric typeface (Lunar) tracked tight at -0.03em across every size. The discipline is rationed color — the cobalt appears only on the logo, the primary CTA, and the active state, everything else lives in grayscale. Photography carries the brand's emotional weight: full-bleed editorial interiors, warm leather textures, sculptural paper-craft vignettes, and living office scenes do the storytelling so the interface can stay quiet. Components are flat, pill-shaped, and borderless — a cobalt-filled button next to a dark ghost button, no shadows, no gradients, no decoration beyond generous whitespace and a single accent. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Canvas White | `#ffffff` | `--color-canvas-white` | Page background, card surfaces, button text on cobalt, nav background, image backgrounds | | Bone | `#f1efe9` | `--color-bone` | Warm off-white surface for section bands, feature card panels, and soft contrast zones against pure white | | Ash | `#ececec` | `--color-ash` | Subtle elevated surface and neutral button fill for low-emphasis controls | | Stone | `#6a6a6a` | `--color-stone` | Secondary body text, helper copy, nav muted labels, and dividers — the warm mid-gray that gives body text hierarchy without competing with the brand accent |

# OpenServ — Style Reference > Bright blueprint on frosted glass **Theme:** light OpenServ operates in a bright, almost gallery-like visual register: pure white canvas, hairline-bordered surface cards, and two high-contrast typographic voices — a geometric grotesque for UI and a whisper-light transitional serif for headlines and section moments. Color is rationed: a single vivid violet (#5f79ff) carries every interactive moment, while a saturated mint (#01fe93) flashes only on success, highlights, and a thin gradient stripe at section boundaries. The interface is deliberately unweighted — no drop shadows on content, no decorative gradients, no emoji-grade illustration. Rounded geometry at 16px for surfaces and 100px for action buttons gives the whole product a soft, optimistic feel without sliding into the rounded-everything SaaS template. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Signal Violet | `#5f79ff` | `--color-signal-violet` | Primary action fill, active nav state, icon accent strokes, focused border — the single chromatic anchor that makes buttons feel switched on against the white canvas | | Mint Pulse | `#01fe93` | `--color-mint-pulse` | Green action color for filled buttons, selected navigation states, and focused conversion moments | | Pure White | `#ffffff` | `--color-pure-white` | Page background, card surface, button text on violet fill, inverted surface for nav float | | Ink Black | `#000000` | `--color-ink-black` | Primary text, heading text, hairline borders, icon strokes, footer ink |

# NEVERHACK — Style Reference > encrypted command terminal on cold marble **Theme:** light NEVERHACK operates in a stark, high-trust sovereign-cybersecurity register: near-white canvas, near-black navy type (#0a0f1f), and a single electric violet (#6b2bea) that activates only for AI surface. Hierarchy is carved through weight and scale, not decoration — the 72px display headlines paired with a quiet 11–17px body voice create a clinical, operator-grade tension. Components feel like equipment, not marketing: pill-shaped controls, hairline borders on cool gray (#e5e7eb), and a distinctive purple-tinted shadow system (rgba(40,30,93,*)) that makes every elevated surface feel on-brand rather than generic. A muted signal red (#dc2626) is reserved exclusively for critical/emergency semantics — CERT, crisis, hazard — so it never gets confused with the violet brand voice. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Sovereign Ink | `#0a0f1f` | `--color-sovereign-ink` | Primary text, headlines, nav, core UI — near-black with a barely-perceptible blue cast that separates it from pure black and lets violet accents feel native | | Signal White | `#ffffff` | `--color-signal-white` | Card surfaces, elevated panels, button text on dark fills | | Mist Surface | `#f6f7fc` | `--color-mist-surface` | Page canvas, soft card backgrounds, subtle wash sections | | Cool Hairline | `#e5e7eb` | `--color-cool-hairline` | Borders, dividers, input outlines, structural separators — the single neutral that holds the whole UI together |

# Lamanna — Style Reference > Neon circus tent on a Naples sidewalk **Theme:** light Lamanna's is a maximalist Italian-bakery visual system built on screaming color confidence: a saturated orange-red canvas, sunshine-yellow display type, and a blush-pink secondary surface that act as a three-band color rhythm across the page. Type is the loudest voice — an ultra-wide, squished-black display face (Right Grotesk Spatial) set at near-zero line-height, so headlines read as massive solid blocks rather than airy typographic statements. Layout is full-bleed, edge-to-edge, with no max-width containment; sections are separated by hard color changes rather than whitespace. Decorative energy (zigzags, pointing hands, starburst badges) is integral to the brand — the system expects graphical accents everywhere rather than clean minimalism. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Anger Orange | `#ff4100` | `--color-anger-orange` | Primary brand canvas and surface fill — hero backgrounds, section dividers, and headline text. The entire site is painted in this color; restraint is not the goal | | Sun Yellow | `#ffc700` | `--color-sun-yellow` | Display type, starburst badges, and decorative graphic fills. Sits on top of orange sections for maximum contrast and excitement | | Royal Blue | `#1573dd` | `--color-royal-blue` | Outlined link and icon border color — used as a chromatic accent stroke for interactive elements and decorative icon outlines against the orange field | | Charcoal | `#292a2c` | `--color-charcoal` | Primary text and structural border color. Near-black but slightly warm — softer than pure black, used for body copy, dividers, and image borders |

# Krepling — Style Reference > Quiet white atelier with one violet spark **Theme:** light Krepling's design system is a near-monochrome canvas where black text and white surfaces carry the interface, and a single vivid violet (Bolt Violet) provides the only chromatic voice for actions, links, and interactive states. The layout breathes: generous whitespace, a comfortable density, and section rhythm built from large typographic jumps (16px → 80px) rather than colored bands. Surfaces are flat — borders and subtle background tints (#f1f1f1) define elevation; shadows are essentially absent. Rounded geometry is consistent (8px for cards/buttons, 14px for larger containers), reinforcing a soft, approachable feel. The system is counterweighted by playful 3D-rendered decorative objects in saturated hues — these are pure atmosphere, never UI tokens. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Bolt Violet | `#b154f9` | `--color-bolt-violet` | Filled CTA backgrounds, link borders, active tab indicators — the sole chromatic signal in the system | | Ink Black | `#000000` | `--color-ink-black` | Primary text, headings, icon strokes, nav labels, all hairline borders and dividers | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, button text on filled CTAs, reversed text in dark zones | | Mist Gray | `#f1f1f1` | `--color-mist-gray` | Alt-surface tint for sub-sections, secondary card backgrounds, hover wash |

# WHOOP — Style Reference > Performance laboratory at midnight — clinical white lab benches beneath a black theatrical void, one violet pulse of electricity. **Theme:** mixed WHOOP operates on a high-contrast split-canvas system: full-bleed black theatrical heroes alternate with clinical white content sections, creating a rhythm that mimics the alternation between effort and recovery. Typography is the dominant voice — oversized Proxima Nova display type at 120px with aggressive negative tracking carries the brand, while body copy stays compact and neutral. A single vivid violet (#4a53ff) acts as the lone chromatic accent against an otherwise achromatic palette, appearing only on primary actions and the announcement bar. Components are large, confident, and rounded: 24px-radius cards, fully pill-shaped buttons, and photographic overlays with heavy text treatment replace the typical SaaS card grid. The result feels less like a product page and more like a premium performance lab at night — scientific, dramatic, and focused on data over decoration. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Pulse Violet | `#4a53ff` | `--color-pulse-violet` | Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color | | Obsidian | `#000000` | `--color-obsidian` | Primary text on light surfaces, dark hero/section backgrounds, filled neutral buttons, icon strokes | | Carbon | `#191919` | `--color-carbon` | Secondary dark surface (footer band, alternating black sections), heading text on light surfaces | | Paper White | `#ffffff` | `--color-paper-white` | Primary page canvas, card surfaces on dark sections, text on dark backgrounds, filled white pill buttons |

# The1 — Style Reference > building-scale typography on painted concrete **Theme:** light The1 is a typographic architecture system: a neutral concrete canvas (d9d9d9) beneath display type so large it becomes wall structure. The brand speaks through KH Teka set at architectural scale with crushed line-heights of 0.70–0.80 and negative tracking down to -0.06em, so letters collide vertically and horizontally to form facades rather than sentences. Four vivid paint colors — Green, Pink, Yellow, Red — function as a place-identity system, each one assigned to a property or moment and deployed as full-bleed color blocks behind contained photography. The interface is ruthlessly flat: no shadows, no gradients, no elevation, no decorative chrome. Navigation is a wordmark, a text line, and a single dark pill. Hairline near-black borders do the structural work that cards and shadows do elsewhere. A designer rebuilding this system should treat type as the primary surface, color as wayfinding, and the canvas as an empty gallery wall the type inhabits. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | The Green | `#027b49` | `--color-the-green` | Full-bleed identity block for The Green property and any place or section it owns — deep forest green reads as architectural paint, not decoration | | The Pink | `#f19ec8` | `--color-the-pink` | Red wash for highlight backgrounds, decorative bands, and soft emphasis behind content | | The Red | `#fa4d43` | `--color-the-red` | Full-bleed identity block and dramatic section background — vermillion red carries the most visual weight and anchors expanded menu states and signature moments | | The Yellow | `#fbb833` | `--color-the-yellow` | Yellow wash for highlight backgrounds, decorative bands, and soft emphasis behind content |

# Home page | Impossible Foods — Style Reference > Blood-red punk poster in velvet darkness. A custom condensed display face bleeds across a wine-dark canvas while single-color red CTAs punch through like a price tag on a butcher's chalkboard. **Theme:** dark Impossible Foods runs a dark, wine-dark canvas flooded with blood-red accents — the visual register of a punk-rock manifesto printed on butcher paper. Typography is the loudest voice: display text is enormous, brutally tight (line-height 0.73), and slightly opened in tracking, shouting product names like 'STEAK (FROM PLANTS)' in a custom condensed sans that fills the viewport. The single red (#e10600) carries all action and emphasis, with a soft blush pink (#ffc7c6) providing tonal relief and a near-black burgundy (#4f0423/#260212) for depth. Surfaces are flat, borders are crisp black hairline strokes, and food photography is presented in irregular mask-cut shapes that float around the type rather than inside conventional frames. The overall rhythm is aggressive but disciplined: massive display moments punctuated by compact product grids and pill-shaped toggle controls. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Velvet Wine | `#260212` | `--color-velvet-wine` | Page canvas and deepest section background — the floor everything sits on | | Burgundy Stage | `#4f0423` | `--color-burgundy-stage` | Section and card surfaces, slightly lifted from the canvas to separate bands of content | | Impossible Red | `#e10600` | `--color-impossible-red` | Primary action buttons, active toggles, headline accents, icon emphasis — the single chromatic signal that commands attention | | Blush Highlight | `#ffc7c6` | `--color-blush-highlight` | Soft secondary text, pill toggles in default state, link hover, tonal counterpoint to the aggressive red |

# Grain — Style Reference > frosted glass desk with a single green pen **Theme:** light Grain's design system is a quiet, near-monochrome productivity canvas where a single confident green does all the talking. The interface behaves like a high-end workspace app: spacious white surfaces, hairline borders, and soft drop shadows create depth without weight, while Inter handles nearly all UI text with measured, slightly tightened tracking. Color is rationed — the vivid green appears only on the primary download action and as subtle background washes, never as decoration. Component density is comfortable but information-rich: cards feel like documents rather than buttons, and product screenshots float in the page with generous radius and minimal frame. The distinctive choice is using Poppins weight 600 for section display titles against an Inter body, creating a typographic contrast where the heading style shifts register from the rest of the page. Overall the system feels like a well-organized analyst's desk: precise, restrained, and engineered for serious work. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Forest Ink | `#009959` | `--color-forest-ink` | Primary action — filled download buttons, outlined CTAs, and active nav indicators carry this deep botanical green that reads as decisive without aggression | | Vine | `#00b96c` | `--color-vine` | Soft surface accent and gradient wash for feature sections — the mid-tone green that fades into the white canvas as ambient atmosphere | | Neon Sprout | `#00ff95` | `--color-neon-sprout` | Decorative illustration fill and gradient endpoint — appears only inside brand graphics, never on UI controls | | Ice Blue | `#3de1ff` | `--color-ice-blue` | Decorative illustration fill for brand mark and app icon glyphs — companion to Neon Sprout in the visual identity |

# Navigate — Style Reference > Oversized sticker pack pinned to a chalkboard — chunky grotesque type, pill-everything, and five candy-colored icon tiles repeated like a logo lockup. **Theme:** mixed Navigate runs on a max-volume, anti-corporate visual language: ultra-bold grotesque display type at 80–165px slams against pitch-black canvases, warm cream, and full-bleed orange section walls. The interface is deliberately sparse — one floating pill nav at the top, one lime-green accent repeated as the only CTA color, and a set of five chunky colored icon tiles acting as the brand's visual anchor across every section. Body type stays compact and neutral (Aeonik 400–700) so the chunky display face can dominate without competition; spacing is generous but tightly ruled by 1000px pill radii that govern every interactive surface. Sections alternate as full-bleed color bands rather than cards on a canvas, making the page feel like printed posters stacked vertically. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Pitch Black | `#141414` | `--color-pitch-black` | Page canvas for dark sections, dark text on cream sections, FAQ pill backgrounds, navigation shell | | Warm Cream | `#fdf9f0` | `--color-warm-cream` | Hairline borders, dividers, input outlines, and card edges on light surfaces. Do not promote it to the primary CTA color | | Charcoal 900 | `#232323` | `--color-charcoal-900` | Secondary dark surface, subtle elevation above #141414, heavier heading text | | Bone Gray | `#eeeeee` | `--color-bone-gray` | Hairline dividers on cream, low-contrast borders, muted separators |

# Wealthsimple — Style Reference > Cashmere-lined vault with gallery lighting **Theme:** mixed Wealthsimple operates as an editorial boutique masquerading as a fintech: a warm, near-monochrome canvas of paper-cream and graphite, where large Tiempos serif display type shares the page with a quiet geometric sans for body and UI. The signature is the juxtaposition — a fashion-magazine serif headline sitting beside pill-shaped dark buttons, a hero that swaps to a warm bronze-dark field to stage a sculptural 3D form, and illustrations that read as gallery objects rather than product screenshots. Color is almost entirely suppressed in chrome; warmth comes from the off-white stack (#fcfcfc → #faf8f5 → #e4e2e1) rather than from accents. Components stay low and weightless: hairline dividers, 100px-soft-rounded cards, pill buttons, no drop shadows, no gradients. Density is comfortable with long reading lines and generous 48px section gaps — the design trusts typography and whitespace to do the persuading. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Graphite Ink | `#32302f` | `--color-graphite-ink` | Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color | | Paper White | `#fcfcfc` | `--color-paper-white` | Default page canvas, card surfaces, button text on dark fills — the brightest neutral, used for main reading surfaces | | Linen Cream | `#faf8f5` | `--color-linen-cream` | Warm alternate section background, hero warm-tones, subtle washes — gives the page its boutique warmth and distinguishes sections from flat white | | Fog Veil | `#f1f0f0` | `--color-fog-veil` | Quiet elevated surfaces, subtle hover washes, soft surface tints for inset regions |

# Letters — Style Reference > morning clinic under open sky — a sterile white desk beneath a wash of soft blue, dotted with surgical-blue instruments. **Theme:** light Letters is a medical letterwriting tool that opens with an open-sky gradient hero — a soft blue atmospheric band that sets a calm, clinical tone before dropping into a clean white workspace. The system is 99% monochrome: pure white canvas, near-black text (#070709), pill-shaped dark CTAs, and 18px rounded cards floating on hairline shadows. One vivid blue (#2597d0) is reserved for functional punctuation — icons, micro-graphics, waveform players — never for buttons or large fills. Typography leans on Open Runde, a geometric humanist sans with aggressive negative tracking at display sizes (-0.04em at 80px) that tightens headlines into confident blocks. Components feel medical-instrument light: thin borders, generous card padding, pill buttons, and a reserved use of elevation that lets the sky hero do the emotional work. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#070709` | `--color-obsidian` | Primary text, filled CTA buttons, and dark UI surfaces — near-black chosen over pure #000 to soften contrast against white canvas | | Paper White | `#ffffff` | `--color-paper-white` | Page background, card surfaces, and button text — the primary canvas across all sections below the hero | | Cloud Gray | `#f5f5f5` | `--color-cloud-gray` | Secondary card surfaces and section backgrounds — separates feature blocks from main canvas | | Sky Tint | `#d7e6f5` | `--color-sky-tint` | Card box-shadow tint and subtle blue-toned surface — keeps elevation feeling atmospheric rather than gray |

# OHZI Interactive Studio / Dive into digital magic. — Style Reference > A glowing cube suspended in a dark gallery **Theme:** dark OHZI is a dark immersive void-gallery: a near-black expanse with a single luminous 3D object suspended in the center, reflected on a wet floor. The interface is deliberately skeletal — a logo, a hamburger, a headline, a ghost button — so the 3D render carries all the visual energy. Typography is exclusively Unbounded set with generous positive tracking, giving every line of text a wide, monumental, almost cinematic feel that whispers rather than shouts. Color is absent by design: the palette is pure grayscale so the 3D scene provides the only chromatic moment, making it feel like looking through a portal. Controls are thin-bordered, sharp-cornered, and translucent — they frame the experience rather than intrude on it. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Pure White | `#ffffff` | `--color-pure-white` | Primary text, icon strokes, hairline borders, outlined button frame — the only foreground color on the dark canvas, used at full opacity for headlines and at 1px hairline weight for UI structure | | Void Black | `#000000` | `--color-void-black` | Deep background fill, SVG icon bases — the absolute floor of the visual hierarchy, used for full-bleed canvas and asset fills | | Carbon | `#111111` | `--color-carbon` | Heading text on light sections, deep surface layer — near-black with a whisper of warmth, used where #000000 would feel too flat | | Fog | `#f5f5f7` | `--color-fog` | Secondary text, subtle panel surfaces, light-section borders — cool-tinted off-white that softens transitions on inverted sections |

# Evervault — Style Reference > Encrypted vault behind ultraviolet light — a dark crypt where one violet beam reveals everything. **Theme:** dark Evervault is a nocturnal crypto-vault interface: an almost-black canvas pierced by ultraviolet light, where every surface feels like brushed obsidian. The palette is 95% achromatic, leaning on cool gray-violet tints (#dfe1f4, #ececfb) rather than pure white, with a single vivid violet (#b88cff) acting as the encryption key — it appears on links, icons, gradient washes, and a glowing portal in the hero. Typography is the brand's quiet flex: Roobert for headlines with aggressive negative tracking that pulls characters into each other, Inter for body/UI at a comfortable density, and Roboto Mono for code that signals developer-first credibility. Components are floating and layered — a pill-shaped nav bar, 12–16px-radius cards with inset shadow stacks, pill CTAs — and the layout alternates between deep canvas and luminous gradient bands to create a sense of moving through encrypted chambers. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Void Canvas | `#010314` | `--color-void-canvas` | Primary page background, hero canvas — near-black with a blue-violet undertone, not a true neutral | | Obsidian Surface | `#171825` | `--color-obsidian-surface` | Elevated panels, nav bar, secondary cards — one step up from canvas, reads as a subtle surface tier | | Slate Layer | `#2a2b3a` | `--color-slate-layer` | Card backgrounds, input fields, inset panels — the main surface level for content containers | | Carbon Border | `#343543` | `--color-carbon-border` | Hairline borders, dividers, card edges — barely visible structural lines on dark surfaces |

# Voiceflow — Style Reference > editorial whiteboard under daylight — serif whispers, pill controls glow blue. **Theme:** light Voiceflow operates as an editorial product canvas: a generous near-white surface where a whisper-weight serif (Tiempos Headline at 300) carries the voice and a humanist sans (Selecta) handles the machinery. The system is overwhelmingly achromatic — warm off-whites, graphite text, hairline borders — with a single vivid blue (#397dff) that acts as the 'on' switch for primary actions, and a burnt orange (#f55c15) that paints decorative strokes, badge outlines, and icon accents. Components are pill-shaped at the interactive level (999px buttons, 100px nav pills) and softly rounded at the surface level (20px cards), creating a language where controls feel touched and surfaces feel held. The overall rhythm is spacious, confident, and editorial — headlines breathe at 56–64px while body text sits at 16px with generous tracking, producing a magazine-meets-product aesthetic. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Pure Canvas | `#ffffff` | `--color-pure-canvas` | Page background, card surface, image mask — the baseline white everything else sits on | | Bone | `#f5f5f4` | `--color-bone` | Alternate section background, subtle warm-off-white band between content blocks |

# Headspace — Style Reference > Sunlit wellness retreat on warm paper **Theme:** light Headspace lives in a sunlit wellness retreat on warm paper: a cream canvas (#f9f4f2) that breathes, bold rounded surfaces, and tightly tracked headlines that feel confident and calm rather than clinical. The palette is predominantly achromatic with a warm dark text scale (#2d2c2b, #44423f) that never goes cold-black on body copy, and color is deployed as deliberate emotional punctuation — Headspace yellow for energy, electric blue for the primary signup, and a deep violet for contemplative moments. Radii are generous: 16-32px on cards and feature blocks, 8px on buttons and inputs, and 9999px (800px in tokens) for pills and circular elements, giving every surface a soft, huggable quality. Typography is a single custom geometric sans (Headspace Apercu) at weights 400/500/700 with negative letter-spacing that tightens as sizes scale up, producing headlines that feel sculpted rather than shouted. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Page Cream | `#f9f4f2` | `--color-page-cream` | Page background, large section surfaces — the warm paper tone that sets the entire mood | | Pure White | `#ffffff` | `--color-pure-white` | Card surfaces, elevated panels, input fills, inverse text on dark buttons | | Charcoal Ink | `#2d2c2b` | `--color-charcoal-ink` | Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color | | Graphite | `#44423f` | `--color-graphite` | Secondary text, muted UI labels, icon strokes, nav links |

# ProtoPie — Style Reference > sunlit prototyping workshop with violet ink — a designer's clean white drafting table where one electric purple pencil marks every interactive idea. **Theme:** light ProtoPie uses a sunlit prototyping-workshop language: a white canvas, near-black ink, and one confident violet that functions as the only chromatic voice in the system. Display type is set in Gilroy at generous sizes (48–62px) with weight 700, giving headlines a friendly, designer-made feel rather than a corporate one. The interface stays predominantly monochrome; violet appears as functional accent on buttons, links, icons, and active states, never as decorative tint. Components feel like tools in a studio tray: 16px card radius, 12px button radius, pill-shaped tags, and a single near-imperceptible shadow that lifts without announcing itself. Backgrounds are white with whisper-soft radial gradient washes in pastel teal and lavender, creating depth that never competes with content. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Electric Violet | `#8169ff` | `--color-electric-violet` | Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color | | Deep Iris | `#6d4ff0` | `--color-deep-iris` | Pressed and hover state of Electric Violet — used for filled-element interaction feedback and slightly deeper icon strokes | | Soft Lilac | `#c9bfff` | `--color-soft-lilac` | Light accent wash — decorative gradient stops, soft tag backgrounds, muted selected states, and atmospheric color bleeds at section edges | | Ink Black | `#000000` | `--color-ink-black` | Primary text, hero headlines, high-contrast icons. The strongest typographic color, reserved for content the eye should land on first |

# ElevenLabs — Style Reference > Parchment command terminal — warm paper surfaces beneath monochrome controls, with ambient color appearing only as sound made visible. **Theme:** light ElevenLabs uses a warm-white paper surface system — off-white canvas (#fdfcfc) layered with parchment cards (#f5f3f1, radius 20-24px) that feel tactile without being decorative. The typographic personality splits sharply: Waldenburg weight 300 at negative tracking for all display headlines (anti-convention for a tech brand — authority through restraint, not mass), and Inter for everything functional. The only color in an otherwise achromatic system is used in SVG decoration (vivid violet #0447ff and vivid orange #ff4704), appearing as ambient glowing orbs in voice-category visuals — color as sound made visible, not as UI state. All interactive affordances are monochrome: black pill buttons, white pill buttons with hairline borders, ghost text links — the brand refuses to use color as a call to action. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Parchment White | `#fdfcfc` | `--color-parchment-white` | Page canvas — the dominant background behind all sections and nav | | Warm Sand | `#f5f3f1` | `--color-warm-sand` | Card surfaces, feature tiles, section backgrounds — one step warmer and darker than canvas | | Ash Border | `#e5e5e5` | `--color-ash-border` | All hairline borders on buttons, inputs, cards, nav items, dividers | | Midnight Ink | `#000000` | `--color-midnight-ink` | Primary text, headline text, filled pill button background, icon fills |

# Jasper — Style Reference > serif headlines over a pastel tile mosaic **Theme:** light Jasper reads like an editorial print magazine that learned to ship software. The canvas is pure white, the type is a high-contrast serif (Feature) set tight and tall, and the only structural color is a near-black midnight navy that does duty as both ink and filled button surface. Around that disciplined spine, the design opens up a toy box: pastel card backgrounds in coral, mint, sky, butter, and lilac, each carrying flat geometric illustrations on faint grid textures. The rhythm is generous — breathing room between sections, small-caps eyebrow labels above each headline, and two-button CTAs that pair a quiet outline with a confident filled action. Everything else stays out of the way: no shadows, no gradients, no decorative chrome, just ink, paper, and the occasional pop of color as functional punctuation. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Midnight Ink | `#00063d` | `--color-midnight-ink` | Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color | | Signal Coral | `#fa4028` | `--color-signal-coral` | Accent links, inline emphasis, illustrative highlights — vivid warm coral that cuts through the pastel system | | Merlot | `#5a003c` | `--color-merlot` | Decorative icon accent, tag text, secondary brand touch — deep wine magenta used sparingly for typographic and icon moments | | Forest Floor | `#103a00` | `--color-forest-floor` | Green supporting accent for decorative details and low-frequency emphasis. Use as a supporting accent, not as a status color |

# Pally — Style Reference > violet signals in a dark void. A single white pill floats in a near-black observatory, with the product's purple glass UI glowing softly below like an instrument panel lit from within. **Theme:** dark Pally's marketing site is a near-monochrome dark canvas where the product is the only source of color. The page reads as a quiet, editorial space: a deep navy void, white display type set in a custom grotesque with aggressive negative tracking, and a single white pill CTA that functions as the lone bright object on screen. Color is entirely deferred to the in-app screenshot — violet glass panels, indigo chat bubbles, pink-to-purple gradient halos behind floating platform icons — which makes the product UI itself feel like the brand's chromatic moment. The layout favors centered compositions, generous negative space, and minimal section count: one hero, one animated platform constellation, one social proof strip. Every component is reduced to its essential silhouette — pill nav, pill button, flat cards, organic glowing blobs — and the absence of shadows, borders, or decorative chrome is the point. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Deep Navy Void | `#161e29` | `--color-deep-navy-void` | Page canvas, hero background, full-bleed sections — the near-black stage on which every other element sits | | Bone White | `#fefcfb` | `--color-bone-white` | Primary text, pill CTA fill, highlight strokes — the only fully bright object against the dark canvas | | Warm Card Stock | `#eae5dd` | `--color-warm-card-stock` | Isolated card or panel surface when a warm off-white is needed against the dark void | | Ink Black | `#1e1d1d` | `--color-ink-black` | Deep text and border color for headings and body copy, warm-tinted alternative to pure black |

# Break Maiden — Style Reference > Oversized white type carved into a black gallery wall. A single condensed display face at 150px sits in a sea of negative space, surrounded by product photographs arranged like a magazine spread. **Theme:** dark Break Maiden operates as a black-canvas portfolio for a creative studio: pure black surfaces, oversized white display type, and product imagery presented like a curated print spread. The visual system is deliberately monochrome and typographically aggressive — a single custom display face (Martin) at near-billboard scale does all the emotional work, while a restrained neo-grotesque (America) carries navigation, body, and captions. The page is a gallery: project tiles sit on an irregular three-column grid with generous gutters, letting the product photography carry the color that the interface refuses to. There are no buttons, gradients, shadows, or decoration in the chrome itself — the system derives its identity from the contrast between negative space and a colossal heading, not from palette depth. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Onyx Black | `#000000` | `--color-onyx-black` | Page canvas, hero background, card surface base — the only color that ever fills a region. Every section, card, and divider sits on this absolute black | | Bone White | `#ffffff` | `--color-bone-white` | Primary display type, nav text, card titles, body copy, hairline borders on the few framed elements — used wherever a shape or letter needs to be seen against black | | Ash Gray | `#8e8e8e` | `--color-ash-gray` | Muted metadata and secondary nav strokes — the only mid-tone in the system, reserved for information that must recede behind the headline |

# Apple (España) — Style Reference > gallery vitrine in morning fog **Theme:** light Apple's product page visual system is a near-monochrome cathedral of negative space where a single product floats centered under enormous display type. The canvas is fog-gray #f5f5f7 with pure white surfaces layered above, and the entire chromatic range is reduced to one precise blue (#0071e3) that exists only to make the buy button switch on. Typography carries the design: SF Pro Display at weight 600 with aggressive negative tracking at 56–96px creates headlines that feel carved rather than typed, while body copy at 17–21px stays whisper-thin to let the product breathe. Components are reduced to essential geometry — pill buttons at 980px radius, rounded cards at 28px, no shadows, no decorative borders — so the imagery and type do all the emotional work. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Apple Ink | `#1d1d1f` | `--color-apple-ink` | Primary text, card borders, structural outlines — near-black with a hint of warmth prevents harshness against the fog canvas | | Fog Canvas | `#f5f5f7` | `--color-fog-canvas` | Page background, badge fills, secondary surfaces — the signature Apple light gray that defines the gallery atmosphere | | Pure White | `#ffffff` | `--color-pure-white` | Card surfaces, icon fills, elevated layers above fog canvas | | Graphite | `#707070` | `--color-graphite` | Secondary text, subdued borders, nav dividers |

# Grafik — Style Reference > Editorial gallery on warm paper. A design annual laid out as a full-bleed screen — typographic grid lines, monochrome photography, and nothing between the work and the page. **Theme:** light Grafik is a monochromatic editorial portfolio rendered as a design annual: a warm off-white canvas (#f0eeeb) holds a rigid 3-column grid of oversized black-and-white photography, separated by hairline 1px lines rather than gutters or shadows. Typography is reduced to a single weight (Grotesk 400) at three sizes, with negative tracking that pulls headlines tight and gives body text a measured, printed-page feel. Color is deliberately absent from the interface — the vivid green block on the Tom Gould card and the sepia Beings panel are content within the portfolio, not UI tokens. The design's confidence comes from restraint: no rounded corners, no elevation, no gradients, no secondary typeface, no bold weight. The grid lines and the type are the entire visual system. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Bone | `#f0eeeb` | `--color-bone` | Page background and primary canvas — a warm off-white that reads as paper rather than screen, the defining surface of the entire system | | Ink | `#000000` | `--color-ink` | Primary text, body copy, navigation, project metadata, 1px grid lines, image borders, and dark image treatments — the only non-canvas color | | Paper | `#ffffff` | `--color-paper` | Card surfaces, image backgrounds, and reverse-text blocks — white inserts on the warm canvas to isolate portfolio pieces |