AI Prompt Studio - Intelligent Prompt Library

# Yung Studio — Style Reference > white chalk drawing on a black gallery wall **Theme:** dark Yung Studio operates in absolute monochrome: a pure black void against which white type and white illustration do all the work. The visual language is gallery-like — sparse, confident, and editorial — with a single violet (#c692ff) reserved as a whisper-quiet accent that only surfaces in hover or selection states. Typography carries the entire brand voice through the PolySans optical-size family: Slim whispers in body text, Neutral fills mid-scale sections, and Bulky anchors the hero as oversized display. Layout breathes aggressively; sections are separated by 100+ pixel gaps and framed by generous horizontal padding, giving every element room to perform. The aesthetic is closer to a zine or art-book cover than a SaaS dashboard — flat, bold, typographically expressive, and unafraid of negative space. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Page canvas, full-bleed backgrounds, surface for all primary content | | Paper White | `#ffffff` | `--color-paper-white` | Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color | | Ultraviolet | `#c692ff` | `--color-ultraviolet` | Accent for hover states, active link underline, and occasional highlight punctuation — appears at near-zero frequency, so it functions as surprise, not decoration |

# Huddle — Style Reference > Pastel inventory cards on cream paper **Theme:** light Huddle uses a quiet, editorial curation language: off-white canvas, large confident headlines, and three muted pastel card colors (sage, lavender, dusty rose) that function as category tiles for project listings. The palette is intentionally desaturated — no vivid neons, no high-saturation accents — so the system reads as a considered directory rather than a marketplace. Typography is set in a single custom sans (Nng) that carries the entire information hierarchy, with all-caps micro-labels and dot-prefixed status tags adding a catalog/inventory feel. Components lean pill-shaped (100px radius on links, 1000px on primary buttons) and borders are thin 1px hairlines rather than heavy shadows, keeping the surface flat and poster-like. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card base, text on dark cards — the dominant surface | | Ink Black | `#151515` | `--color-ink-black` | Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color | | Graphite | `#23241f` | `--color-graphite` | Secondary text, subtle borders | | Slate Gray | `#3a4444` | `--color-slate-gray` | Muted text, inactive tags, form labels |

# BaseHub — Style Reference > midnight canvas, molten filament **Theme:** dark BaseHub speaks a near-monochrome dialect: a near-black canvas, a grayscale text scale, and one molten orange accent that does the work of a full color system. The product is the hero — large borderless screenshots of the editor float in the dark rather than floating illustrations, and a thin vertical orange rule on the far left anchors every section like a margin note. Typography stays compressed and quiet: Geist at semibold for headlines, regular for body, with tight negative tracking at every size to make words feel machined rather than typeset. Surfaces are flat and hairline-bordered rather than shadowed, and a 12px card radius plus 4px button radius keep the geometry sharp and developer-tool familiar. The only warm note is the orange — used for CTAs, section tags, the glowing product frame, and hand-drawn annotations — and a cool blue (#55c2ff) reserved strictly for informational badges. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ember Orange | `#ff6c02` | `--color-ember-orange` | Primary CTAs, section tags, active nav, the glowing product frame, hand-drawn annotations, and the single decorative rule on the left margin — the one warm voice in an otherwise cold palette | | Ember Glow | `linear-gradient(rgb(255, 108, 2), rgb(255, 155, 81))` | `--color-ember-glow` | Gradient stop paired with Ember Orange for the rare gradient surface (e.g. template card accent bars) | | Glacier Blue | `#55c2ff` | `--color-glacier-blue` | Blue state accent for badges, validation surfaces, and short status labels. | | Bone White | `#f3f3f3` | `--color-bone-white` | Neutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color |

