AI Prompt Studio - Intelligent Prompt Library

# Videoconferencia — Style Reference > Collaborative daylight workspace — every surface a white panel under fluorescent clarity, single violet pulse marking where to act. **Theme:** light Microsoft Teams' page feels like a sunlit open-plan office — bright white expanses punctuated by the distinctive Teams violet-purple (#5d5bd4) and dense navy text (#17253d). The light is almost clinical, with near-zero ambient color tinting, pulling all chromatic attention to the vivid Teams purple accent and photography. Segoe UI Variable's tight negative tracking at display sizes (−0.025em at 48px) is the typographic signature — Microsoft's own variable font doing what no system font substitute can replicate, with headlines that compress horizontally as they scale up. Cards sit as floating white rectangles with a 24px corner radius and a paired micro-shadow system, never harsh — rgba(0,0,0,0.12) 0px 0px 2px plus rgba(0,0,0,0.14) 0px 2px 4px creates a faint lift without drama. The only pill-shaped element (200px radius) reserved for one secondary UI button variant signals interactivity hierarchy without color alone. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Teams Violet | `#5d5bd4` | `--color-teams-violet` | Primary CTA buttons, active nav underlines, badge backgrounds — the single saturated signal on an otherwise achromatic page. Vivid violet-purple stands apart from Microsoft blue (#0067b8) to brand Teams distinctly within the Microsoft ecosystem. | | Teams Midnight | `#333275` | `--color-teams-midnight` | Hover and pressed states for Teams Violet buttons, nav link active text — darker violet that deepens without shifting hue. | | Teams Deep | `#424197` | `--color-teams-deep` | Button pressed/focus states — intermediate violet between Teams Violet and Teams Midnight. | | Microsoft Blue | `#0067b8` | `--color-microsoft-blue` | Link text, icon fills, navigation affordances — the legacy Microsoft hyperlink blue used on informational elements, never on CTA buttons. |

# Agence K72 — Style Reference > theater marquee at midnight — a single electric spark cutting through cinematic black **Theme:** dark Agence K72 runs on radical binary minimalism: a near-black photographic void overlaid with white display type, and exactly one chartreuse spark used as precision mark — never decoration. The system is essentially a two-color engine (white-on-black, black-on-white) with #d3fd50 appearing only as stroke or ring, turning that single hue into a loaded gesture. Typography carries the entire identity: a single custom sans-serif stretched to 137px headlines with line-heights compressed to 0.70, making letterforms behave like architecture rather than reading material. Every interactive surface is a fully pill-shaped stadium form, and the French-first voice signals a confident creative agency that treats restraint as posture. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Pure Black | `#000000` | `--color-pure-black` | Page canvas, full-bleed photography backgrounds, nav bar surface | | Paper White | `#ffffff` | `--color-paper-white` | Primary text, navigation borders, pill button borders and labels, icon strokes | | Iron Gray | `#4d4d4d` | `--color-iron-gray` | Muted secondary text and low-emphasis nav borders — the only intermediate neutral permitted in the scale | | Spark Lime | `#d3fd50` | `--color-spark-lime` | Sole accent — appears exclusively as a hand-drawn stroke or ring marking a single word in a headline; never as fill, never as background |

# Eventbrite — Style Reference > pillow-soft discovery wall with a single electric blue pulse **Theme:** light Eventbrite's visual system reads as a warm, welcoming event-discovery surface: a soft off-white canvas (#f8f7fa) with generous 40px-radius cards that feel almost pillow-like, pill-shaped controls (360px), and a single vivid blue (#3659e3) doing all the interactive heavy lifting. The dominant text/border color is a deep muted aubergine (#39364f) rather than pure black — this single tonal choice gives the entire interface a slightly warm, editorial feel without going purple on screen. Orange is reserved exclusively for the brand mark and the cookie consent button, never for product UI, which keeps the accent palette disciplined. Typography is Neue Plak at restrained sizes (14–24px range for most content), and layout is built on a 4-column event grid with circular category icons that hint at the playful, community-first nature of the product. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Aubergine Ink | `#39364f` | `--color-aubergine-ink` | Primary text, borders, dividers, icon strokes — the structural backbone of every surface | | Pure White | `#ffffff` | `--color-pure-white` | Card surfaces, badge fills, nav background — the elevated layer above the canvas | | Warm Linen | `#f8f7fa` | `--color-warm-linen` | Page canvas and page-level background — slightly warm off-white, never sterile | | Soft Mist | `#dbdae3` | `--color-soft-mist` | Hairline borders, list dividers, subtle separators between list items and sections |

