AI Prompt Studio - Intelligent Prompt Library

# Your workplace has the answer. Just ask Dala for it. — Style Reference > Particle cosmos on a void — violet pulse against infinite black **Theme:** dark Dala is a knowledge-management product rendered as a dark cosmic field: a pure black canvas, a single saturated violet as the only authority color, and white type that glows against the void. The interface recedes — sparse text blocks, hairline borders, pill controls — while a massive particle constellation dominates the visual real estate, its thousands of tiny geometric shapes (triangles, circles, diamonds) clustering into organic forms. Typography is stretched and ultra-tight at display sizes (negative tracking pushes letters almost together) but opens up at body sizes (slight positive tracking aids legibility on black). Components feel lightweight and fast: no shadows, no gradients, no card elevation — depth comes purely from color contrast and the negative space of the void. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Void | `#000000` | `--color-void` | Page background, primary canvas — the dark field where the constellation lives | | Bone | `#ffffff` | `--color-bone` | Primary text, icon strokes, hairlines, card borders, nav text — the only light that reads on the void | | Ash | `#bdbdbd` | `--color-ash` | Secondary muted text, subtle border accents — quieter than bone, still legible on black | | Smoke | `#9a9a9a` | `--color-smoke` | Tertiary text, nav link resting state, low-emphasis dividers — fades into the background |

# Tinybird — Style Reference > developer terminal at midnight — black void, one electric green cursor, monospace whispers **Theme:** dark Tinybird is a dark-mode developer console aesthetic: near-black canvas, one electric green accent that acts as the only chromatic voice on screen, and a strict division between humanist Roboto for prose and monospaced Roboto Mono for tags, labels, and code. The interface reads as terminal-grade — monospace badges sit inside square brackets like log entries, and the green accent behaves like a blinking cursor rather than a brand color, used sparingly for CTAs, links, and the occasional inline highlight. Surfaces are flat, borders are hairline, and elevation is achieved through subtle dark-to-darker layering rather than shadows. The result is a product page that feels engineered rather than marketed, confident in its restraint. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Cursor Green | `#27f795` | `--color-cursor-green` | Green supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color | | Hover Green | `#008060` | `--color-hover-green` | Green supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color | | Terminal Red | `#800000` | `--color-terminal-red` | Red supporting accent for decorative details and low-frequency emphasis. Use as a supporting accent, not as a status color | | Pure White | `#ffffff` | `--color-pure-white` | Primary text and headlines. Maximum contrast against the near-black canvas for immediate legibility |

# Uniswap — Style Reference > cotton-candy swap terminal in white air. Vivid magenta accents pierce an otherwise colorless, floating interface, while soft chromatic orbs drift in the background like currency made visible. **Theme:** light Uniswap presents a light, airy swap terminal aesthetic: a near-white canvas where a single vivid magenta-pink brand color carries every interactive signal, surrounded by soft floating color orbs that lend the page a playful, weightless atmosphere. Typography is confident and tight — a single custom display face (Basel) at near-black weight, with an unusual 485 weight that sits between regular and medium, creating a subtly compressed, modern feel across both display and UI copy. Components stay compact and rounded — 20px radii on swap cards, 16px on buttons, pill shapes for tokens — with barely-there shadows that let the white surface breathe. The overall experience feels like a DeFi command center rendered in pastel air: structured enough to trust with money, colorful enough to feel alive. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Uniswap Magenta | `#ff37c7` | `--color-uniswap-magenta` | Pink supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color | | Ink | `#131313` | `--color-ink` | Primary text, nav labels, headings, body copy, and default icon strokes — near-black rather than pure black for a slightly softer read | | Charcoal | `#222222` | `--color-charcoal` | Secondary text and strong UI borders where extra weight is needed without going to pure black | | Steel | `#6a6a6a` | `--color-steel` | Muted helper text, secondary labels, inactive nav items, and supporting copy |