# Recess — Style Reference > pastel sunset over a swimming pool **Theme:** mixed Recess lives in a daydream of pastel skies: soft periwinkle canvases, peach-pink horizon glows, and floating cloud shapes create an atmosphere of deliberate calm rather than commerce. The brand speaks through one confident geometric sans-serif (Sharp Grotesk) paired with a script logo lockup — the contrast between structural type and hand-drawn mark defines the personality. Color is mood, not decoration: deep navy ink carries all text, a single vivid blue punctuates emphasis, and the rest of the palette is washed-out lavender, cream, and coral that feel like the inside of a sunset. Components are low-elevation and quietly rounded — borders and soft fills do the work, not shadows. The layout is centered, generous, and breathing-room heavy, with a horizontal marquee banner at the very top and content that always feels like it could be a magazine spread. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Twilight Navy | `#25385b` | `--color-twilight-navy` | Primary text, headings, body copy, links, icons — the structural ink color that carries the entire voice | | Periwinkle Sky | `#a2b0ff` | `--color-periwinkle-sky` | Dominant section background, soft accents, atmospheric washes — the signature background that gives Recess its dreamy identity | | Dusk Indigo | `#0a0a3a` | `--color-dusk-indigo` | Footer backgrounds, high-contrast dark surfaces, deep accent fills | | Cobalt Pop | `#3252f4` | `--color-cobalt-pop` | Rare vivid accent for emphasis, active states, and standout headings — used sparingly to create a single electric beat against the muted palette |

# Varo Bank — Style Reference > neon bank statement on a sticky note — bold compressed type punched onto bright colored cardstock, held together by hairline black outlines **Theme:** light Varo Bank reads like a confident consumer-finance poster series printed on colored cardstock: pure white canvases interrupted by full-bleed bands of violet, lime, coral, and cream, each carrying chunky ultra-compressed display type. The visual system is deliberately loud — National 2 Compressed at 96–147px drives every headline with near-zero leading, making text behave like a graphic block rather than prose. A single saturated violet (#8c58d0) is the only true interactive color; everything else chromatic is decorative atmosphere, and the only neutrals that matter are true black and white. Borders are hairline and dark, radii are universally 4px, and shadows are absent — depth comes from flat color collision, not elevation. The whole product feels Gen-Z native: playful, financial-literacy-forward, and graphically assertive without feeling corporate. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Varo Violet | `#8c58d0` | `--color-varo-violet` | Primary action buttons, active nav, brand logo — the single saturated mid-violet that powers all interactive states | | Deep Plum | `#42185f` | `--color-deep-plum` | Dark accent surfaces, bold text on light cards, full-bleed dark band backgrounds — almost-black with violet undertone | | Lilac Mist | `#cdb0fa` | `--color-lilac-mist` | Soft violet fill for selected/secondary surface states, tag backgrounds | | Coral Ember | `#ed6c52` | `--color-coral-ember` | Decorative section fills, icon highlights, dotted ticker text — warm chromatic punctuation that breaks up the violet dominance |

# Notion — Style Reference > Midnight co-working command center — a dark studio at 2am where soft cream desks hold luminous white cards lit by cobalt-blue instrument panels. **Theme:** mixed Notion operates as a midnight co-working command center: a deeply saturated midnight-navy hero dissolves into warm cream content surfaces, with cobalt-blue actions that pop like switched-on instrument panels. The design is typographically confident, using a custom humanist sans (Notion Inter) at all UI levels paired with occasional Lyon Text serif flourishes for editorial warmth. Color is rationed — most of the page lives in near-black ink and warm off-white, reserving chromatic energy for CTA fills, emoji-icon accents, badge highlights, and decorative card borders. Components are soft and rounded (12px cards, 5px inputs, pill badges) with almost no drop shadow; the depth comes from surface contrast (dark navy → cream → white card) rather than elevation. The overall feel is a working studio that stays open after hours — functional, quiet, slightly nocturnal. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Midnight Navy | `#02093a` | `--color-midnight-navy` | Hero and feature-section canvas — the signature dark surface that makes white headlines and cobalt CTAs feel like glowing panels in a night-shift control room | | Cobalt Blue | `#455dd3` | `--color-cobalt-blue` | Violet action color for filled buttons, selected navigation states, and focused conversion moments. | | Signal Blue | `#0075de` | `--color-signal-blue` | Outlined action borders, inline text links, and chromatic hover states — a slightly cooler blue for secondary interactivity | | Ice Blue | `#62aef0` | `--color-ice-blue` | Blue outline accent for tags, dividers, and focused UI edges |