# Incommonwith — Style Reference > Editorial atelier in oxblood ink — warm cream pages, sunlit interior photography, and a single deep burgundy ink that carries every word, border, and link like fine letterpress. **Theme:** light In Common With operates as a printed design quarterly, not a storefront: warm cream-white paper (#fafaf9) is the canvas, full-bleed golden-hour interior photography carries visual weight, and a single deep oxblood ink (#4a0a05) serves as every text element, border, and link. The type system pairs a classical Caslon Ionic serif at 24px for headlines with a neo-grotesque Mier A sans for body, navigation, and UI — a literary tension that recurs across hero overlays, category names, and journal titles. Layout is unhurried: full-bleed hero, sidebar date stamps, horizontal product carousels, and generous negative space let the photography lead. Surfaces are flat, corners are sharp, shadows are absent — depth comes from photography and warm color temperature, never from elevation. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Oxblood Ink | `#4a0a05` | `--color-oxblood-ink` | All body text, headings, links, borders, outlined actions, and footer type — the singular chromatic voice; warmth and gravity without aggression | | Cream Paper | `#fafaf9` | `--color-cream-paper` | Primary page background; the warm off-white that gives the site its paper-stock feel | | Aged Linen | `#f8f7f1` | `--color-aged-linen` | Secondary surface, subtle card backgrounds, and pill-tag fills — slightly greener/warmer than the page, used for soft differentiation | | Warm Stone | `#bcb6a6` | `--color-warm-stone` | Muted background wash and tertiary surface — the only mid-tone neutral, used sparingly for section backgrounds |

# Lottielab — Style Reference > Animation studio on bright paper **Theme:** light Lottielab's visual language is a quiet, generous workspace built for creators: a near-white canvas, hairline borders, and a single vivid violet accent that appears only where attention is needed. The interface favors restraint over decoration — deep indigo-tinted text reads as authoritative without shouting, and components sit flat on the surface with almost no shadow, letting the product UI itself carry visual weight. Typography is geometric and contemporary, with tight negative tracking on large headlines and slightly open tracking on small labels, creating a confident vertical rhythm. Color is used surgically: brand violet highlights a keyword in headlines, fills the primary CTA, and marks active states; everything else stays neutral. The overall feel is an animation studio's digital sketchpad — spacious, tool-first, and engineered for flow. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Electric Violet | `#7270ff` | `--color-electric-violet` | Primary CTA buttons, active nav items, accent keywords in headlines, focus rings — the only chromatic element allowed to break the monochrome canvas, making every action feel switched on | | Signal Blue | `#1560fb` | `--color-signal-blue` | Secondary accent for interactive highlights, selected states in tool surfaces, and inline brand emphasis where a cooler note is needed | | Deep Indigo | `#2f2b4a` | `--color-deep-indigo` | Primary text and headings — a near-black with a violet undertone that warms the monochrome palette and distinguishes the brand from flat-charcoal SaaS defaults | | Midnight Ink | `#1c1a2c` | `--color-midnight-ink` | Heaviest text weight, section titles, and surface-dark contexts — a deeper step than Deep Indigo for maximum contrast moments |

# Splice — Style Reference > midnight recording studio — a dark, weightless space where the only thing that ever gets loud is the music. **Theme:** dark Splice operates as a midnight recording studio: deep charcoal canvases, near-borderless surfaces, and a single electric blue accent that cuts through the darkness like a signal light. Typography splits between SoehneBreit at whisper-weight for editorial headlines and Inter Variable as the dense workhorse, creating a deliberate contrast between performance and utility. Components stay flat and weightless — cards sit on near-identical surface tones, shadows are replaced by hairline inset strokes, and elevation comes from the photography itself. Color is rationed: one blue carries links and interactive elements, a saturated yellow-green appears as rare text punctuation, and everything else recedes into grayscale. The product — sound — is the only thing that ever gets loud. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Signal Blue | `#528fff` | `--color-signal-blue` | Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color | | Button Blue | `#1253ff` | `--color-button-blue` | Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color | | Voltage Yellow | `#f1f607` | `--color-voltage-yellow` | Rare text accent — highlight punctuation, featured labels, emphasis. Used sparingly, only when a word needs to flash against the dark canvas. Never on backgrounds | | Carbon | `#121214` | `--color-carbon` | Primary page canvas, card surfaces, input fields, footer. The dominant working surface at 425 occurrences across every context |