# Watch new Originals — Style Reference > Cinematic void with electric spotlight. Picture a darkened theater lobby where a single cyan marquee light is the only chromatic thing in sight — everything else is monochrome depth leading the eye to the posters on the wall. **Theme:** dark Disney+ operates as a dark theatrical canvas: a near-black void ( #040714) where movie and series artwork is the protagonist, and UI chrome recedes into the periphery. The interface relies on extreme contrast (white #fafafa on near-black) and a single chromatic accent — electric cyan (#33ddff) — that functions as the only reason to look away from the content. Typography is a single custom sans-serif (Inspire) at modest sizes, with positive letter-spacing (0.025em) that gives even short labels a measured, premium cadence. The system is content-first: cards are poster-aspect tiles, sections are horizontal scroll rails, and the only elevated color decisions (cyan CTA fills, teal link text) exist to drive conversion, never decoration. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Midnight Canvas | `#040714` | `--color-midnight-canvas` | Page background, hero background, primary canvas — deep near-black navy that absorbs the eye and makes artwork pop | | Abyss | `#010104` | `--color-abyss` | Deepest surface layer, navigation background — the near-pure black undercarriage beneath the canvas | | Eclipse | `#0e0b14` | `--color-eclipse` | Footer background, alternate dark surface — slightly warmer dark for depth variation | | Carbon | `#1e1f24` | `--color-carbon` | Elevated dark surface — used for cards or panels sitting above the canvas |

# SuperHi Basic Income — Style Reference > violet column beside white broadsheet **Theme:** light SuperHi Basic Income is a two-color editorial system: a permanent electric-violet column anchored to the left edge, a white broadsheet of generous typography scrolling to its right. The palette is ruthlessly binary — #2727e6 and #ffffff — with no shadows, gradients, or secondary surfaces to dilute the message. Typography carries all the personality: Basis (a geometric sans) handles every functional role, DDC (a more humanist display face) appears only where character is needed, and line heights breathe generously (1.46–1.67 for body text). Components are flat and shape-defined — pill tags at 50px radius, softly rounded buttons at 16px, a dotted globe illustration as the only graphic. The mood is campaign-poster confidence: one loud color, zero decoration, and text that does the heavy lifting. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Electric Iris | `#2727e6` | `--color-electric-iris` | Violet accent for outlined action borders, linked labels, and lightweight interactive emphasis. Do not promote it to the primary CTA color | | Paper White | `#ffffff` | `--color-paper-white` | Right content canvas, card and elevated surfaces, sidebar text and illustration on the violet panel | ## Tokens — Typography

# Shade — Style Reference > Editorial paper cutouts on white **Theme:** light Shade operates in a near-monochrome design language: white canvas, soft warm-charcoal text, and one restrained violet accent that appears almost exclusively as hairline borders and a single logo gradient. The interface feels editorial and unhurried — Inter Display at compressed negative tracking gives headlines a sculpted, magazine-cover quality rather than the typical SaaS breathing-room look. Buttons are pill-shaped with hard, solid-color offset shadows (no blur, no diffusion) that read as paper cutouts rather than Material elevations. Color is used as rare punctuation: the violet never fills large surfaces, it traces edges and marks selected states, letting the photographic content do the emotional work. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Charcoal Ink | `#131315` | `--color-charcoal-ink` | Primary text, dark pill button fill, heading borders — warm near-black, the only filled button color in the system | | Pure White | `#ffffff` | `--color-pure-white` | Page canvas, card surfaces, button text, ghost button background | | Bone | `#f7f5ff` | `--color-bone` | Secondary canvas, subtle violet-tinted off-white for alternating sections | | Cutout Gray | `#f1f1f1` | `--color-cutout-gray` | Solid offset shadow color under primary buttons and secondary surfaces |

