AI Prompt Studio - Intelligent Prompt Library

# Gamma — Style Reference > white-walled art gallery. The UI is a silent frame; the artwork is the only thing that should be loud. **Theme:** light Gamma uses a gallery-frame design language: the interface is nearly invisible (near-black text on white with cool gray hairlines) so the digital artworks become the only source of color. The custom Gamma Sans Display is a neo-grotesque with weights at 300/400/600 that whisper rather than shout, and the 999px pill radius on interactive elements contrasts deliberately with the sharp 4px corners on artwork thumbnails. Cards are flat with no elevation or shadow — everything sits on one plane, like prints hung flush against a museum wall. The grid is a 2-column row of oversized featured drops, then a compact numbered list for the rest, letting the hierarchy be carried entirely by image size rather than color or depth. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink Black | `#0c0c0d` | `--color-ink-black` | High-contrast neutral action fill for primary buttons on light surfaces. | | Pure White | `#ffffff` | `--color-pure-white` | Page canvas, card surfaces, text on dark fills, input backgrounds | | Ash | `#e9e9ec` | `--color-ash` | Hairline borders, subtle dividers, hover surfaces, secondary button outlines | | Smoke | `#808080` | `--color-smoke` | Muted body text, metadata (mint counts, prices), inactive icons, placeholder content |

# Preply — Style Reference > Pink billboard with human stickers **Theme:** light Preply projects a warm, confident energy built on saturated pink hero canvases, near-black typography, and white product surfaces. The visual system is deliberately loud in the top fold to express brand personality, then quiets down into a calm black-and-white catalog of tutors and content once the user moves into functional areas. Platform (a chunky, high-contrast display face) carries all headings at weight 700 with very tight tracking and line-heights, making 48–96px headlines read as solid blocks of voice rather than delicate type. Figtree handles all UI and body text at moderate weights with slightly looser tracking. Components are flat and rectangular — 4px and 8px corners are the only soft edge in the system, and shadows are nearly absent. Photography is integral: real tutor/learner portraits are cropped, slightly rotated, and layered with black text stickers, giving the brand a handmade, scrapbook-like quality that contrasts the structured grid below. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Preply Pink | `#ff7aac` | `--color-preply-pink` | Red supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color | | Midnight Ink | `#121117` | `--color-midnight-ink` | Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color | | Soft White | `#ffffff` | `--color-soft-white` | Page canvas above the pink hero, card surfaces, tutor catalog backgrounds, button text on dark fills | | Mist Gray | `#f4f4f8` | `--color-mist-gray` | Subtle page background for content sections that need separation from pure white |

# BelArosa Chalet — Style Reference > dusk on alpine vellum **Theme:** mixed The BelArosa Chalet system channels alpine luxury through a restrained two-color palette: deep mountain teal (#193741) dominates as the signature surface and structural border color, while warm honey gold (#eac486) appears only in the monogram and decorative accents, never as a functional fill. Typography pairs a humanist sans (Avenir) for all UI, navigation, and body text with a transitional serif (ITC Giovanni) exclusively for editorial headlines — this duality is the site's defining signature, creating an editorial-luxury identity where serif moments feel like pull quotes in a travel magazine. Layout alternates between full-bleed dark teal hero sections and warm parchment content bands, using 80px pill-radius outlined buttons and generous 64–80px section gaps to create a slow, breathing rhythm. The design is flat and architectural: no drop shadows, depth communicated entirely through color contrast and hairline borders. The colorfulness of just 5% is intentional — restraint is the luxury signal. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Mountain Slate | `#193741` | `--color-mountain-slate` | Dominant structural color — hero backgrounds, dark section surfaces, primary text, navigation links, and the most-used border color in the system. The near-gray teal reads as atmospheric depth rather than saturated color | | Deep Teal | `#1d414d` | `--color-deep-teal` | Slightly lifted variant of Mountain Slate for outlined action borders, hover states, and secondary dark surfaces. Provides subtle differentiation from the primary teal without introducing a new hue family | | Honey Gold | `#eac486` | `--color-honey-gold` | Yellow decorative accent for icons, marks, and small graphic details. Do not promote it to the primary CTA color | | Snow White | `#ffffff` | `--color-snow-white` | Primary page canvas, navigation bar, light content section backgrounds, and ghost button text on dark surfaces |