# Jeton — Style Reference > Coral sunrise over white paper — a warm gradient hero dissolving into clean white pages, punctuated by a single vivid orange-red and three functional accent hues. **Theme:** light Jeton operates on a white-canvas banking language interrupted by moments of warm coral heat: a sunset-toned hero gradient anchors the top, while the rest of the page lives on clean white with a single vivid orange-red as the dominant brand mark. The signature move is functional color-coding — green for Add, cobalt blue for Send, pink-red for Exchange — where each action verb gets its own hue paired with a rounded square icon tile, turning routine verbs into a color-coded vocabulary. Components are weightless and border-driven: 16px rounded surfaces, outlined chromatic actions rather than filled buttons, and a distinctive pill-shaped floating bottom nav that feels like a control strip lifted off the page. Type is bold, generous, and tightly led (line-height 0.90 on display) in a custom geometric sans, giving headlines presence without weight. The overall rhythm is spacious white between sections of color, with warm orange-tinted shadows adding a subtle glow rather than hard elevation. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Coral Flame | `linear-gradient(135deg, #f8a4a4 0%, #f73b20 100%)` | `--color-coral-flame` | Outlined action borders, hero headlines, active links, key icon strokes — the dominant brand mark; its intensity against pure white creates urgency without aggression; Full-bleed hero background gradient — a warm wash from pink through coral to peach, the visual identity of the brand's first impression | | Brandwood | `#360802` | `--color-brandwood` | Deep accent for bold display type, input borders, high-contrast text — a near-black with warm brown undertone that pairs naturally with the coral | | Sunset Fade | `#fef5f3` | `--color-sunset-fade` | Warm tinted surface for subtle layering above the white canvas — barely warmer than the page | | Blush Mist | `#fbdfd9` | `--color-blush-mist` | Secondary warm tint surface, used behind the hero gradient base and soft section washes |

# ORYZO AI — Style Reference > Cork coaster in a blackout studio — warm material object floating in engineered darkness, every detail lit from within. **Theme:** dark ORYZO AI operates as a dark studio production — near-black canvas (#100904), a single warm cream (#ffedd7) text and border color, and a buried burnt-orange accent (#dc5000) that appears only as a hairline flourish. Typography is handled entirely by halyard-display-variable, a high-contrast variable display face that runs from 10px nav labels up to 51px dramatic headlines — all in the same family, all in the same warm cream on darkness. The hero is a photographic product showcase on a warm wood worktop, while subsequent sections strip everything back to pure black with a single 3D-rendered cork coaster floating in void. Components are sparse and architectural: pill-radius and sharp-edge ghost buttons outlined in cream, dashed borders as spatial dividers, and no decorative gradients or drop shadows anywhere. The entire site reads as a single long cinematic scroll — dark, tactile, and theatrically minimal. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Studio Black | `#100904` | `--color-studio-black` | Page canvas and primary surface. Near-black with a faint warm brown undertone — warmer than pure black, never cold | | Warm Cream | `#ffedd7` | `--color-warm-cream` | All text, all nav labels, all borders, all button outlines. The sole foreground color — cream rather than white keeps the contrast warm against the near-black canvas | | Cork Shadow | `#40372e` | `--color-cork-shadow` | Dashed divider borders and secondary structural lines. One step lighter than canvas, used for subtle spatial separation | | Dark Cork | `#382416` | `--color-dark-cork` | Filled button background — the only non-transparent surface in the button system, mid-dark brown that reads as a contained warm swatch against the canvas |