# Ableton — Style Reference > Editorial workshop on stark white. White paper, black Futura, one blue pen mark for interactivity, photography clipped flush to the edges like magazine spreads. **Theme:** light Ableton's visual system reads like a working studio's editorial wall: stark white canvas, Futura PT geometry, and one confident blue that marks every interactive text. The site is text-first and almost ruthlessly flat — no shadows, no rounded corners, no decorative chrome — letting photography of musicians, hardware, and software do the emotional work. Color appears as small functional punctuation: a vivid blue for links, plus coral and teal tag fills that categorize content without softening it. Navigation is a thin top bar of monospace-feeling product names. The overall feel is that of a well-set technical manual that happens to be beautiful — information density carried by typography and image, not by container design. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink | `#000000` | `--color-ink` | Primary text, nav labels, logo, icon strokes, and every text-level heading — sets the full information hierarchy | | Paper | `#ffffff` | `--color-paper` | Page canvas, card surface, and hero overlay text — the default background for almost every screen | | Fog | `#eeeeee` | `--color-fog` | Subtle form inputs, tag surfaces, and quiet secondary panel backgrounds — barely-there neutral | | Signal Blue | `#0000ff` | `--color-signal-blue` | Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |

# Eight Sleep — Style Reference > midnight observatory with single neon pulse **Theme:** mixed Eight Sleep communicates through nocturnal luxury: a stark dark hero stage gives way to warm off-white surfaces and one electric blue accent that functions like a pulse of light in a quiet room. Typography carries the entire brand voice — NeueMontreal at weight 300 at near-display sizes creates whispered authority, with letter-spacing tightening as scale grows. The palette is almost deliberately starved of color: pure black, warm cream (#f9f8f7) instead of clinical white, and a single vivid blue that earns attention by being absent everywhere else. Components are flat and architectural — pill buttons, 12px cards, hairline borders, and a single whisper-soft shadow. Visual rhythm alternates between full-bleed dark bands and light editorial sections, creating a sleep-cycle cadence across the page. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Obsidian | `#000000` | `--color-obsidian` | Headlines, body text, full-bleed dark hero stage, nav text on light surfaces — the structural anchor of the system | | Paper White | `#ffffff` | `--color-paper-white` | Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color | | Warm Cream | `#f9f8f7` | `--color-warm-cream` | Hero panels, soft section backgrounds, card surfaces on light pages — replaces clinical white with a linen warmth | | Mist Gray | `#f1f2f4` | `--color-mist-gray` | Nested card containers, subtle elevated surfaces, input field backgrounds |

# Pirsch Analytics — Style Reference > sunlit paper notebook with highlighter swatches **Theme:** light Pirsch uses a warm paper-notebook language: a soft cream canvas (#f8f5ed) replaces the usual SaaS white, and the only chromatic punctuation is a sunshine yellow (#ffda6e) that reads as a highlighter, not a brand stamp. Almost the entire interface is achromatic — ink-black text and 1px hairline borders do the structural work that shadows and fills do elsewhere. Typography is a single family (DM Sans) running from a whisper at 14px to a commanding 64px display, with generous 8px-grid breathing room and unusually rounded 24px corners that make cards feel like sticky notes. Green (#6ece9d) appears sparingly as a status/availability signal (happy-customer badge, theme-toggle dot) and never competes with yellow. The overall feel is editorial and tactile — closer to a printed report than a dashboard. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Sunshine Highlight | `#ffda6e` | `--color-sunshine-highlight` | Primary action fill, step badges, accent highlights, callout backgrounds | | Mint Signal | `#6ece9d` | `--color-mint-signal` | Green action color for filled buttons, selected navigation states, and focused conversion moments | | Cream Paper | `#f8f5ed` | `--color-cream-paper` | Page canvas, card surfaces, pill interiors | | Ink | `#000000` | `--color-ink` | Primary headings, body text, 1px hairline borders on cards, images, and dividers |

# Adcker — Style Reference > Giant brutalist poster on warm museum paper **Theme:** light Adcker operates as a typographic monolith: one warm cream canvas, one near-black ink, and display type so large it becomes architecture. The entire interface runs on the tension between oversized editorial headlines and whisper-quiet metadata, with no chromatic accents to soften the impact. Every visual decision is editorial — this reads like the opening spread of a print magazine, not a software product. The 0% colorfulness is deliberate: chromatic color would dilute the authority that sheer typographic scale already provides. The only non-text element that breaks the monochrome spell is a single candid photograph literally embedded inside the headline, treating the image as punctuation rather than decoration. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ink Black | `#191919` | `--color-ink-black` | All text, headlines, borders, link colors — the sole foreground color in the entire system. Near-black rather than pure black adds warmth that harmonizes with the cream canvas | | Bone Canvas | `#efedea` | `--color-bone-canvas` | Page background, card surfaces, nav bar — the warm off-white ground that makes the near-black ink read with high contrast (15.1:1 AAA) without feeling harsh or clinical | | Stone Veil | `#e3e1de` | `--color-stone-veil` | Subtle surface variation against Bone Canvas — used sparingly for secondary panels or section backgrounds to create depth without introducing color |