# Laura Monin — Style Reference > editorial gallery wall, white marble, ink stamp **Theme:** light Laura Monin is an editorial fashion portfolio built on absolute chromatic restraint: pure white canvas, black ink, and a single custom display serif that carries the entire brand voice. The layout behaves like a curated mood board — photographs scatter asymmetrically across generous negative space rather than aligning to a conventional grid, with overlay captions functioning as whispered labels rather than navigation. Typography carries all hierarchy: the massive display serif at 58–158px commands the center, while Neue Haas Grotesk at 12–22px serves as quiet scaffolding for navigation, metadata, and supporting text. There are no shadows, no rounded corners, no gradients, no color — the system achieves its luxury through what it removes, not what it adds. Every element should feel like it was placed by hand on a gallery wall: precise, unhurried, and never filling more of the frame than necessary. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, image borders, nav backgrounds — the only surface tone in the system | | Ink Black | `#000000` | `--color-ink-black` | Primary text, all border outlines on images and nav, list markers — the sole chromatic anchor | ## Tokens — Typography

# Mural — Style Reference > Blackboard flipping to whiteboard — same hand, same authority, opposite ground. **Theme:** mixed Mural hits like a blackboard in a bright studio — the hero opens pitch-black with oversized serif-adjacent display type bleeding edge to edge, then the page snaps into clinical white with the same confidence. The dual-font system is the signature move: STK Bureau (weight 300 only) handles all display and headline work with tight negative tracking (-0.04 to -0.05em), while ABC Social runs everything from captions to body in a humanist groove. Electric jade (#00c27a) is the single chromatic anchor — appearing on CTAs and key links against both black and white backgrounds, creating identical urgency in both contexts. Cards live in a borderless, shadow-free world where containment comes from background-color switches (#eeeeee, #ffffff) rather than depth. The Mural logomark's rainbow-spectrum identity is carefully quarantined from the page palette — the product itself runs monochromatic with jade as its only relief valve. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Jade CTA | `#00c27a` | `--color-jade-cta` | Primary CTA buttons, active links, key interactive highlights — jade against black in the hero and against white in body sections maintains equal visual force without changing hue | | Mint Surface | `#b4f5c8` | `--color-mint-surface` | Card backgrounds, feature highlight areas — pastel counterpoint to jade that reads as 'selected' or 'active' without the full saturation of CTA jade | | Forest | `#00843f` | `--color-forest` | Card accent backgrounds, deep green surface variant | | Badge Leaf | `#d5f8e0` | `--color-badge-leaf` | Blog/category badge backgrounds — near-white green tint that signals categorization without demanding attention |

# Sleeve — Style Reference > floating dock on marble **Theme:** light Sleeve's site reads like a macOS product page composed in a gallery: an infinite white canvas, a single hero product shot floating with app-icon satellites orbiting it, and typography that does all the work. The palette is nearly monochrome — black, white, and a hairline gray border are the only structural colors — while the only chromatic energy comes from the app's own blue gradient and a small set of colorful system icons used as decorative punctuation. Headlines are massive and tight-tracked (96px display at -0.025em letter-spacing, 48px section headings), body text is system-sans at 15-18px, and micro-labels like 'THEMING' and 'FEATURE LIST' use 0.05em tracking to whisper rather than shout. Components are soft and chunky: 24px card radii, 9999px pill buttons, inset 1px borders at 0.05 opacity instead of heavy shadows. The design language is confidence through restraint — no gradients on UI, no color on buttons, just typographic weight and generous breathing room carrying every screen. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Midnight Ink | `#000000` | `--color-midnight-ink` | Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color | | Graphite | `#333333` | `--color-graphite` | Secondary text, icon fills, button text — softer than pure black for body emphasis without losing weight | | Slate | `#374151` | `--color-slate` | Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color | | Silver Mist | `#e5e7eb` | `--color-silver-mist` | Hairline borders, subtle dividers, light surface washes — the most-used color in the system, defines edges at 0.05 opacity equivalent |