# Enviar Dinero — Style Reference > Electric Sky Wallet — a sky that you can spend from. **Theme:** mixed PayPal ES radiates electric confidence — a sky-blue hero floods the first viewport with near-neon energy (#60CDFF), while the rest of the page alternates between cobalt navy (#002991) and pure white, creating a two-temperature rhythm of cool sky and deep sea. The defining typographic move is PayPal Pro at weight 900 running from 67px to 181px, with letter-spacing at -0.03em: headlines feel like they were stamped onto the surface, not set in type. The plain body font carries a consistent -0.02em tracking that keeps even 14px text feeling intentional. Buttons are universally pill-shaped (1000px radius) against chromatic backgrounds, using transparent fills with 1px borders — never solid fills — creating an outline-only button language that feels airy against intense color fields. Photography is used full-bleed behind type overlays, with white super-size letterforms bleeding off crop edges as a graphic device. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Cerulean Surge | `#60CDFF` | `--color-cerulean-surge` | Hero backgrounds, section backgrounds, badge borders — the dominant attention color that establishes PayPal's sky-blue identity across the first viewport and accent panels | | Cobalt Vault | `#002991` | `--color-cobalt-vault` | Deep-section backgrounds, card fills, navy sections — counterpoint to Cerulean Surge, appearing in feature sections to create the hot/cold alternating rhythm | | Ice Mist | `#B8E9FF` | `--color-ice-mist` | Subtle background tints in transitional or secondary panels within the blue range | | Cobalt Fade | `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0) 16px, rgb(0,41,145) 16px, rgb(0,41,145) calc(100% - 32px), rgba(0,0,0,0) calc(100% - 32px), rgba(0,0,0,0) 100%)` | `--color-cobalt-fade` | Gradient overlay used to bleed navy into transparent sections — see linear-gradient underline/band effect on interactive elements |

# iUSPC by Coinshift — Style Reference > Midnight trading floor — cold slate surfaces, a single ember pilot light, and grid lines drawn on darkness. **Theme:** dark iUSPC is a midnight trading floor rendered in near-grayscale: a near-black canvas with a faint blue cast, flat surfaces separated by hairline borders rather than shadows, and a single ember accent that glows from the edges like a pilot light. The system communicates institutional weight through restraint — Inter at weight 300–400 dominates, with all-caps tracked labels providing the only typographic punctuation. Color is rationed: 97% of the surface stays cold and neutral, the remaining 3% is a warm red-orange used only for atmospheric glow, focus states, and the live signal dot. Ghost controls replace filled buttons; the page is full-bleed with centered max-width content blocks separated by generous vertical breathing room. The grid lines visible in the hero background signal a financial-instrument sensibility — precise, measured, and architectural. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Abyss Ink | `#020617` | `--color-abyss-ink` | Page canvas, hero background, section backgrounds — the base surface every other color sits on | | Deep Slate | `#0a0e1a` | `--color-deep-slate` | Elevated surfaces, card backgrounds, subtle surface lift from the canvas | | Frost White | `#f1f5f9` | `--color-frost-white` | Primary headline text, logo wordmark, highest-emphasis content | | Cloud Gray | `#e5e7eb` | `--color-cloud-gray` | Body text, secondary headlines, hairline borders, divider lines — the workhorse neutral that draws the structural lines of the page |

# Microsoft AI — Style Reference > old library at golden hour **Theme:** mixed Microsoft AI reads like a rare-press manuscript bound in linen — warm parchment canvases, deep ink-teal voids, and oversized serif type that treats the page as editorial space rather than product surface. The palette is almost entirely earth-toned: cream, walnut, faded rose, and a single anchoring deep green-black that appears only in the hero, creating a dramatic chiaroscuro between top-of-page and everything below. Typography is the entire personality: a custom transitional serif (Bradford LL) dominates display and body, carrying italic for emphasis and aggressive negative tracking as sizes grow; a monospace (Red Hat Mono) handles the few UI affordances — tabs, labels, search, accessibility toggle. There are no saturated brand colors, no gradient buttons, no filled CTAs with hue. Action lives in text, in arrow glyphs, and in the giant pill radius that makes every control look like a wax seal on an envelope. The design intentionally avoids shadow and elevation — surfaces are flat planes of warm paper stacked against each other, separated by generous breathing room and the occasional peach wash. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Parchment | `#fef9ed` | `--color-parchment` | Page canvas, card surface, light text on dark — the foundational warm cream that carries 80% of the interface | | Bone | `#f5f0e4` | `--color-bone` | Secondary surface, muted panels, badge backgrounds, tab track — one shade deeper than the canvas for subtle layering without shadow | | Walnut | `#5d524b` | `--color-walnut` | Primary text, body copy, nav links, icons, borders — warm dark brown replaces black, keeping the system on the earth-tone spectrum | | Cedar | `#72675b` | `--color-cedar` | Muted secondary text, helper copy, inactive nav — mid-tone brown for de-emphasis within the warm scale |