# Garden Eight — Style Reference > Monumental cream-paper editorial. A 215px serif headline sits alone on warm parchment, surrounded by floating sculptural forms and ocean-air negative space — the page behaves like the cover plate of an art monograph, not a dashboard. **Theme:** light Garden Eight operates as an art-book editorial spread: a warm cream parchment canvas hosts monumental serif type that behaves like gallery wall text rather than product UI. The palette is ruthlessly binary — bone-white surface, ink-black type — and every additional color is treated as intrusion. Layout breathes at near-museum scale, with 180px gutter margins and oversized negative space letting type and sculptural 3D objects become the only content. There is no functional color language: no alert red, no success green, no info blue. Decisions are made by weight, scale, and silence. The system reads more like a couture magazine masthead than a SaaS interface, and any agent reproducing it should prioritize typographic drama and atmospheric restraint over conventional UI affordances. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Parchment | `#dbd6d0` | `--color-parchment` | Page canvas, card surfaces, light dividers, link borders — a warm desaturated bone tone that replaces the conventional near-white and gives the whole system its editorial temperature | | Carbon Ink | `#1e1f1f` | `--color-carbon-ink` | Primary text, display headlines, nav rules, card borders, icon strokes — near-black with the faintest warm cast that harmonizes with the parchment rather than fighting it | | Pitch Black | `#000000` | `--color-pitch-black` | Reserved for maximum-contrast display moments and the deepest text on the lightest surfaces — used sparingly so Carbon Ink carries the default reading weight |

# aave.com — Style Reference > neon violet threading twilight — a light lavender noon collapses into a midnight product surface, and one electric violet is the only color that survives the transition. **Theme:** mixed Aave operates as a dual-mood system: a sunlit lavender hero dissolves into a near-black product surface, with vivid violet (#998eff) threading both halves as the sole chromatic accent. Typography runs on a custom display family (Aave Repro) held in a narrow 400–500 weight range — hierarchy comes from generous size jumps and aggressive negative tracking, not from going bold. Components are soft and pill-shaped by default: 20px is the workhorse corner radius, 1584px marks the full-pill CTA, and elevation is essentially absent — a single soft shadow recipe appears on floating elements only. The result reads as a fintech app that absorbed crypto's electric energy and SaaS's editorial restraint simultaneously, presenting dense DeFi mechanics through a calm, high-contrast canvas. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Aave Violet | `#998eff` | `--color-aave-violet` | Primary CTA fill, outlined action borders, category label accent, decorative icon strokes — the single chromatic thread across light and dark sections; warm enough to feel alive against matte black without becoming aggressive | | Obsidian | `#221d1d` | `--color-obsidian` | Dominant dark surface, body text in light sections, primary nav text — the near-black that anchors the Pro and Markets bands | | Inkwell | `#0f0f10` | `--color-inkwell` | High-contrast neutral action fill for primary buttons on light surfaces. | | Charcoal | `#000000` | `--color-charcoal` | Pure-black fallbacks for fills, strokes, and high-contrast borders |