# Phantom Studios — Style Reference > green signal line on a black void **Theme:** dark Phantom Studios operates as a near-totalist dark canvas: a single black field with one centered white text mark and a thin green horizon line anchoring the bottom of the viewport. The aesthetic is terminal-meets-poster — almost no chrome, no images, no navigation visible in the fold, just type on void with one signal color doing all the work. Typography is split between a geometric workhorse (Helvetica Now) for UI and display, and a tiny monospace face (ballinger-mono) for metadata, taglines, and trademark marks — the pairing reads as coded rather than designed. Everything is uppercase, everything is small, and the green line acts as a system indicator or cursor rather than decoration. The page makes you look harder than usual because there is almost nothing to look at; restraint is the product. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Void | `#000000` | `--color-void` | Page canvas, primary surface — the only background; every other color reads as light emitted from this base | | Pure White | `#ffffff` | `--color-pure-white` | All text, dividers, list markers, and outline borders — 21:1 contrast against Void means type is the loudest element on the page by far | | Dark Graphite | `#333333` | `--color-dark-graphite` | Hairline borders, secondary dividers, and structural rules — sits just above the void to define edges without lifting weight | | Mid Gray | `#666666` | `--color-mid-gray` | Muted helper text and inactive label borders — 3.7:1 against black intentionally fails contrast, signaling de-emphasis rather than legibility |

# Statamic — Style Reference > Warm editorial sunset over floating islands **Theme:** light Statamic pairs a warm, editorial display serif with a clean geometric sans for a CMS that feels like a publication rather than a dashboard. The visual system lives in a sunlit peach-to-pink gradient world decorated with floating tropical islands — the brand leans into warmth, softness, and a slightly handcrafted sensibility. Color is used sparingly against an off-white canvas: olive-green electric lime as the brand spark, muted lavender for outlined actions, and near-black for the filled primary button. Surfaces are soft with minimal elevation, radii stay modest (8px dominates), and shadows whisper rather than shout. Typography carries most of the personality — a thin serif at 60-96px for headlines with tight tracking, and Lexend in its lighter weights for body and UI text. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink | `#191a1b` | `--color-ink` | Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, button text on dark fills, list backgrounds | | Warm Shell | `#fdf1ef` | `--color-warm-shell` | Hero gradient base, secondary surfaces — the warm cream that gives the whole site its sunset atmosphere | | Driftwood | `#beb9b3` | `--color-driftwood` | Muted body text, subtle borders, image shadows — warm gray that harmonizes with the peach canvas |

# Emmalewisham — Style Reference > porcelain apothecary at golden hour. Warm linen surfaces cradle jewel-toned glass vessels; the brand violet traces hairlines through the room; serif labels float over clean sans-serif UI like engraved pharmacy signs. **Theme:** light Emma Lewisham is a porcelain apothecary rendered in editorial photography: warm stone-linen canvases, full-bleed pastel product vignettes, and a single deep iris-violet accent that whispers through thin outlines and links rather than shouting from filled buttons. The system feels calm, considered, and almost analog — serif wordmarks float over sans-serif UI text, products are presented as still-life objects on color-drenched stages, and surfaces stay nearly weightless with hairline borders instead of shadows. Color is used as atmosphere (peach, blush, mauve washes) and as restraint (violet for emphasis only); density is sparse, whitespace is generous, and the only interactive surface style is a thin outlined border in the brand violet. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Iris Violet | `#49369e` | `--color-iris-violet` | Outlined action borders, link color, heading accents, navigation emphasis — the singular brand hue, deployed as a fine outline or thin underline rather than a filled mass | | Soft Lavender | `#a9a7db` | `--color-soft-lavender` | Muted secondary accent for list borders, decorative link borders, and subtle dividers — the diluted echo of Iris Violet used when the full intensity would overpower | | Iris Focus | `#524eb7` | `--color-iris-focus` | Input focus state text/border — a slightly lifted tonal variant of Iris Violet to signal active text fields | | Blush Petal | `#ec9bad` | `--color-blush-petal` | Atmospheric surface wash and decorative accent — warm pink used for full-bleed product stage backgrounds and occasional badge fills |