# Together AI — Style Reference > Research console on glacier paper **Theme:** mixed Together AI reads as a research-grade console on glacier-white paper: stark black-on-white typography, near-zero chrome, and pastel data cards (blush, peach, sky, mint) that act as colored sticky-notes on an otherwise monochrome page. The single dark band — a near-black navy research section — is the dramatic inversion that gives the system its contrast and signals depth-of-work. Hierarchy is built through type weight and scale rather than color, and a thin periwinkle accent (#bdbbff) appears as small dashes and underlines to mark active states. Pastel backgrounds are decorative, not decorative-only: they tag metric categories. Components are sharp-cornered (4px), low-elevation, and rely on the monospace label family to feel like a lab notebook. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces on light theme, text on dark surfaces | | Slate | `#4d4d4d` | `--color-slate` | Muted secondary text, subdued metadata, low-emphasis body copy | | Hairline | `#d6d6d6` | `--color-hairline` | Hairline borders, table dividers, input outlines |

# Ortto — Style Reference > blueprint on midnight paper **Theme:** light Ortto reads as a product brief on quality stock: near-black hero panels yield to warm-white editorial sections, held together by a single vivid blue that is the only chromatic voice in an otherwise monochrome system. Display headlines use a humanist serif (Ivar Text) at 64–72px with negative tracking, while body and UI sit in a precise neo-grotesque sans (Haas Grot Text) — the pairing gives marketing copy the gravity of print journalism and product surfaces the neutrality of a control panel. Buttons are pill-shaped and filled blue, product screenshots float on a six-layer diffuse shadow, and embedded app captures are treated as first-class content rather than decoration. The overall effect is a marketing site that feels like the product's own manual — confident, specific, almost entirely black-and-white with one electric blue accent. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Electric Blue | `#1070ff` | `--color-electric-blue` | Primary action buttons, active nav, accent borders, eyebrow labels, full-width announcement band — the single chromatic voice in the system | | Midnight Ink | `#14171f` | `--color-midnight-ink` | Dark hero panels, navigation bar, and logo strip backgrounds — creates high-contrast showcase zones before the light editorial sections | | Charcoal | `#252525` | `--color-charcoal` | Primary body text, display headlines in light sections, and strong borders — the workhorse text and edge color above the fold | | Graphite | `#6d6b70` | `--color-graphite` | Secondary body text, muted helper copy, and subtle borders — quiet supporting type that recedes behind Charcoal |

# LE CAMP — Style Reference > Alpine summit base camp at dusk — a field command post where one red signal flare cuts through mountain twilight, and everything else is topo-line restraint. **Theme:** light LE CAMP reads as an alpine expedition outpost translated into a digital surface: a near-monochrome canvas pierced by a single flare-red accent, where the brand speaks through dramatic photographic scale and badge-style illustration rather than through decoration. The design system is ruthlessly reduced — two achromatic values and one chromatic — letting Agrandir's distinctive geometric display voice carry hierarchy while DM Sans handles utility text in the background. Components are confident and flat: pill-radius CTAs in signal red, thin hairline borders, uppercase mono labels acting as wayfinding tags, and shield-shaped program patches that function like scout merit badges scattered across a topographic hero. Sections alternate between full-bleed drama (the dark mountain photograph) and quiet white/cream expanses, creating a rhythm of base camp and summit. The single red accent earns its weight through scarcity — it appears only where a decision is being asked for or a category is being defined. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Signal Red | `#fe3a3a` | `--color-signal-red` | Primary CTA fill, nav active state, brand logo, emphasis body text, accent box-shadows on interactive elements — the single chromatic voice of the system, reserved for moments of decision and identity | | Carbon Ink | `#000000` | `--color-carbon-ink` | Primary text, heading text on light surfaces, icon strokes, nav text, button text, all structural borders and dividers | | Summit White | `#ffffff` | `--color-summit-white` | Primary page canvas, card surface, button text on red, input fill, nav background, hero foreground text on dark imagery | | Ridge Gray | `#767676` | `--color-ridge-gray` | Input border, subtle form dividers — the only non-black neutral, used where a softer boundary is needed without losing contrast |