# bella Kitchen Appliances — Style Reference > Sunlit kitchen counter at golden hour — warm cream surfaces with a single pop of coral. **Theme:** light bella is a warm, domestic kitchen-counter aesthetic built on a cream-and-coral palette that feels sunlit rather than clinical. The entire interface rests on a warm off-white canvas (#ebeadf) with slightly warmer beige cards (#d5cec0) and white surfaces floating above — layers are defined by hue temperature, not stark contrast. A single saturated coral accent (#f04923) provides all the energy: bestseller tags, promotional cards, price highlights, and active states. Typography uses a geometric sans (Supreme LL TT) with uniformly tight -0.05em tracking at every size, giving headings a compact, modern posture. The design avoids shadows in favor of color-temperature layering and 12px rounded corners; buttons and badges are full pills (999px). The overall feel is approachable, appetite-driven, and product-forward — photography does the heavy atmospheric lifting while the UI stays minimal and warm. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Warm Canvas | `#ebeadf` | `--color-warm-canvas` | Page background — the foundational warm off-white that gives the whole interface its sunlit, lived-in feel | | Pristine Surface | `#ffffff` | `--color-pristine-surface` | Elevated card surfaces, navigation bar, product card backgrounds, pill button fills | | Sand Beige | `#d5cec0` | `--color-sand-beige` | Secondary card surfaces and warm-toned background panels for product grouping and featured sections | | Ink Black | `#000000` | `--color-ink-black` | Primary text, icon strokes, hairline borders, and the brand wordmark — defines the entire typographic system |

# Josh Warner — Style Reference > black void gallery wall **Theme:** dark Josh Warner's portfolio operates as a near-pure black gallery wall: the interface recedes so that 3D renders, product mockups, and photographic compositions can dominate every viewport. Typography is whisper-thin and uniformly weighted at 400 across the scale, using a single sans-serif family that refuses to shout — hierarchy is built through size and generous letter-spacing (0.04em) rather than weight contrast. The entire palette is achromatic except for a single electric green status dot (#08ff00), which functions as the site's only living signal against the void. Surfaces are flat or near-flat; depth is borrowed entirely from the artwork, not from drop shadows or gradients. Components are sparse, pill-shaped, and almost weightless — ghost buttons, hairline borders on #000, circular avatars, and pill nav items. The system is a frame, not a subject. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Void | `#0f0f0f` | `--color-void` | Page canvas and primary surface — the base layer beneath all artwork, slightly lifted from pure black to prevent OLED banding in the dark void | | Absolute | `#000000` | `--color-absolute` | Hairline borders, image containers, icon strokes, footer dividers — pure black acts as the structural ink that defines edges in the absence of visible card surfaces | | Charcoal | `#1a1a1a` | `--color-charcoal` | Elevated footer surface and deeper UI panels — a single step up from canvas for zone separation without breaking the dark void | | Faint | `#080808` | `--color-faint` | Shadow base for subtle elevation effects — nearly invisible against canvas, used in box-shadow compositions for soft ambient lift |

# Stink Studios — Style Reference > cinema studio at midnight — the projector hums, the room is black, only the reel glows. **Theme:** dark Stink Studios operates as a cinematic canvas: a near-monochrome world where black absorbs everything except the work, and typography carries every structural decision. The visual language is deliberately austere — no UI chrome, no decorative gradients on controls, no colored buttons pulling attention from the reels. Instead, a film-studio hero (blue-lit, full-bleed) establishes the world, large confident headlines in negative-tracked Helvetica and Times New Roman do the talking, and warmth arrives only through the work itself. The system is built for an AI agent to produce gallery-like pages where large type and full-bleed media do the heavy lifting, and every interactive element recedes into a flat black plane. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Void | `#000000` | `--color-void` | Neutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color | | Bone | `#ffffff` | `--color-bone` | Primary text, heading strokes, nav links, icon strokes, badge fills, logo type — the only high-contrast value in the system | | Soot | `#050505` | `--color-soot` | Subtle tonal break from pure black for nested surfaces and hairline borders that need to feel present without breaking the dark mode | | Ember Coral | `#e1695e` | `--color-ember-coral` | Accent warmth for marquee display moments, logo gradient highlight, and select project card color treatments — borrowed from the work, never applied to UI chrome |