# Dropbox.com — Style Reference > warm cream workspace — editorial confidence on paper **Theme:** light Dropbox reads as a warm editorial workspace rather than a cold productivity dashboard. The canvas is cream paper (#f7f5f2), not sterile white; text is a warm near-black (#1e1919), not pure ink. The brand speaks through one confident electric blue (#0061fe) that paints every action surface, paired with Sharp Grotesk headlines and Atlas Grotesk body copy — a custom Grotesk pairing that gives the system a proprietary, designed quality. Layouts are generous and breathing, built on a 6px base, with 2-column card grids, split text+visual heroes, and minimal elevation. Surfaces are flat with hairline borders; corners are soft (8–16px). The mood is approachable, considered, and quietly confident — the opposite of a sterile enterprise UI. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Dropbox Blue | `#0061fe` | `--color-dropbox-blue` | Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color | | Cream Paper | `#f7f5f2` | `--color-cream-paper` | Page canvas, section backgrounds, nav bar surface — warm off-white replaces sterile SaaS white to soften the system | | Pure White | `#ffffff` | `--color-pure-white` | Elevated card surfaces, content panels, product mockup backgrounds — the only true white, reserved for surfaces that sit on the cream canvas | | Warm Ink | `#1e1919` | `--color-warm-ink` | Primary text, dark nav button text, heading color — warm near-black reads softer than pure ink on cream backgrounds |

# Schema — Style Reference > Ink-black keynote stage with confetti-bright murals **Theme:** mixed Schema by Figma runs on a stark monochrome architecture punctured by bold flat-color geometric murals. The UI uses pure black, near-black, and white with hairline gray borders — no shadows, minimal radii, no chromatic accents in the interface itself. Color appears only as decorative art (circles, hexagons, rectangles in purple, teal, maroon, green, orange) and as solid-background speaker portraits. Typography is the loudest element: Figma's custom display face at 56–86px with extreme negative tracking (-0.02em) and tight 0.90 line-height makes headlines feel carved rather than typeset. The hero inverts convention with a black canvas and an oversized outlined Register button; content sections then alternate through full-bleed colored bands before resolving into a clean white speaker grid. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Hero canvas, heavy structural borders, icon strokes — sets the high-contrast keynote-stage mood for the opening fold | | Ink | `#0f0f0f` | `--color-ink` | Body and heading text on light surfaces, dark section borders | | Paper | `#ffffff` | `--color-paper` | Page background, speaker card surfaces, light-section text on dark hero | | Ash | `#e2e2e2` | `--color-ash` | Hairline borders, subtle icon fills, structural dividers between UI regions |

# Shelby Kay — Style Reference > botanical editorial spread on warm linen — two-color ink system on aged paper, with display type that bleeds past the page edge and metadata that whispers from the margins. **Theme:** light Shelby Kay is a botanical editorial portfolio: a warm linen canvas, one dark-olive ink color, and a single sage-green accent that does all the brand expression. Typography is extreme — Ranade display type stretches to 265px and bleeds edge-to-edge, while Switzer handles everything else at a compact 10–20px range, creating a magazine-spread tension between monumental headers and whispering metadata. Navigation is text-only with no buttons, no rounded controls, no shadows — the interface reads as a printed art book, not a software product. Sections shift through warm tonal layers (cream → tan → taupe) rather than alternating hard color blocks, and the overall system rewards restraint: hierarchy comes from scale, weight, and whitespace, never from color or chrome. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Olive Ink | `#393c2a` | `--color-olive-ink` | Primary text, borders, and structural strokes — all type from body to display headings, all card and image borders, all interactive outlines | | Sage Type | `#737955` | `--color-sage-type` | Display headings and brand voice — used for the monumental SHELBY wordmark, section anchors, and selective heading accents that carry the brand's botanical identity | | Linen | `#efe6d9` | `--color-linen` | Primary canvas and card surfaces — page background, card fills, the base warm tone the entire system sits on | | Sienna | `#d6b292` | `--color-sienna` | Orange wash for highlight backgrounds, decorative bands, and soft emphasis behind content. |