# FeedHive — Style Reference > Lavender control room at dawn. One confident blue-violet accent breathing over a near-white workspace. **Theme:** light FeedHive uses an airy productivity-workspace language: a near-white lavender canvas (#f3f5ff), crisp white cards floating on top, and a single confident blue-violet accent (#4457ff) that makes actions feel switched on without ever dominating. Typography relies entirely on one custom geometric sans (Thicccboi) at generous sizes — 60px displays, 16px body — giving every screen a calm, modern cadence. Surfaces are flat and mostly shadowless; the one signature blue-tinted glow is reserved for the product mockup hero, never for ordinary cards. The system treats color as punctuation: pages stay 95% achromatic, and the brand violet appears only on filled CTAs, the gradient text accent, floating social-media decorations, and the AI chat orb. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Lavender Canvas | `#f3f5ff` | `--color-lavender-canvas` | Page background — the entire site sits on this faint blue-lavender wash instead of pure white, which warms the space and lets white cards lift visibly | | Card White | `#ffffff` | `--color-card-white` | Card surfaces, modal panels, nav bar, elevated UI blocks | | Ink | `#181c31` | `--color-ink` | Primary text, headings, button labels — a near-black with a blue undertone, not pure #000 | | Muted Iris | `#757693` | `--color-muted-iris` | Body text, nav links, secondary copy, helper text, footer links — a desaturated violet-gray that keeps the type hierarchy warm without competing with the brand accent |

# Made With Gsap — Style Reference > editorial ink on warm concrete **Theme:** light Made With Gsap is a high-contrast editorial showcase built on a near-monochrome canvas: warm light-gray surfaces against ink-black type at near-architectural scale. A single vivid lime accent (#c9fe6e) acts as the only chromatic note, used sparingly for CTA fills, active borders, and hover states. The visual system is typographically driven — display headlines reach 100-250px with aggressively tight tracking and line-heights under 0.90, letting the words themselves become composition. Cards, dividers, and frames keep radii at 2-12px (nearly sharp), and the page alternates between the light canvas and full-bleed dark demo cards that invert the palette. Everything else is restraint: thin borders, compact spacing, no shadows, no gradients, and one custom geometric grotesk doing all the work. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Lime Voltage | `#c9fe6e` | `--color-lime-voltage` | Primary CTA fill, active border accent, highlight tags — the only chromatic note in an otherwise monochrome system, used at 1-2 instances per viewport to make actions feel switched on | | Concrete | `#f1f1f1` | `--color-concrete` | Page canvas, card surfaces, light borders, inverted text on dark — the base background layer every other element sits on | | Ink | `#121212` | `--color-ink` | Primary text, heading borders, nav borders, dark demo-card surfaces, icon strokes — the dominant structural color across the system | | Charcoal Edge | `#252525` | `--color-charcoal-edge` | Card borders, elevated surface edges — one step lighter than Ink for layered card frames |

# Rarible — Style Reference > blacklight crypto terminal — a midnight trading floor where a single highlighter mark signals everything that matters. **Theme:** dark Rarible runs on a near-black canvas punctuated by one electric chartreuse accent — a single highlighter color against a dark market terminal. The interface is dense, data-first, and overwhelmingly achromatic, with the neon yellow acting as a switch: active states, the primary login CTA, ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Highlighter Lime | `#faff00` | `--color-highlighter-lime` | Green action color for filled buttons, selected navigation states, and focused conversion moments | | Onyx Black | `#0a0a0a` | `--color-onyx-black` | Page canvas, table row backgrounds, elevated card surfaces — the base layer everything else floats on | | Zinc Hairline | `#27272a` | `--color-zinc-hairline` | Borders, dividers, table cell separators, card outlines — the most-used border color, barely visible against the canvas, defining structure without weight | | Carbon | `#18181b` | `--color-carbon` | Button hover/active surfaces, secondary card backgrounds — one step above canvas for subtle elevation |