# Slack — Style Reference > Plum-warm digital hearth — a cream-white workspace where deep aubergine accents glow like embers in a quiet, collaborative room. **Theme:** light Slack's design language is a deep-aubergine workspace built on a cream-white canvas, where the brand's signature plum purple (#611f69) is reserved for moments of action and emphasis while nearly everything else stays achromatic and calm. The aesthetic is editorial-meets-product: oversized Salesforce-Avant-Garde display headlines whisper in weight 700 with tight negative tracking, product UI screenshots carry the actual color story (multicolored hash marks, channel pills, avatars), and the page breathes through generous vertical rhythm broken by full-bleed dark-purple storytelling bands. Playful radial gradient washes (pink, blue, green, yellow at 25% opacity) float behind sections like soft spotlights, echoing the lozenge brand mark without being loud. Components are lightweight and confident — 4px-radius buttons, 16px-radius cards, hairline lavender borders, and almost no elevation except a single soft shadow. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Aubergine Core | `#611f69` | `--color-aubergine-core` | Pink supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color | | Midnight Plum | `#1d1c1d` | `--color-midnight-plum` | Primary text, dark section backgrounds, button text on light surfaces — the near-black that reads as warm rather than clinical | | Eggplant Ink | `#2e0039` | `--color-eggplant-ink` | Display text on light lavender surfaces, deep purple headlines — the chromatic dark text that keeps the brand's purple identity in headings | | Plum Shadow | `#3d0157` | `--color-plum-shadow` | Hover and pressed states on primary buttons, deeper purple accents — what Aubergine Core becomes when it presses down |

# dope.security — Style Reference > Dusk terminal at the edge of orbit **Theme:** dark Dope Security operates as a dark, cinematic interface — a near-black canvas (#090909) punctuated by vivid violet (#af50ff) and atmospheric photography of violet-pink cosmic skies. Typography carries the brand's rebellious confidence: a geometric sans (Whyte Inktrap) at extreme sizes pairs with an editorial italic serif (GrandSlang) for emotional moments like 'Your new', while a monospaced display variant creates stenciled, airport-board aesthetics for feature lists. Surfaces are nearly flat with hairline borders; the only elevation comes from glassmorphic panels and vivid gradient cards. Color appears sparingly but decisively — one violet accent for interactive moments, gradient washes for comparison blocks, and the rest is pure contrast. The visual rhythm alternates between vast negative space and dense, oversized type. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Void | `#090909` | `--color-void` | Page canvas, section backgrounds — the base dark that makes all color vibrate | | Bone White | `#f7f9fa` | `--color-bone-white` | Primary text, icon fills, hairline borders — used at scale across headings, cards, and nav | | Ash | `#f0f0f0` | `--color-ash` | Heading text and decorative type outlines, large-scale display borders | | Slate | `#6b6b6b` | `--color-slate` | Muted borders, secondary icon strokes, subdued structural lines |

# Wrike — Style Reference > Lime switch on a clean engineer's console — vivid green accents powered against deep navy authority, floating on white. **Theme:** light Wrike's design language is built on a stark white canvas punctuated by a single vivid lime green that acts as a power switch across the interface. The system uses a deep midnight navy for authority text and dark sections, with cool blue-gray neutrals providing soft surface separation rather than warm grays or heavy shadows. Typography is carried by TT Norms Pro at comfortable 4px-grid spacing, with weight 700 headlines that command attention against whisper-thin 400 body text. Components are pill-shaped (40px radius) and card-soft (20px radius), using one signature shadow recipe that floats product mockups off the page. The overall feel is enterprise-confident but energetic — a work-management tool that looks like a productivity OS, not a form. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Signal Green | `linear-gradient(to left, rgb(0, 153, 128), rgb(0, 178, 89), rgb(0, 224, 92), rgb(0, 178, 89), rgb(0, 153, 128))` | `--color-signal-green` | Green supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color; Decorative geometric shapes, radial glow accents in dark sections, gradient endpoints | | Midnight Navy | `#162136` | `--color-midnight-navy` | Headlines, primary body text, navigation, dark footer sections — the structural anchor of the entire hierarchy | | Slate Navy | `#2b3a57` | `--color-slate-navy` | Secondary headings, card titles, muted dark text — a softened navy for sub-hierarchy | | Steel Blue-Gray | `#657694` | `--color-steel-blue-gray` | Helper text, secondary copy, muted labels, dropdown menus — the cool-toned equivalent of mid-gray |