# Forner — Style Reference > Warm earthen atelier — imagine a ceramics studio at golden hour, where every surface is clay, bone, or roasted coffee, and the only chrome is the potter's hand-lettered note pinned to the wall. **Theme:** light Forner operates as a sun-baked design atelier: an almost entirely warm-earth palette, a single custom grotesque carrying 95% of the voice, and typography so oversized it abandons hierarchy for atmosphere. The canvas is a dry cream; the ink is a deep roast brown; every accent lives in the same brown-to-bone spectrum. There is no chromatic brand color — the warmth itself is the brand. Surfaces are flat with hairline borders, corners are surgically sharp at 4px, and breathing room is generous (100px+ between sections). Custom serif italics appear sparingly as hand-set annotations against the grotesque's mechanical rhythm. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Roast Ink | `#484036` | `--color-roast-ink` | Primary text, borders, icon strokes, the structural backbone of every interface — deep warm brown acts as ink on cream, the dominant foreground color across the entire system | | Bone Canvas | `#faf5eb` | `--color-bone-canvas` | Page background, the warm cream field that all surfaces sit on | | Linen Surface | `#ecece4` | `--color-linen-surface` | Card surfaces, elevated panels, content blocks — one step removed from the canvas, slightly cooler and grayer to recede | | Sandstone | `#cacab0` | `--color-sandstone` | Heading accents, icon strokes, decorative borders, link underlines — the lightest chromatic-feeling neutral, used when the Roast Ink feels too heavy |

# Vana — Style Reference > Digital constellation map on midnight canvas — a dark protocol interface where electric blue traces the topography of user-owned data across a starfield of ASCII characters. **Theme:** dark Vana operates as a dark data-sovereign canvas: near-black surfaces host a vivid electric blue that functions less as decoration and more as signal. The hero's ASCII-art world map is not a graphic but a data texture — character density forms continents, suggesting the protocol maps personal data across the globe. Typography is restrained and geometric (Cofo Sans) with a pixel variant for technical metadata labels, creating tension between human-readable prose and machine-precise notation. Buttons are sharp-cornered (2px radius) and minimal, letting the blue carry the action language. The palette is deliberately narrow: one brand blue, two violet tints, and a stack of near-black surfaces, with green and pink appearing only as rare chromatic punctuation on outlined controls and decorative markers. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Electric Indigo | `#0000ff` | `--color-electric-indigo` | Primary CTA fill, brand text, decorative ASCII pattern — the signal color that makes actions switched on against the dark canvas | | Cobalt Pulse | `#4141fc` | `--color-cobalt-pulse` | Button borders, secondary accent — slightly lighter than Electric Indigo for outlined controls and hover states | | Periwinkle Veil | `#8b8bfe` | `--color-periwinkle-veil` | Outlined action border, light violet accent — ghost button outlines and muted decorative strokes | | Lime Beacon | `#7fd579` | `--color-lime-beacon` | Rare chromatic punctuation — cursor marker, outlined button variant, location indicator on the data map |

# Electronic Materials Office® — Style Reference > Incandescent ember in a charcoal gallery **Theme:** dark Electronic Materials Office is a nocturnal atelier: matte charcoal canvas, a single incandescent orange ember, and type that whispers rather than declares. The interface treats every screen like a darkened studio — the keyboard product photographs are the only true light source, and the UI surrenders to them. Headlines at weight 200 in GT-Flexa float in vast negative space; body text is deliberately small and humanist (Times). Color is rationed: pure white for type, a desaturated violet (#9e9eff) for links, and one orange (#f45500) CTA per page that glows with its own 30px bloom. Components stay flush to the 20px radius, borders whisper at #9d9d9d, and the only shadows in the system are those two colored halos around the primary action. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Studio Charcoal | `#202020` | `--color-studio-charcoal` | Page canvas and card surfaces — the floor of the dark gallery, never pure black so the eye can rest on edge softness | | Bone White | `#ffffff` | `--color-bone-white` | Primary text, hairline borders on images, and the rare inverted surface. Carries all type hierarchy on its own | | Ash Gray | `#9d9d9d` | `--color-ash-gray` | Muted text, subtle card borders, inactive labels — the only middle gray in the scale, used when white is too loud | | Mid Felt | `#eaeaea` | `--color-mid-felt` | Light surface wash for inverted panels or modal scrims — the off-white that sits between bone and the dark canvas |