# Maisonmargiela — Style Reference > Gallery wall with a whisper **Theme:** light Maison Margiela operates on a radical editorial restraint: the interface is nearly invisible so that photography and product carry the entire experience. The palette is 100% achromatic — no chromatic accent exists anywhere in the system — using a near-black ink (#121212) against warm off-whites (#f7f7f2, #eaeae6) and pure white (#ffffff) to evoke gallery walls and atelier surfaces. Typography is custom and whispered, never shouted: Margiela Sans at low weights with extreme letter-spacing on small uppercase labels, and Margiela Serif with hairline negative tracking for the wordmark and editorial captions. Surfaces are flat, shadowless, and borderless; hierarchy is created by typographic scale and whitespace, not chrome. Components feel like printed matter — announcement strips, centered nav, full-bleed image plates, and tiny ghost text-links — not software. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink | `#121212` | `--color-ink` | Primary text, nav links, button labels, footer copy — the near-black (not pure) gives the page a slightly warmer, printed feel rather than a screen feel | | Paper | `#ffffff` | `--color-paper` | Page canvas, input fills, button text on dark — the clean base against which warm off-white sections layer | | Atelier White | `#f7f7f2` | `--color-atelier-white` | Light supporting surface for subtle backgrounds and section separation. | | Linen | `#eaeae6` | `--color-linen` | Deeper warm neutral for tertiary sections, input borders, subtle dividers — sits one step below Atelier White in the surface stack |

# Atoms — Style Reference > obsidian monolith in candlelight — a near-black canvas where a single warm champagne accent cuts like a blade through the darkness **Theme:** dark Atoms operates in a near-total monochrome discipline: pure black canvases carry warm cream type and a single champagne accent. The system avoids color as decoration and instead uses a tight chromatic scale — cream for text, gold for emphasis, black for depth — to create an atmosphere of industrial precision, like machined titanium under tungsten light. Layout is compact, typographic, and grid-driven: large geometric logo marks, centered headline stacks, and dark bordered cards that hold company information with minimal chrome. Components are flat, low-contrast, and rely on hairline borders rather than shadows for definition. Motion is implied through structure rather than animation; every element reads as placed, not animated. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Champagne Gold | `#c8ad86` | `--color-champagne-gold` | Accent headings, category tags, decorative borders — the only chromatic color in the system, used sparingly to mark emphasis and brand-bearing elements | | Candlelight Cream | `#fff7dd` | `--color-candlelight-cream` | Primary text, hairline borders, icon strokes — warm off-white reads softer than pure white against the black canvas | | Obsidian Black | `#000000` | `--color-obsidian-black` | Page canvas, card surfaces, image backgrounds — absolute black dominates the visual field | | Ember Ash | `#66635f` | `--color-ember-ash` | Muted surface variation, secondary backgrounds, low-emphasis fills |

# Redis Agency — Style Reference > After-hours editorial atelier — a pitch-black gallery where serif type and a single red radish do all the brand work. **Theme:** dark Redis Agency is a darkroom editorial system: a pitch-black canvas where massive Times New Roman display type and a single warm coral accent do all the talking. The visual language borrows from fashion magazine spreads and surrealist art direction — surreal food photography, organic green botanical forms, oversized serif headlines that feel cropped and overlapping rather than neatly typeset. Body and UI copy sit in a clean humanist sans (Suisse Intl) at modest sizes, which makes the display serif feel even more theatrical. The page stays nearly monochrome — black canvas, white type, a mid-gray for secondary text and hairline borders, and a coral red (#eb516d) that acts like a single brushstroke across an otherwise austere composition. Components are minimal: pill-shaped buttons, hairline borders, generous whitespace. Everything feels curated rather than generated — this is brand craft, not a SaaS dashboard. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Bone White | `#ffffff` | `--color-bone-white` | Primary text, pill button outlines, card outlines on dark canvas — high-contrast foreground against the black field | | Smoke | `#808080` | `--color-smoke` | Secondary text, hairline borders, muted UI strokes — the mid-gray that softens without disappearing | | Obsidian | `#000000` | `--color-obsidian` | Page canvas and true-black surface — the dominant ground that makes everything else float | | Graphite | `#333333` | `--color-graphite` | Deep divider borders, near-invisible structural lines between dark surfaces |