# Foodnoms — Style Reference > Sunlit fruit market on white porcelain — warm orange, fresh green, and generous rounded forms **Theme:** light Foodnoms presents a sunlit nutrition-tracker marketing language: pure white canvas, oversized phone mockups as the visual anchor, and a playful chromatic vocabulary where color codes nutrients and progress. The two-tone headline convention (one color for the win word, dark graphite for the rest) makes the value proposition scannable in a glance. The system leans on a single custom display face (Aquawax Pro) with a distinctly rounded, geometric character that softens the dense data-heavy app screens. Most surfaces are flat and shadowless; a uniform 26px corner radius gives buttons, cards, and tags a friendly, pillow-like feel that makes health tracking feel approachable rather than clinical. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ember Orange | `#ff5406` | `--color-ember-orange` | Orange supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color | | Verdant Green | `#00b33f` | `--color-verdant-green` | Green supporting accent for decorative details and low-frequency emphasis | | Signal Red-Orange | `#ff3400` | `--color-signal-red-orange` | Secondary warm accent visible in app screen UI elements and supporting brand moments. Sits one step hotter than Ember Orange for emphasis on selected or active app states | | Sky Blue | `#00a9dd` | `--color-sky-blue` | Cool counter-accent for app-internal data categories (carbs/protein/other nutrient groupings). Balances the warm-dominant palette inside phone mockups |

# Composer — Style Reference > Bauhaus confetti on concrete **Theme:** light Composer speaks in the language of an editorial trading manifesto: a light ash canvas scattered with Bauhaus confetti — vivid blue, green, pink, and yellow rectangles that read as information shapes, not decoration. The Neue Haas Grotesk Display type stretches to 244px, letting headlines dominate like magazine covers while Inter handles the quiet, compact UI chrome below. The system is confident and maximalist for marketing surfaces but contracts to a clean, functional dashboard for product work — sharp 2px icon edges and pill-shaped 9999px buttons coexist without contradiction, because both serve clarity over softness. Color is deployed as functional punctuation: black text on near-white surfaces, hairline gray borders everywhere, and saturated chromatic blocks that mark emphasis, group information, and create visual rhythm across an otherwise monochrome grid. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Signal Blue | `#1871da` | `--color-signal-blue` | Brand blue — decorative color blocks, icon fills, secondary borders, and the blue-tinted shadow that gives elevation its on-brand cast | | Pulse Green | `#1ec072` | `--color-pulse-green` | Green wash for highlight backgrounds, decorative bands, and soft emphasis behind content | | Hot Pink | `#f6609f` | `--color-hot-pink` | Vivid pink — decorative strokes, confetti blocks, and gradient underline washes | | Cotton Candy | `#ffb4ed` | `--color-cotton-candy` | Pink action color for filled buttons, selected navigation states, and focused conversion moments. |

# Flatfile — Style Reference > Quiet data journal on warm parchment **Theme:** light Flatfile presents a quiet, editorial design system on warm parchment — the entire canvas carries a faint cream-green wash rather than stark white, making data tooling feel like reading a printed report. The primary chromatic is a near-black midnight violet (#090b2b) that carries all headings, brand marks, and emphasis, while interactions are anchored by a single near-black pill button (#151515) and a single warm sage secondary button (#e5ebd3). Structure is built almost entirely from hairline #e5e7eb rules — there is barely a shadow in the system, and depth is achieved through surface shifts between #f8f8f8 card layers and the #e5ebd3 hero wash rather than elevation. Typography leans editorial: a geometric humanist sans (Flatfile Diatype) does all UI work, while Source Serif 4 enters exclusively for customer quotes, giving testimonials a printed-publication feel that contrasts with the data-product UI. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Midnight Ink | `#090b2b` | `--color-midnight-ink` | Primary brand color for headings, logo, emphasized text, nav labels, and icon strokes — a near-black with a faint violet cast that reads as ink rather than pure black against the cream canvas | | Obsidian | `#151515` | `--color-obsidian` | Dark elevated surface for cards, headers, and contained panels. Do not promote it to the primary CTA color | | Graphite | `#1b1b1e` | `--color-graphite` | Primary body and heading text, dark card fills, and icon fills — the workhorse near-black with the faintest cool cast | | Charcoal | `#262626` | `--color-charcoal` | Secondary dark surfaces and muted borders for inverted panels |