# CHRISTOPHER IRELAND CREATIVE — Style Reference > bone-white gallery wall, editorial monograph in morning light **Theme:** light A photographer's portfolio rendered as a quiet editorial spread: a warm bone canvas, a single typeface pairing (a contemporary serif for display, a geometric sans for utility), and no chromatic accent whatsoever. The visual system defers entirely to the photography — text is a thin scaffolding of category labels and a few oversized serif headlines that behave like magazine pull-quotes. The feeling is closer to a printed monograph than a website: large blocks of breathing room, asymmetric split layouts (text-left, image-right), and weight 400 everywhere — the serif never thickens, the sans never condenses, so hierarchy comes from size and tracking rather than emphasis. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Bone | `#f2f1ec` | `--color-bone` | Page canvas, card surface — warm off-white reads as paper, not screen; gives the page a tactile, printed quality | | Ink | `#000000` | `--color-ink` | Primary text, borders, dividers, plus-marks, section rules — pure black against bone creates the highest-possible contrast for a posterized editorial feel | | Graphite | `#333332` | `--color-graphite` | Headline text — nearly black but with a quarter-step of warmth; lets the serif headings feel set rather than stamped | | Ash | `#5d5b5b` | `--color-ash` | Secondary body text, captions, sub-labels — the only muted step in an otherwise binary palette |

# Amie — Style Reference > Sunlit productivity dashboard — a workspace where everything is white, flat, and purposeful, with one electric-blue switch that turns things on. **Theme:** light Amie feels like a well-lit productivity workspace — bright white surfaces, almost clinical in their restraint, punctuated by a single electric sky-blue (#11a8ff) that fires only when action is required. The page is overwhelmingly neutral — 98% achromatic — making every chromatic moment (the amber highlight on 'without a bot', the green calendar icon, the violet tag) feel intentional rather than decorative. Inter at tight negative letter-spacing (-0.025em at display sizes) condenses headlines into confident blocks without weight extremes — weight 700 at 56px reads assertive but not aggressive. Cards use hairline 1px borders via layered near-invisible shadows rather than visible strokes, giving product UI previews the appearance of floating slightly off the page. The ghost 'Request a demo' button beside the filled CTA creates a paired choice architecture that recurs throughout the page. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Pure Canvas | `#ffffff` | `--color-pure-canvas` | Page background, card surfaces, button fills for secondary actions | | Fog Surface | `#fafafa` | `--color-fog-surface` | Alternate card background, subtle section differentiator | | Ash Border | `#cdcdcd` | `--color-ash-border` | All UI borders — inputs, cards, dividers, icon rings — at 1px solid | | Stone Divider | `#ebebeb` | `--color-stone-divider` | Tag backgrounds ('Within 47 seconds:' highlight pill), section background bands |

# WalletConnect — Style Reference > Cobalt obelisks on parchment — saturated blue monoliths floating above a warm white desert, with rounded edges that soften the tech seriousness. **Theme:** light WalletConnect Pay is an electric-blue crypto payments brand wrapped in a clean, light canvas: warm off-white surfaces, indigo-black typography, and oversized rounded cards that feel more like consumer fintech than infrastructure tooling. The signature move is a vivid cobalt hero panel (40px radius) sitting on a near-white page, anchoring a layout that alternates between full-bleed product photography and generous whitespace. Typography is set in KHTeka, a geometric humanist that carries a technical-but-friendly voice across weights 400-700, with deep navy #1b2045 replacing pure black for a slightly warmer read. Components are confidently minimal — pill-shaped buttons, ghost CTAs, hairline borders, and almost no shadow, letting the saturated blue do all the emotional work. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Electric Cobalt | `#006cff` | `--color-electric-cobalt` | Hero panels, filled buttons, active nav indicators, link accents — the primary brand signal, used as a full-bleed surface rather than a small button color to dominate the page | | Indigo Action | `#4672ff` | `--color-indigo-action` | Primary filled action buttons and their borders — a slightly lighter, more violet-shifted blue for interactive surfaces that need to feel pressed and clickable | | Deep Indigo | `#1b2045` | `--color-deep-indigo` | Primary text, headings, and dark button borders — replaces pure black with a warm navy that reads as authoritative without the harshness of #000 | | Sky Tint | `#66a7ff` | `--color-sky-tint` | Hover states, subtle outlined button borders, secondary navigation accents — a desaturated companion to Electric Cobalt for non-dominant blue moments |