# MasterClass — Style Reference > black-box stage lit by magenta spotlights **Theme:** dark MasterClass reads as a darkened gallery wall — a near-black canvas where editorial type and portrait photography do the heavy lifting. The visual hierarchy is built on extreme contrast: a hot magenta primary action (#e32652) and warm gold accents (#eed37f) punctuate an otherwise monochrome stage, creating the feeling of spotlights on a black-box stage. Typography is the system's true voice — ultra-condensed display faces at 64–80px with sub-unity line-heights deliver cinematic headline presence, while Sohne at restrained sizes keeps the interface calm and editorial. Surfaces stay nearly invisible: cards sit on a slightly elevated dark plate with thin hairline borders rather than shadows, letting portrait imagery own the page. The overall register is premium, quiet, and theatrical — content first, chrome last. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#222326` | `--color-obsidian` | Page canvas and primary background — the stage floor from which all content rises | | Carbon | `#0d0d0e` | `--color-carbon` | Elevated surface for secondary panels and the sticky bottom promotional bar | | Charcoal Plate | `#272c33` | `--color-charcoal-plate` | Card surfaces and raised containers — one step lighter than canvas to define interactive zones | | Slate Body | `#191c21` | `--color-slate-body` | Nested surface for body blocks and form panels within cards |

# Liron Moran Interiors — Style Reference > fashion editorial on dark linen **Theme:** light Liron Moran Interiors operates as an editorial gallery portal: a near-colorless canvas of warm off-whites and charcoal olives, punctuated by oversized serifs that consume the viewport and physically intersect photography. The interface recedes — hairline borders, ghost controls, zero elevation — while the typography carries every ounce of visual weight, with letterforms at 185–260px acting as both heading and compositional frame. Sections alternate between light linen surfaces and deep charcoal bands, but the overall rhythm stays sparse and curatorial, with generous edge padding (130–173px) and vast vertical breathing room. Color is deliberately absent; every hue in the system is a desaturated neutral, so contrast and scale do all the expressive work. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Warm Linen | `#f2f0ed` | `--color-warm-linen` | Primary page canvas, card surfaces, heading fills — the warm off-white that gives the site its gallery-walls aesthetic | | Light Mist | `#eeeeee` | `--color-light-mist` | Hairline borders, divider lines, light text on dark sections, icon strokes — the most-used neutral, threading structure through every screen | | Soft Stone | `#c1bfbc` | `--color-soft-stone` | Muted background washes, secondary card surfaces, subdued borders | | Warm Taupe | `#978f84` | `--color-warm-taupe` | Mid-tone neutral for secondary text and muted UI elements |

# Woset — Style Reference > paper gallery in morning light — a quiet, warm-gray room where one golden accent is the only color allowed on the walls. **Theme:** light Woset reads as a curated art-supply shop rendered as a gallery wall: soft warm-gray canvas (#e5e7eb), monochrome black-on-gray chrome, and a single golden-yellow accent (#ecca53) that activates filter pills and key actions. Typography anchors on Macan, a geometric sans used at a whisper-tight -0.04em tracking — the 95px display headline is the loudest element on the page, then everything collapses to a quiet 15px body. The product grid trades glossy photography for hand-drawn illustrations in a generous 3-column layout with no card borders, no drop shadows, and 30px pill-radius controls. The system is intentionally restrained: one warm color, one typeface, zero elevation — every screen should feel like a well-lit page in a stationery boutique. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Soft Pebble | `#e5e7eb` | `--color-soft-pebble` | Page canvas, card surfaces, and the dominant background tone — a warm-leaning gray that reads as handmade paper rather than digital white | | Carbon Ink | `#000000` | `--color-carbon-ink` | Primary text, nav labels, icons, and the default state of unselected interactive controls. Carries all typographic and chrome weight in the system | | Ash | `#bbbab7` | `--color-ash` | Hairline borders and dividers on buttons and structural elements — just visible enough to define edges without ever competing with text | | Stone | `#8d8c8a` | `--color-stone` | Muted helper text — product prices, secondary metadata, and any label that should recede behind the primary content |