# ldd — Style Reference > Dot-matrix broadsheet on cream paper — a single sheet of warm stock, overprinted once with massive black type and nothing else. **Theme:** light A two-color broadsheet: warm cream canvas (#fffcf0), near-black ink (#000310) with a faint blue undertone, and zero decoration. Drama is generated entirely by scale — a custom 135px display face (LDD) with dot-matrix character treatments fights against a tiny neo-grotesque body face (NeueMontreal at 12–16px, line-height 1.0) for the screen's attention. The interface behaves less like a website and more like a printed zine: horizontal rules divide the page, oversized section numbers (01, 04) punctuate the rhythm, and a labeled scroll-progress bar (Scroll / To / Discover) replaces all conventional CTAs. 200px margins between sections create gallery-hung breathing room. No shadows, no gradients, no rounded corners, no color punctuation — every accent a designer might be tempted to add has been removed on purpose. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Cream Paper | `#fffcf0` | `--color-cream-paper` | Page canvas, card surfaces, section backgrounds — a warm off-white that reads as paper, not screen, and prevents pure-white harshness while giving the near-black type a slight warm push | | Midnight Ink | `#000310` | `--color-midnight-ink` | Primary text, borders, section rules, dark-section backgrounds — near-black with a barely-perceptible blue undertone that distinguishes it from flat #000000 and keeps the palette from feeling like a photocopy | | Pure Press | `#000000` | `--color-pure-press` | Secondary text, nav labels, fine details — true black used sparingly for maximum contrast accents against the midnight ink |

# Memorisely — Style Reference > Architect's drafting table on warm parchment — a quiet, monochrome workspace where every element is a typographic decision. **Theme:** light Memorisely reads as a typographer's workspace: a warm cream canvas, pure white card surfaces, and a single near-black that serves as both text and primary action. The system is deliberately zero-chromatic — no blue, no green, no accent hue — letting Inter's weight contrast and tight negative tracking carry all hierarchy. Components stay flat and pill-leaning: a floating nav bar, 8px button corners, and 100px-radius interactive elements create a designed-by-a-designer feel without ornament. Separation comes from hairline borders in warm linen (#f2f0e9) and the cream-to-white surface jump, not from shadows or color. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Warm Parchment | `#faf9f6` | `--color-warm-parchment` | Page canvas, body background — the base layer that gives the entire site its designed-by-hand warmth | | Paper White | `#ffffff` | `--color-paper-white` | Card surfaces, floating navigation, elevated content blocks — pure white sits one step above the cream canvas | | Soft Linen | `#f2f0e9` | `--color-soft-linen` | Hairline borders, subtle dividers, muted background washes — the warm-tinted replacement for #e5e5e5 | | Ink Black | `#171717` | `--color-ink-black` | Primary text, primary action button background, strong heading borders — the workhorse near-black that unifies copy and CTAs |

# Eduardo del Fraile — Style Reference > Black gallery vitrine — a darkened room where one object glows in white text **Theme:** dark Eduardo del Fraile is a portfolio built on radical subtraction: a pure black void where one custom grotesk and white text form the entire interface. The UI recedes almost entirely so that 3D renders float in negative space like objects under museum spotlights. Every typographic decision, every near-absence of color, every flat shadowless surface serves the same purpose — make the canvas feel infinite and weightless, then place one object inside it. Components are text-first and borderless; hierarchy comes from weight shifts in Akzidenz Grotesk alone, not from fills, elevations, or accent colors. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Void | `#000000` | `--color-void` | Page background, full-bleed canvas for all content | | Bone White | `#ffffff` | `--color-bone-white` | All text, navigation, footer instructions, and thin UI strokes | | Ash Gray | `#888888` | `--color-ash-gray` | Secondary or muted text, de-emphasized labels, inactive hints |