# Better Stack — Style Reference > Midnight SRE console **Theme:** dark Better Stack operates as a midnight SRE console: a near-black canvas with monochrome surfaces, hairline borders doing the work that elevation does elsewhere, and a single violet-blue accent that surfaces only on actions, links, and gradients. Typography is Helvetica Now with stylistic alternates enabled, giving headlines a crisp, engineered feel — tight tracking, medium weights, and no decorative flourishes. The interface reads like a dark IDE: borders define shapes, inset white highlights suggest depth without drop shadows, and color appears as a scarce resource to mark interactivity. Components are light, flat, and confident — rounded 16px cards, 9999px pill buttons, no heavy panels or skeuomorphic depth. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Void Black | `#0f101a` | `--color-void-black` | Page canvas, nav background, link backgrounds | | Carbon Surface | `#151621` | `--color-carbon-surface` | Card surfaces, primary button background — one step above the canvas | | Gunmetal | `#1f2433` | `--color-gunmetal` | Input borders, elevated card borders, subtle surface lift | | Steel Border | `#939db8` | `--color-steel-border` | Primary hairline border, icon outlines, nav borders — the workhorse border that defines most shapes |

# Superintelligence for work — Style Reference > Architectural monograph on vellum — where the only ornament is letter-spacing and the only color is a single electric blue pressed into white space. **Theme:** light Sana operates on near-total chromatic restraint: a monochromatic canvas of warm off-white, white, and a near-black ink, with one electric blue and one ember orange appearing only as functional punctuation on the single most important action per surface. The typography is the personality — Sana Sans set aggressively tight (-2.5% at display sizes) so headlines read as carved stone rather than rendered text, with weight staying between 400 and 500 to avoid shouting. Buttons are pill-shaped with large radii, cards are softly rounded, and the entire UI is flat — no shadows, no gradients, no decorative elevation. Sections alternate between white and #efefed bands to create rhythm without color, and the only depth comes from photographic content (editorial product still-lifes, full-bleed testimonial portraits) that floats on the otherwise silent canvas. The system behaves like an architectural monograph: one idea, one typeface, one material. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink | `#090909` | `--color-ink` | Primary text, hairlines, card and input borders, list dividers, link underlines — the dominant dark anchor of the system | | Pure Black | `#000000` | `--color-pure-black` | Icon fills, heading underlines, occasional deep accents where maximum weight is needed | | Bone | `#ffffff` | `--color-bone` | Page background, card surface, text on filled buttons, button borders for ghost controls | | Linen | `#efefed` | `--color-linen` | Section band background, elevated card surface, the warm neutral that gives the white space its temperature |

# Dovetail — Style Reference > Cream-paper editorial magazine on a sunlit table **Theme:** light Dovetail reads like a printed editorial spread digitized — warm cream canvases, near-black ink, and a single buttery yellow accent that functions as a mood rather than a brand color. Typography is confidently oversized (72px display headlines) yet tightly tracked, giving the site a literary weight without heaviness. The signature visual device is the pill-shaped capability tag (91px radius), used as a stacking motif on the right rail. Components are flat: filled near-black buttons, ghost text links, and 16px-radius photo cards. Imagery alternates between detailed monochrome editorial illustration and full-color photography, with no shadows, gradients, or decorative effects — separation happens through whitespace and hairline borders. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Butter Cream | `#f9e5b1` | `--color-butter-cream` | Hero and section canvas — the warm cream that defines the entire brand atmosphere | | Ink Black | `#1d1e21` | `--color-ink-black` | Primary text, filled buttons, and the dark surface that anchors contrast — softer than pure black, warm against the cream | | True Black | `#000000` | `--color-true-black` | Illustration strokes, icon fills, and SVG detail work — only the darkest graphic elements | | Warm Bone | `#fef9f3` | `--color-warm-bone` | Card surfaces, secondary text on dark, and the lighter off-white that sits above the cream canvas |

# Morphic — Style Reference > Dark cinema canvas for AI storytelling. Pure black absorbs everything except the blue pulse of a single accent and the glow of generated imagery. **Theme:** dark Morphic operates as a dark cinema canvas for AI storytelling — pure black backgrounds swallow visual noise so generated imagery becomes the only source of color and light. The system is 99% achromatic: a tightly stepped neutral surface stack from #000000 through #212121 to #333333 carries the interface, while white text and gray subtext create hierarchy without competing with the artwork. A single vivid blue (#0075ff) is the only chromatic accent, reserved for primary actions, the 'New' badge, and the Share button — it functions as an electrical pulse against the matte dark, never decorative. Typography is Inter at all weights and sizes, with whisper-tight tracking on large display sizes and generous line-height on body copy. Components feel glassy and recessed: thin borders at near-invisible opacity, soft 10-16px radii, and almost no shadows. The density is compact (4px base, 8px gaps) and the layout is wide-bleed with horizontal-scrolling card rows, giving the site the rhythm of a streaming gallery rather than a traditional SaaS page. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Pure Black | `#000000` | `--color-pure-black` | Page canvas, hero backgrounds, full-bleed sections — the void that makes all imagery and accent color read as luminous | | Surface One | `#212121` | `--color-surface-one` | Primary card surface, elevated panels, and section backgrounds one level above the canvas | | Surface Two | `#292929` | `--color-surface-two` | Secondary button background (ghost/outlined), nested cards, and hover surfaces one step lighter than Surface One | | Surface Three | `#333333` | `--color-surface-three` | Tertiary button background, highest elevation layer, and active-state surface tints |