# Moffitt.Moffitt. - — Style Reference > curated gallery on bone-white linen **Theme:** light Moffitt.Moffitt. operates as a curated gallery on bone-white linen: every screen begins on a pure white canvas, then disappears into full-bleed photography and monoline serif type. The palette is deliberately chromatic-free — black, white, and three grays carry all interface weight, while color lives exclusively inside editorial artwork (the red gown, the cyan poster). Components are minimal to the point of invisibility: pill-shaped controls, hairline borders, no shadows, no gradients, no decoration. Typography is the brand — a whisper-weight display serif sets tone at headlines, a neo-grotesque sans does utility work. The effect reads as a printed annual report or museum wall text: confident, restrained, and confident in letting imagery do the heavy lifting. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Primary text, filled pill buttons, hairline borders on light surfaces, active icons | | Bone | `#ffffff` | `--color-bone` | Page canvas, card surfaces, text on dark buttons, image overlays | | Mist | `#f5f5f5` | `--color-mist` | Elevated surface wash, subtle card backgrounds, section dividers | | Fog | `#ebecec` | `--color-fog` | Hairline dividers between feed cards, faint table borders |

# Signal Messenger — Style Reference > Frosted privacy glass. A nearly white room washed in pale blue light, with one vivid blue line marking every door you can open. **Theme:** light Signal speaks through a frosted privacy glass aesthetic: a nearly monochrome canvas of white and pale blue washes, with one confident blue accent that guides the eye to interactions. The design is deliberately restrained — weight 800 headlines carry all the visual weight alone, surrounded by generous whitespace and almost no ornamentation. Buttons are outlined rather than filled, signaling honesty over persuasion; the only solid color blocks appear in product mockups and the dark slate footer. A distinctive halftone dot illustration style provides the sole decorative personality, rendered entirely in the brand blue. The overall feel is technical documentation elevated to brand: trustworthy, quiet, and precise. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Signal Blue | `#2c6bed` | `--color-signal-blue` | Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color | | Deep Signal | `#2942ff` | `--color-deep-signal` | Navigation links and brand mark anchors — slightly cooler and more electric than Signal Blue, reserved for chrome-level interaction | | Signal Sky | `#9dbbf8` | `--color-signal-sky` | Hero section wash, large decorative panels — soft periwinkle that bathes the page in brand color without overwhelming | | Signal Mist | `#a5cad5` | `--color-signal-mist` | Secondary feature panel backgrounds — desaturated teal that recedes behind content, used to break the page rhythm without adding chroma |

# Programa — Style Reference > Swiss design studio at high noon. A white gallery wall lit by a single yellow desk lamp — everything is grayscale until a button, badge, or highlight demands attention, and then that one yellow note carries the whole room. **Theme:** light Programa operates in a Swiss-design vocabulary: near-pure white canvas, architectural sans-serif type at tightly tracked small-to-medium sizes, hairline borders, and a single saturated yellow-green accent that functions as a highlighter pen across an otherwise austere page. The entire palette is essentially four grays plus one chromatic signal — chromatic real estate is rationed, not distributed, so when yellow appears it reads as a switch flipped on. Components are slim and confident: 10px radii, thin 1px borders, generous white space, and zero shadow noise. The aesthetic is editorial-portfolio meets productivity tool — restrained enough to feel serious, bold enough to feel like a designer's tool. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink Black | `#1a1a1a` | `--color-ink-black` | Primary text, all borders, icon strokes, logo, divider lines, button outlines — the structural ink that defines every shape on the page | | Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, text on dark fills, input fields | | Fog Gray | `#f4f4f4` | `--color-fog-gray` | Soft section background, alternate surface, and quiet card fill | | Ash Gray | `#a3a3a3` | `--color-ash-gray` | Muted secondary text, inactive links, placeholder copy, tertiary metadata |