# Dennis Snellenberg — Style Reference > Dark editorial canvas with giant quiet headlines **Theme:** dark A dark editorial portfolio language built on a near-black canvas where the only color that matters is a single vivid violet. The entire interface collapses to two tones — #1c1d20 for the world, #ffffff for everything written — with a custom sans-serif at a fixed medium weight doing all the talking. Typography is the protagonist: a 216px display name bleeds off the page edge, while 12–15px body copy floats beside full-bleed photography. Violet appears as rare punctuation on cards and link fills, never as decoration. Components are flat, borderless, and large — rounded pills replace buttons, and a single 1px inset white ring is the only shadow language in the system. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian Canvas | `#1c1d20` | `--color-obsidian-canvas` | Page background, card surfaces, text on light surfaces, hairline borders — the near-black that owns 95% of the interface | | Bone White | `#ffffff` | `--color-bone-white` | Primary text, inverted card surfaces, link text on violet, subtle inset borders — the only light tone in the system | | Fog | `#999d9e` | `--color-fog` | Muted secondary text, captions, metadata — sits between the canvas and white in the neutral scale | | Graphite | `#494a4d` | `--color-graphite` | Elevated surface layer above the canvas, soft card backgrounds, link hover glow — adds a half-step of depth without breaking the monochrome read |

# Handhold — Style Reference > warm parchment under whispered serifs — a hand-set editorial spread with zero chromatic noise, where a hairline serif at weight 200 carries all the voice. **Theme:** light Handhold operates in an almost purely editorial register: a warm cream canvas (#f2f1ed) replaces the SaaS-standard pure white, and a custom serif at weight 200 does all the headline work while Inter at a single weight (400) handles everything else. The palette is strictly monochrome — 0% colorfulness detected — so hierarchy is built entirely through scale, tracking, and the serif/sans contrast rather than color. Surfaces are flat with no shadows; structure comes from generous border-radius (24-32px on cards, fully pill-shaped buttons) and tight tracking on the serif. The result reads like a design studio monograph or a luxury print catalog, not a typical B2B SaaS landing page. Density stays comfortable — 4px base, 48px section gaps, 28-32px card padding — with one centered column hero that breathes. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink Black | `#000000` | `--color-ink-black` | Primary text, heading strokes, card borders, filled CTA backgrounds — the sole carrier of visual weight in an otherwise empty palette | | Paper Cream | `#f2f1ed` | `--color-paper-cream` | Page canvas, card surfaces, and the default background — warm off-white that distinguishes the brand from clinical SaaS whites | | Warm Border | `#dbd7cd` | `--color-warm-border` | Elevated surface, hairline dividers, and card-on-card separation — one shade deeper than the canvas to create structure without contrast | | Stone Gray | `#737373` | `--color-stone-gray` | Secondary body text, muted labels, subtle borders — never used for primary copy |

# Bōjka Studio — Style Reference > fluorescent gallery wall **Theme:** light Bōjka Studio operates on radical typographic confidence: a single custom display face blown up to poster dimensions, paired with a near-total absence of color until a saturated electric green detonates across the hero. The page reads as a printed art-poster dragged into a browser — oversized black wordmark, generous whitespace, a single chromatic explosion, then calm white again. Surfaces stay flat and unshadowed; weight comes from scale and contrast, never from elevation or gradients. Components are reduced to their typographic essence — nav is bare text on a white strip, cards are giant rounded rectangles, and decorative geometry is implied by oversized radii (68px) rather than by borders or shadows. An orange (#ff4600) accent threads through headings and rule lines as a warm counterpoint to the cold green, never enough to compete — it just keeps the eye moving. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Carbon | `#000000` | `--color-carbon` | Primary text, all hairline borders, nav text, link underlines — the dominant ink. At 21:1 against white it carries the entire typographic system on its own | | Graphite | `#282828` | `--color-graphite` | Secondary text, image and card borders, soft structural strokes — slightly lifted from pure black to create a quieter border weight without losing contrast | | Bone | `#ffffff` | `--color-bone` | Page canvas, card surfaces, image backgrounds — the neutral ground that lets the green and oversized type do all the visual work | | Fluorescent | `#0af500` | `--color-fluorescent` | Full-bleed hero/feature band background, section color blocks — a near-lime pure green used sparingly as a single saturated field. Its only job is to shock the eye and establish the studio's visual voice; it should never appear on UI controls, text, or thin UI strokes |