# 601 Inc. — Style Reference > warm film marquee in darkness **Theme:** dark 601 is a Tokyo film studio whose visual system reduces the web to the ingredients of cinema itself: a near-black void, one warm cream tone pulled from aged celluloid, and a single custom typeface rendered at architectural scale. The entire palette is functional — cream for everything that addresses the viewer, black for the screen behind it — which forces every compositional decision to be about scale, photography, and silence rather than chrome or ornament. Borders are 1px hairlines, elevation is absent, and the only structure is the photograph itself and the oversized numerals that float beside it like a screening schedule. Every page behaves like a single reel unspooling: a wordmark, a date, a still, and room to breathe. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Celluloid Cream | `#ece4b4` | `--color-celluloid-cream` | Primary text, all icon strokes, 1px hairline borders, and the only outlined-link action border in the system — a warm off-white that reads as aged film stock against black | | Darkroom Shadow | `#4f4d3c` | `--color-darkroom-shadow` | Atmospheric mid-surface visible around and between film stills — a desaturated warm olive-black that softens the page from pure void into projection-room dimness | | Projection Black | `#000000` | `--color-projection-black` | Deep canvas void used for the darkest recesses of the page and behind embedded media; the floor beneath everything |

# Chronicle — Style Reference > Typographer's proof sheet — a composited page where precision of letterform carries the entire visual weight, color is an intrusion, and the grid is the design. **Theme:** light Chronicle runs on a strict achromatic foundation: white canvas, near-black ink, and a structured gray scale — no brand color, no decorative hue, zero saturation. The product UI (rendered in electric blue inside presentation previews) is the only color that appears on the page, framed as content rather than interface chrome. Typography is a single custom variable font, Diatype, at tight negative tracking — headlines compress letterforms so aggressively at large sizes that the text feels mechanically engraved rather than set. Buttons are either filled black or ghost-outlined, both with hairline 4px radius corners, keeping the interface sharp and editorial rather than app-friendly. The overall rhythm is generous white space punctuated by 1px borders and one subtle card shadow, with sections separated by alternating white and warm-gray (#f3f3f3) bands. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Pitch Black | `#050505` | `--color-pitch-black` | Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color | | Midnight | `#000000` | `--color-midnight` | Filled action button backgrounds (Try Chronicle, Talk to sales, Try for free); icon fills; strongest contrast anchor | | Charcoal | `#151515` | `--color-charcoal` | Navigation link text and active nav states | | Obsidian | `#292929` | `--color-obsidian` | Footer fine print and copyright text |

# Nathan Riley — Style Reference > Gallery wall in a black void. A monochrome portfolio where the grid of atmospheric renders is the only color, and a single oversized serif name card anchors the center like a magazine cover floating over the work. **Theme:** light Nathan Riley's portfolio is a monochrome art gallery rendered as a full-bleed image mosaic — a tight grid of atmospheric 3D renders that fills every pixel, with the artist's name floating in a single pale-rose card at the center. The palette is ruthlessly reduced to three values: pure black, pure white, and a warm dark gray, so all visual energy comes from the imagery itself rather than color. Typography is custom-serif, ultra-light at display weight, and stretched to a 238px hero that dominates the center card like a magazine masthead. The system has no rounded corners, no shadows, no gradients, and no button fills — navigation is a row of small pill-shaped text chips at the bottom, and the overall feel is that of a curated exhibition catalog printed on white paper with one large editorial title. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Pure Black | `#000000` | `--color-pure-black` | Text, image grid gutter borders, hairline dividers, nav chip outlines — the structural ink that defines the grid structure and typography | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, nav chip backgrounds, card surface — the gallery wall behind everything | | Warm Charcoal | `#393939` | `--color-warm-charcoal` | Central name card surface, secondary text, soft borders — the mid-tone that makes the pale-rose card read as a distinct layer without breaking the monochrome | | Blush Card | `#e8c4c0` | `--color-blush-card` | Background of the central name card — the only chromatic accent, a dusty rose that warms the otherwise pure black-and-white system |