# Coda — Style Reference > Monumental letters on warm cream parchment — Coda reads like a hand-set marketplace poster, not a SaaS dashboard. **Theme:** light Coda's visual language is a confident, almost architectural marketplace identity built on a warm cream canvas (#f8f9eb) rather than stark white. The defining signature is monumental display type — a custom geometric grotesque (Monument Grotesk) set extremely tight (line-height 0.90) at sizes up to 134px, making headlines feel like carved signage rather than web copy. Every surface is bordered, not shadowed: hairline charcoal outlines on cream create a blueprint-like precision that pairs with pill-shaped tags, small rounded buttons (~13px radius), and one deep forest-green section that breaks the monochrome rhythm with organic blob shapes. Color is used as deliberate, sparse punctuation — a mint card here, a lilac or rose card there — while the structural palette stays earthy and achromatic. The effect is half editorial brutalism, half boutique storefront: warm, tactile, and emphatically physical rather than digital-glass. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Cream Parchment | `#f8f9eb` | `--color-cream-parchment` | Page canvas, primary background, nav and body surface | | Pure White | `#ffffff` | `--color-pure-white` | Elevated card surfaces, icon fills inside outlined containers, text on dark buttons | | Obsidian | `#000000` | `--color-obsidian` | Hairline borders, primary text, outline strokes, dark surface dividers | | Charcoal | `#202020` | `--color-charcoal` | Filled button background, dark elevated surfaces, secondary text on cream |

# basement.studio — Style Reference > Void print shop at 3am — massive compressed type bleeding off a pitch-black canvas, one ember of orange light on the nav, everything else white or ghost-gray. **Theme:** dark Pure void aesthetic — the page opens as a black rectangle with a single orange nav item and a whispered 'Scroll to Explore', then erupts into massive display type at 87px. The #000000 canvas is absolute, not 'dark gray' — no surface gradients, no depth layers, no decorative noise. Geist at 87px weight 600 with -0.04em letter-spacing is the visual anchor: compressed, wide, mechanical. The single accent, #ff4d00 ember orange, appears only on the active nav item — never on CTAs, never on buttons — making it feel like an indicator light, not a brand color. Grid-bordered client logo tiles in #454545 create a dense, file-cabinet inventory feel against pure black. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Ember Signal | `#ff4d00` | `--color-ember-signal` | Active nav state only — appears on a single interactive element as a hot indicator, never used for buttons or CTAs; its rarity is the feature | | Void | `#000000` | `--color-void` | Page background, button fill, SVG fills — absolute black, not near-black | | Chalk | `#ffffff` | `--color-chalk` | Primary text, nav labels, button text, body copy | | Fog | `#e5e7eb` | `--color-fog` | Border color across nav, cards, buttons, logo grid dividers — the structural skeleton visible against black |

# Upstash — Style Reference > Emerald terminals in a sunlit workshop — bright white surfaces with one deep green accent that makes every action feel switched on. **Theme:** light Upstash presents a developer-first data platform with a bright, airy workshop aesthetic: white canvas, hairline borders, and a single emerald green accent that does the work of a dozen colors. The brand uses deep forest green (#022c22) for all text — not black — which gives every screen a subtle organic warmth while keeping the identity unmistakably technical. Headlines are massive (up to 180px) and use a compressed custom display cut of Inter Tight with tight tracking, creating a sense of confident engineering scale. Components are deliberately lightweight: pill-shaped controls dominate, borders are 1px and barely visible, shadows are reduced to a whisper (0 1px 2px at 5% opacity). The result is a surface that recedes so code, logos, and product chrome can do the talking. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Forest Ink | `#022c22` | `--color-forest-ink` | All text, headings, and icon strokes — deep desaturated green replaces black throughout the entire interface, giving the system its organic technical warmth | | Emerald Pulse | `linear-gradient(to right, #007a55, #00bc7d, #f59e0b)` | `--color-emerald-pulse` | Green supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color; Hero headline gradient flowing from forest green through emerald to amber — makes the display wordmark feel alive | | Pine | `#007a55` | `--color-pine` | Secondary brand green for darker button states, link text, and icon outlines when a heavier weight than Forest Ink is needed | | Mint Glow | `#34d399` | `--color-mint-glow` | Light accent green for secondary icons, decorative highlights, and hover state washes |