# Superhuman — Style Reference > Cinematic cockpit behind warm parchment — a productivity instrument panel where atmospheric photography meets structured cream-toned UI surfaces. **Theme:** mixed Superhuman feels like a cinematic productivity cockpit — moody atmospheric photography bleeds behind glassmorphic UI panels while the page itself stays anchored in warm parchment neutrals. The hero is a full-viewport dusk photograph with overlapping product panels floating at various depths, then the page snaps to a warm off-white (#f2f0eb) canvas for feature content. Custom variable font 'Super Sans VF' is the entire typographic system — tight negative tracking at display sizes (-0.028em at 64px) makes headlines feel compressed and urgent. Violet (#714cb6) is the sole chromatic system accent, appearing as outlined ghost buttons and focus rings against otherwise achromatic surfaces. The dark muted-red (#421d24) surfaces only in the announcement banner and footer, creating a bracketed frame around the entire page. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Parchment Canvas | `#f2f0eb` | `--color-parchment-canvas` | Primary page background below the hero; the warm, slightly toasted off-white that distinguishes this from sterile white SaaS canvases | | Ink | `#292827` | `--color-ink` | Primary text, borders, nav labels — near-black with a warm brown undertone instead of pure black | | Bone | `#ffffff` | `--color-bone` | Card surfaces, hero text, button text on dark backgrounds | | Fog | `#e3e3e2` | `--color-fog` | Subtle UI dividers, light button borders, tab backgrounds |

# Tella — Style Reference > Violet broadcast signal — the design feels like a TV network's on-air package: full-bleed chromatic fields, bold compressed display type, hard cuts between saturated and white. **Theme:** mixed Tella pulses with electric violet energy — a hero that washes the entire viewport in saturated purple (#5e51f8 to #251544), then cuts hard to white for feature sections. The contrast is deliberate and jarring in the best way: you go from immersive chromatic field to clinical white card grid without transition. The headline font NaN Jaune Midi Bold does the heavy lifting — a chunky, tightly-tracked display face at -0.054em letter-spacing that feels like broadcast TV titles squeezed into browser chrome. Lavender-tinted secondary text (#cfcbfd on dark, #d7d3fd on features) carries brand color even into body copy, preventing the white sections from losing brand identity. The pill-shaped dark CTA floating in a violet sea is the signature contradiction: the most important action is the darkest, most contained element on the page. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Signal Violet | `#5e51f8` | `--color-signal-violet` | Primary brand color — hero backgrounds, CTAs, interactive states, logo mark. The electric quality (vivid, high-chroma) makes every surface it touches feel charged. | | Deep Nebula | `linear-gradient(rgb(39, 21, 76) 0%, rgb(24, 17, 39) 100%)` | `--color-deep-nebula` | Hero section footer tone and gradient terminus. Paired with Signal Violet for the dark-to-darker hero gradient that creates depth within the purple field. | | Iris Mid | `#4b41c6` | `--color-iris-mid` | Button shadow underlay and hover states on the hero. Creates tactile depth on dark surfaces via box-shadow layering. | | Soft Amethyst | `#cfcbfd` | `--color-soft-amethyst` | Secondary headline text on dark violet backgrounds — brand color carried into typography so the hero never loses chromatic identity. |

# Petertarka — Style Reference > curated gallery on warm concrete — every card a framed print, every margin deliberate, every type weight a whisper **Theme:** light Petertarka presents a curated gallery aesthetic: a warm light gray canvas anchors a two-column grid where every project card feels like a framed print. Typography whispers at weight 200-300 in GT America — ultra-light headlines that gain authority through restraint rather than volume, a deliberate anti-convention against the SaaS standard of bold display type. Color is monastic: the system is almost entirely achromatic, with occasional full-bleed color blocks acting as project identifiers rather than brand expression. The signature move is a colorful 3D illustration that breaks the grid by overlapping card boundaries — one moment of visual exuberance against the quiet monochrome. Sharp corners (zero border-radius), 1px hairline borders, and 45px internal padding create an editorial, almost architectural feel — more museum wall than web page. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Warm Concrete | `#eaeaea` | `--color-warm-concrete` | Page canvas — the warm light gray that makes the whole gallery feel architectural rather than digital | | Bone | `#f0f0f0` | `--color-bone` | Card surface — barely distinguishable from the canvas, creating the illusion of cards floating in space | | Hairline | `#d8d8d8` | `--color-hairline` | 1px card borders and dividers — structural, never decorative | | Obsidian | `#000000` | `--color-obsidian` | All text, heading borders, and the top/bottom hairline rules that frame the page |