# 12th Berlin Biennale for Contemporary Art — Style Reference > Iris-and-ink broadsheet — violet skies over monumental black type on white paper. **Theme:** light The 12th Berlin Biennale reads as an iris-and-ink broadsheet: white paper canvas, monumental black geometric forms, and a single saturated violet (#7373ff) that functions as sky, border, and accent simultaneously. The system is editorial and constructivist — overlapping rectangular shapes at display scale carry the brand, while a geometric grotesque (ABCMonumentGrotesk) pairs with a transitional serif (BradfordLL) to create a high-contrast, catalog-like rhythm. Interactions are tight and rectilinear: 3px corners, 4px base spacing, hairline black or violet borders, and almost no shadow or gradient — visual weight comes from type size and color, not elevation. The page is text- and information-dense rather than spacious, with compact nav, overlapping panels, and event cards stacked close together like a biennale program leaflet. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Iris Violet | `#7373ff` | `--color-iris-violet` | Violet accent for outlined action borders, linked labels, and lightweight interactive emphasis. Do not promote it to the primary CTA color | | Deep Iris | `#23234d` | `--color-deep-iris` | Decorative SVG fill for large geometric shapes and map elements — a darker register of the brand violet used for tonal depth inside illustrations, not for UI | | Obsidian | `#000000` | `--color-obsidian` | Primary text, hairline borders on neutral actions and nav dividers, and the fill for the monumental hero shapes that overlap the headline | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, button text, and input backgrounds. The base layer everything else sits on |

# Grafbase — Style Reference > engineering blueprint on cool marble **Theme:** light Grafbase operates as a clinical, near-monochrome developer tool: a white canvas with charcoal text, a single gray surface tier, and zero chromatic noise in the interface itself. The system derives all its warmth and signaling from one place — the mint-to-teal gradient announcement bar — and from muted mint/teal tints inside product screenshots. Typography is a single family (Inter) stretched to extremes: a 90px display weight of 600 with -0.05em tracking, a 40px heading at 500, and a calm 16px body. Components feel like graph paper: 6px button radii, 20px card radii, hairline 1px borders, almost no shadows. The result reads as engineered, not decorated — an API console that happens to be a website. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Graphite Ink | `#1b1b1b` | `--color-graphite-ink` | Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color | | Marble | `#ffffff` | `--color-marble` | Card surfaces, elevated panels, nav background, button text on dark fills. The brightest layer in the system | | Drafting Gray | `#eaeaea` | `--color-drafting-gray` | Page canvas and section backgrounds. The second surface tier beneath white cards — the tone of the drafting table itself | | Steel | `#60646c` | `--color-steel` | Secondary body text, subtext, helper copy. Carries information density without competing with primary headings |

# Sequel — Style Reference > blackbox gallery, lit by cinema **Theme:** dark Sequel operates as a cinematic dark-stage design system — a black canvas where content is lit like film subjects. The palette is 100% achromatic: pure black grounds every screen, warm off-white (#f5f5f0) acts as the rare contrast material, and white serves as the only signal color. Typography is editorial and oversized: a serif display face (Bradford) at 58–128px carries authority through weight rather than volume, while a geometric sans (VisueltPro) handles UI, body, and meta at whisper-light 300 weight. Components are deliberately few and generous: full-bleed imagery in 10px-rounded cards, pill-shaped controls at 9999px radius, and tight letter-spacing that compresses large headlines into sculptural forms. The whole system reads as a gallery, not a dashboard — content earns space, UI stays invisible. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Void Black | `#000000` | `--color-void-black` | Page canvas, image backgrounds, text inversion panels | | Carbon | `#202020` | `--color-carbon` | Elevated surface layer, card backgrounds, modals | | Graphite | `#333333` | `--color-graphite` | Hairline borders, divider rules, badge outlines, subtle surface dividers | | Bone | `#c0c0c0` | `--color-bone` | Mid-neutral text, secondary metadata, icon strokes on dark |