@nurix/etna 0.19.3 → 0.19.4

package/data/harnesses/code/skills/design/data/combinations/styles.csv

@@ -1,54 +1,67 @@
-id,movement,tier,era,keywords,description,palette_stance,type_stance,shape_stance,motion_stance,density_affinity,best_for,avoid_for,token_leanings,operator_note
-1,Swiss / International Typographic,operator-active,1950s Swiss,"grid discipline, neutral palette, grotesque sans, hierarchy, whitespace, functional","Grid-driven clarity born in postwar Switzerland: content sits on a strict column grid, hierarchy comes from size and weight rather than ornament, and a neutral ground carries a single accent. Nothing decorative survives the edit, so every element earns its place. The modern revival keeps the discipline while loosening the grid for responsive work.","monochrome neutrals, one restrained accent","grotesque sans, tight tracking, clear scale","sharp to small radius, hairline rules","minimal, sub-200ms fades",standard,"dashboards, enterprise tools, documentation, admin consoles","playful consumer brands, entertainment, artistic showcases",radius: 2-4px; shadow-intensity: low; border-weight: 1px; font-sans: grotesque; heading-tracking: tight; contrast-boost: 1,"The default operator posture: a tight grid, one accent, and hairline dividers read cleanly at high data density."
-2,Flat Design,operator-active,2010s,"two-dimensional, no shadow, solid color, iconography, clean edges","Strips away bevels, gradients, and drop shadows so hierarchy rests entirely on color, scale, and type. Surfaces are solid fields, icons are simplified, and edges stay crisp. It reads fast and renders cheaply, which is why it became the default of the app era.","solid fields, limited bright set","bold sans, weight-driven hierarchy","small consistent radius, no shadow",quick color and opacity shifts,standard,"web apps, cross-platform tools, SaaS, admin panels","luxury showcases, immersive 3D, high-detail realism",radius: 4-6px; shadow-intensity: 0; border-weight: 1px; font-sans: sans; contrast-boost: 1,Flat surfaces and token-driven color keep dense tables legible without depth cues competing for attention.
-3,Structural Brutalism,operator-active,1990s web,"raw structure, system fonts, visible borders, high contrast, utilitarian","The functional edge of web brutalism: exposed structure, system typefaces, hard borders, and unapologetic high contrast with no gloss. Stripped of its anti-design theatrics it becomes a blunt, honest utility look. Content and controls sit in plain view with nothing softened.","stark neutrals, one loud accent","system sans or mono, heavy weight","flat corners, thick visible borders","near-instant, minimal transitions",dense,"internal utilities, developer tools, data entry, ops consoles","consumer onboarding, premium brands, calm reading surfaces",radius: 0px; shadow-intensity: 0; border-weight: 2px; font-sans: grotesque; font-mono: mono; contrast-boost: 1.1,"Zero-radius, thick-bordered blocks with mono figures suit blunt utilitarian tools where structure beats polish."
-4,Material Design,operator-active,2014 (MD3 2021),"tonal surfaces, elevation, pill controls, state layers, systematic","Google's system built on tonal surfaces, a defined elevation scale, and state layers that respond to touch. MD3 (Material You) leans on tonal tinting rather than heavy shadow and rounds controls generously. It is comprehensive, documented, and comfortable at B2B data density.","tonal roles, seeded accent","humanist sans, defined type roles","medium radius, tonal elevation","standard easing, 200-300ms",standard,"Android apps, cross-platform tools, B2B data tools","bespoke luxury brands, anti-design statements",radius: 8-12px; shadow-intensity: low-mid; border-weight: 1px; font-sans: humanist; duration-normal: 200ms; ease-default: standard,"Tonal elevation and a documented component set carry dense B2B surfaces with predictable, accessible defaults."
-5,Dark Mode (OLED),operator-active,2010s,"dark theme, near-black canvas, high contrast, low emission, focus visibility","A dark-first palette on a near-black rather than pure-black ground, with light text and a restrained accent tuned for low light. It reduces eye strain over long sessions and saves power on OLED panels. Contrast and focus states must be deliberately maintained since depth cues are scarce.","near-black ground, light text, one accent","sans, slightly heavier weights for legibility","small radius, subtle borders",restrained fades,dense,"monitoring consoles, developer tools, trading, night-shift ops","print-first content, high-brightness outdoor, color proofing",radius: 4-8px; shadow-intensity: low; border-weight: 1px; contrast-boost: 1.1; font-sans: sans,A near-black canvas with one accent and enforced contrast sustains long monitoring shifts without glare.
-6,Accessible / Inclusive,operator-active,Universal,"WCAG, high contrast, keyboard nav, screen reader, non-color signals, focus rings","Not a look so much as a floor: strong contrast, visible focus, keyboard reachability, and status carried by icon or text rather than color alone. It bakes in large-enough type, semantic structure, and reduced-motion respect. Every other movement is judged against it.","high-contrast, color never the only signal","legible sans, generous minimum size","clear borders, visible focus rings",reduced-motion honored,standard,"government, healthcare, education, compliance-bound tools",nothing - it is the universal baseline,contrast-boost: 1.2; border-weight: 1.5px; icon-stroke: 2; font-weight-normal: 400,"The mandatory substrate under every operator surface: contrast, focus, and non-color status signals are non-negotiable."
-7,Bento Grid,operator-active,2020s,"modular tiles, asymmetric cells, dashboard layout, interlocking spans","Content organized into a mosaic of variably sized tiles that interlock like a bento tray, popularized by Apple and Linear then absorbed into dashboards. Each cell holds one idea and the grid stays gapless with no orphan corners. It scales from summary tiles to full metric boards.","neutral ground, accent per active tile","sans, clear per-tile hierarchy","consistent medium radius, hairline gaps",subtle tile hover lift,standard,"dashboards, metric boards, product summaries, portals","linear reading flows, single-focus forms",radius: 8-12px; shadow-intensity: low; border-weight: 1px; density-gap: standard,Interlocking tiles map cleanly onto KPI boards when spans stay gapless and each cell carries a single figure.
-8,Dimensional Layering,operator-active,2020s,"elevation scale, z-depth, restrained shadow, card stacking, hierarchy","Uses a disciplined elevation scale, one shadow job per element, to separate cards, modals, and navigation without decoration. Depth communicates stacking order, not style. Kept restrained it clarifies which surface is active.","neutral surfaces, tonal separation","sans, standard scale","medium radius, single-purpose shadow",short elevation transitions,standard,"card layouts, modals, navigation, layered dashboards","flat brand statements, print, ultra-dense cockpits",radius: 6-8px; shadow-intensity: mid; border-weight: 0-1px; duration-normal: 150ms,A single elevation scale signals active versus resting surfaces; drop it above density 7 where hairlines replace cards.
-9,Restrained Micro-interaction,operator-active,2020s,"subtle feedback, tactile press, state transitions, sub-100ms, contextual","A behavioral layer rather than a palette: brief, purposeful feedback on press, hover, and state change that confirms an action without drawing attention. Durations stay short and effects animate only transform and opacity. Overused it becomes noise, so restraint is the whole point.",inherits host palette,inherits host type,inherits host geometry,50-150ms transform/opacity feedback,standard,"productivity tools, forms, interactive tables, consoles","static reports, print, motion-sensitive contexts",duration-fast: 100ms; ease-default: ease-out; shadow-intensity: low,"Sub-150ms press and state feedback confirms actions on dense controls, and must survive reduced-motion by resetting to near-zero."
-10,AI-Native UI,operator-active,2020s,"assistant surfaces, streaming responses, disclosure, provenance, override controls","Interfaces built around an assistant or model in the loop: prompt fields, streaming output, source attribution, and controls to inspect or override what the system did. The aesthetic stays clean and neutral so trust signals remain legible. Disclosure, human override, and auditability are structural, not optional.","neutral ground, one accent for AI actions","sans, mono for generated code and data","small radius, clear affordance borders","streaming reveals, restrained",standard,"copilots, agent consoles, review queues, AI operator tools","purely static content, brand showcases",radius: 6-8px; font-sans: sans; font-mono: mono; contrast-boost: 1.1; duration-normal: 150ms,"Wears an operator copilot well when disclosure, provenance, and override affordances are first-class per the trust rubric; keep the accent a brand token, not reflex indigo."
-11,Data-Dense Dashboard / Cockpit,operator-active,2020s,"high density, hairline dividers, tabular numerals, cockpit, no card boxes","The analytics-cockpit posture: many figures per screen, hairline dividers instead of card boxes, tight padding, and tabular numerals on every column. It collapses the BI dashboard patterns (executive, real-time, drill-down, financial) into one visual discipline. Above a density threshold, chrome disappears so data can breathe by subtraction.","neutral ground, status via semantic tokens","compact sans, tabular lining numerals","near-flat, hairline dividers","minimal, data-update fades only",dense,"BI dashboards, monitoring, trading, financial reporting, ops","marketing pages, spacious consumer apps, storytelling",radius: 2-4px; shadow-intensity: 0; border-weight: 1px; density-gap: tight; table-row-height: 28-36px; font-sans: grotesque,"The native cockpit look: drop card boxes, use hairlines and mono numbers, and let subtraction carry the highest densities."
-12,Terminal / CLI,operator-active,1980s,"monospace, command-line, near-black canvas, phosphor accent, high contrast","The command-line console rendered as a UI: monospace throughout, a near-black ground, and a single phosphor accent (green or amber) with sharp borders and a blinking caret. Layout is measured in character cells rather than fluid percentages. Scanlines and boot-log theatrics are optional garnish, not structure.","near-black ground, single phosphor accent","monospace only, fixed sizes","flat corners, thin borders","caret blink, near-instant",dense,"developer tools, log viewers, CLI companions, infra consoles","consumer apps, marketing, touch-first mobile",radius: 0px; shadow-intensity: 0; border-weight: 1px; font-mono: mono; contrast-boost: 1.1,Fits log viewers and infra consoles where mono alignment aids scanning; keep scanlines and typewriter effects out of the operator build.
-13,Neumorphism,dormant-marketing,2020s,"soft UI, extruded, inset, dual shadows, monochrome, low contrast","Elements appear pressed into or extruded from a single monochrome surface using paired light and dark shadows. The effect is soft and tactile but the low contrast between control and background fails accessibility thresholds. It is a showcase aesthetic, not a working one.","monochrome, tint on tint","soft sans, low weight","rounded, dual soft shadows","gentle press, 150ms",spacious,"hardware-control mockups, beauty utility showcases, brand pages","data-dense tools, accessibility-bound surfaces, dashboards",radius: 12-16px; shadow-intensity: mid (dual); border-weight: 0px; contrast-boost: 0.9,Excluded by the contrast floor; only a marketing showcase pack with brand-approved low-contrast surfaces would activate it.
-14,Soft UI Evolution,dormant-marketing,2020s,"reformed neumorphism, softer shadows, improved contrast, subtle depth",A remediated neumorphism that raises contrast to accessibility thresholds while keeping gentle depth. It reads more modern than its parent but still leans on decorative shadow to define surfaces. The soft-depth premise keeps it off dense operator screens.,"improved-contrast pastels, tonal","sans, standard weight","medium radius, soft multi-layer shadow",200-300ms smooth,spacious,"modern SaaS marketing, wellness apps, showcase surfaces","dense dashboards, cockpit surfaces, high-density tables",radius: 8-12px; shadow-intensity: low-mid; border-weight: 0-1px; contrast-boost: 1,"A calmer marketing pack could activate it, but its decorative depth stays out of data-dense operator work."
-15,Glassmorphism,dormant-marketing,2020s,"frosted glass, backdrop blur, translucency, layered depth, vibrant ground","Translucent panels with backdrop blur float over a vibrant background, edged with a faint light border. Depth comes from stacked blur and reflection. The blur cost and text-contrast fragility rule it out of working surfaces.",translucent whites over vivid ground,"sans, needs contrast guarding","medium radius, blurred fills","soft parallax, blur transitions",spacious,"hero overlays, premium marketing, lifestyle showcases","dashboards, dense tables, low-power devices, a11y-critical",radius: 12-16px; shadow-intensity: low; border-weight: 1px; contrast-boost: 0.9,Heavy blur-stacking violates the floor; a single hero panel in a marketing pack is the only place it belongs.
-16,Liquid Glass,dormant-marketing,2020s,"flowing glass, morphing, chromatic aberration, iridescent, dynamic blur","Glassmorphism taken to motion: morphing shapes, iridescent oil-slick gradients, chromatic aberration, and blur that shifts as things move. It is premium and heavy in equal measure. Nothing about it survives a data-density or accessibility test.","iridescent spectrum, translucent base","sans, contrast-fragile","fluid morphing, dynamic blur",400-600ms morph curves,spacious,"luxury product launches, creative brand experiences","any operator surface, dense data, low-power devices",radius: 16-24px; shadow-intensity: low; duration-slow: 500ms; contrast-boost: 0.85,"Blur-stacking plus animation-led morphing put it firmly in a premium marketing pack, never an operator build."
-17,3D & Hyperrealism,dormant-marketing,2020s,"WebGL, realistic texture, spatial depth, physics lighting, parallax layers, product preview","Real-time 3D scenes, tactile textures, and physically lit surfaces built on WebGL engines, often with multi-layer parallax. Immersive and expensive, it strains performance and accessibility budgets. It also folds in dedicated 3D product-preview viewers.","rich realistic gradients, metallics",sans over rendered scenes,"modeled depth, realistic shadow","300-400ms 3D transitions, parallax",spacious,"product showcases, gaming, immersive marketing, 3D configurators","dashboards, forms, data tables, low-end devices",radius: 8-16px; shadow-intensity: high; duration-slow: 400ms,A product-showcase or configurator pack activates it; its render cost and poor a11y bar it from operator tools.
-18,Skeuomorphism,dormant-marketing,2007,"real-world metaphor, texture, leather and metal, tactile, detailed gradients","Interfaces that imitate physical materials such as leather stitching, brushed metal, and paper, with deep gradients and layered shadow. It made early touch UIs legible by analogy but textures now hurt readability and scale poorly. It reads as nostalgia today.","material colors, deep gradients",sans or serif over textures,"modeled bevels, heavy shadow",300-500ms tactile,spacious,"nostalgic showcases, luxury simulations, storytelling","modern enterprise, dense data, accessibility-bound tools",radius: 8-12px; shadow-intensity: high; border-weight: 1px; contrast-boost: 0.9,A themed nostalgia pack would activate it; texture-driven depth keeps it out of readable operator surfaces.
-19,Vibrant & Block-based,dormant-marketing,2020s,"bold blocks, neon palette, duotone, large type, energetic","Big color-blocked sections, neon or triadic palettes, oversized type, and animated patterns for maximum energy. It targets youth and consumer brands. The multi-color, high-saturation approach conflicts with the one-accent operator discipline.","four to six vivid colors, duotone",oversized bold sans,"large blocks, medium radius","animated patterns, 200-300ms",spacious,"startups, creative agencies, youth brands, entertainment","enterprise, finance, healthcare, dense tools",radius: 8-16px; shadow-intensity: low; density-gap: loose; heading-tracking: normal,A consumer marketing pack activates it; its multi-color maximalism breaks the single-accent rule for operators.
-20,Gen Z Chaos / Maximalism,dormant-marketing,2023,"maximalism, internet-core, sticker chaos, clashing color, dense collage","Deliberate visual overload of clashing colors, stickers, mixed type, and collaged layers channeling internet culture. Personality is the product. It is decoration-forward by design, which is exactly what operator surfaces subtract.",clashing saturated colors,"mixed faces, expressive","layered, rotated, irregular","busy, playful",spacious,"Gen Z brands, music artists, viral campaigns, creative portfolios","any operator tool, finance, enterprise, accessibility-bound",radius: mixed; shadow-intensity: mixed; heading-tracking: loose,A viral campaign pack activates it; decoration-forward maximalism is barred from operator work by the floor.
-21,Aurora UI / Gradient Mesh,dormant-marketing,2020s,"mesh gradient, northern-lights blend, luminous, animated color, atmospheric","Large flowing mesh gradients evoking the northern lights, blending complementary hues in slow animated loops. It gives marketing surfaces an ambient, premium glow. On working surfaces the moving color competes with content.",complementary mesh blends,sans over gradient,"soft, gradient-filled",8-12s gradient loops,spacious,"hero backgrounds, SaaS marketing, music and lifestyle brands","dashboards, dense content, accessibility-critical",radius: 12-16px; shadow-intensity: low; duration-slow: 500ms+,A hero-background marketing pack activates it; animated mesh color distracts from data and stays out of operator builds.
-22,Retro-Futurism,dormant-marketing,1980s,"neon glow, CRT scanlines, synthwave, glitch, monospace","Eighties science-fiction nostalgia: neon on black, CRT scanlines, glitch effects, and glowing monospace. It is atmosphere-first and strains contrast and comfort over time. Great for a themed campaign, wrong for sustained work.",neon on deep black,"monospace, glowing","sharp, glowing borders",glitch and scanline effects,standard,"gaming, music platforms, nostalgic campaigns, entertainment","professional tools, finance, accessibility-bound, long sessions",radius: 0-4px; shadow-intensity: glow; font-mono: mono; contrast-boost: 1,A retro campaign pack activates it; neon glow and glitch effects fail comfort and contrast for operators.
-23,Cyberpunk,dormant-marketing,2020s,"neon dystopia, glitch, terminal fonts, HUD accents, high contrast","High-contrast neon over black with glitch motion, monospace accents, and dystopian ornament drawn from hacker culture and cyber-noir. It absorbs the cyberpunk-HUD mobile variants. Bold and immersive, it is atmosphere over legibility.",neon accents on black,mono and condensed sans,"sharp, angular, glowing","glitch, flicker",standard,"gaming, crypto brands, sci-fi campaigns, large-screen visuals","conservative industries, a11y-critical, long-session tools",radius: 0-4px; shadow-intensity: glow; font-mono: mono; contrast-boost: 1.1,A gaming or crypto marketing pack activates it; glow-led neon dystopia is off-limits for operator surfaces.
-24,HUD / Sci-Fi FUI,dormant-marketing,2010s,"fictional UI, telemetry rings, glowing readouts, angular frames, sci-fi","The fictional-interface look of films and games: glowing telemetry rings, angular frames, and dense fake readouts. It projects technical spectacle rather than usable structure. Its decoration mimics data without serving it.",cyan and amber glow on black,"condensed sans, mono","angular frames, glowing lines",continuous ambient animation,standard,"sci-fi games, movie props, cybersecurity marketing, demos","real dashboards, operator tools, accessibility-bound",radius: 0-2px; shadow-intensity: glow; font-mono: mono,A demo or entertainment pack activates it; its decorative telemetry imitates data and never belongs on a real console.
-25,Vaporwave,dormant-marketing,1980s-90s,"pastel neon, retro glitch, classical busts, 90s nostalgia, surreal","A surreal 80s to 90s nostalgia palette of pastel neon, retro glitch, and kitsch imagery. It is an art movement more than an interface system. Purely expressive, it has no operator application.","pastel neon, magenta and cyan",retro display faces,"soft, surreal collage",slow glitch drift,spacious,"music platforms, creative portfolios, nostalgia marketing","any functional tool, dense data, professional contexts",radius: 8-12px; shadow-intensity: glow; heading-tracking: loose,Only a creative or music campaign pack activates it; it is expressive art with no operator use.
-26,Y2K Aesthetic,dormant-marketing,2000s,"chrome, bubble, glossy, metallic, early-web nostalgia","Turn-of-millennium chrome, glossy bubbles, and metallic gradients revived as nostalgia. Playful and reflective, it prizes surface shine. It carries no discipline for dense information.",chrome and candy metallics,rounded display faces,"glossy bubbles, high radius",glossy shimmer,spacious,"fashion brands, music, Gen Z nostalgia, entertainment","enterprise, finance, dense tools, accessibility-bound",radius: 16-24px; shadow-intensity: mid; heading-tracking: normal,A nostalgia campaign pack activates it; glossy chrome has no place on a working operator surface.
-27,Memphis Design,dormant-marketing,1980s,"postmodern, squiggles, confetti shapes, primary bursts, playful geometry","The 1980s postmodern movement of squiggles, confetti geometry, and clashing primaries. It is joyful, chaotic ornament. As UI it is pure brand personality with no data discipline.",clashing primaries and pastels,playful sans,scattered geometric shapes,"bouncy, playful",spacious,"creative agencies, youth brands, event promotion, playful marketing","enterprise, finance, dense tools, professional",radius: mixed; shadow-intensity: low; heading-tracking: normal,A playful campaign pack activates it; confetti ornament is the opposite of operator restraint.
-28,Motion-Driven,dormant-marketing,2020s,"animation-heavy, scroll effects, parallax, entrance sequences, transitions","Design where animation leads, with scroll-triggered reveals, parallax layers, orchestrated entrances, and page transitions carrying the experience. It suits storytelling. On operator surfaces orchestration is explicitly banned.","bold, movement-emphasizing","sans, animated","varies, motion-first","parallax, orchestrated sequences",spacious,"portfolio sites, storytelling, interactive marketing, launches","dashboards, data tools, low-power, motion-sensitive",duration-slow: 400-500ms; shadow-intensity: low,A storytelling marketing pack activates it; animation-led design is barred from operator surfaces by the floor.
-29,Kinetic,dormant-marketing,2020s,"kinetic typography, marquees, viewport-scaled text, scroll scaling, brutalist energy","Typography as moving architecture, with infinite marquees, viewport-scaled headlines, and scroll-driven scaling under brutalist high contrast. Motion is constant and reactive. It is a performance, not a workspace.","high-contrast, one acid accent","oversized uppercase, tight tracking","flat corners, thick borders","marquees, scroll-scrubbed transforms",spacious,"brand flagships, immersive storytelling, culture and music sites","dashboards, dense tools, accessibility-bound, long sessions",radius: 0px; shadow-intensity: 0; border-weight: 2px; heading-tracking: tight; duration-fast: 100ms,A flagship marketing pack activates it; constant motion and poster-scale type never suit operator work.
-30,Parallax Storytelling,dormant-marketing,2020s,"scroll narrative, layered depth, chaptered reveals, scroll-triggered","Multi-layer parallax that unfolds a narrative as the reader scrolls, revealing chapters and depth. Effective for brand journeys and case studies. Scroll-bound animation makes it unusable for reference tools.","brand-led, section-coded","sans, sometimes serif accents",layered scenes,scroll-driven parallax,spacious,"brand storytelling, product launches, case studies, annual reports","dashboards, data tools, reference surfaces",duration-slow: 400ms; shadow-intensity: low,A launch or case-study pack activates it; scroll-bound parallax has no operator application.
-31,Interactive Cursor Design,dormant-marketing,2020s,"custom cursor, hover reveals, pointer effects, magnetic elements","Experiences built around a custom cursor and pointer-driven reveals, with magnetic buttons, trailing effects, and hover-only interactions. It delights on desktop showcases. Pointer-only affordances fail keyboard and touch access outright.","brand-led, minimal","sans, large","minimal, effect-driven",cursor-tracked effects,spacious,"creative portfolios, agency sites, interactive showcases","operator tools, touch surfaces, accessibility-bound",duration-normal: 150ms; shadow-intensity: low,A portfolio marketing pack activates it; pointer-only affordances violate keyboard access and are barred from operators.
-32,Tactile Digital / Deformable UI,dormant-marketing,2020s,"physics deformation, squishy elements, gesture response, elastic, playful","Elements that deform, stretch, and spring under touch as if physically elastic, driven by physics simulation. It feels alive and toy-like. The continuous physics motion is animation-led and off-limits for operators.","bright, playful",rounded sans,"elastic, deformable","physics springs, gesture-reactive",spacious,"playful consumer apps, entertainment, gaming UI","operator tools, dense data, motion-sensitive, professional",radius: 16-24px; shadow-intensity: mid; duration-normal: 300ms,A playful consumer pack activates it; physics-driven deformation is animation-led and excluded by the floor.
-33,Organic / Biophilic,dormant-marketing,2020s,"nature-inspired, soft curves, earth tones, botanical, calm","Nature-derived forms of soft organic curves, earthy palettes, and botanical motifs aimed at calm and wellbeing. It merges the biophilic and nature-distilled variants. Warm and spacious, it lacks the density operators need.","earth tones, muted greens",humanist sans or soft serif,"organic curves, high radius","slow, gentle",spacious,"wellness brands, sustainability, health apps, artisan goods","dense dashboards, finance, high-density operator tools",radius: 16-24px; shadow-intensity: low; font-sans: humanist,A wellness or sustainability pack activates it; its spacious organic calm is the opposite of a data cockpit.
-34,Exaggerated Minimalism,dormant-marketing,2020s,"extreme whitespace, oversized type, luxury restraint, negative space","Minimalism pushed to drama, with vast negative space, a few oversized elements, and luxury restraint. It signals prestige through emptiness. Its whitespace budget is incompatible with information-dense work.","monochrome, single accent","oversized sans, editorial","flat, sparse","slow, minimal",spacious,"fashion, architecture, luxury brands, agency landing pages","dashboards, dense tools, data tables",radius: 0-4px; shadow-intensity: 0; density-gap: very loose; heading-tracking: tight,A luxury brand pack activates it; extreme whitespace cannot carry operator data density.
-35,Bold Typography,dormant-marketing,2020s,"type-led, oversized headlines, poster composition, dramatic contrast","Typography as the primary visual, with oversized headlines, extreme scale contrast, and dramatic negative space composing like a poster. Text becomes the image. At poster scale it is a marketing hero device, not a working layout.","high-contrast, restrained accent","oversized display, tight tracking","flat, type-driven",minimal or kinetic,spacious,"brand heroes, product hero sections, editorial, event pages","dashboards, dense forms, data tables",radius: 0-4px; shadow-intensity: 0; heading-tracking: tight; font-sans: grotesque,A hero-section marketing pack activates it; poster-scale type has no room on a dense operator surface.
-36,Editorial Grid / Magazine,dormant-marketing,2020s,"magazine layout, editorial grid, serif display, columns, long-form","Magazine-style composition with a strong editorial grid, serif display type, pull quotes, and multi-column flow for long-form reading. It structures content beautifully. Serif display and reading-first pacing keep it out of dashboards.","neutral, editorial accent","serif display, sans body","flat, rule-based grid",minimal,standard,"news, blogs, magazines, long-form content, journals","dashboards, software UI, dense data tables",radius: 0-2px; shadow-intensity: 0; border-weight: 1px; heading-tracking: tight,"A content or editorial pack activates it; serif display faces are banned in dashboards, so it stays marketing-side."
-37,Minimalist Monochrome,dormant-marketing,2020s,"pure black and white, editorial serif, high contrast, sharp geometry","Strictly black and white with no accent color, oversized serifs, razor-sharp zero-radius geometry, and full-bleed rules. It reads like a luxury printed manifesto. Pure black-and-white and serif display both trip operator rules.","pure black and white, no accent","oversized serif display, tight tracking","zero radius, heavy rules",instant inversions,spacious,"luxury fashion, editorial, high-end portfolios, avant-garde","dashboards, dense tools, status-color surfaces",radius: 0px; shadow-intensity: 0; border-weight: 2-4px; heading-tracking: tight; contrast-boost: 1.2,A luxury editorial pack activates it; pure black and white plus serif display violate the operator color and type floor.
-38,Academia,dormant-marketing,Timeless scholarly,"scholarly, warm paper, traditional serif, gold and deep red, ritual","The old-library aesthetic of warm paper textures, traditional serifs, and gold-on-deep-red tones evoking scholarship and ritual. It rewards slow reading. Serif-forward warmth is at odds with dashboard legibility rules.","warm paper, gold and oxblood",traditional serif,"subtle, classical","slow, restrained",standard,"knowledge tools, reading apps, scholarly brands, narrative games","dashboards, dense operator tools, software UI",radius: 2-4px; shadow-intensity: low; border-weight: 1px; contrast-boost: 1,A reading or brand pack activates it; serif-forward scholarly warmth is banned from dashboards by the type floor.
-39,Bauhaus,dormant-marketing,1919 Bauhaus,"geometric primary, red blue yellow, thick borders, hard offset shadow, constructivist","Form-follows-function geometry in primary red, blue, and yellow, with thick black borders, hard zero-blur offset shadows, and massive type. It is graphic and poster-like. Three primaries as color-blocking break the single-accent operator rule.","primary red, blue, yellow blocks","geometric sans, massive display","flat blocks and pills, thick borders","mechanical, instant press",standard,"branding, onboarding flows, high-personality marketing, posters","dense dashboards, single-accent operator tools",radius: 0px and 9999px; shadow-intensity: hard offset; border-weight: 2-3px; font-sans: geometric,A branding or onboarding pack activates it; primary-color blocking violates the one-accent rule for operators.
-40,SaaS / High-Tech Boutique,dormant-marketing,2020s,"electric-blue gradient, serif-sans pairing, animated hero, inverted sections","The polished startup-marketing look of electric-blue gradients, a warm serif display paired with a workhorse sans, animated hero graphics, and inverted contrast sections. Confident and edgy for a landing page. The gradient-and-serif hero DNA is marketing, not operator chrome.","electric-blue gradient, warm off-white",serif display plus sans body,"medium radius, soft shadow","spring entrances, animated hero",standard,"SaaS landing pages, product marketing, developer-tool sites","the product's own dense dashboards, data tables",radius: 12-16px; shadow-intensity: mid; duration-normal: 200ms; heading-tracking: tight,"A product marketing pack activates it; its gradient hero and serif display belong on the landing page, not the console."
-41,Enterprise SaaS,dormant-marketing,2020s,"indigo-violet gradient, soft shadow, isometric depth, geometric sans","A modern enterprise-marketing style of indigo and violet gradients, soft shadows, isometric illustration, and clean geometric sans. It aims to be professional yet warm. The violet gradient reads as AI-slop and the depth is decorative.",indigo and violet gradients,geometric sans,"medium radius, soft depth","staggered fades, spring",standard,"enterprise marketing, SaaS landing pages, product sites","the product's dense internal tools, dashboards",radius: 8-16px; shadow-intensity: mid; heading-tracking: tight,A marketing pack activates it; the indigo-violet gradient trips the AI-slop palette flag and stays off operator surfaces.
-42,Modern Dark / Cinematic,dormant-marketing,2020s,"cinematic dark, ambient glow, animated light pools, frosted glass, precision","A premium dark aesthetic with layered near-black surfaces, slow animated light pools, frosted-glass navigation, and indigo accent glows. It feels like high-end pro software marketing. The ambient animation and glass blur push it past the operator floor.","near-black layers, indigo glow accent","sans, tight tracking","medium radius, glass edges",slow ambient light animation,standard,"premium product marketing, entertainment, launch pages","dense dashboards, long-session operator tools",radius: 12-16px; shadow-intensity: glow; duration-slow: 400ms; contrast-boost: 1,"A premium marketing pack activates it; ambient glow animation and glass blur exceed the operator floor, so use flat Dark Mode instead."
-43,web3 / DeFi,dormant-marketing,2020s,"deep space, bitcoin orange, gold highlights, glowing data, futuristic","A futuristic crypto aesthetic of deep-space backgrounds, bitcoin-orange and gold highlights, glowing elements, and dramatized data visualization. It projects cutting-edge finance. Glow-led ornament and dramatized charts undercut data honesty.","deep space, orange and gold glow",sans and mono figures,"medium radius, glowing borders","pulsing glows, animated charts",standard,"DeFi and wallet marketing, NFT platforms, crypto brand sites","real financial dashboards, accountable data tools",radius: 8-12px; shadow-intensity: glow; font-mono: mono; contrast-boost: 1,A crypto marketing pack activates it; glowing dramatized charts conflict with anti-fabrication and stay marketing-side.
-44,Sketch / Hand-Drawn,dormant-marketing,2020s,"wobbly borders, handwritten type, paper texture, marker, imperfect","Everything looks drawn by hand, with wobbly borders, marker strokes, handwritten type, and paper texture carrying deliberate imperfection. It is warm and approachable for low-fidelity or playful contexts. Hand-drawn irregularity fights the precision operators depend on.","muted, marker-like",handwritten and casual,"irregular, wobbly borders","playful, loose",spacious,"prototyping, creative brands, children's products, narrative games","production operator tools, dense data, precision UI",radius: irregular; shadow-intensity: low; border-weight: 2px (sketchy),A playful or prototyping pack activates it; hand-drawn irregularity undermines the precision an operator tool needs.
-45,Neubrutalism,dormant-marketing,2020s,"cream ground, thick black borders, hard offset shadow, clashing color, grotesque","The designed descendant of raw brutalism: cream backgrounds, thick black borders, zero-blur hard offset shadows, clashing vivid colors, and heavy grotesque type with sticker-like layering. It is organized visual chaos for creative brands. The hard shadows and clashing color read as decoration for operator work.","cream ground, clashing vivid accents","heavy grotesque, uppercase","flat corners, hard offset shadow","snappy, mechanical",standard,"creative tools, Gen Z marketing, portfolios, collab-brand sites","conservative enterprise, dense dashboards, finance",radius: 0px; shadow-intensity: hard offset; border-weight: 3-4px; font-sans: grotesque,A creative-brand pack activates it; the hard offset shadows and clashing palette are decoration a cockpit strips away.
-46,Pixel Art,dormant-marketing,1980s,"pixel grid, arcade, retro game, dithering, 8-bit","Deliberate low-resolution pixel grids, dithering, and 8-bit arcade nostalgia. It is a distinct illustrative craft. As UI it is a themed novelty, not an information system.",limited indexed palette,bitmap pixel fonts,"hard pixel edges, zero radius","stepped, frame-based",standard,"indie games, retro tools, nostalgia marketing, game portfolios","professional tools, dense data, accessibility-bound",radius: 0px; shadow-intensity: 0; border-weight: 2px; font-mono: pixel,A retro-game pack activates it; bitmap type and pixel edges are a novelty with no operator legibility.
-47,Spatial UI (VisionOS),dormant-marketing,2024,"spatial computing, glass depth, floating panels, AR layering, VR","The spatial-computing look of translucent glass panels floating in depth, built for AR and VR headsets. It assumes a 3D canvas and gaze or gesture input. On flat operator screens it collapses to heavy glass with no payoff.",translucent glass over environment,"sans, high legibility","rounded glass panels, depth","depth transitions, gaze-reactive",spacious,"VR/AR interfaces, spatial apps, immersive media","flat-screen dashboards, dense data, desktop operator tools",radius: 16-24px; shadow-intensity: low; contrast-boost: 0.9,"A spatial or immersive pack activates it; on a flat console it is just costly glass blur, so it stays out."
-48,E-Ink / Paper,dormant-marketing,2020s,"monochrome, high legibility, distraction-free, paper-like, digital wellbeing","A paper-like monochrome surface built for calm, distraction-free reading, echoing e-reader displays with maximal legibility and no color. It is restful and focused. Removing color forfeits the status signaling operators rely on.","grayscale, no accent","readable serif or sans, generous","flat, hairline rules",none or minimal,spacious,"reading apps, journals, digital newspapers, focus modes","status-color dashboards, dense operator tools",radius: 0-2px; shadow-intensity: 0; border-weight: 1px; contrast-boost: 1.1,A reading-mode pack activates it; forfeiting color removes the status signaling a working console needs.
-49,Anti-Polish / Raw Aesthetic,dormant-marketing,2020s,"intentionally raw, undesigned, exposed structure, anti-digital, authentic","A deliberately undesigned look of exposed structure, default styling, and rough edges as a rejection of digital polish, signaling authenticity. It is a statement for artist and indie sites. Its intentional roughness is the antithesis of operator precision.","default, unstyled","system fonts, raw","exposed, unstyled edges",none,standard,"artist sites, indie brands, handmade products, authentic marketing","production tools, enterprise, dense data",radius: 0px; shadow-intensity: 0; border-weight: 1px; font-sans: system,An indie or artist pack activates it; intentional rawness is the opposite of the precision operators require.
-50,Chromatic Aberration / RGB Split,dormant-marketing,2020s,"RGB split, color fringing, glitch offset, retro-tech, distortion","A retro-tech effect that splits red, green, and blue channels for a distorted, fringed, glitchy edge. It is an accent treatment for energy and nostalgia. As pervasive UI it degrades legibility and contrast.",RGB-split fringing,sans with fringe effect,"offset, distorted edges",glitch offset,standard,"music platforms, gaming, nightlife, creative tech marketing","readable interfaces, dense data, accessibility-bound",shadow-intensity: glow; contrast-boost: 0.9,A creative campaign pack activates it as an accent; pervasive RGB-split fringing destroys legibility for operators.
-51,Vintage Analog / Retro Film,dormant-marketing,1970s-90s,"film grain, analog warmth, faded color, retro photography, nostalgia","An analog-film mood of grain, faded warm color, and vintage photographic treatment. It evokes nostalgia and craft. The grain and muted contrast work against data clarity.",faded warm analog tones,retro serif or grotesque,"soft, grainy edges","subtle, filmic",standard,"photography portfolios, vinyl and music brands, vintage fashion","dense data tools, dashboards, accessibility-bound",radius: 2-4px; shadow-intensity: low; contrast-boost: 0.9,A photography or music pack activates it; grain and faded contrast fight the clarity a data tool needs.
-52,Zero UI / Voice-First,dormant-marketing,2020s,"minimal visible UI, voice-first, ambient, progressive disclosure, predictive","An interface that hides itself, using voice and gesture input, ambient context-awareness, and controls revealed only on demand. It suits assistants and smart-home surfaces. It deliberately withholds the persistent visible controls a dense operator workflow depends on.","neutral, near-invisible","sans, sparse","minimal, soft",gentle progressive reveals,spacious,"voice assistants, smart home, ambient AI, hands-free tools","data-entry, dense operator workflows, explicit-control tools",radius: 8-12px; shadow-intensity: low; duration-normal: 200ms,"An ambient or voice pack activates it; hiding persistent controls is wrong for a dense, explicit-control operator tool."
-53,Claymorphism,dormant-marketing,2020s,"soft 3D clay, inflated, candy colors, layered shadows, playful, toy-like","Puffy, inflated clay-like forms with stacked soft shadows, thick rounded edges, and candy-bright colors for a tactile digital-toy feel. It is warm and playful for education and consumer apps. The soft-depth shadow stacks and rounded bulk fail dense, high-contrast operator needs.","candy pastels, playful brights",rounded friendly sans,"high radius, double soft shadows","soft bounce, 200ms",spacious,"children's education, playful consumer apps, creative tools","dense dashboards, finance, professional operator tools",radius: 16-24px; shadow-intensity: mid (dual); border-weight: 0-3px; contrast-boost: 0.95,A playful or education pack activates it; puffy soft-shadow bulk cannot serve dense high-contrast operator surfaces.
+id,movement,tier,era,keywords,description,palette_stance,type_stance,shape_stance,motion_stance,density_affinity,best_for,avoid_for,token_leanings,operator_note,theme,voice,css-recipe,checklist,tokens-hint
+1,Swiss / International Typographic,operator-active,1950s Swiss,"grid discipline, neutral palette, grotesque sans, hierarchy, whitespace, functional","Grid-driven clarity born in postwar Switzerland: content sits on a strict column grid, hierarchy comes from size and weight rather than ornament, and a neutral ground carries a single accent. Nothing decorative survives the edit, so every element earns its place. The modern revival keeps the discipline while loosening the grid for responsive work.","monochrome neutrals, one restrained accent","grotesque sans, tight tracking, clear scale","sharp to small radius, hairline rules","minimal, sub-200ms fades",standard,"dashboards, enterprise tools, documentation, admin consoles","playful consumer brands, entertainment, artistic showcases",radius: 2-4px; shadow-intensity: low; border-weight: 1px; font-sans: grotesque; heading-tracking: tight; contrast-boost: 1,"The default operator posture: a tight grid, one accent, and hairline dividers read cleanly at high data density.",both,"Build on a strict column grid and let hierarchy come from size and weight rather than ornament. Hold a neutral ground and spend a single accent sparingly; keep dividers to hairlines and delete anything that does not earn its place. Whitespace is a structural tool, not leftover room.",display: grid; gap: 24px; border-radius: 3px; border-width: 1px; box-shadow: none; letter-spacing: -0.01em; font-variant-numeric: tabular-nums,content aligns to a visible 12-column grid; a single accent color appears in at most 3 places; section dividers are 1px hairlines not boxed cards; resting surfaces carry no drop shadow; heading levels are distinguished by size and weight alone,primitive.radius 2-4px; primitive.border-weight 1px; primitive.shadow-intensity 0.2; typography.family.heading a grotesque sans; typography.ramp.h1 1.5rem/600; color.accent one brand hue
+2,Flat Design,operator-active,2010s,"two-dimensional, no shadow, solid color, iconography, clean edges","Strips away bevels, gradients, and drop shadows so hierarchy rests entirely on color, scale, and type. Surfaces are solid fields, icons are simplified, and edges stay crisp. It reads fast and renders cheaply, which is why it became the default of the app era.","solid fields, limited bright set","bold sans, weight-driven hierarchy","small consistent radius, no shadow",quick color and opacity shifts,standard,"web apps, cross-platform tools, SaaS, admin panels","luxury showcases, immersive 3D, high-detail realism",radius: 4-6px; shadow-intensity: 0; border-weight: 1px; font-sans: sans; contrast-boost: 1,Flat surfaces and token-driven color keep dense tables legible without depth cues competing for attention.,both,"Let color, scale, and type carry the whole hierarchy, with no bevels, gradients, or drop shadows to lean on. Keep surfaces as solid fields and edges crisp so the interface reads fast and renders cheaply. Depth cues are off the table; contrast and weight do the separating.","box-shadow: none; background: solid; border-radius: 5px; border: 1px solid; transition: background-color 150ms ease, opacity 150ms ease",no gradients or drop shadows on any surface; surfaces are solid single-color fields; hierarchy reads from color and weight not depth; hover feedback is a color or opacity shift under 200ms; the accent stays a single role,primitive.shadow-intensity 0; primitive.radius 4-6px; primitive.border-weight 1px; typography.family.heading a bold sans; color.card a solid neutral field
+3,Structural Brutalism,operator-active,1990s web,"raw structure, system fonts, visible borders, high contrast, utilitarian","The functional edge of web brutalism: exposed structure, system typefaces, hard borders, and unapologetic high contrast with no gloss. Stripped of its anti-design theatrics it becomes a blunt, honest utility look. Content and controls sit in plain view with nothing softened.","stark neutrals, one loud accent","system sans or mono, heavy weight","flat corners, thick visible borders","near-instant, minimal transitions",dense,"internal utilities, developer tools, data entry, ops consoles","consumer onboarding, premium brands, calm reading surfaces",radius: 0px; shadow-intensity: 0; border-weight: 2px; font-sans: grotesque; font-mono: mono; contrast-boost: 1.1,"Zero-radius, thick-bordered blocks with mono figures suit blunt utilitarian tools where structure beats polish.",both,"Expose the structure: system or mono type, hard borders, high contrast, and no gloss. Put content and controls in plain view and let thick rules do the framing instead of softening anything. This is blunt utility, not anti-design theatrics.","border-radius: 0; border: 2px solid; box-shadow: none; transition: none; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums",corners are square at 0px radius; borders are thick at 2px and visible on major blocks; numeric values use a monospace or tabular face; no drop shadows anywhere; one loud accent and everything else neutral,primitive.radius 0px; primitive.border-weight 2px; primitive.shadow-intensity 0; typography.family.mono a system mono; typography.family.heading a heavy grotesque
+4,Material Design,operator-active,2014 (MD3 2021),"tonal surfaces, elevation, pill controls, state layers, systematic","Google's system built on tonal surfaces, a defined elevation scale, and state layers that respond to touch. MD3 (Material You) leans on tonal tinting rather than heavy shadow and rounds controls generously. It is comprehensive, documented, and comfortable at B2B data density.","tonal roles, seeded accent","humanist sans, defined type roles","medium radius, tonal elevation","standard easing, 200-300ms",standard,"Android apps, cross-platform tools, B2B data tools","bespoke luxury brands, anti-design statements",radius: 8-12px; shadow-intensity: low-mid; border-weight: 1px; font-sans: humanist; duration-normal: 200ms; ease-default: standard,"Tonal elevation and a documented component set carry dense B2B surfaces with predictable, accessible defaults.",both,"Lean on tonal surfaces and a defined elevation scale, letting state layers answer touch and hover. Prefer tonal tinting over heavy shadow, round controls generously, and keep the component roles documented and predictable. Comfortable at B2B density without inventing new patterns per screen.","border-radius: 10px; box-shadow: 0 1px 3px rgba(15,23,42,0.12), 0 1px 2px rgba(15,23,42,0.08); transition: background-color 200ms cubic-bezier(0.2,0,0,1); background: color-mix(in srgb, currentColor 8%, transparent)",elevation is one tonal or shadow step per surface applied consistently; interactive elements show a state-layer overlay on hover and press; controls use a medium rounded radius throughout; a single seeded accent drives primary actions; motion uses a standard 200-300ms ease,primitive.radius 8-12px; elevation.sm and elevation.md carry the two resting steps; primitive.shadow-intensity 0.3; typography.family.body a humanist sans; primitive.stagger-unit 30ms
+5,Dark Mode (OLED),operator-active,2010s,"dark theme, near-black canvas, high contrast, low emission, focus visibility","A dark-first palette on a near-black rather than pure-black ground, with light text and a restrained accent tuned for low light. It reduces eye strain over long sessions and saves power on OLED panels. Contrast and focus states must be deliberately maintained since depth cues are scarce.","near-black ground, light text, one accent","sans, slightly heavier weights for legibility","small radius, subtle borders",restrained fades,dense,"monitoring consoles, developer tools, trading, night-shift ops","print-first content, high-brightness outdoor, color proofing",radius: 4-8px; shadow-intensity: low; border-weight: 1px; contrast-boost: 1.1; font-sans: sans,A near-black canvas with one accent and enforced contrast sustains long monitoring shifts without glare.,dark,"Work on a near-black ground rather than pure black, with light text and one restrained accent tuned for low light. Maintain contrast and visible focus deliberately, because depth cues are scarce in the dark. The goal is a long, glare-free session, not a neon show.","background: #0b0d10; color: #e6e8eb; border: 1px solid rgba(255,255,255,0.08); box-shadow: none; --shadow-overlay: 0 8px 24px rgba(0,0,0,0.5)",the canvas is near-black not pure black; body text clears 7:1 against the background; a single accent carries actions and selection; focus rings are visible against the dark ground; raised surfaces step up in lightness rather than adding a heavy shadow,color.background near-black at L about 0.12; color.surface-raised steps +4-6 L with hue held; color.foreground a light neutral; primitive.shadow-intensity 0.2; color.accent one desaturated brand hue
+6,Accessible / Inclusive,operator-active,Universal,"WCAG, high contrast, keyboard nav, screen reader, non-color signals, focus rings","Not a look so much as a floor: strong contrast, visible focus, keyboard reachability, and status carried by icon or text rather than color alone. It bakes in large-enough type, semantic structure, and reduced-motion respect. Every other movement is judged against it.","high-contrast, color never the only signal","legible sans, generous minimum size","clear borders, visible focus rings",reduced-motion honored,standard,"government, healthcare, education, compliance-bound tools",nothing - it is the universal baseline,contrast-boost: 1.2; border-weight: 1.5px; icon-stroke: 2; font-weight-normal: 400,"The mandatory substrate under every operator surface: contrast, focus, and non-color status signals are non-negotiable.",both,"Treat this as the floor every other look is judged against: strong contrast, visible focus, full keyboard reach, and status carried by icon or text, never color alone. Bake in large-enough type, semantic structure, and respect for reduced motion. Nothing here is optional decoration.",outline: 3px solid; outline-offset: 2px; font-size: 16px; min-height: 44px; min-width: 44px,every interactive element has a visible focus ring of at least 3px; body text is at least 16px and clears 4.5:1; status is signalled by icon or label plus color never color alone; touch targets are at least 44 by 44px; the layout honors prefers-reduced-motion,primitive.border-weight 1.5px; typography.ramp.body 16px minimum; color pairs recomputed to clear 4.5:1; primitive.stagger-unit 0ms under reduced motion
+7,Bento Grid,operator-active,2020s,"modular tiles, asymmetric cells, dashboard layout, interlocking spans","Content organized into a mosaic of variably sized tiles that interlock like a bento tray, popularized by Apple and Linear then absorbed into dashboards. Each cell holds one idea and the grid stays gapless with no orphan corners. It scales from summary tiles to full metric boards.","neutral ground, accent per active tile","sans, clear per-tile hierarchy","consistent medium radius, hairline gaps",subtle tile hover lift,standard,"dashboards, metric boards, product summaries, portals","linear reading flows, single-focus forms",radius: 8-12px; shadow-intensity: low; border-weight: 1px; density-gap: standard,Interlocking tiles map cleanly onto KPI boards when spans stay gapless and each cell carries a single figure.,both,"Arrange content as a gapless mosaic of variably sized tiles that interlock like a bento tray, one idea per cell. Keep the grid tight with no orphan corners and let each tile hold a single figure or thought. It scales from summary tiles to a full metric board without losing order.","display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(160px, auto); gap: 16px; border-radius: 12px; box-shadow: 0 1px 3px rgba(15,23,42,0.08)",tiles interlock with a consistent gap and no empty corners; each cell carries exactly one idea or figure; corner radius is uniform across tiles; a tile shows at most a subtle lift on hover; the grid collapses to a single column on narrow viewports,primitive.radius 8-12px; elevation.sm on tiles; primitive.shadow-intensity 0.25; color.card the tile surface; primitive.stagger-unit 30ms for tile entrance
+8,Dimensional Layering,operator-active,2020s,"elevation scale, z-depth, restrained shadow, card stacking, hierarchy","Uses a disciplined elevation scale, one shadow job per element, to separate cards, modals, and navigation without decoration. Depth communicates stacking order, not style. Kept restrained it clarifies which surface is active.","neutral surfaces, tonal separation","sans, standard scale","medium radius, single-purpose shadow",short elevation transitions,standard,"card layouts, modals, navigation, layered dashboards","flat brand statements, print, ultra-dense cockpits",radius: 6-8px; shadow-intensity: mid; border-weight: 0-1px; duration-normal: 150ms,A single elevation scale signals active versus resting surfaces; drop it above density 7 where hairlines replace cards.,both,"Use a disciplined elevation scale, one shadow job per element, to separate cards, modals, and navigation without decoration. Let depth communicate stacking order and which surface is active, nothing more. Kept restrained, it clarifies rather than ornaments.","--shadow-sm: 0 1px 2px rgba(15,23,42,0.08); --shadow-md: 0 4px 8px rgba(15,23,42,0.1); --shadow-lg: 0 12px 24px rgba(15,23,42,0.12); border-radius: 8px; transition: box-shadow 150ms ease",each surface uses exactly one elevation step; shadows read as stacking order not decoration; the active surface sits one step above its neighbors; radius is consistent across elevated surfaces; above dense tables hairlines replace cards,elevation.sm elevation.md elevation.lg define the three resting steps; elevation.overlay for modals; primitive.shadow-intensity 0.4; color.surface-raised for the lifted layer
+9,Restrained Micro-interaction,operator-active,2020s,"subtle feedback, tactile press, state transitions, sub-100ms, contextual","A behavioral layer rather than a palette: brief, purposeful feedback on press, hover, and state change that confirms an action without drawing attention. Durations stay short and effects animate only transform and opacity. Overused it becomes noise, so restraint is the whole point.",inherits host palette,inherits host type,inherits host geometry,50-150ms transform/opacity feedback,standard,"productivity tools, forms, interactive tables, consoles","static reports, print, motion-sensitive contexts",duration-fast: 100ms; ease-default: ease-out; shadow-intensity: low,"Sub-150ms press and state feedback confirms actions on dense controls, and must survive reduced-motion by resetting to near-zero.",both,"Add brief, purposeful feedback on press, hover, and state change that confirms an action without asking for attention. Keep durations short and animate only transform and opacity. Overused it becomes noise, so the whole discipline is restraint.","transition: transform 100ms ease-out, opacity 100ms ease-out; transform: scale(0.99); will-change: transform",feedback animates only transform and opacity; press and hover transitions stay under 150ms; a pressed control shows a small scale or opacity change; every animation resets to near-zero under reduced motion; no element animates on its own without user input,primitive.stagger-unit 30ms; motion durations at the fast band near 100ms; motion-lift class for hover; --stagger-delay derived and capped at 8 children
+10,AI-Native UI,operator-active,2020s,"assistant surfaces, streaming responses, disclosure, provenance, override controls","Interfaces built around an assistant or model in the loop: prompt fields, streaming output, source attribution, and controls to inspect or override what the system did. The aesthetic stays clean and neutral so trust signals remain legible. Disclosure, human override, and auditability are structural, not optional.","neutral ground, one accent for AI actions","sans, mono for generated code and data","small radius, clear affordance borders","streaming reveals, restrained",standard,"copilots, agent consoles, review queues, AI operator tools","purely static content, brand showcases",radius: 6-8px; font-sans: sans; font-mono: mono; contrast-boost: 1.1; duration-normal: 150ms,"Wears an operator copilot well when disclosure, provenance, and override affordances are first-class per the trust rubric; keep the accent a brand token, not reflex indigo.",both,"Build around a model in the loop: prompt fields, streaming output, source attribution, and controls to inspect or override what the system did. Keep the surface clean and neutral so trust signals stay legible, and make disclosure, override, and auditability structural. The accent is a brand token, not a reflex indigo.","border-radius: 8px; border-left: 2px solid; font-family: ui-monospace, monospace; transition: opacity 150ms ease; gap: 16px",generated content is visibly distinct from user input; provenance or source attribution appears on model output; an override or edit control sits beside any automated action; code and data render in a monospace face; the accent stays a brand token not a default indigo,primitive.radius 6-8px; typography.family.mono for generated code; color.accent a brand hue for AI actions; primitive.shadow-intensity 0.2; color.muted for the assistant surface
+11,Data-Dense Dashboard / Cockpit,operator-active,2020s,"high density, hairline dividers, tabular numerals, cockpit, no card boxes","The analytics-cockpit posture: many figures per screen, hairline dividers instead of card boxes, tight padding, and tabular numerals on every column. It collapses the BI dashboard patterns (executive, real-time, drill-down, financial) into one visual discipline. Above a density threshold, chrome disappears so data can breathe by subtraction.","neutral ground, status via semantic tokens","compact sans, tabular lining numerals","near-flat, hairline dividers","minimal, data-update fades only",dense,"BI dashboards, monitoring, trading, financial reporting, ops","marketing pages, spacious consumer apps, storytelling",radius: 2-4px; shadow-intensity: 0; border-weight: 1px; density-gap: tight; table-row-height: 28-36px; font-sans: grotesque,"The native cockpit look: drop card boxes, use hairlines and mono numbers, and let subtraction carry the highest densities.",both,"Pack many figures per screen with hairline dividers instead of card boxes, tight padding, and tabular numerals on every column. Above a density threshold, let chrome disappear so the data breathes by subtraction. This is the native analytics-cockpit posture, not a decorated dashboard.",border-radius: 3px; box-shadow: none; border: 1px solid; font-variant-numeric: tabular-nums; --row-height: 32px; padding: 6px 8px,numeric columns use tabular-lining numerals; card boxes are dropped in favor of hairline dividers; row height stays between 28 and 36px; status is carried by a semantic token not decoration; the accent appears in at most 3 places per screen,primitive.radius 2-4px; primitive.shadow-intensity 0; primitive.border-weight 1px; typography.family.mono for figures; typography.ramp.small for dense labels
+12,Terminal / CLI,operator-active,1980s,"monospace, command-line, near-black canvas, phosphor accent, high contrast","The command-line console rendered as a UI: monospace throughout, a near-black ground, and a single phosphor accent (green or amber) with sharp borders and a blinking caret. Layout is measured in character cells rather than fluid percentages. Scanlines and boot-log theatrics are optional garnish, not structure.","near-black ground, single phosphor accent","monospace only, fixed sizes","flat corners, thin borders","caret blink, near-instant",dense,"developer tools, log viewers, CLI companions, infra consoles","consumer apps, marketing, touch-first mobile",radius: 0px; shadow-intensity: 0; border-weight: 1px; font-mono: mono; contrast-boost: 1.1,Fits log viewers and infra consoles where mono alignment aids scanning; keep scanlines and typewriter effects out of the operator build.,dark,"Render the command line as a UI: monospace throughout, a near-black ground, and a single phosphor accent with sharp borders and a blinking caret. Measure layout in character cells rather than fluid percentages. Keep scanlines and boot-log theatrics out of the operator build.","background: #05070a; color: #33ff88; font-family: ui-monospace, 'JetBrains Mono', monospace; border: 1px solid #1a3d2a; border-radius: 0",type is monospace throughout including labels; the ground is near-black with one phosphor accent; corners are square at 0px radius; text clears well above 4.5:1; no scanline or typewriter effects in the operator build,primitive.radius 0px; typography.family.mono the primary family; color.background near-black; color.accent a single phosphor hue; primitive.shadow-intensity 0
+13,Neumorphism,dormant-marketing,2020s,"soft UI, extruded, inset, dual shadows, monochrome, low contrast","Elements appear pressed into or extruded from a single monochrome surface using paired light and dark shadows. The effect is soft and tactile but the low contrast between control and background fails accessibility thresholds. It is a showcase aesthetic, not a working one.","monochrome, tint on tint","soft sans, low weight","rounded, dual soft shadows","gentle press, 150ms",spacious,"hardware-control mockups, beauty utility showcases, brand pages","data-dense tools, accessibility-bound surfaces, dashboards",radius: 12-16px; shadow-intensity: mid (dual); border-weight: 0px; contrast-boost: 0.9,Excluded by the contrast floor; only a marketing showcase pack with brand-approved low-contrast surfaces would activate it.,light,,,,
+14,Soft UI Evolution,operator-active,2020s,"reformed neumorphism, softer shadows, improved contrast, subtle depth",A remediated neumorphism that raises contrast to accessibility thresholds while keeping gentle depth. It reads more modern than its parent but still leans on decorative shadow to define surfaces. The soft-depth premise keeps it off dense operator screens.,"improved-contrast pastels, tonal","sans, standard weight","medium radius, soft multi-layer shadow",200-300ms smooth,spacious,"modern SaaS marketing, wellness apps, showcase surfaces","dense dashboards, cockpit surfaces, high-density tables",radius: 8-12px; shadow-intensity: low-mid; border-weight: 0-1px; contrast-boost: 1,"A calmer marketing pack could activate it, but its decorative depth stays out of data-dense operator work.",both,"Take neumorphism's tactility but raise contrast to accessibility thresholds and let a real elevation ramp, not a decorative double-shadow, define surfaces. Keep depth gentle and purposeful on spacious enterprise surfaces. Legibility leads; the softness is a finish, not the structure.","border-radius: 10px; box-shadow: 0 2px 4px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.06); background: color-mix(in srgb, canvas 96%, currentColor); transition: box-shadow 200ms ease",every foreground-background pair clears 4.5:1; depth comes from the elevation ramp not paired inset-and-outset shadows; radius stays in the 8-12px range; a single accent drives primary actions; the surface reads modern not embossed,elevation.sm and elevation.md carry the depth; primitive.radius 8-12px; primitive.shadow-intensity 0.3; color.surface-raised for lifted cards; typography.family.body a humanist sans
+15,Glassmorphism,dormant-marketing,2020s,"frosted glass, backdrop blur, translucency, layered depth, vibrant ground","Translucent panels with backdrop blur float over a vibrant background, edged with a faint light border. Depth comes from stacked blur and reflection. The blur cost and text-contrast fragility rule it out of working surfaces.",translucent whites over vivid ground,"sans, needs contrast guarding","medium radius, blurred fills","soft parallax, blur transitions",spacious,"hero overlays, premium marketing, lifestyle showcases","dashboards, dense tables, low-power devices, a11y-critical",radius: 12-16px; shadow-intensity: low; border-weight: 1px; contrast-boost: 0.9,Heavy blur-stacking violates the floor; a single hero panel in a marketing pack is the only place it belongs.,both,,,,
+16,Liquid Glass,dormant-marketing,2020s,"flowing glass, morphing, chromatic aberration, iridescent, dynamic blur","Glassmorphism taken to motion: morphing shapes, iridescent oil-slick gradients, chromatic aberration, and blur that shifts as things move. It is premium and heavy in equal measure. Nothing about it survives a data-density or accessibility test.","iridescent spectrum, translucent base","sans, contrast-fragile","fluid morphing, dynamic blur",400-600ms morph curves,spacious,"luxury product launches, creative brand experiences","any operator surface, dense data, low-power devices",radius: 16-24px; shadow-intensity: low; duration-slow: 500ms; contrast-boost: 0.85,"Blur-stacking plus animation-led morphing put it firmly in a premium marketing pack, never an operator build.",both,,,,
+17,3D & Hyperrealism,dormant-marketing,2020s,"WebGL, realistic texture, spatial depth, physics lighting, parallax layers, product preview","Real-time 3D scenes, tactile textures, and physically lit surfaces built on WebGL engines, often with multi-layer parallax. Immersive and expensive, it strains performance and accessibility budgets. It also folds in dedicated 3D product-preview viewers.","rich realistic gradients, metallics",sans over rendered scenes,"modeled depth, realistic shadow","300-400ms 3D transitions, parallax",spacious,"product showcases, gaming, immersive marketing, 3D configurators","dashboards, forms, data tables, low-end devices",radius: 8-16px; shadow-intensity: high; duration-slow: 400ms,A product-showcase or configurator pack activates it; its render cost and poor a11y bar it from operator tools.,both,,,,
+18,Skeuomorphism,dormant-marketing,2007,"real-world metaphor, texture, leather and metal, tactile, detailed gradients","Interfaces that imitate physical materials such as leather stitching, brushed metal, and paper, with deep gradients and layered shadow. It made early touch UIs legible by analogy but textures now hurt readability and scale poorly. It reads as nostalgia today.","material colors, deep gradients",sans or serif over textures,"modeled bevels, heavy shadow",300-500ms tactile,spacious,"nostalgic showcases, luxury simulations, storytelling","modern enterprise, dense data, accessibility-bound tools",radius: 8-12px; shadow-intensity: high; border-weight: 1px; contrast-boost: 0.9,A themed nostalgia pack would activate it; texture-driven depth keeps it out of readable operator surfaces.,light,,,,
+19,Vibrant & Block-based,dormant-marketing,2020s,"bold blocks, neon palette, duotone, large type, energetic","Big color-blocked sections, neon or triadic palettes, oversized type, and animated patterns for maximum energy. It targets youth and consumer brands. The multi-color, high-saturation approach conflicts with the one-accent operator discipline.","four to six vivid colors, duotone",oversized bold sans,"large blocks, medium radius","animated patterns, 200-300ms",spacious,"startups, creative agencies, youth brands, entertainment","enterprise, finance, healthcare, dense tools",radius: 8-16px; shadow-intensity: low; density-gap: loose; heading-tracking: normal,A consumer marketing pack activates it; its multi-color maximalism breaks the single-accent rule for operators.,both,,,,
+20,Gen Z Chaos / Maximalism,dormant-marketing,2023,"maximalism, internet-core, sticker chaos, clashing color, dense collage","Deliberate visual overload of clashing colors, stickers, mixed type, and collaged layers channeling internet culture. Personality is the product. It is decoration-forward by design, which is exactly what operator surfaces subtract.",clashing saturated colors,"mixed faces, expressive","layered, rotated, irregular","busy, playful",spacious,"Gen Z brands, music artists, viral campaigns, creative portfolios","any operator tool, finance, enterprise, accessibility-bound",radius: mixed; shadow-intensity: mixed; heading-tracking: loose,A viral campaign pack activates it; decoration-forward maximalism is barred from operator work by the floor.,both,,,,
+21,Aurora UI / Gradient Mesh,dormant-marketing,2020s,"mesh gradient, northern-lights blend, luminous, animated color, atmospheric","Large flowing mesh gradients evoking the northern lights, blending complementary hues in slow animated loops. It gives marketing surfaces an ambient, premium glow. On working surfaces the moving color competes with content.",complementary mesh blends,sans over gradient,"soft, gradient-filled",8-12s gradient loops,spacious,"hero backgrounds, SaaS marketing, music and lifestyle brands","dashboards, dense content, accessibility-critical",radius: 12-16px; shadow-intensity: low; duration-slow: 500ms+,A hero-background marketing pack activates it; animated mesh color distracts from data and stays out of operator builds.,both,,,,
+22,Retro-Futurism,dormant-marketing,1980s,"neon glow, CRT scanlines, synthwave, glitch, monospace","Eighties science-fiction nostalgia: neon on black, CRT scanlines, glitch effects, and glowing monospace. It is atmosphere-first and strains contrast and comfort over time. Great for a themed campaign, wrong for sustained work.",neon on deep black,"monospace, glowing","sharp, glowing borders",glitch and scanline effects,standard,"gaming, music platforms, nostalgic campaigns, entertainment","professional tools, finance, accessibility-bound, long sessions",radius: 0-4px; shadow-intensity: glow; font-mono: mono; contrast-boost: 1,A retro campaign pack activates it; neon glow and glitch effects fail comfort and contrast for operators.,dark,,,,
+23,Cyberpunk,dormant-marketing,2020s,"neon dystopia, glitch, terminal fonts, HUD accents, high contrast","High-contrast neon over black with glitch motion, monospace accents, and dystopian ornament drawn from hacker culture and cyber-noir. It absorbs the cyberpunk-HUD mobile variants. Bold and immersive, it is atmosphere over legibility.",neon accents on black,mono and condensed sans,"sharp, angular, glowing","glitch, flicker",standard,"gaming, crypto brands, sci-fi campaigns, large-screen visuals","conservative industries, a11y-critical, long-session tools",radius: 0-4px; shadow-intensity: glow; font-mono: mono; contrast-boost: 1.1,A gaming or crypto marketing pack activates it; glow-led neon dystopia is off-limits for operator surfaces.,dark,,,,
+24,HUD / Sci-Fi FUI,dormant-marketing,2010s,"fictional UI, telemetry rings, glowing readouts, angular frames, sci-fi","The fictional-interface look of films and games: glowing telemetry rings, angular frames, and dense fake readouts. It projects technical spectacle rather than usable structure. Its decoration mimics data without serving it.",cyan and amber glow on black,"condensed sans, mono","angular frames, glowing lines",continuous ambient animation,standard,"sci-fi games, movie props, cybersecurity marketing, demos","real dashboards, operator tools, accessibility-bound",radius: 0-2px; shadow-intensity: glow; font-mono: mono,A demo or entertainment pack activates it; its decorative telemetry imitates data and never belongs on a real console.,dark,,,,
+25,Vaporwave,dormant-marketing,1980s-90s,"pastel neon, retro glitch, classical busts, 90s nostalgia, surreal","A surreal 80s to 90s nostalgia palette of pastel neon, retro glitch, and kitsch imagery. It is an art movement more than an interface system. Purely expressive, it has no operator application.","pastel neon, magenta and cyan",retro display faces,"soft, surreal collage",slow glitch drift,spacious,"music platforms, creative portfolios, nostalgia marketing","any functional tool, dense data, professional contexts",radius: 8-12px; shadow-intensity: glow; heading-tracking: loose,Only a creative or music campaign pack activates it; it is expressive art with no operator use.,dark,,,,
+26,Y2K Aesthetic,dormant-marketing,2000s,"chrome, bubble, glossy, metallic, early-web nostalgia","Turn-of-millennium chrome, glossy bubbles, and metallic gradients revived as nostalgia. Playful and reflective, it prizes surface shine. It carries no discipline for dense information.",chrome and candy metallics,rounded display faces,"glossy bubbles, high radius",glossy shimmer,spacious,"fashion brands, music, Gen Z nostalgia, entertainment","enterprise, finance, dense tools, accessibility-bound",radius: 16-24px; shadow-intensity: mid; heading-tracking: normal,A nostalgia campaign pack activates it; glossy chrome has no place on a working operator surface.,light,,,,
+27,Memphis Design,dormant-marketing,1980s,"postmodern, squiggles, confetti shapes, primary bursts, playful geometry","The 1980s postmodern movement of squiggles, confetti geometry, and clashing primaries. It is joyful, chaotic ornament. As UI it is pure brand personality with no data discipline.",clashing primaries and pastels,playful sans,scattered geometric shapes,"bouncy, playful",spacious,"creative agencies, youth brands, event promotion, playful marketing","enterprise, finance, dense tools, professional",radius: mixed; shadow-intensity: low; heading-tracking: normal,A playful campaign pack activates it; confetti ornament is the opposite of operator restraint.,light,,,,
+28,Motion-Driven,dormant-marketing,2020s,"animation-heavy, scroll effects, parallax, entrance sequences, transitions","Design where animation leads, with scroll-triggered reveals, parallax layers, orchestrated entrances, and page transitions carrying the experience. It suits storytelling. On operator surfaces orchestration is explicitly banned.","bold, movement-emphasizing","sans, animated","varies, motion-first","parallax, orchestrated sequences",spacious,"portfolio sites, storytelling, interactive marketing, launches","dashboards, data tools, low-power, motion-sensitive",duration-slow: 400-500ms; shadow-intensity: low,A storytelling marketing pack activates it; animation-led design is barred from operator surfaces by the floor.,both,,,,
+29,Kinetic,dormant-marketing,2020s,"kinetic typography, marquees, viewport-scaled text, scroll scaling, brutalist energy","Typography as moving architecture, with infinite marquees, viewport-scaled headlines, and scroll-driven scaling under brutalist high contrast. Motion is constant and reactive. It is a performance, not a workspace.","high-contrast, one acid accent","oversized uppercase, tight tracking","flat corners, thick borders","marquees, scroll-scrubbed transforms",spacious,"brand flagships, immersive storytelling, culture and music sites","dashboards, dense tools, accessibility-bound, long sessions",radius: 0px; shadow-intensity: 0; border-weight: 2px; heading-tracking: tight; duration-fast: 100ms,A flagship marketing pack activates it; constant motion and poster-scale type never suit operator work.,dark,,,,
+30,Parallax Storytelling,dormant-marketing,2020s,"scroll narrative, layered depth, chaptered reveals, scroll-triggered","Multi-layer parallax that unfolds a narrative as the reader scrolls, revealing chapters and depth. Effective for brand journeys and case studies. Scroll-bound animation makes it unusable for reference tools.","brand-led, section-coded","sans, sometimes serif accents",layered scenes,scroll-driven parallax,spacious,"brand storytelling, product launches, case studies, annual reports","dashboards, data tools, reference surfaces",duration-slow: 400ms; shadow-intensity: low,A launch or case-study pack activates it; scroll-bound parallax has no operator application.,both,,,,
+31,Interactive Cursor Design,dormant-marketing,2020s,"custom cursor, hover reveals, pointer effects, magnetic elements","Experiences built around a custom cursor and pointer-driven reveals, with magnetic buttons, trailing effects, and hover-only interactions. It delights on desktop showcases. Pointer-only affordances fail keyboard and touch access outright.","brand-led, minimal","sans, large","minimal, effect-driven",cursor-tracked effects,spacious,"creative portfolios, agency sites, interactive showcases","operator tools, touch surfaces, accessibility-bound",duration-normal: 150ms; shadow-intensity: low,A portfolio marketing pack activates it; pointer-only affordances violate keyboard access and are barred from operators.,both,,,,
+32,Tactile Digital / Deformable UI,dormant-marketing,2020s,"physics deformation, squishy elements, gesture response, elastic, playful","Elements that deform, stretch, and spring under touch as if physically elastic, driven by physics simulation. It feels alive and toy-like. The continuous physics motion is animation-led and off-limits for operators.","bright, playful",rounded sans,"elastic, deformable","physics springs, gesture-reactive",spacious,"playful consumer apps, entertainment, gaming UI","operator tools, dense data, motion-sensitive, professional",radius: 16-24px; shadow-intensity: mid; duration-normal: 300ms,A playful consumer pack activates it; physics-driven deformation is animation-led and excluded by the floor.,both,,,,
+33,Organic / Biophilic,operator-active,2020s,"nature-inspired, soft curves, earth tones, botanical, calm","Nature-derived forms of soft organic curves, earthy palettes, and botanical motifs aimed at calm and wellbeing. It merges the biophilic and nature-distilled variants. Warm and spacious, it lacks the density operators need.","earth tones, muted greens",humanist sans or soft serif,"organic curves, high radius","slow, gentle",spacious,"wellness brands, sustainability, health apps, artisan goods","dense dashboards, finance, high-density operator tools",radius: 16-24px; shadow-intensity: low; font-sans: humanist,A wellness or sustainability pack activates it; its spacious organic calm is the opposite of a data cockpit.,light,"Draw on nature: soft organic curves, an earthy palette of muted greens and warm neutrals, and humanist type for a calm, spacious surface. It suits wellness, health, and sustainability consoles where the register is warm rather than clinical. It breaks the near-white default without sacrificing the floor.","border-radius: 18px; box-shadow: 0 8px 24px rgba(60,80,60,0.08); background: #f4f1ea; color: #2f3a2f; gap: 24px",the background is a warm earth-tinted neutral not near-white; a single green or clay accent carries actions; corners use a generous organic radius of 16-24px; text clears 4.5:1 against the warm ground; status still uses a semantic color plus a label,color.background a warm off-white tinted toward the brand hue; primitive.radius 16-24px; color.accent a muted green or clay; typography.family.body a humanist sans; primitive.shadow-intensity 0.25
+34,Exaggerated Minimalism,dormant-marketing,2020s,"extreme whitespace, oversized type, luxury restraint, negative space","Minimalism pushed to drama, with vast negative space, a few oversized elements, and luxury restraint. It signals prestige through emptiness. Its whitespace budget is incompatible with information-dense work.","monochrome, single accent","oversized sans, editorial","flat, sparse","slow, minimal",spacious,"fashion, architecture, luxury brands, agency landing pages","dashboards, dense tools, data tables",radius: 0-4px; shadow-intensity: 0; density-gap: very loose; heading-tracking: tight,A luxury brand pack activates it; extreme whitespace cannot carry operator data density.,both,,,,
+35,Bold Typography,dormant-marketing,2020s,"type-led, oversized headlines, poster composition, dramatic contrast","Typography as the primary visual, with oversized headlines, extreme scale contrast, and dramatic negative space composing like a poster. Text becomes the image. At poster scale it is a marketing hero device, not a working layout.","high-contrast, restrained accent","oversized display, tight tracking","flat, type-driven",minimal or kinetic,spacious,"brand heroes, product hero sections, editorial, event pages","dashboards, dense forms, data tables",radius: 0-4px; shadow-intensity: 0; heading-tracking: tight; font-sans: grotesque,A hero-section marketing pack activates it; poster-scale type has no room on a dense operator surface.,both,,,,
+36,Editorial Grid / Magazine,dormant-marketing,2020s,"magazine layout, editorial grid, serif display, columns, long-form","Magazine-style composition with a strong editorial grid, serif display type, pull quotes, and multi-column flow for long-form reading. It structures content beautifully. Serif display and reading-first pacing keep it out of dashboards.","neutral, editorial accent","serif display, sans body","flat, rule-based grid",minimal,standard,"news, blogs, magazines, long-form content, journals","dashboards, software UI, dense data tables",radius: 0-2px; shadow-intensity: 0; border-weight: 1px; heading-tracking: tight,"A content or editorial pack activates it; serif display faces are banned in dashboards, so it stays marketing-side.",light,,,,
+37,Minimalist Monochrome,dormant-marketing,2020s,"pure black and white, editorial serif, high contrast, sharp geometry","Strictly black and white with no accent color, oversized serifs, razor-sharp zero-radius geometry, and full-bleed rules. It reads like a luxury printed manifesto. Pure black-and-white and serif display both trip operator rules.","pure black and white, no accent","oversized serif display, tight tracking","zero radius, heavy rules",instant inversions,spacious,"luxury fashion, editorial, high-end portfolios, avant-garde","dashboards, dense tools, status-color surfaces",radius: 0px; shadow-intensity: 0; border-weight: 2-4px; heading-tracking: tight; contrast-boost: 1.2,A luxury editorial pack activates it; pure black and white plus serif display violate the operator color and type floor.,light,,,,
+38,Academia,dormant-marketing,Timeless scholarly,"scholarly, warm paper, traditional serif, gold and deep red, ritual","The old-library aesthetic of warm paper textures, traditional serifs, and gold-on-deep-red tones evoking scholarship and ritual. It rewards slow reading. Serif-forward warmth is at odds with dashboard legibility rules.","warm paper, gold and oxblood",traditional serif,"subtle, classical","slow, restrained",standard,"knowledge tools, reading apps, scholarly brands, narrative games","dashboards, dense operator tools, software UI",radius: 2-4px; shadow-intensity: low; border-weight: 1px; contrast-boost: 1,A reading or brand pack activates it; serif-forward scholarly warmth is banned from dashboards by the type floor.,dark,,,,
+39,Bauhaus,dormant-marketing,1919 Bauhaus,"geometric primary, red blue yellow, thick borders, hard offset shadow, constructivist","Form-follows-function geometry in primary red, blue, and yellow, with thick black borders, hard zero-blur offset shadows, and massive type. It is graphic and poster-like. Three primaries as color-blocking break the single-accent operator rule.","primary red, blue, yellow blocks","geometric sans, massive display","flat blocks and pills, thick borders","mechanical, instant press",standard,"branding, onboarding flows, high-personality marketing, posters","dense dashboards, single-accent operator tools",radius: 0px and 9999px; shadow-intensity: hard offset; border-weight: 2-3px; font-sans: geometric,A branding or onboarding pack activates it; primary-color blocking violates the one-accent rule for operators.,light,,,,
+40,SaaS / High-Tech Boutique,dormant-marketing,2020s,"electric-blue gradient, serif-sans pairing, animated hero, inverted sections","The polished startup-marketing look of electric-blue gradients, a warm serif display paired with a workhorse sans, animated hero graphics, and inverted contrast sections. Confident and edgy for a landing page. The gradient-and-serif hero DNA is marketing, not operator chrome.","electric-blue gradient, warm off-white",serif display plus sans body,"medium radius, soft shadow","spring entrances, animated hero",standard,"SaaS landing pages, product marketing, developer-tool sites","the product's own dense dashboards, data tables",radius: 12-16px; shadow-intensity: mid; duration-normal: 200ms; heading-tracking: tight,"A product marketing pack activates it; its gradient hero and serif display belong on the landing page, not the console.",light,,,,
+41,Enterprise SaaS,dormant-marketing,2020s,"indigo-violet gradient, soft shadow, isometric depth, geometric sans","A modern enterprise-marketing style of indigo and violet gradients, soft shadows, isometric illustration, and clean geometric sans. It aims to be professional yet warm. The violet gradient reads as AI-slop and the depth is decorative.",indigo and violet gradients,geometric sans,"medium radius, soft depth","staggered fades, spring",standard,"enterprise marketing, SaaS landing pages, product sites","the product's dense internal tools, dashboards",radius: 8-16px; shadow-intensity: mid; heading-tracking: tight,A marketing pack activates it; the indigo-violet gradient trips the AI-slop palette flag and stays off operator surfaces.,light,,,,
+42,Modern Dark / Cinematic,dormant-marketing,2020s,"cinematic dark, ambient glow, animated light pools, frosted glass, precision","A premium dark aesthetic with layered near-black surfaces, slow animated light pools, frosted-glass navigation, and indigo accent glows. It feels like high-end pro software marketing. The ambient animation and glass blur push it past the operator floor.","near-black layers, indigo glow accent","sans, tight tracking","medium radius, glass edges",slow ambient light animation,standard,"premium product marketing, entertainment, launch pages","dense dashboards, long-session operator tools",radius: 12-16px; shadow-intensity: glow; duration-slow: 400ms; contrast-boost: 1,"A premium marketing pack activates it; ambient glow animation and glass blur exceed the operator floor, so use flat Dark Mode instead.",dark,,,,
+43,web3 / DeFi,dormant-marketing,2020s,"deep space, bitcoin orange, gold highlights, glowing data, futuristic","A futuristic crypto aesthetic of deep-space backgrounds, bitcoin-orange and gold highlights, glowing elements, and dramatized data visualization. It projects cutting-edge finance. Glow-led ornament and dramatized charts undercut data honesty.","deep space, orange and gold glow",sans and mono figures,"medium radius, glowing borders","pulsing glows, animated charts",standard,"DeFi and wallet marketing, NFT platforms, crypto brand sites","real financial dashboards, accountable data tools",radius: 8-12px; shadow-intensity: glow; font-mono: mono; contrast-boost: 1,A crypto marketing pack activates it; glowing dramatized charts conflict with anti-fabrication and stay marketing-side.,dark,,,,
+44,Sketch / Hand-Drawn,dormant-marketing,2020s,"wobbly borders, handwritten type, paper texture, marker, imperfect","Everything looks drawn by hand, with wobbly borders, marker strokes, handwritten type, and paper texture carrying deliberate imperfection. It is warm and approachable for low-fidelity or playful contexts. Hand-drawn irregularity fights the precision operators depend on.","muted, marker-like",handwritten and casual,"irregular, wobbly borders","playful, loose",spacious,"prototyping, creative brands, children's products, narrative games","production operator tools, dense data, precision UI",radius: irregular; shadow-intensity: low; border-weight: 2px (sketchy),A playful or prototyping pack activates it; hand-drawn irregularity undermines the precision an operator tool needs.,light,,,,
+45,Neubrutalism,dormant-marketing,2020s,"cream ground, thick black borders, hard offset shadow, clashing color, grotesque","The designed descendant of raw brutalism: cream backgrounds, thick black borders, zero-blur hard offset shadows, clashing vivid colors, and heavy grotesque type with sticker-like layering. It is organized visual chaos for creative brands. The hard shadows and clashing color read as decoration for operator work.","cream ground, clashing vivid accents","heavy grotesque, uppercase","flat corners, hard offset shadow","snappy, mechanical",standard,"creative tools, Gen Z marketing, portfolios, collab-brand sites","conservative enterprise, dense dashboards, finance",radius: 0px; shadow-intensity: hard offset; border-weight: 3-4px; font-sans: grotesque,A creative-brand pack activates it; the hard offset shadows and clashing palette are decoration a cockpit strips away.,light,,,,
+46,Pixel Art,dormant-marketing,1980s,"pixel grid, arcade, retro game, dithering, 8-bit","Deliberate low-resolution pixel grids, dithering, and 8-bit arcade nostalgia. It is a distinct illustrative craft. As UI it is a themed novelty, not an information system.",limited indexed palette,bitmap pixel fonts,"hard pixel edges, zero radius","stepped, frame-based",standard,"indie games, retro tools, nostalgia marketing, game portfolios","professional tools, dense data, accessibility-bound",radius: 0px; shadow-intensity: 0; border-weight: 2px; font-mono: pixel,A retro-game pack activates it; bitmap type and pixel edges are a novelty with no operator legibility.,both,,,,
+47,Spatial UI (VisionOS),dormant-marketing,2024,"spatial computing, glass depth, floating panels, AR layering, VR","The spatial-computing look of translucent glass panels floating in depth, built for AR and VR headsets. It assumes a 3D canvas and gaze or gesture input. On flat operator screens it collapses to heavy glass with no payoff.",translucent glass over environment,"sans, high legibility","rounded glass panels, depth","depth transitions, gaze-reactive",spacious,"VR/AR interfaces, spatial apps, immersive media","flat-screen dashboards, dense data, desktop operator tools",radius: 16-24px; shadow-intensity: low; contrast-boost: 0.9,"A spatial or immersive pack activates it; on a flat console it is just costly glass blur, so it stays out.",both,,,,
+48,E-Ink / Paper,dormant-marketing,2020s,"monochrome, high legibility, distraction-free, paper-like, digital wellbeing","A paper-like monochrome surface built for calm, distraction-free reading, echoing e-reader displays with maximal legibility and no color. It is restful and focused. Removing color forfeits the status signaling operators rely on.","grayscale, no accent","readable serif or sans, generous","flat, hairline rules",none or minimal,spacious,"reading apps, journals, digital newspapers, focus modes","status-color dashboards, dense operator tools",radius: 0-2px; shadow-intensity: 0; border-weight: 1px; contrast-boost: 1.1,A reading-mode pack activates it; forfeiting color removes the status signaling a working console needs.,light,,,,
+49,Anti-Polish / Raw Aesthetic,dormant-marketing,2020s,"intentionally raw, undesigned, exposed structure, anti-digital, authentic","A deliberately undesigned look of exposed structure, default styling, and rough edges as a rejection of digital polish, signaling authenticity. It is a statement for artist and indie sites. Its intentional roughness is the antithesis of operator precision.","default, unstyled","system fonts, raw","exposed, unstyled edges",none,standard,"artist sites, indie brands, handmade products, authentic marketing","production tools, enterprise, dense data",radius: 0px; shadow-intensity: 0; border-weight: 1px; font-sans: system,An indie or artist pack activates it; intentional rawness is the opposite of the precision operators require.,light,,,,
+50,Chromatic Aberration / RGB Split,dormant-marketing,2020s,"RGB split, color fringing, glitch offset, retro-tech, distortion","A retro-tech effect that splits red, green, and blue channels for a distorted, fringed, glitchy edge. It is an accent treatment for energy and nostalgia. As pervasive UI it degrades legibility and contrast.",RGB-split fringing,sans with fringe effect,"offset, distorted edges",glitch offset,standard,"music platforms, gaming, nightlife, creative tech marketing","readable interfaces, dense data, accessibility-bound",shadow-intensity: glow; contrast-boost: 0.9,A creative campaign pack activates it as an accent; pervasive RGB-split fringing destroys legibility for operators.,dark,,,,
+51,Vintage Analog / Retro Film,dormant-marketing,1970s-90s,"film grain, analog warmth, faded color, retro photography, nostalgia","An analog-film mood of grain, faded warm color, and vintage photographic treatment. It evokes nostalgia and craft. The grain and muted contrast work against data clarity.",faded warm analog tones,retro serif or grotesque,"soft, grainy edges","subtle, filmic",standard,"photography portfolios, vinyl and music brands, vintage fashion","dense data tools, dashboards, accessibility-bound",radius: 2-4px; shadow-intensity: low; contrast-boost: 0.9,A photography or music pack activates it; grain and faded contrast fight the clarity a data tool needs.,light,,,,
+52,Zero UI / Voice-First,dormant-marketing,2020s,"minimal visible UI, voice-first, ambient, progressive disclosure, predictive","An interface that hides itself, using voice and gesture input, ambient context-awareness, and controls revealed only on demand. It suits assistants and smart-home surfaces. It deliberately withholds the persistent visible controls a dense operator workflow depends on.","neutral, near-invisible","sans, sparse","minimal, soft",gentle progressive reveals,spacious,"voice assistants, smart home, ambient AI, hands-free tools","data-entry, dense operator workflows, explicit-control tools",radius: 8-12px; shadow-intensity: low; duration-normal: 200ms,"An ambient or voice pack activates it; hiding persistent controls is wrong for a dense, explicit-control operator tool.",light,,,,
+53,Claymorphism,dormant-marketing,2020s,"soft 3D clay, inflated, candy colors, layered shadows, playful, toy-like","Puffy, inflated clay-like forms with stacked soft shadows, thick rounded edges, and candy-bright colors for a tactile digital-toy feel. It is warm and playful for education and consumer apps. The soft-depth shadow stacks and rounded bulk fail dense, high-contrast operator needs.","candy pastels, playful brights",rounded friendly sans,"high radius, double soft shadows","soft bounce, 200ms",spacious,"children's education, playful consumer apps, creative tools","dense dashboards, finance, professional operator tools",radius: 16-24px; shadow-intensity: mid (dual); border-weight: 0-3px; contrast-boost: 0.95,A playful or education pack activates it; puffy soft-shadow bulk cannot serve dense high-contrast operator surfaces.,light,,,,
+54,Executive Overview,operator-active,2020s,"KPI cards, summary board, trend sparklines, traffic-light status, at-a-glance, decision view","The high-level summary board a decision-maker scans in seconds: a handful of large KPI cards, inline trend sparklines, and traffic-light status against generous whitespace. Detail is deliberately withheld so the headline figures carry the screen. It is the spacious summary cousin of the data cockpit, tuned for a one-screen read rather than a dense grid.","neutral ground, status via semantic tokens, one accent","sans with an oversized display figure for the headline KPI, tabular numerals","medium radius cards, subtle single-step elevation","count-up on figures, brief hover lift, under 300ms",spacious,"executive dashboards, business summaries, weekly review screens, portfolio overviews","detailed analyst drill-downs, dense operational grids, real-time monitoring",radius: 8-12px; shadow-intensity: low-mid; density-gap: loose; heading-scale: display; contrast-boost: 1,"The spacious overview posture: at most six KPI cards, one display-scale figure per card, status carried by a semantic role plus a label.",light,"Give the decision-maker the whole picture in one screen: a few large KPI figures, a trend sparkline each, and traffic-light status against generous whitespace. Withhold detail on purpose so the headline numbers lead, and reserve exactly one display-scale figure for the single most important metric. This is a read-at-a-glance surface, not an analyst workbench.","font-size: clamp(1.75rem, 3vw, 2.5rem); font-variant-numeric: tabular-nums; border-radius: 10px; box-shadow: 0 1px 3px rgba(15,23,42,0.1); gap: 24px",no more than six KPI cards on the first screen; each card carries one figure plus one trend indicator; the display type step appears at most once per surface; every value uses tabular-lining numerals; status uses a semantic color role plus a text or icon label,typography.ramp.display 2-2.5rem/600 for the lead KPI; elevation.md on stat cards; primitive.radius 8-12px; color.surface-raised for the card; primitive.shadow-intensity 0.3
+55,Real-Time Monitoring,operator-active,2020s,"live data, status dots, streaming rows, alert prominence, connection state, ops console","The live operations console: streaming rows, pulsing status dots, connection indicators, and alerts that surface without hijacking the screen. It leans dark so a wall-mounted or long-session view stays comfortable, and it privileges the current state over history. Motion is confined to data updates and a single status pulse, never decoration.","near-black ground, semantic status roles, one accent","compact sans, tabular numerals, mono for identifiers","near-flat, hairline dividers, small radius","data-update fades, one status pulse, no orchestration",dense,"system monitoring, DevOps consoles, NOC walls, live event tracking, trading floors","historical reports, marketing pages, spacious consumer apps",radius: 2-4px; shadow-intensity: 0; border-weight: 1px; contrast-boost: 1.1; font-mono: mono,"The live ops posture: status dots and streaming rows on a near-black ground, one accent, motion limited to updates and a single pulse.",dark,"Show the current state of a live system: streaming rows, status dots, connection health, and alerts that rise into view without taking over. Lean dark for the long shift or the wall display, keep the newest data in front, and confine motion to updates and a single status pulse. History is secondary; what is happening right now leads.","background: #0a0d12; color: #e6e8eb; border-bottom: 1px solid rgba(255,255,255,0.08); font-variant-numeric: tabular-nums; animation: pulse 2s ease-in-out infinite",the canvas is near-black and body text clears 7:1; status dots pair a semantic color with a text label; motion is limited to data updates and one status pulse; a connection or freshness indicator is visible; critical alerts are visually prominent without a modal takeover,color.background near-black; color.success color.warning color.destructive for status; primitive.shadow-intensity 0; typography.family.mono for identifiers; primitive.stagger-unit 0ms
+56,Drill-Down Analytics,operator-active,2020s,"hierarchical explore, breadcrumb, expandable, summary to detail, context preservation","A hierarchy you travel: breadcrumb navigation, expandable sections, and a summary-to-detail flow that keeps context as you descend. Each level preserves where you came from so the path back is never lost. The aesthetic stays neutral and structural; the interaction, not the ornament, carries the experience.","neutral ground, level indicators via muted tints, one accent","sans, standard scale, tabular numerals","small radius, hairline separators, indented levels","smooth expand and detail reveal, under 300ms",standard,"sales and product analytics, funnel analysis, multi-dimensional exploration, BI consoles","single-metric dashboards, real-time streams, spacious marketing surfaces",radius: 4-6px; shadow-intensity: low; border-weight: 1px; density-gap: standard,"The drill posture: breadcrumbs plus expandable sections, context preserved at every level, levels distinguished by indent and muted tint not color.",both,"Let the operator travel a hierarchy: breadcrumbs at the top, expandable sections, and a clean summary-to-detail descent that never loses the way back. Preserve context at every level and make the return path obvious. Keep the surface neutral and structural so the interaction, not decoration, does the work.","border-radius: 5px; box-shadow: 0 1px 2px rgba(15,23,42,0.08); padding-left: 24px; transition: max-height 250ms ease, opacity 200ms ease",a breadcrumb shows the current path at every level; expanding a section preserves the parent context; nesting is signalled by indent and a muted tint not by color alone; expand and reveal transitions stay under 300ms; a back or up affordance is always visible,primitive.radius 4-6px; elevation.sm on expanded panels; color.muted for level tints; primitive.stagger-unit 30ms; typography.ramp.small for level labels
+57,Comparative Analysis,operator-active,2020s,"side-by-side, period-over-period, deltas, benchmarks, A/B results, plus-minus coloring","Two or more things placed side by side with the difference made explicit: period-over-period metrics, benchmark lines, and delta badges that read up or down at a glance. Positive and negative are carried by semantic roles, never by an invented palette. The layout is symmetrical and quiet so the comparison itself is the only drama.","neutral ground, success and destructive roles for deltas, one accent","sans, tabular numerals, mono for deltas","small radius, aligned columns, hairline separators","bars grow to value, delta arrows settle, under 300ms",standard,"period reporting, A/B test dashboards, benchmark and competitive analysis, regional performance","single-metric views, forecasting surfaces, real-time-only dashboards",radius: 4-6px; shadow-intensity: low; border-weight: 1px; contrast-boost: 1,"The comparison posture: symmetrical columns, deltas carried by success and destructive roles plus a sign, a benchmark reference line rather than a decorated gauge.",light,"Place the things being compared side by side and make the difference unmissable: period-over-period figures, benchmark reference lines, and delta badges that read up or down instantly. Carry positive and negative with semantic roles plus a sign, never a novelty palette. Keep the columns symmetrical and quiet so the comparison is the only thing that moves the eye.",display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-variant-numeric: tabular-nums; border-radius: 5px,compared items sit in symmetrical aligned columns; deltas pair a semantic color with a plus or minus sign; a benchmark or baseline reference is visible; values use tabular-lining numerals; the layout collapses to a stack on narrow viewports,color.success and color.destructive for deltas; primitive.radius 4-6px; typography.family.mono for delta values; primitive.shadow-intensity 0.2; chart-1 through chart-3 for series
+58,Forecast & Anomaly,operator-active,2020s,"forecast line, confidence band, trend projection, anomaly marker, honest uncertainty","Projection rendered honestly: a dashed forecast line, a shaded confidence band, and anomaly markers that flag outliers without dramatizing them. Uncertainty is shown, not hidden, and the actual data stays visually distinct from the prediction. No glow, no invented precision; the chart tells the truth about what is known and what is guessed.","neutral ground, distinct forecast hue, warning role for anomalies","sans, tabular numerals, small labels for dates","small radius, thin lines, shaded bands","line draws on, band fades in, under 300ms",standard,"forecasting dashboards, anomaly detection, capacity planning, trend projection","historical-only reporting, real-time operational streams, simple single-value cards",radius: 4px; shadow-intensity: low; border-weight: 1px; contrast-boost: 1,"The forecast posture: actuals solid and predictions dashed, a shaded confidence band, anomalies on the warning role, no glow that would fake precision.",both,"Show projection without pretending certainty: a dashed forecast line, a shaded confidence band, and anomaly markers that flag outliers plainly. Keep actual data visually distinct from the prediction, and let the band widen honestly where confidence drops. Refuse glow and invented precision; the chart should say what is known and what is merely estimated.",stroke-dasharray: 5 4; fill-opacity: 0.15; border-radius: 4px; stroke-width: 1.5px; box-shadow: none,forecast segments are dashed and actuals are solid; a confidence band is shaded and widens with uncertainty; anomalies use the warning role plus a marker not glow; dates and values use tabular numerals; the prediction is labelled as an estimate,chart-1 for actuals chart-2 for the forecast line; color.warning for anomalies; primitive.radius 4px; primitive.shadow-intensity 0.2; wash.surface omitted so there is no glow
+59,Behavioral Funnel & Cohort,operator-active,2020s,"funnel stages, flow diagram, conversion, cohort table, retention curve","The behavior surface: funnel stages with drop-off made visible, flow diagrams for paths, cohort grids, and retention curves. Engagement and abandonment read through semantic roles so the story is legible without a legend hunt. It favors clarity of the journey over ornament, and every stage is labelled with its own number.","neutral ground, success and warning roles for stages, sequential tints for cohorts","sans, tabular numerals, small stage labels","small radius, stepped bars, grid cells","funnel fills down, bars grow, under 300ms",standard,"conversion funnels, user journey tracking, cohort and retention analysis, engagement analytics","real-time monitoring, financial ledgers, spacious marketing pages",radius: 4-6px; shadow-intensity: low; border-weight: 1px; density-gap: standard,"The behavior posture: funnel stages labelled with their own figures, drop-off on the warning role, cohort cells on a sequential tint that is colorblind-checked.",light,"Make the journey legible: funnel stages with drop-off shown honestly, flow paths, cohort grids, and retention curves. Carry engagement and abandonment through semantic roles so nobody hunts a legend, and label every stage with its own figure. Favor the clarity of the path over any ornament.","display: grid; gap: 8px; border-radius: 5px; font-variant-numeric: tabular-nums; clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%)",each funnel stage shows its own count and drop-off; abandonment uses the warning role and completion the success role; cohort cells use a sequential tint checked for colorblind safety; retention values use tabular numerals; stages are labelled not color-only,color.success and color.warning for stages; chart-1 through chart-5 for cohort tints; primitive.radius 4-6px; primitive.shadow-intensity 0.2; typography.ramp.small for stage labels
+60,Financial Ledger,operator-active,2020s,"currency, profit and loss, budget variance, audit trail, tabular numerals, waterfall","The accounting surface: formatted currency, aligned decimals, profit-and-loss framing, budget variance, and an audit trail that reconciles. Numbers are the entire interface, so tabular numerals and right-aligned columns are non-negotiable. Trust is the register: nothing dramatized, every figure sourced and reconcilable.","neutral ground, profit and loss on success and destructive roles, one accent","sans with a numeric mono, tabular lining numerals, aligned decimals","near-flat, hairline dividers, small radius, totals rules","count-up on totals, restrained, under 300ms",dense,"financial reporting, accounting consoles, budget monitoring, banking analytics, treasury","consumer social metrics, marketing dashboards, non-financial data",radius: 2-4px; shadow-intensity: 0; border-weight: 1px; font-mono: mono; contrast-boost: 1.1,"The ledger posture: right-aligned tabular currency, profit and loss on semantic roles, a totals rule, an audit trail that reconciles; never dramatize a figure.",both,"Treat numbers as the whole interface: formatted currency, aligned decimals, profit-and-loss framing, budget variance, and an audit trail that actually reconciles. Right-align every figure, use tabular numerals, and rule off totals. Trust is the register, so nothing is dramatized and every value is sourced.",font-variant-numeric: tabular-nums; text-align: right; border-radius: 3px; border-top: 2px solid; box-shadow: none,currency figures are right-aligned with consistent decimal places; profit and loss use the success and destructive roles plus a sign; a totals row is ruled off from detail; numerals are tabular-lining throughout; an audit or source reference is present,typography.family.mono for figures; color.success and color.destructive for gains and losses; primitive.radius 2-4px; primitive.shadow-intensity 0; primitive.border-weight 1px
+61,Sales Pipeline / CRM,operator-active,2020s,"deal pipeline, kanban board, quota, leaderboard, win-loss, status borders","The pipeline surface: kanban deal columns, quota progress, a leaderboard, and win-loss framing, with each deal carrying a status through a left border rather than a fill. Progress toward target is a bar with a reference line, not a novelty gauge. It stays legible under a full board and moves only when a deal moves.","neutral ground, stage colors via semantic roles, one accent","sans, tabular numerals for values","medium radius cards, status via left border, single-step elevation","card move and rank change, under 300ms, no springs",standard,"CRM dashboards, sales management, opportunity tracking, quota planning, pipeline review","financial ledgers, real-time monitoring, spacious marketing surfaces",radius: 8px; shadow-intensity: low; border-weight: 1px; density-gap: standard,"The pipeline posture: kanban columns, deal status on a left border, quota as a bar with a reference line rather than a gauge, rank changes without spring physics.",light,"Lay the pipeline out as kanban columns, each deal a card whose status shows through a left border rather than a loud fill. Render quota as a bar with a target reference line, not a novelty gauge, and keep the leaderboard plain. It should stay legible under a full board and animate only when a deal actually moves.","display: flex; gap: 16px; border-radius: 8px; border-left: 3px solid; box-shadow: 0 1px 3px rgba(15,23,42,0.08)",deals are cards in kanban stage columns; deal status is carried by a left border color plus a label; quota shows as a bar with a target reference line not a gauge; values use tabular numerals; card and rank movement stays under 300ms with no spring,primitive.radius 8px; elevation.sm on cards; color.success color.warning for stage status; primitive.shadow-intensity 0.25; primitive.stagger-unit 30ms
+62,Heat-Map Matrix,operator-active,2020s,"color-coded grid, data intensity, correlation matrix, calendar heatmap, cohort grid","Data intensity rendered as a grid: correlation matrices, calendar heatmaps, and cohort cells where a sequential or diverging scale carries magnitude. The scale is chosen for colorblind safety and paired with a legend and on-hover values, so color never stands alone. Cells are hairline-separated and dense, letting a whole matrix read at once.","neutral ground, sequential or diverging scale, legend mandatory","compact sans, tabular numerals, small cell labels","near-flat cells, hairline grid, minimal radius","color transition on data change, hover highlight, under 300ms",dense,"correlation analysis, calendar and activity heatmaps, cohort grids, geographic intensity","linear single-series trends, categorical bar comparisons, small datasets",radius: 2px; shadow-intensity: 0; border-weight: 1px; density-gap: tight,"The matrix posture: a colorblind-safe sequential or diverging scale, a mandatory legend, on-hover values so color intensity is never the only signal.",both,"Render magnitude as a grid of color-coded cells: correlation matrices, calendar heatmaps, cohort tables. Choose a sequential or diverging scale for colorblind safety, always pair it with a legend and on-hover values, and separate cells with hairlines so the whole matrix reads at once. Color shows intensity, but a number always backs it up.",display: grid; gap: 1px; border-radius: 2px; --cell: 24px; font-variant-numeric: tabular-nums,the color scale is sequential or diverging and colorblind-checked; a legend maps color to value; hovering a cell reveals its exact figure; cells are hairline-separated in a regular grid; color intensity is never the only carrier of the value,chart-1 through chart-5 anchor the scale endpoints; primitive.radius 2px; primitive.border-weight 1px; primitive.shadow-intensity 0; typography.ramp.caption for cell labels
+63,Log Stream,operator-active,2020s,"log viewer, timestamps, severity coloring, virtualized rows, sticky filters, monospace","The log viewer: monospace rows, aligned timestamps, severity carried by a semantic role, and sticky filters over a virtualized stream. It leans dark for long reading sessions and stays flat so nothing competes with the text. Unlike a themed terminal, it is plain infrastructure, tuned for scanning thousands of lines.","near-black ground, severity via semantic roles, one accent for filters","monospace throughout, tabular timestamps","flat, hairline row separators, zero radius","new-line fade, auto-scroll toggle, no orchestration",dense,"log viewers, audit trails, event streams, CI output, infrastructure consoles","marketing pages, spacious summaries, touch-first consumer apps",radius: 0px; shadow-intensity: 0; border-weight: 1px; font-mono: mono; contrast-boost: 1.1,"The log posture: monospace rows with aligned timestamps, severity on a semantic role, sticky filters, a virtualized stream that stays flat and dark.",dark,"Present logs for scanning at volume: monospace rows, aligned timestamps, severity carried by a semantic color, and sticky filters over a virtualized stream. Lean dark for the long read and stay flat so nothing competes with the text. This is plain infrastructure, not a themed terminal; legibility of thousands of lines is the whole job.","font-family: ui-monospace, 'JetBrains Mono', monospace; background: #0a0d12; border-bottom: 1px solid rgba(255,255,255,0.06); border-radius: 0; font-variant-numeric: tabular-nums",every row is monospace with an aligned timestamp; severity is carried by a semantic color plus a level label; filters stay sticky while the stream scrolls; the list is virtualized for large volumes; the ground is near-black with text above 7:1,typography.family.mono the primary family; color.background near-black; color.destructive color.warning for severity; primitive.radius 0px; primitive.shadow-intensity 0
+64,Nature Distilled,operator-active,2020s,"muted earthy, terracotta, sand, warm neutrals, handmade warmth, artisan","A warm, distilled take on natural materials: terracotta, sand, olive, and warm cream on a spacious, calm surface, without the literal botanical motifs of biophilic design. It reads handmade and grounded rather than clinical, and it carries a committed warm palette instead of the near-white default. Static and legible, it stays inside the floor while breaking the monoculture.","warm earth-tinted neutrals, one clay or olive accent","humanist sans or soft serif accents, standard scale","medium-to-generous radius, soft single-step shadow","gentle ease-out, under 300ms, no orchestration",spacious,"wellness and sustainability admin, artisan commerce back-office, health portals, warm-brand consoles","high-density trading, cool corporate fintech, night-shift monitoring",radius: 12-16px; shadow-intensity: low; border-weight: 1px; contrast-boost: 1,"The warm-operator posture: earth-tinted neutrals and one clay or olive accent on a spacious surface, static and legible, chosen to break the near-white default.",light,"Reach for a committed warm palette: terracotta, sand, olive, and warm cream on a spacious, calm surface, without literal botanical motifs. Read handmade and grounded rather than clinical, and stay static and legible so the warmth is the only departure from the operator floor. This is the antidote to the near-white default, not a decorative theme.","background: #f3ede2; color: #33302a; border-radius: 14px; box-shadow: 0 6px 20px rgba(90,70,50,0.08); gap: 24px",the background is a warm earth-tinted neutral not near-white; a single clay or olive accent carries actions; text clears 4.5:1 against the warm ground; radius is generous but consistent at 12-16px; status still uses a semantic role plus a label,color.background a warm off-white tinted toward clay; color.accent a muted terracotta or olive; primitive.radius 12-16px; primitive.shadow-intensity 0.2; typography.family.body a humanist sans
+65,Command Deck,operator-active,2020s,"command center, multi-panel, keyboard-driven, palette, dense controls, dark rail","The command center: a multi-panel deck with a dark chrome rail, keyboard-driven navigation, a command palette, and dense controls arranged for a power user who lives in the tool. Panels are hairline-framed and flat; the accent marks the active pane and nothing else. It privileges control density and speed over any spacious calm.","dark chrome, one accent for the active pane, semantic status","compact sans with mono identifiers, tabular numerals","near-flat, hairline panel frames, small radius","instant pane switches, brief focus transition, no orchestration",dense,"command centers, incident response, multi-pane consoles, power-user operator tools","onboarding, marketing pages, spacious consumer summaries",radius: 2-4px; shadow-intensity: low; border-weight: 1px; font-mono: mono; contrast-boost: 1.1,"The command-center posture: dark multi-panel chrome, a command palette, keyboard-first navigation, one accent reserved for the active pane.",dark,"Build for the power user who lives in the tool: a dark multi-panel deck, a command palette, keyboard-first navigation, and dense controls framed by hairlines. Mark only the active pane with the accent and keep every panel flat. Control density and speed lead; there is no spacious calm here.","display: grid; grid-template-columns: 240px 1fr; background: #0b0e13; border: 1px solid rgba(255,255,255,0.08); border-radius: 3px",the layout is a multi-panel deck with a dark chrome rail; a command palette is reachable by keyboard; only the active pane carries the accent; panels are hairline-framed and flat; identifiers render in a monospace face,color.background dark chrome; color.accent for the active pane only; primitive.radius 2-4px; typography.family.mono for identifiers; primitive.shadow-intensity 0.2
+66,Biomimetic / Generative,dormant-marketing,2020s,"cellular, fluid, breathing, generative, algorithmic, life-like","Nature taken to algorithm: cellular and fluid shapes, breathing animations, and generative patterns that grow and drift under physics. It feels alive and organic but the continuous motion and canvas or WebGL rendering are decoration-forward and costly. Distinct from the calm, static biophilic look, it is a showcase aesthetic rather than a working one.","bioluminescent and organic gradients, multi-hue",rounded humanist sans over generative scenes,"morphing cellular forms, high radius, fluid edges","breathing scale pulse, generative drift, physics-based",spacious,"biotech and sustainability marketing, generative-art platforms, meditation and wellness showcases","operator tools, dense data, low-power devices, accessibility-bound surfaces",radius: 24px; shadow-intensity: low; duration-slow: 4s; contrast-boost: 0.95,Continuous breathing motion and generative canvas rendering are animation-led and costly; only a generative-art or biotech marketing pack would activate it.,both,,,,