# Bang & Olufsen — Style Reference > Scandinavian gallery on porcelain. When a B&O page goes dark, the product is lit like a sculpture in a midnight alcove; when it goes light, the product floats on white silk with nothing else competing for attention. **Theme:** light Bang & Olufsen runs on a gallery-museum logic: near-pure white porcelain canvases with products floating as sculptural objects, interrupted by rare full-bleed chromatic chambers — a deep ultramarine violet that swallows the screen, occasionally a saturated terracotta-red moment — for emotional punctuation. Typography is a single custom neo-grotesque (BeoSupreme) that does all the talking: whisper-tight at display sizes, generously tracked uppercase at micro-labels, no other typeface needed. Components are stripped to their bones: pill-shaped ghost controls, hairline borders, no decorative shadows, no gradient buttons, no icon flourishes. The grid is generous, the negative space is the luxury. Every product gets its own floating pedestal; the surrounding white is the room. Color is rationed like a precious material — when it appears, it owns the entire frame. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Porcelain Canvas | `#ffffff` | `--color-porcelain-canvas` | Page backgrounds, product card surfaces, navigation bar — the dominant ground against which every product floats | | Bone | `#fcfaee` | `--color-bone` | Secondary surface for warm-neutral blocks, button text on dark backgrounds, alternative canvas when white would feel sterile | | Obsidian | `#191817` | `--color-obsidian` | Primary text and product bodies — a warm near-black that reads softer than pure #000000 against white | | Pure Ink | `#000000` | `--color-pure-ink` | Icon strokes, micro-labels, fine borders, and the harshest text contrast moments |

# Raw Materials — Style Reference > brutalist editorial on warm cream **Theme:** light Raw Materials operates as a typographic maximalist system: a warm cream canvas carrying display type that regularly exceeds 200px, with every major surface element given its own vivid color identity. The system abandons a single brand color in favor of seven section-marker hues (orange, violet, ink, cobalt, crimson, yellow, green) that label navigation and content blocks alike, creating a zine-like rhythm where the color tells you which chapter you're in. Surfaces are flat and rounded at 16px — no shadows, no gradients, no elevation. Typography does all the hierarchy work, jumping from 12px captions to 259px display headlines with a cast of four custom typefaces, all sharing the "ss02" stylistic alternate. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ember Orange | `#ff3d00` | `--color-ember-orange` | Orange supporting accent for decorative details and low-frequency emphasis | | Pulse Violet | `#5900cc` | `--color-pulse-violet` | Violet supporting accent for decorative details and low-frequency emphasis. | | Cobalt Blue | `#2835f8` | `--color-cobalt-blue` | Violet supporting accent for decorative details and low-frequency emphasis. | | Crimson | `#ff003d` | `--color-crimson` | Red supporting accent for decorative details and low-frequency emphasis |

# Tech Barcelona — Style Reference > Editorial tech manifesto on white marble **Theme:** mixed Tech Barcelona operates on a typographic-first language: a single custom neo-grotesque (FavoritPro) set at a whisper-light 400 weight governs the entire interface, letting scale and whitespace do the structural work rather than weight contrast. The canvas is predominantly white and quiet, with a single vivid cobalt blue (#0075ff) reserved exclusively for action — it appears once as a filled button in the nav and never decorates elsewhere. A near-black #090707 carries headlines and image content, creating stark tonal contrast against the white surface. The hero band inverts this relationship: black canvas, white type, oversized geometric logo. Components are flat and minimal — hairline borders, no shadows, no gradients — letting the photography and large-scale type carry visual weight. The overall rhythm is editorial: generous vertical space, oversized display sizes up to 80px, and tight letter-spacing pulling large headlines into compact, confident masses. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Cobalt Action | `#0075ff` | `--color-cobalt-action` | Primary CTA buttons, the only chromatic accent in the entire interface — one vivid blue against monochrome neutrals, used sparingly so it signals action without competing with content | | Ink Black | `#090707` | `--color-ink-black` | Headline color, image borders, large display text — near-black with the slightest warmth, chosen over pure black to feel printed rather than digital | | Graphite | `#212529` | `--color-graphite` | Body text, nav links, icon strokes, card borders — the working neutral for interface chrome and readable paragraph copy | | Pure White | `#ffffff` | `--color-pure-white` | Page canvas, card surfaces, text on dark hero and dark logo backgrounds — establishes the light-mode base and all content surfaces |