@nurix/etna 0.19.10 → 0.19.12

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

@@ -1,64 +0,0 @@
-id,pairing,tier,heading_family,body_family,mono_family,contrast,mood,best_for,heading_weights,body_weights,google_fonts_css,notes,css-import,tailwind-config,display-size-hint
-1,Minimal Swiss,operator-active,Inter,Inter,JetBrains Mono,sans+sans,"minimal, neutral, functional, legible, systematic","dashboards, admin panels, data tables, design systems, internal tools",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap,"One neutral grotesque carries the whole hierarchy through weight alone, which is the safest default for a dense operator console.",@import '@fontsource/inter/400.css'; @import '@fontsource/inter/500.css'; @import '@fontsource/inter/600.css'; @import '@fontsource/inter/700.css'; @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css';,"fontFamily: { heading: ['Inter', 'sans-serif'], body: ['Inter', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 2.5-3rem/600-700/-0.02em/lh1.1; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-2,Friendly SaaS,operator-active,Plus Jakarta Sans,Plus Jakarta Sans,JetBrains Mono,sans+sans,"approachable, modern, warm, professional, versatile","SaaS consoles, B2B web apps, settings pages, productivity tools",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap,Plus Jakarta Sans keeps a single-family setup readable while adding a touch more warmth than Inter for softer product surfaces.,@import '@fontsource/plus-jakarta-sans/400.css'; @import '@fontsource/plus-jakarta-sans/500.css'; @import '@fontsource/plus-jakarta-sans/600.css'; @import '@fontsource/plus-jakarta-sans/700.css'; @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css';,"fontFamily: { heading: ['Plus Jakarta Sans', 'sans-serif'], body: ['Plus Jakarta Sans', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 2.5-3rem/600-700/-0.02em/lh1.1; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-3,Financial Trust,operator-active,IBM Plex Sans,IBM Plex Sans,IBM Plex Mono,sans+sans,"trustworthy, corporate, precise, serious, tabular","banking back-office, fintech admin, ledgers, reporting, enterprise apps",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap,"IBM Plex Sans reads calmly at small sizes and pairs cleanly with its own mono for figure columns, so numbers and labels feel of one voice.",@import '@fontsource/ibm-plex-sans/400.css'; @import '@fontsource/ibm-plex-sans/500.css'; @import '@fontsource/ibm-plex-sans/600.css'; @import '@fontsource/ibm-plex-sans/700.css'; @import '@fontsource/ibm-plex-mono/400.css'; @import '@fontsource/ibm-plex-mono/500.css';,"fontFamily: { heading: ['IBM Plex Sans', 'sans-serif'], body: ['IBM Plex Sans', 'sans-serif'], mono: ['IBM Plex Mono', 'monospace'] }",display 2.5-3rem/600-700/-0.02em/lh1.1; kpi mono 1.75-2.5rem/500/lh1 tabular-nums
-4,Modern Neutral,operator-active,Manrope,Manrope,JetBrains Mono,sans+sans,"clean, contemporary, premium, balanced, quiet","product dashboards, analytics UIs, marketing-adjacent consoles, portals",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap,"Manrope splits the difference between geometric and humanist, giving a crisp yet friendly single-family system for polished internal products.",@import '@fontsource/manrope/400.css'; @import '@fontsource/manrope/500.css'; @import '@fontsource/manrope/600.css'; @import '@fontsource/manrope/700.css'; @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css';,"fontFamily: { heading: ['Manrope', 'sans-serif'], body: ['Manrope', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 2.5-3rem/600-700/-0.02em/lh1.1; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-5,Premium Sans,operator-active,DM Sans,DM Sans,Space Mono,sans+sans,"premium, tidy, geometric, understated, modern","startup consoles, low-chrome apps, forms, focused single-column tools",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap,"DM Sans stays compact and even in color, so long forms and settings screens hold together without a second family.",@import '@fontsource/dm-sans/400.css'; @import '@fontsource/dm-sans/500.css'; @import '@fontsource/dm-sans/600.css'; @import '@fontsource/dm-sans/700.css'; @import '@fontsource/space-mono/400.css'; @import '@fontsource/space-mono/700.css';,"fontFamily: { heading: ['DM Sans', 'sans-serif'], body: ['DM Sans', 'sans-serif'], mono: ['Space Mono', 'monospace'] }",display 2.5-3rem/600-700/-0.02em/lh1.1; kpi mono 1.75-2.25rem/700/lh1 tabular-nums
-6,Source Workhorse,operator-active,Source Sans 3,Source Sans 3,Source Code Pro,sans+sans,"utilitarian, readable, open-source, dependable, plain","documentation UIs, content admins, help centers, ticketing back-ends",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&display=swap,Source Sans 3 is an unfussy reading sans that scales from field labels to paragraph help text within one file.,@import '@fontsource/source-sans-3/400.css'; @import '@fontsource/source-sans-3/500.css'; @import '@fontsource/source-sans-3/600.css'; @import '@fontsource/source-sans-3/700.css'; @import '@fontsource/source-code-pro/400.css'; @import '@fontsource/source-code-pro/500.css';,"fontFamily: { heading: ['Source Sans 3', 'sans-serif'], body: ['Source Sans 3', 'sans-serif'], mono: ['Source Code Pro', 'monospace'] }",display 2.5-3rem/600-700/-0.02em/lh1.1; kpi mono 1.75-2.5rem/500/lh1 tabular-nums
-7,Material Console,operator-active,Roboto,Roboto,Roboto Mono,sans+sans,"familiar, android, systematic, adaptive, plain","Android-adjacent tools, cross-platform admin, MD3 apps, embedded dashboards",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap,"Roboto is the Material default operators already recognize, and pairing it with Roboto Mono keeps data cells in the same family.",@import '@fontsource/roboto/400.css'; @import '@fontsource/roboto/500.css'; @import '@fontsource/roboto/600.css'; @import '@fontsource/roboto/700.css'; @import '@fontsource/roboto-mono/400.css'; @import '@fontsource/roboto-mono/500.css';,"fontFamily: { heading: ['Roboto', 'sans-serif'], body: ['Roboto', 'sans-serif'], mono: ['Roboto Mono', 'monospace'] }",display 2.5-3rem/600-700/-0.02em/lh1.1; kpi mono 1.75-2.5rem/500/lh1 tabular-nums
-8,Accessibility First,operator-active,Atkinson Hyperlegible,Atkinson Hyperlegible,IBM Plex Mono,sans+sans,"accessible, legible, inclusive, high-clarity, plain","accessibility-critical tools, healthcare, government back-office, inclusive design",700,400;700,https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap,"Atkinson Hyperlegible pulls apart easily confused letterforms, which matters when operators scan identifiers and codes all day.",@import '@fontsource/atkinson-hyperlegible/400.css'; @import '@fontsource/atkinson-hyperlegible/700.css'; @import '@fontsource/ibm-plex-mono/400.css'; @import '@fontsource/ibm-plex-mono/500.css';,"fontFamily: { heading: ['Atkinson Hyperlegible', 'sans-serif'], body: ['Atkinson Hyperlegible', 'sans-serif'], mono: ['IBM Plex Mono', 'monospace'] }",display 2.5-3rem/700/-0.01em/lh1.1; kpi mono 1.75-2.5rem/500/lh1 tabular-nums
-9,Modern Professional,operator-active,Poppins,Open Sans,JetBrains Mono,sans+sans,"professional, friendly, corporate, clean, approachable","corporate apps, business dashboards, professional services, portals",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap,Geometric Poppins headings sit above humanist Open Sans body so section titles get presence without hurting long-run readability.,@import '@fontsource/poppins/500.css'; @import '@fontsource/poppins/600.css'; @import '@fontsource/poppins/700.css'; @import '@fontsource/open-sans/400.css'; @import '@fontsource/open-sans/500.css'; @import '@fontsource/open-sans/600.css'; @import '@fontsource/open-sans/700.css'; @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css';,"fontFamily: { heading: ['Poppins', 'sans-serif'], body: ['Open Sans', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 2.5-3rem/600-700/-0.02em/lh1.1; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-10,Tech Startup,operator-active,Space Grotesk,DM Sans,JetBrains Mono,sans+sans,"technical, modern, distinctive, product, confident","developer products, technical dashboards, SaaS consoles, data tools",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap,Space Grotesk lends headings a little engineered character while DM Sans keeps the body plain and dense-friendly.,@import '@fontsource/space-grotesk/500.css'; @import '@fontsource/space-grotesk/600.css'; @import '@fontsource/space-grotesk/700.css'; @import '@fontsource/dm-sans/400.css'; @import '@fontsource/dm-sans/500.css'; @import '@fontsource/dm-sans/600.css'; @import '@fontsource/dm-sans/700.css'; @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css';,"fontFamily: { heading: ['Space Grotesk', 'sans-serif'], body: ['DM Sans', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 2.5-3rem/600-700/-0.02em/lh1.1; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-11,Geometric Modern,operator-active,Outfit,Work Sans,JetBrains Mono,sans+sans,"geometric, contemporary, balanced, versatile, clean","general admin, internal portals, catalog tools, landing-adjacent consoles",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Work+Sans:wght@400;500;600;700&display=swap,"Outfit gives crisp geometric headings and Work Sans supplies a slightly warmer, workmanlike body underneath.",@import '@fontsource/outfit/500.css'; @import '@fontsource/outfit/600.css'; @import '@fontsource/outfit/700.css'; @import '@fontsource/work-sans/400.css'; @import '@fontsource/work-sans/500.css'; @import '@fontsource/work-sans/600.css'; @import '@fontsource/work-sans/700.css'; @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css';,"fontFamily: { heading: ['Outfit', 'sans-serif'], body: ['Work Sans', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 2.5-3rem/600-700/-0.02em/lh1.1; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-12,Corporate Trust,operator-active,Lexend,Source Sans 3,IBM Plex Mono,sans+sans,"readable, accessible, corporate, calm, dependable","enterprise apps, finance, healthcare, accessibility-focused back-office",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Lexend:wght@500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap,"Lexend was tuned to ease reading speed, so it earns the heading role over a plain Source Sans 3 body in text-heavy consoles.",@import '@fontsource/lexend/500.css'; @import '@fontsource/lexend/600.css'; @import '@fontsource/lexend/700.css'; @import '@fontsource/source-sans-3/400.css'; @import '@fontsource/source-sans-3/500.css'; @import '@fontsource/source-sans-3/600.css'; @import '@fontsource/source-sans-3/700.css'; @import '@fontsource/ibm-plex-mono/400.css'; @import '@fontsource/ibm-plex-mono/500.css';,"fontFamily: { heading: ['Lexend', 'sans-serif'], body: ['Source Sans 3', 'sans-serif'], mono: ['IBM Plex Mono', 'monospace'] }",display 2.5-3rem/600-700/-0.02em/lh1.1; kpi mono 1.75-2.5rem/500/lh1 tabular-nums
-13,Medical Clean,operator-active,Figtree,Noto Sans,IBM Plex Mono,sans+sans,"clean, clinical, accessible, calm, professional","healthcare admin, clinical tools, records systems, patient portals",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Figtree:wght@500;600;700&family=Noto+Sans:wght@400;500;600;700&display=swap,Figtree stays neutral and clear for headings while Noto Sans covers the wide glyph range clinical data tends to demand.,@import '@fontsource/figtree/500.css'; @import '@fontsource/figtree/600.css'; @import '@fontsource/figtree/700.css'; @import '@fontsource/noto-sans/400.css'; @import '@fontsource/noto-sans/500.css'; @import '@fontsource/noto-sans/600.css'; @import '@fontsource/noto-sans/700.css'; @import '@fontsource/ibm-plex-mono/400.css'; @import '@fontsource/ibm-plex-mono/500.css';,"fontFamily: { heading: ['Figtree', 'sans-serif'], body: ['Noto Sans', 'sans-serif'], mono: ['IBM Plex Mono', 'monospace'] }",display 2.5-3rem/600-700/-0.02em/lh1.1; kpi mono 1.75-2.5rem/500/lh1 tabular-nums
-14,Commerce Clean,operator-active,Rubik,Nunito Sans,JetBrains Mono,sans+sans,"friendly, retail, clean, approachable, orderly","back-office commerce, order management, catalog admin, fulfillment tools",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Rubik:wght@500;600;700&family=Nunito+Sans:wght@400;500;600;700&display=swap,Rubik's rounded corners give order screens a little friendliness while Nunito Sans keeps line items quietly legible.,@import '@fontsource/rubik/500.css'; @import '@fontsource/rubik/600.css'; @import '@fontsource/rubik/700.css'; @import '@fontsource/nunito-sans/400.css'; @import '@fontsource/nunito-sans/500.css'; @import '@fontsource/nunito-sans/600.css'; @import '@fontsource/nunito-sans/700.css'; @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css';,"fontFamily: { heading: ['Rubik', 'sans-serif'], body: ['Nunito Sans', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 2.5-3rem/600-700/-0.02em/lh1.1; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-15,Minimalist Portfolio,operator-active,Space Grotesk,Archivo,Space Mono,sans+sans,"minimal, editorial, crisp, design-forward, restrained","design tooling, asset managers, internal editors, review consoles",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Archivo:wght@400;500;600;700&display=swap,Space Grotesk headings stay distinctive against Archivo's tighter grotesque body for tools that want a designed feel.,@import '@fontsource/space-grotesk/500.css'; @import '@fontsource/space-grotesk/600.css'; @import '@fontsource/space-grotesk/700.css'; @import '@fontsource/archivo/400.css'; @import '@fontsource/archivo/500.css'; @import '@fontsource/archivo/600.css'; @import '@fontsource/archivo/700.css'; @import '@fontsource/space-mono/400.css'; @import '@fontsource/space-mono/700.css';,"fontFamily: { heading: ['Space Grotesk', 'sans-serif'], body: ['Archivo', 'sans-serif'], mono: ['Space Mono', 'monospace'] }",display 2.5-3rem/600-700/-0.02em/lh1.1; kpi mono 1.75-2.25rem/700/lh1 tabular-nums
-16,Government Public,operator-active,Public Sans,Source Sans 3,IBM Plex Mono,sans+sans,"civic, neutral, accessible, plain, official","government dashboards, public-sector admin, compliance tools, records",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Public+Sans:wght@500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap,"Public Sans carries a civic, standards-driven tone for headings that Source Sans 3 supports without drawing attention.",@import '@fontsource/public-sans/500.css'; @import '@fontsource/public-sans/600.css'; @import '@fontsource/public-sans/700.css'; @import '@fontsource/source-sans-3/400.css'; @import '@fontsource/source-sans-3/500.css'; @import '@fontsource/source-sans-3/600.css'; @import '@fontsource/source-sans-3/700.css'; @import '@fontsource/ibm-plex-mono/400.css'; @import '@fontsource/ibm-plex-mono/500.css';,"fontFamily: { heading: ['Public Sans', 'sans-serif'], body: ['Source Sans 3', 'sans-serif'], mono: ['IBM Plex Mono', 'monospace'] }",display 2.5-3rem/600-700/-0.02em/lh1.1; kpi mono 1.75-2.5rem/500/lh1 tabular-nums
-17,Technical Data,operator-active,Exo,IBM Plex Sans,Roboto Mono,sans+sans,"technical, engineered, precise, data, modern","engineering dashboards, monitoring, telemetry consoles, ops tools",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Exo:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap,Exo adds a subtle engineered edge to headings while IBM Plex Sans keeps dense telemetry labels grounded and readable.,@import '@fontsource/exo/500.css'; @import '@fontsource/exo/600.css'; @import '@fontsource/exo/700.css'; @import '@fontsource/ibm-plex-sans/400.css'; @import '@fontsource/ibm-plex-sans/500.css'; @import '@fontsource/ibm-plex-sans/600.css'; @import '@fontsource/ibm-plex-sans/700.css'; @import '@fontsource/roboto-mono/400.css'; @import '@fontsource/roboto-mono/500.css';,"fontFamily: { heading: ['Exo', 'sans-serif'], body: ['IBM Plex Sans', 'sans-serif'], mono: ['Roboto Mono', 'monospace'] }",display 2.5-3rem/600-700/-0.02em/lh1.1; kpi mono 1.75-2.5rem/500/lh1 tabular-nums
-18,Condensed Dense,operator-active,Barlow Condensed,Barlow,JetBrains Mono,sans+sans,"condensed, dense, efficient, compact, utilitarian","space-tight dashboards, dense tables, control panels, logistics tools",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Barlow:wght@400;500;600;700&display=swap,Barlow Condensed packs long headings into narrow columns and shares a family with Barlow body so the two never clash.,@import '@fontsource/barlow-condensed/500.css'; @import '@fontsource/barlow-condensed/600.css'; @import '@fontsource/barlow-condensed/700.css'; @import '@fontsource/barlow/400.css'; @import '@fontsource/barlow/500.css'; @import '@fontsource/barlow/600.css'; @import '@fontsource/barlow/700.css'; @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css';,"fontFamily: { heading: ['Barlow Condensed', 'sans-serif'], body: ['Barlow', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 3-3.5rem/600-700/0/lh1.05; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-19,Developer Mono,operator-active,JetBrains Mono,IBM Plex Sans,JetBrains Mono,mono+sans,"developer, technical, precise, code, functional","developer tools, CI dashboards, config editors, log viewers",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap,JetBrains Mono headings and labels signal a code context while IBM Plex Sans keeps surrounding prose comfortable to read.,@import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css'; @import '@fontsource/jetbrains-mono/700.css'; @import '@fontsource/ibm-plex-sans/400.css'; @import '@fontsource/ibm-plex-sans/500.css'; @import '@fontsource/ibm-plex-sans/600.css'; @import '@fontsource/ibm-plex-sans/700.css';,"fontFamily: { heading: ['JetBrains Mono', 'monospace'], body: ['IBM Plex Sans', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 2-2.5rem/600-700/0/lh1.1; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-20,Dashboard Data,operator-active,Fira Code,Fira Sans,Fira Code,mono+sans,"analytics, technical, data, precise, cohesive","analytics dashboards, metric consoles, query tools, observability",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Fira+Code:wght@500;600;700&family=Fira+Sans:wght@400;500;600;700&display=swap,"The Fira family shares proportions across mono and sans, so figures in Fira Code sit naturally beside Fira Sans labels.",@import '@fontsource/fira-code/400.css'; @import '@fontsource/fira-code/500.css'; @import '@fontsource/fira-code/600.css'; @import '@fontsource/fira-code/700.css'; @import '@fontsource/fira-sans/400.css'; @import '@fontsource/fira-sans/500.css'; @import '@fontsource/fira-sans/600.css'; @import '@fontsource/fira-sans/700.css';,"fontFamily: { heading: ['Fira Code', 'monospace'], body: ['Fira Sans', 'sans-serif'], mono: ['Fira Code', 'monospace'] }",display 2-2.5rem/600-700/0/lh1.1; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-21,Academic Research,operator-active,Crimson Pro,Atkinson Hyperlegible,IBM Plex Mono,serif+sans,"scholarly, readable, accessible, considered, literate","research admin, academic tools, knowledge bases, review systems",500;600;700,400;700,https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@500;600;700&family=Atkinson+Hyperlegible:wght@400;700&display=swap,Crimson Pro gives headings a scholarly serif voice while Atkinson Hyperlegible keeps the body maximally clear for long reading.,@import '@fontsource/crimson-pro/500.css'; @import '@fontsource/crimson-pro/600.css'; @import '@fontsource/crimson-pro/700.css'; @import '@fontsource/atkinson-hyperlegible/400.css'; @import '@fontsource/atkinson-hyperlegible/700.css'; @import '@fontsource/ibm-plex-mono/400.css'; @import '@fontsource/ibm-plex-mono/500.css';,"fontFamily: { heading: ['Crimson Pro', 'serif'], body: ['Atkinson Hyperlegible', 'sans-serif'], mono: ['IBM Plex Mono', 'monospace'] }",display 2.5-3rem/600-700/-0.01em/lh1.1; kpi mono 1.75-2.5rem/500/lh1 tabular-nums
-22,News Editorial,operator-active,Newsreader,Roboto,Roboto Mono,serif+sans,"editorial, journalistic, readable, trustworthy, content-rich","content moderation, CMS back-ends, editorial dashboards, review queues",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Newsreader:wght@500;600;700&family=Roboto:wght@400;500;600;700&display=swap,"Newsreader is a text serif rather than a display face, so it heads content-heavy screens without tiring the reader, over a Roboto body.",@import '@fontsource/newsreader/500.css'; @import '@fontsource/newsreader/600.css'; @import '@fontsource/newsreader/700.css'; @import '@fontsource/roboto/400.css'; @import '@fontsource/roboto/500.css'; @import '@fontsource/roboto/600.css'; @import '@fontsource/roboto/700.css'; @import '@fontsource/roboto-mono/400.css'; @import '@fontsource/roboto-mono/500.css';,"fontFamily: { heading: ['Newsreader', 'serif'], body: ['Roboto', 'sans-serif'], mono: ['Roboto Mono', 'monospace'] }",display 2.5-3rem/600-700/-0.01em/lh1.1; kpi mono 1.75-2.5rem/500/lh1 tabular-nums
-23,Legal Records,operator-active,EB Garamond,Lato,IBM Plex Mono,serif+sans,"formal, authoritative, records, considered, traditional","legal ops tools, contract admin, records systems, compliance consoles",500;600;700,400;700,https://fonts.googleapis.com/css2?family=EB+Garamond:wght@500;600;700&family=Lato:wght@400;700&display=swap,"EB Garamond lends record screens a formal, document-like authority in headings that Lato keeps plainly readable in the body.",@import '@fontsource/eb-garamond/500.css'; @import '@fontsource/eb-garamond/600.css'; @import '@fontsource/eb-garamond/700.css'; @import '@fontsource/lato/400.css'; @import '@fontsource/lato/700.css'; @import '@fontsource/ibm-plex-mono/400.css'; @import '@fontsource/ibm-plex-mono/500.css';,"fontFamily: { heading: ['EB Garamond', 'serif'], body: ['Lato', 'sans-serif'], mono: ['IBM Plex Mono', 'monospace'] }",display 2.5-3rem/600-700/-0.01em/lh1.1; kpi mono 1.75-2.5rem/500/lh1 tabular-nums
-24,Vietnamese Locale,operator-active,Be Vietnam Pro,Noto Sans,JetBrains Mono,sans+sans,"multilingual, vietnamese, readable, clean, localized","Vietnamese-market tools, multilingual admin, localized back-office",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@500;600;700&family=Noto+Sans:wght@400;500;600;700&display=swap,Be Vietnam Pro handles full Vietnamese diacritics cleanly with Noto Sans as a broad fallback for mixed-script data.,@import '@fontsource/be-vietnam-pro/500.css'; @import '@fontsource/be-vietnam-pro/600.css'; @import '@fontsource/be-vietnam-pro/700.css'; @import '@fontsource/noto-sans/400.css'; @import '@fontsource/noto-sans/500.css'; @import '@fontsource/noto-sans/600.css'; @import '@fontsource/noto-sans/700.css'; @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css';,"fontFamily: { heading: ['Be Vietnam Pro', 'sans-serif'], body: ['Noto Sans', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 2.5-3rem/600-700/-0.02em/lh1.1; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-25,Japanese Locale,operator-active,Noto Serif JP,Noto Sans JP,JetBrains Mono,serif+sans,"japanese, multilingual, legible, localized, considered","Japanese-market admin, localized consoles, bilingual tools",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap,Noto Serif JP heads Japanese screens with a settled tone while Noto Sans JP keeps dense kana and kanji body text even.,@import '@fontsource/noto-serif-jp/500.css'; @import '@fontsource/noto-serif-jp/600.css'; @import '@fontsource/noto-serif-jp/700.css'; @import '@fontsource/noto-sans-jp/400.css'; @import '@fontsource/noto-sans-jp/500.css'; @import '@fontsource/noto-sans-jp/600.css'; @import '@fontsource/noto-sans-jp/700.css'; @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css';,"fontFamily: { heading: ['Noto Serif JP', 'serif'], body: ['Noto Sans JP', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 2.25-2.75rem/600-700/0/lh1.2; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-26,Korean Locale,operator-active,Noto Sans KR,Noto Sans KR,JetBrains Mono,sans+sans,"korean, multilingual, clean, localized, readable","Korean-market tools, localized admin, bilingual back-office",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&display=swap,A single Noto Sans KR system keeps Hangul hierarchy consistent across headings and body without a second face to tune.,@import '@fontsource/noto-sans-kr/400.css'; @import '@fontsource/noto-sans-kr/500.css'; @import '@fontsource/noto-sans-kr/600.css'; @import '@fontsource/noto-sans-kr/700.css'; @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css';,"fontFamily: { heading: ['Noto Sans KR', 'sans-serif'], body: ['Noto Sans KR', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 2.25-2.75rem/600-700/0/lh1.2; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-27,Chinese Simplified Locale,operator-active,Noto Sans SC,Noto Sans SC,JetBrains Mono,sans+sans,"chinese, simplified, multilingual, clean, localized","mainland-market admin, localized consoles, bilingual tools",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap,"Noto Sans SC gives simplified-Chinese operators a full, even glyph set from labels to paragraphs in one family.",@import '@fontsource/noto-sans-sc/400.css'; @import '@fontsource/noto-sans-sc/500.css'; @import '@fontsource/noto-sans-sc/600.css'; @import '@fontsource/noto-sans-sc/700.css'; @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css';,"fontFamily: { heading: ['Noto Sans SC', 'sans-serif'], body: ['Noto Sans SC', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 2.25-2.75rem/600-700/0/lh1.2; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-28,Arabic Locale,operator-active,Noto Naskh Arabic,Noto Sans Arabic,JetBrains Mono,serif+sans,"arabic, rtl, multilingual, localized, readable","Arabic-market admin, RTL dashboards, bilingual back-office",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@500;600;700&family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap,Noto Naskh Arabic heads RTL screens with a traditional voice while Noto Sans Arabic keeps body and UI text modern and clear.,@import '@fontsource/noto-naskh-arabic/500.css'; @import '@fontsource/noto-naskh-arabic/600.css'; @import '@fontsource/noto-naskh-arabic/700.css'; @import '@fontsource/noto-sans-arabic/400.css'; @import '@fontsource/noto-sans-arabic/500.css'; @import '@fontsource/noto-sans-arabic/600.css'; @import '@fontsource/noto-sans-arabic/700.css'; @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css';,"fontFamily: { heading: ['Noto Naskh Arabic', 'serif'], body: ['Noto Sans Arabic', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 2.25-2.75rem/600-700/0/lh1.3; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-29,Hebrew Locale,operator-active,Noto Sans Hebrew,Noto Sans Hebrew,JetBrains Mono,sans+sans,"hebrew, rtl, multilingual, localized, clean","Hebrew-market tools, RTL admin, bilingual back-office",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@400;500;600;700&display=swap,One Noto Sans Hebrew system keeps RTL hierarchy consistent and legible for Israeli-market internal tools.,@import '@fontsource/noto-sans-hebrew/400.css'; @import '@fontsource/noto-sans-hebrew/500.css'; @import '@fontsource/noto-sans-hebrew/600.css'; @import '@fontsource/noto-sans-hebrew/700.css'; @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css';,"fontFamily: { heading: ['Noto Sans Hebrew', 'sans-serif'], body: ['Noto Sans Hebrew', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 2.25-2.75rem/600-700/0/lh1.2; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-30,Thai Locale,operator-active,Noto Sans Thai,Noto Sans Thai,JetBrains Mono,sans+sans,"thai, multilingual, readable, localized, clean","Thai-market admin, localized consoles, SEA back-office",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&display=swap,"Noto Sans Thai renders looped Thai script clearly at UI sizes, carrying both heading and body in one dependable family.",@import '@fontsource/noto-sans-thai/400.css'; @import '@fontsource/noto-sans-thai/500.css'; @import '@fontsource/noto-sans-thai/600.css'; @import '@fontsource/noto-sans-thai/700.css'; @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css';,"fontFamily: { heading: ['Noto Sans Thai', 'sans-serif'], body: ['Noto Sans Thai', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 2.25-2.75rem/600-700/0/lh1.3; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-31,Chinese Traditional Locale,operator-active,Noto Serif TC,Noto Sans TC,JetBrains Mono,serif+sans,"chinese, traditional, multilingual, localized, considered","Taiwan and Hong Kong market admin, localized consoles, bilingual tools",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap,Noto Serif TC gives traditional-Chinese headings a measured tone with Noto Sans TC handling denser body text.,@import '@fontsource/noto-serif-tc/500.css'; @import '@fontsource/noto-serif-tc/600.css'; @import '@fontsource/noto-serif-tc/700.css'; @import '@fontsource/noto-sans-tc/400.css'; @import '@fontsource/noto-sans-tc/500.css'; @import '@fontsource/noto-sans-tc/600.css'; @import '@fontsource/noto-sans-tc/700.css'; @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css';,"fontFamily: { heading: ['Noto Serif TC', 'serif'], body: ['Noto Sans TC', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 2.25-2.75rem/600-700/0/lh1.2; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-32,Rounded Legible,operator-active,Nunito Sans,Nunito Sans,JetBrains Mono,sans+sans,"rounded, friendly, legible, calm, approachable","support consoles, CRM back-office, help desks, customer-facing admin",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700&display=swap,Nunito Sans softens a support console's tone with gently rounded terminals while staying legible enough for all-day use.,@import '@fontsource/nunito-sans/400.css'; @import '@fontsource/nunito-sans/500.css'; @import '@fontsource/nunito-sans/600.css'; @import '@fontsource/nunito-sans/700.css'; @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css';,"fontFamily: { heading: ['Nunito Sans', 'sans-serif'], body: ['Nunito Sans', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 2.5-3rem/600-700/-0.02em/lh1.1; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-33,Grotesque Utility,operator-active,Karla,Karla,Space Mono,sans+sans,"grotesque, utilitarian, compact, plain, efficient","utility dashboards, config panels, small-footprint tools, forms",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Karla:wght@400;500;600;700&display=swap,"Karla is a tidy grotesque whose narrow set width fits more label text per row, useful when screen real estate is tight.",@import '@fontsource/karla/400.css'; @import '@fontsource/karla/500.css'; @import '@fontsource/karla/600.css'; @import '@fontsource/karla/700.css'; @import '@fontsource/space-mono/400.css'; @import '@fontsource/space-mono/700.css';,"fontFamily: { heading: ['Karla', 'sans-serif'], body: ['Karla', 'sans-serif'], mono: ['Space Mono', 'monospace'] }",display 2.5-3rem/600-700/-0.02em/lh1.1; kpi mono 1.75-2.25rem/700/lh1 tabular-nums
-34,Classic Elegant,operator-active,Playfair Display,Inter,JetBrains Mono,serif+sans,"elegant, luxury, editorial, high-contrast, premium","wealth and private-banking consoles, luxury commerce admin, premium client portals, editorial CMS",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap,"Playfair Display appears only at H1 and H2 over a working Inter body, giving premium verticals a confident display serif without costing table legibility.",@import '@fontsource/playfair-display/500.css'; @import '@fontsource/playfair-display/600.css'; @import '@fontsource/playfair-display/700.css'; @import '@fontsource/inter/400.css'; @import '@fontsource/inter/500.css'; @import '@fontsource/inter/600.css'; @import '@fontsource/inter/700.css'; @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css';,"fontFamily: { heading: ['Playfair Display', 'serif'], body: ['Inter', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 2.5-3rem/600-700/-0.01em/lh1.1; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-35,Playful Creative,operator-active,Fredoka,Nunito,Space Mono,display+sans,"playful, friendly, fun, rounded, warm","education platform admin, classroom management tools, kids-product back-office, learning dashboards",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;500;600;700&display=swap,Rounded Fredoka headings keep an education product's operator surfaces on brand while the Nunito body stays legible through long grading and roster screens.,@import '@fontsource/fredoka/500.css'; @import '@fontsource/fredoka/600.css'; @import '@fontsource/fredoka/700.css'; @import '@fontsource/nunito/400.css'; @import '@fontsource/nunito/500.css'; @import '@fontsource/nunito/600.css'; @import '@fontsource/nunito/700.css'; @import '@fontsource/space-mono/400.css'; @import '@fontsource/space-mono/700.css';,"fontFamily: { heading: ['Fredoka', 'sans-serif'], body: ['Nunito', 'sans-serif'], mono: ['Space Mono', 'monospace'] }",display 2.5-3rem/600-700/-0.01em/lh1.1; kpi mono 1.75-2.25rem/700/lh1 tabular-nums
-36,Wellness Calm,operator-active,Lora,Raleway,IBM Plex Mono,serif+sans,"calm, wellness, organic, gentle, natural","wellness platform admin, clinic and spa back-office, care coordination tools, patient program consoles",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&family=Raleway:wght@400;500;600;700&display=swap,Lora is a sturdy text serif that keeps wellness operators' headings calm while Raleway carries labels and body copy cleanly at UI sizes.,@import '@fontsource/lora/500.css'; @import '@fontsource/lora/600.css'; @import '@fontsource/lora/700.css'; @import '@fontsource/raleway/400.css'; @import '@fontsource/raleway/500.css'; @import '@fontsource/raleway/600.css'; @import '@fontsource/raleway/700.css'; @import '@fontsource/ibm-plex-mono/400.css'; @import '@fontsource/ibm-plex-mono/500.css';,"fontFamily: { heading: ['Lora', 'serif'], body: ['Raleway', 'sans-serif'], mono: ['IBM Plex Mono', 'monospace'] }",display 2.5-3rem/600-700/-0.01em/lh1.1; kpi mono 1.75-2.5rem/500/lh1 tabular-nums
-37,Fashion Forward,operator-active,Syne,Manrope,JetBrains Mono,sans+sans,"avant-garde, artistic, edgy, creative, bold","design tool consoles, creative agency admin, brand asset managers, review and approval tools",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Syne:wght@500;600;700&family=Manrope:wght@400;500;600;700&display=swap,Syne's engineered quirk gives creative-tool headings an art-directed voice while Manrope keeps the working body plain and dense-friendly.,@import '@fontsource/syne/500.css'; @import '@fontsource/syne/600.css'; @import '@fontsource/syne/700.css'; @import '@fontsource/manrope/400.css'; @import '@fontsource/manrope/500.css'; @import '@fontsource/manrope/600.css'; @import '@fontsource/manrope/700.css'; @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css';,"fontFamily: { heading: ['Syne', 'sans-serif'], body: ['Manrope', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 2.5-3rem/600-700/-0.01em/lh1.1; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-38,SaaS Boutique,operator-active,Calistoga,Inter,JetBrains Mono,serif+sans,"boutique, warm, editorial, bold, characterful","boutique SaaS dashboards, analytics consoles, billing and usage surfaces, marketing ops tools",400,400;500;600;700,https://fonts.googleapis.com/css2?family=Calistoga:wght@400&family=Inter:wght@400;500;600;700&display=swap,"Calistoga's warm single-weight display carries H1 and H2 personality while the full Inter system does the operator work underneath, a boutique-SaaS look that survives dense screens.",@import '@fontsource/calistoga/400.css'; @import '@fontsource/inter/400.css'; @import '@fontsource/inter/500.css'; @import '@fontsource/inter/600.css'; @import '@fontsource/inter/700.css'; @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css';,"fontFamily: { heading: ['Calistoga', 'serif'], body: ['Inter', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 2.5-3rem/400/0/lh1.1; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-39,Web3 Fintech,operator-active,Space Grotesk,Inter,JetBrains Mono,sans+sans,"crypto, fintech, technical, precise, confident","DeFi and wallet consoles, trading dashboards, token analytics, blockchain ops tools",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap,Space Grotesk headings give crypto consoles their engineered edge while Inter body and JetBrains Mono figures keep balances and hashes rigorously legible.,@import '@fontsource/space-grotesk/500.css'; @import '@fontsource/space-grotesk/600.css'; @import '@fontsource/space-grotesk/700.css'; @import '@fontsource/inter/400.css'; @import '@fontsource/inter/500.css'; @import '@fontsource/inter/600.css'; @import '@fontsource/inter/700.css'; @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css';,"fontFamily: { heading: ['Space Grotesk', 'sans-serif'], body: ['Inter', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 2.5-3rem/600-700/-0.02em/lh1.1; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-40,Editorial Classic,dormant-marketing,Cormorant Garamond,Libre Baskerville,IBM Plex Mono,serif+serif,"editorial, literary, traditional, refined, bookish","publishing, literary magazines, long-form editorial, book sites",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Libre+Baskerville:wght@400;500;600;700&display=swap,"An all-serif pairing leans fully literary, which suits editorial publishing but is too low-contrast for scanning operator data.",@import '@fontsource/cormorant-garamond/500.css'; @import '@fontsource/cormorant-garamond/600.css'; @import '@fontsource/cormorant-garamond/700.css'; @import '@fontsource/libre-baskerville/400.css'; @import '@fontsource/libre-baskerville/500.css'; @import '@fontsource/libre-baskerville/600.css'; @import '@fontsource/libre-baskerville/700.css'; @import '@fontsource/ibm-plex-mono/400.css'; @import '@fontsource/ibm-plex-mono/500.css';,"fontFamily: { heading: ['Cormorant Garamond', 'serif'], body: ['Libre Baskerville', 'serif'], mono: ['IBM Plex Mono', 'monospace'] }",display 2.75-3.25rem/600-700/-0.01em/lh1.1; kpi mono 1.75-2.5rem/500/lh1 tabular-nums
-41,Bold Statement,dormant-marketing,Bebas Neue,Source Sans 3,JetBrains Mono,display+sans,"bold, impactful, headline, dramatic, loud","marketing heroes, event pages, agencies, campaign landing",400,400;500;600;700,https://fonts.googleapis.com/css2?family=Bebas+Neue:wght@400&family=Source+Sans+3:wght@400;500;600;700&display=swap,"Bebas Neue is an all-caps display face for oversized headlines only, which is why it lives in the marketing pack, not the operator set.",@import '@fontsource/bebas-neue/400.css'; @import '@fontsource/source-sans-3/400.css'; @import '@fontsource/source-sans-3/500.css'; @import '@fontsource/source-sans-3/600.css'; @import '@fontsource/source-sans-3/700.css'; @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css';,"fontFamily: { heading: ['Bebas Neue', 'sans-serif'], body: ['Source Sans 3', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 3.5-4rem/400/+0.02em/lh1; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-42,Retro Vintage,dormant-marketing,Abril Fatface,Merriweather,Space Mono,serif+serif,"retro, vintage, dramatic, decorative, nostalgic","vintage brands, breweries, restaurants, poster-style marketing",400,400;500;600;700,https://fonts.googleapis.com/css2?family=Abril+Fatface:wght@400&family=Merriweather:wght@400;500;600;700&display=swap,"Abril Fatface's heavy Didone hairlines make a striking vintage hero serif reserved for headlines, paired with Merriweather body.",@import '@fontsource/abril-fatface/400.css'; @import '@fontsource/merriweather/400.css'; @import '@fontsource/merriweather/500.css'; @import '@fontsource/merriweather/600.css'; @import '@fontsource/merriweather/700.css'; @import '@fontsource/space-mono/400.css'; @import '@fontsource/space-mono/700.css';,"fontFamily: { heading: ['Abril Fatface', 'serif'], body: ['Merriweather', 'serif'], mono: ['Space Mono', 'monospace'] }",display 3-3.5rem/400/0/lh1.05; kpi mono 1.75-2.25rem/700/lh1 tabular-nums
-43,Luxury Serif,dormant-marketing,Cormorant,Montserrat,IBM Plex Mono,serif+sans,"luxury, fashion, refined, premium, high-end","fashion houses, jewelry, luxury e-commerce, premium services",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Cormorant:wght@500;600;700&family=Montserrat:wght@400;500;600;700&display=swap,Cormorant's delicate high-contrast forms read as luxury marketing and would wash out in the small sizes operator tables use.,@import '@fontsource/cormorant/500.css'; @import '@fontsource/cormorant/600.css'; @import '@fontsource/cormorant/700.css'; @import '@fontsource/montserrat/400.css'; @import '@fontsource/montserrat/500.css'; @import '@fontsource/montserrat/600.css'; @import '@fontsource/montserrat/700.css'; @import '@fontsource/ibm-plex-mono/400.css'; @import '@fontsource/ibm-plex-mono/500.css';,"fontFamily: { heading: ['Cormorant', 'serif'], body: ['Montserrat', 'sans-serif'], mono: ['IBM Plex Mono', 'monospace'] }",display 2.75-3.25rem/600-700/-0.01em/lh1.1; kpi mono 1.75-2.5rem/500/lh1 tabular-nums
-44,Handwritten Charm,dormant-marketing,Caveat,Quicksand,Space Mono,display+sans,"handwritten, personal, casual, warm, charming","personal brands, invitations, lifestyle marketing, creative portfolios",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Quicksand:wght@400;500;600;700&display=swap,"Caveat is a script accent for personality-driven marketing, unusable as working type but kept for the campaign pack.",@import '@fontsource/caveat/500.css'; @import '@fontsource/caveat/600.css'; @import '@fontsource/caveat/700.css'; @import '@fontsource/quicksand/400.css'; @import '@fontsource/quicksand/500.css'; @import '@fontsource/quicksand/600.css'; @import '@fontsource/quicksand/700.css'; @import '@fontsource/space-mono/400.css'; @import '@fontsource/space-mono/700.css';,"fontFamily: { heading: ['Caveat', 'cursive'], body: ['Quicksand', 'sans-serif'], mono: ['Space Mono', 'monospace'] }",display 2.5-3rem/600-700/0/lh1.15; kpi mono 1.75-2.25rem/700/lh1 tabular-nums
-45,Soft Rounded,dormant-marketing,Varela Round,Nunito Sans,JetBrains Mono,sans+sans,"soft, rounded, friendly, gentle, warm","kids and pet brands, wellness marketing, soft consumer UI",400,400;500;600;700,https://fonts.googleapis.com/css2?family=Varela+Round:wght@400&family=Nunito+Sans:wght@400;500;600;700&display=swap,Fully rounded Varela Round headings set a soft consumer mood aimed at friendly marketing rather than dense operator work.,@import '@fontsource/varela-round/400.css'; @import '@fontsource/nunito-sans/400.css'; @import '@fontsource/nunito-sans/500.css'; @import '@fontsource/nunito-sans/600.css'; @import '@fontsource/nunito-sans/700.css'; @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css';,"fontFamily: { heading: ['Varela Round', 'sans-serif'], body: ['Nunito Sans', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 2.5-3rem/400/0/lh1.1; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-46,Magazine Style,dormant-marketing,Libre Bodoni,Public Sans,IBM Plex Mono,serif+sans,"magazine, editorial, print, refined, journalistic","online magazines, editorial features, publishing marketing",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Libre+Bodoni:wght@500;600;700&family=Public+Sans:wght@400;500;600;700&display=swap,Libre Bodoni's print-magazine contrast makes expressive feature headings that suit publishing marketing over back-office reading.,@import '@fontsource/libre-bodoni/500.css'; @import '@fontsource/libre-bodoni/600.css'; @import '@fontsource/libre-bodoni/700.css'; @import '@fontsource/public-sans/400.css'; @import '@fontsource/public-sans/500.css'; @import '@fontsource/public-sans/600.css'; @import '@fontsource/public-sans/700.css'; @import '@fontsource/ibm-plex-mono/400.css'; @import '@fontsource/ibm-plex-mono/500.css';,"fontFamily: { heading: ['Libre Bodoni', 'serif'], body: ['Public Sans', 'sans-serif'], mono: ['IBM Plex Mono', 'monospace'] }",display 2.75-3.25rem/600-700/-0.01em/lh1.1; kpi mono 1.75-2.5rem/500/lh1 tabular-nums
-47,Cyberpunk Web3,dormant-marketing,Orbitron,Exo 2,JetBrains Mono,display+sans,"futuristic, crypto, neon, sci-fi, technical","crypto and web3 marketing, NFT sites, gaming, futuristic brands",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700&family=Exo+2:wght@400;500;600;700&display=swap,"Orbitron's wide sci-fi caps brand crypto and gaming marketing pages, a decorative look kept clear of real data screens.",@import '@fontsource/orbitron/500.css'; @import '@fontsource/orbitron/600.css'; @import '@fontsource/orbitron/700.css'; @import '@fontsource/exo-2/400.css'; @import '@fontsource/exo-2/500.css'; @import '@fontsource/exo-2/600.css'; @import '@fontsource/exo-2/700.css'; @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css';,"fontFamily: { heading: ['Orbitron', 'sans-serif'], body: ['Exo 2', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 2.5-3rem/600-700/+0.04em/lh1.1; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-48,Gaming Bold,dormant-marketing,Russo One,Chakra Petch,Space Mono,display+sans,"gaming, bold, esports, energetic, competitive","gaming and esports marketing, tournaments, entertainment brands",400,400;500;600;700,https://fonts.googleapis.com/css2?family=Russo+One:wght@400&family=Chakra+Petch:wght@400;500;600;700&display=swap,"Russo One's blocky impact suits esports headlines while Chakra Petch adds a techy body, a pairing tuned for hype not throughput.",@import '@fontsource/russo-one/400.css'; @import '@fontsource/chakra-petch/400.css'; @import '@fontsource/chakra-petch/500.css'; @import '@fontsource/chakra-petch/600.css'; @import '@fontsource/chakra-petch/700.css'; @import '@fontsource/space-mono/400.css'; @import '@fontsource/space-mono/700.css';,"fontFamily: { heading: ['Russo One', 'sans-serif'], body: ['Chakra Petch', 'sans-serif'], mono: ['Space Mono', 'monospace'] }",display 3-3.5rem/400/0/lh1.05; kpi mono 1.75-2.25rem/700/lh1 tabular-nums
-49,Real Estate Luxury,dormant-marketing,Cinzel,Josefin Sans,IBM Plex Mono,serif+sans,"luxury, architectural, refined, premium, elegant","luxury real estate, architecture, interiors, premium property marketing",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Josefin+Sans:wght@400;500;600;700&display=swap,"Cinzel's engraved Roman capitals evoke premium property branding, a display serif meant for hero titles rather than dense listings.",@import '@fontsource/cinzel/500.css'; @import '@fontsource/cinzel/600.css'; @import '@fontsource/cinzel/700.css'; @import '@fontsource/josefin-sans/400.css'; @import '@fontsource/josefin-sans/500.css'; @import '@fontsource/josefin-sans/600.css'; @import '@fontsource/josefin-sans/700.css'; @import '@fontsource/ibm-plex-mono/400.css'; @import '@fontsource/ibm-plex-mono/500.css';,"fontFamily: { heading: ['Cinzel', 'serif'], body: ['Josefin Sans', 'sans-serif'], mono: ['IBM Plex Mono', 'monospace'] }",display 2.75-3.25rem/600-700/+0.02em/lh1.1; kpi mono 1.75-2.5rem/500/lh1 tabular-nums
-50,Luxury Minimalist,dormant-marketing,Bodoni Moda,Jost,IBM Plex Mono,serif+sans,"luxury, minimalist, high-contrast, refined, premium","high-end fashion, premium minimal brands, luxury product marketing",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@500;600;700&family=Jost:wght@400;500;600;700&display=swap,"Bodoni Moda's extreme contrast reads as minimalist luxury in headlines, paired with geometric Jost, and stays in the marketing pack.",@import '@fontsource/bodoni-moda/500.css'; @import '@fontsource/bodoni-moda/600.css'; @import '@fontsource/bodoni-moda/700.css'; @import '@fontsource/jost/400.css'; @import '@fontsource/jost/500.css'; @import '@fontsource/jost/600.css'; @import '@fontsource/jost/700.css'; @import '@fontsource/ibm-plex-mono/400.css'; @import '@fontsource/ibm-plex-mono/500.css';,"fontFamily: { heading: ['Bodoni Moda', 'serif'], body: ['Jost', 'sans-serif'], mono: ['IBM Plex Mono', 'monospace'] }",display 2.75-3.25rem/600-700/-0.01em/lh1.1; kpi mono 1.75-2.5rem/500/lh1 tabular-nums
-51,Neubrutalist Bold,dormant-marketing,Lexend Mega,Public Sans,JetBrains Mono,display+sans,"neubrutalist, loud, geometric, bold, quirky","neubrutalist marketing, Gen Z brands, bold campaign pages",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Lexend+Mega:wght@500;600;700&family=Public+Sans:wght@400;500;600;700&display=swap,"Lexend Mega's ultra-wide tracking is a deliberately loud neubrutalist statement for campaigns, not a workaday heading face.",@import '@fontsource/lexend-mega/500.css'; @import '@fontsource/lexend-mega/600.css'; @import '@fontsource/lexend-mega/700.css'; @import '@fontsource/public-sans/400.css'; @import '@fontsource/public-sans/500.css'; @import '@fontsource/public-sans/600.css'; @import '@fontsource/public-sans/700.css'; @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css';,"fontFamily: { heading: ['Lexend Mega', 'sans-serif'], body: ['Public Sans', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 2.25-2.75rem/600-700/0/lh1.1; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-52,Gen Z Brutal,dormant-marketing,Anton,Epilogue,JetBrains Mono,display+sans,"brutal, loud, streetwear, meme, bold","streetwear, viral campaigns, Gen Z marketing, sticker packs",400,400;500;600;700,https://fonts.googleapis.com/css2?family=Anton:wght@400&family=Epilogue:wght@400;500;600;700&display=swap,"Anton's condensed black weight shouts for streetwear and meme campaigns, an intentionally aggressive display voice kept dormant.",@import '@fontsource/anton/400.css'; @import '@fontsource/epilogue/400.css'; @import '@fontsource/epilogue/500.css'; @import '@fontsource/epilogue/600.css'; @import '@fontsource/epilogue/700.css'; @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css';,"fontFamily: { heading: ['Anton', 'sans-serif'], body: ['Epilogue', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 3.5-4rem/400/+0.01em/lh1; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-53,Bauhaus Geometric,dormant-marketing,Outfit,Outfit,JetBrains Mono,sans+sans,"bauhaus, geometric, constructivist, poster, architectural","design-forward brand marketing, art and culture, poster-style sites",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap,"A single Outfit set at heavy uppercase weights makes a Bauhaus poster system that is expressive branding, not operator hierarchy.",@import '@fontsource/outfit/400.css'; @import '@fontsource/outfit/500.css'; @import '@fontsource/outfit/600.css'; @import '@fontsource/outfit/700.css'; @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css';,"fontFamily: { heading: ['Outfit', 'sans-serif'], body: ['Outfit', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 3-3.5rem/600-700/-0.02em/lh1.05; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-54,Monochrome Editorial,dormant-marketing,Playfair Display,Source Serif 4,JetBrains Mono,serif+serif,"monochrome, editorial, austere, high-contrast, typographic","luxury fashion editorial, digital exhibitions, portfolio marketing",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Source+Serif+4:wght@400;500;600;700&display=swap,"Playfair Display over Source Serif 4 makes an austere all-serif editorial statement built for display, not for scanning records.",@import '@fontsource/playfair-display/500.css'; @import '@fontsource/playfair-display/600.css'; @import '@fontsource/playfair-display/700.css'; @import '@fontsource/source-serif-4/400.css'; @import '@fontsource/source-serif-4/500.css'; @import '@fontsource/source-serif-4/600.css'; @import '@fontsource/source-serif-4/700.css'; @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css';,"fontFamily: { heading: ['Playfair Display', 'serif'], body: ['Source Serif 4', 'serif'], mono: ['JetBrains Mono', 'monospace'] }",display 2.75-3.25rem/600-700/-0.01em/lh1.05; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-55,Kinetic Brutalism,dormant-marketing,Space Grotesk,Space Grotesk,Space Mono,sans+sans,"kinetic, brutalist, oversized, street, high-energy","music and culture marketing, sports brands, flagship campaign pages",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap,"Pushed to oversized uppercase weights, a single Space Grotesk becomes a high-energy brutalist system tuned for motion-heavy marketing.",@import '@fontsource/space-grotesk/400.css'; @import '@fontsource/space-grotesk/500.css'; @import '@fontsource/space-grotesk/600.css'; @import '@fontsource/space-grotesk/700.css'; @import '@fontsource/space-mono/400.css'; @import '@fontsource/space-mono/700.css';,"fontFamily: { heading: ['Space Grotesk', 'sans-serif'], body: ['Space Grotesk', 'sans-serif'], mono: ['Space Mono', 'monospace'] }",display 3-3.5rem/600-700/-0.02em/lh1; kpi mono 1.75-2.25rem/700/lh1 tabular-nums
-56,Terminal CLI,dormant-marketing,JetBrains Mono,IBM Plex Sans,JetBrains Mono,mono+sans,"terminal, hacker, retro-future, technical, aesthetic","hacker-aesthetic marketing, web3 landing, security-brand campaigns",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap,An all-mono terminal aesthetic reads as a stylistic hacker brand for marketing; the sans body keeps it from becoming unreadable at length.,@import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css'; @import '@fontsource/jetbrains-mono/700.css'; @import '@fontsource/ibm-plex-sans/400.css'; @import '@fontsource/ibm-plex-sans/500.css'; @import '@fontsource/ibm-plex-sans/600.css'; @import '@fontsource/ibm-plex-sans/700.css';,"fontFamily: { heading: ['JetBrains Mono', 'monospace'], body: ['IBM Plex Sans', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 2-2.5rem/600-700/0/lh1.1; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-57,Art Deco,dormant-marketing,Poiret One,Didact Gothic,JetBrains Mono,display+sans,"art-deco, vintage, 1920s, decorative, elegant","art-deco event marketing, luxury hotels, period-themed brands",400,400,https://fonts.googleapis.com/css2?family=Poiret+One:wght@400&family=Didact+Gothic:wght@400&display=swap,"Poiret One's thin geometric Deco lines evoke the 1920s for themed marketing, a decorative heading unfit for functional density.",@import '@fontsource/poiret-one/400.css'; @import '@fontsource/didact-gothic/400.css'; @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css';,"fontFamily: { heading: ['Poiret One', 'sans-serif'], body: ['Didact Gothic', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 3-3.5rem/400/+0.04em/lh1.1; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-58,Restaurant Menu,dormant-marketing,Playfair Display SC,Karla,IBM Plex Mono,serif+sans,"culinary, hospitality, elegant, menu, refined","restaurant and cafe marketing, food brands, hospitality sites",700,400;500;600;700,https://fonts.googleapis.com/css2?family=Playfair+Display+SC:wght@700&family=Karla:wght@400;500;600;700&display=swap,"Small-caps Playfair sets refined menu headers over a plain Karla body, a hospitality-marketing look rather than an operator surface.",@import '@fontsource/playfair-display-sc/700.css'; @import '@fontsource/karla/400.css'; @import '@fontsource/karla/500.css'; @import '@fontsource/karla/600.css'; @import '@fontsource/karla/700.css'; @import '@fontsource/ibm-plex-mono/400.css'; @import '@fontsource/ibm-plex-mono/500.css';,"fontFamily: { heading: ['Playfair Display SC', 'serif'], body: ['Karla', 'sans-serif'], mono: ['IBM Plex Mono', 'monospace'] }",display 2.5-3rem/700/+0.02em/lh1.1; kpi mono 1.75-2.5rem/500/lh1 tabular-nums
-59,Kids Education,dormant-marketing,Baloo 2,Nunito,Space Mono,display+sans,"playful, education, colorful, friendly, learning","children's education marketing, kids apps, learning brands",500;600;700,400;500;600;700,https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700&family=Nunito:wght@400;500;600;700&display=swap,"Chunky rounded Baloo 2 headings signal a kid-friendly product for education marketing, with Nunito supplying a legible playful body.",@import '@fontsource/baloo-2/500.css'; @import '@fontsource/baloo-2/600.css'; @import '@fontsource/baloo-2/700.css'; @import '@fontsource/nunito/400.css'; @import '@fontsource/nunito/500.css'; @import '@fontsource/nunito/600.css'; @import '@fontsource/nunito/700.css'; @import '@fontsource/space-mono/400.css'; @import '@fontsource/space-mono/700.css';,"fontFamily: { heading: ['Baloo 2', 'sans-serif'], body: ['Nunito', 'sans-serif'], mono: ['Space Mono', 'monospace'] }",display 2.5-3rem/600-700/0/lh1.1; kpi mono 1.75-2.25rem/700/lh1 tabular-nums
-60,Indie Craft,dormant-marketing,Amatic SC,Cabin,JetBrains Mono,display+sans,"indie, craft, handmade, artisan, organic","craft and artisan marketing, handmade goods, indie brands",700,400;500;600;700,https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&family=Cabin:wght@400;500;600;700&display=swap,"Amatic SC's thin hand-drawn caps give artisan marketing a handmade feel, a decorative accent paired with a steady Cabin body.",@import '@fontsource/amatic-sc/700.css'; @import '@fontsource/cabin/400.css'; @import '@fontsource/cabin/500.css'; @import '@fontsource/cabin/600.css'; @import '@fontsource/cabin/700.css'; @import '@fontsource/jetbrains-mono/400.css'; @import '@fontsource/jetbrains-mono/500.css'; @import '@fontsource/jetbrains-mono/600.css';,"fontFamily: { heading: ['Amatic SC', 'sans-serif'], body: ['Cabin', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }",display 3.5-4rem/700/+0.02em/lh1; kpi mono 1.75-2.5rem/500-600/lh1 tabular-nums
-61,Music Entertainment,dormant-marketing,Righteous,Poppins,Space Mono,display+sans,"music, entertainment, energetic, bold, festive","music and event marketing, festivals, entertainment brands",400,400;500;600;700,https://fonts.googleapis.com/css2?family=Righteous:wght@400&family=Poppins:wght@400;500;600;700&display=swap,"Righteous's rounded retro display suits music and festival headlines, an energetic marketing voice over a Poppins body.",@import '@fontsource/righteous/400.css'; @import '@fontsource/poppins/400.css'; @import '@fontsource/poppins/500.css'; @import '@fontsource/poppins/600.css'; @import '@fontsource/poppins/700.css'; @import '@fontsource/space-mono/400.css'; @import '@fontsource/space-mono/700.css';,"fontFamily: { heading: ['Righteous', 'sans-serif'], body: ['Poppins', 'sans-serif'], mono: ['Space Mono', 'monospace'] }",display 3-3.5rem/400/0/lh1.05; kpi mono 1.75-2.25rem/700/lh1 tabular-nums
-62,Scholarly Archive,dormant-marketing,Cormorant Garamond,Crimson Pro,IBM Plex Mono,serif+serif,"scholarly, antique, prestige, literary, traditional","heritage and library brands, scholarly reading apps, cultural platforms, archive-themed marketing",500;600;700,500;600;700,https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Crimson+Pro:wght@500;600;700&display=swap,"Cormorant Garamond over a Crimson Pro book serif reads like a private library for heritage marketing, an all-serif stack too delicate for scanning operator data.",@import '@fontsource/cormorant-garamond/500.css'; @import '@fontsource/cormorant-garamond/600.css'; @import '@fontsource/cormorant-garamond/700.css'; @import '@fontsource/crimson-pro/500.css'; @import '@fontsource/crimson-pro/600.css'; @import '@fontsource/crimson-pro/700.css'; @import '@fontsource/ibm-plex-mono/400.css'; @import '@fontsource/ibm-plex-mono/500.css';,"fontFamily: { heading: ['Cormorant Garamond', 'serif'], body: ['Crimson Pro', 'serif'], mono: ['IBM Plex Mono', 'monospace'] }",display 2.75-3.25rem/600-700/-0.01em/lh1.1; kpi mono 1.75-2.5rem/500/lh1 tabular-nums
-63,Clay Playful,dormant-marketing,Nunito,DM Sans,Space Mono,sans+sans,"clay, bubbly, tactile, playful, soft","children's education marketing, teen social apps, mascot-led brands, gamified consumer products",700,400;500;600;700,https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=DM+Sans:wght@400;500;600;700&display=swap,"Heavy rounded Nunito headings over a plain DM Sans body give claymorphic consumer surfaces their bubbly voice, a look built for playful marketing rather than dense operator work.",@import '@fontsource/nunito/700.css'; @import '@fontsource/dm-sans/400.css'; @import '@fontsource/dm-sans/500.css'; @import '@fontsource/dm-sans/600.css'; @import '@fontsource/dm-sans/700.css'; @import '@fontsource/space-mono/400.css'; @import '@fontsource/space-mono/700.css';,"fontFamily: { heading: ['Nunito', 'sans-serif'], body: ['DM Sans', 'sans-serif'], mono: ['Space Mono', 'monospace'] }",display 2.5-3rem/700/-0.01em/lh1.1; kpi mono 1.75-2.25rem/700/lh1 tabular-nums

package/data/harnesses/code/skills/design/data/design-md/SCHEMA.md

@@ -1,106 +0,0 @@
-# design.md — the library's documentation format (`design-md/v1`)
-
-A `design.md` is one operator UI's brand document: nine prose sections that describe the look for a
-human reader and the emitting agent. It is **documentation, not transport** — the machine contract
-lives in the design-tokens artifact ([`../design-tokens/SCHEMA.md`](../design-tokens/SCHEMA.md)):
-every library entry's derivable values sit in its token twin at `data/design-tokens/<slug>/`
-(slug = the entry's filename without `.md`), and look resolution, precedence, provenance, hints,
-and validation are all defined there. No script parses a `design.md`.
-
-The prose earns its place by carrying what tokens cannot: the identity a stranger could repeat,
-usage rules ("indigo only on the primary action"), the scarce judgments the Agent Prompt Guide
-hands the emitting agent verbatim. A good entry is concrete and checkable, not adjectival.
-
----
-
-## Frontmatter
-
-```yaml
----
-schema: design-md/v1
-product: Meridian
-provenance: library          # retained for lineage; the machine path reads only the token artifact's payload
-sourced: 2026-07-04
----
-```
-
-| Field | Required | Value |
-| --- | --- | --- |
-| `schema` | yes | Literal `design-md/v1`. |
-| `product` | yes | The product name; matches the token twin's payload `product`. |
-| `provenance` | yes | Lineage note. Authoritative provenance is the token artifact's payload field. |
-| `sourced` | yes | ISO date the document was authored or last re-sourced. |
-
----
-
-## The nine prose sections
-
-Fixed order. Each is human-facing narration; cite roles and token names, never bare literals in the
-component/layout prose (the values live in the token twin).
-
-| # | Section | What belongs · what a good entry looks like |
-| --- | --- | --- |
-| 1 | **Visual Theme** | The one-paragraph identity a stranger could repeat: surface polarity (light default; dark opt-in), material feel (flat vs lifted), accent discipline, density posture. Names its anchor surface and its single accent — not a mood board. |
-| 2 | **Color Roles** | Every color by role — background, ink/foreground, the one accent, the status hues — with its value and where it is *allowed*. Reads `role → value → usage rule`; light values first; states the one-accent default. |
-| 3 | **Typography** | The sans/mono families, the size·weight·tracking ramp, and where tabular figures apply. Names each ramp step with its numbers; states that numeric columns render `tabular-nums`. |
-| 4 | **Component Stylings** | How the shared primitives render on the recurring operator components — button, input, card, table row, side panel, badge: fill, radius, border, padding. Each line cites token roles, no literal hex. |
-| 5 | **Layout** | Spacing base unit and scale, the shell dimensions (sidebar expanded/collapsed, topbar, side panel, form/table), grid and container widths, density posture. The dimensions map one-to-one to the layout primitives. |
-| 6 | **Depth** | The elevation strategy: surface ladder vs shadow, hairline discipline, the focus-ring treatment, the z-index scale. Names levels `0..n` with treatment and use; states whether shadow or surface carries hierarchy. |
-| 7 | **Do's & Don'ts** | The enforceable taste rules unique to this brand — reserve the accent, never pill the CTA, never a second chromatic accent. Imperative bullets, each checkable; every don't names the specific off-brand move. |
-| 8 | **Responsive** | Breakpoints and the collapse strategy across the operator sweep (375 / 768 / 1024 / 1440): nav collapse, grid re-flow, side-panel → sheet, density steps. Reads `breakpoint → what changes`. |
-| 9 | **Agent Prompt Guide** | Directives the emitting agent follows verbatim: what to reach for first, the invariants, the scarce elements the token artifact can't carry (e.g. "lead every queue with the table; accent only on the primary action"). |
-
----
-
-## The token twin
-
-Every library entry pairs with a design-tokens artifact at `data/design-tokens/<slug>/` — the
-derivable half: primitives, the 34 color roles, the typography ramp, dials, traits, and the lever
-manifest, with per-value rationale carried in each token's `$description`.
-[`convert-design-md.mjs`](../../scripts/convert-design-md.mjs) generated the twins from the corpus;
-a **new** library entry authors both halves — the token artifact against the token schema (validated
-by `derive-personality.mjs <dir> --check`), and this document for the reader. When the two could
-disagree, the token artifact is canonical.
-
----
-
-## Worked example — Meridian (fictional fraud-review console)
-
-Prose sketched to one line per section for brevity; Meridian's derivable values would live in its
-token twin.
-
-```markdown
----
-schema: design-md/v1
-product: Meridian
-provenance: project
-sourced: 2026-07-04
----
-
-## 1 Visual Theme
-Light, flat, cool-slate operator console; a single indigo accent; dense on purpose.
-
-## 2 Color Roles
-Ink #0f172a on #ffffff; indigo #4f46e5 is the only accent; red/green/amber for status only.
-
-## 3 Typography
-Inter for text, JetBrains Mono for IDs and amounts; body 14px/400, headings 600, tabular-nums on every numeric column.
-
-## 4 Component Stylings
-Buttons `radius`/`primary`, no pill; inputs 1px `border`; table rows `table-row-height`; case detail opens in the side panel.
-
-## 5 Layout
-4px base; sidebar 248/56px, topbar 52px, side panel 420/640px, tables full-width.
-
-## 6 Depth
-Surface ladder over shadow; hairline `border`; 2px `ring` focus outline; three z-levels.
-
-## 7 Do's & Don'ts
-Do reserve indigo for the primary action. Don't pill the CTA; don't add a second chromatic accent.
-
-## 8 Responsive
-375 stacks to a sheet; 768 collapses the sidebar; 1024/1440 hold the two-pane queue+detail.
-
-## 9 Agent Prompt Guide
-Lead with the queue table; accent only the primary action; keep the case panel beside the work, never a modal.
-```

package/data/harnesses/code/skills/design/data/design-md/library/airbnb.md

@@ -1,154 +0,0 @@
----
-schema: design-md/v1
-product: Airbnb
-provenance: library
-sourced: 2026-07-04
----
-
-# Airbnb — the operator reading
-
-The warm marketplace brand rendered for internal tools. Airbnb's public surfaces are photography-led
-and generous; an operator surface wearing this brand keeps the palette, the single warm voltage, the
-soft corners, and the modest type voice, but leaves the marketing chrome behind — the pill search
-bar, the 64px rating hero, the 80px nav, and the hand-illustrated product glyphs do not follow the
-brand into a queue or a console. What carries is the feel: pure-white canvas, near-black ink (never
-pure black), one Rausch accent used scarcely, flat depth with a single soft shadow tier, and rounded
-everything.
-
-## 1 Visual Theme
-
-Light only — Airbnb ships no dark mode on the public web, so light is the default and dark is a
-foreign opt-in, not a native mode. Flat: depth comes from white-on-white surface separation, hairline
-`border`, and rounded-corner clipping, not from layered shadows (there is exactly one soft shadow
-tier). A single accent, Rausch (`primary`, brand `#ff385c`), carries the one action that matters on a
-surface and nothing else. Ink is a deep near-black slate (`foreground`, brand `#222222`), never pure
-`#000000`. The anchor surface is a pure-white content canvas beside a faintly warm-gray `sidebar`.
-Corners are soft throughout — `radius` on buttons and inputs, a larger step on cards, pill on badges —
-there is no hard corner except the body grid. Density is `standard` with a generous per-dimension lean:
-the brand breathes, but marketplace pages already run tighter than SaaS marketing, so the operator
-reading holds standard rather than airy.
-
-## 2 Color Roles
-
-Light values. One accent: Rausch is the only chromatic hue that carries meaning; status hues speak
-only status.
-
-| Role | Value | Allowed where |
-| --- | --- | --- |
-| `background` / `card` / `popover` | white `#ffffff` | page, cards, and overlays — the dominant surface |
-| `foreground` | ink `#222222` | all primary ink; never pure black |
-| `muted` | soft gray `#f7f7f7` | hover rows, disabled fields, subtle fills |
-| `muted-foreground` | mid gray `#6a6a6a` | labels, captions, secondary text, inactive tabs |
-| `secondary` | stronger gray `#f2f2f2` | secondary buttons, circular icon-button surfaces |
-| `border` / `input` | hairline `#dddddd` | every separator, grid line, and field edge |
-| `primary` | Rausch `#ff385c` | the one primary action; active nav; the single warm voltage |
-| `accent` | pale Rausch `#ffe8ec` | selected/hovered rows and nav — a whisper of brand warmth |
-| `ring` | ink `#222222` | the focus outline — Airbnb focuses with ink, not a colored glow |
-| `destructive` | error red `#c13515` | destructive actions and error text only — distinct from Rausch |
-| `success` / `warning` | green / amber | status signalling only, never chrome |
-
-Luxe purple (`#460479`), Plus magenta (`#92174d`), and the legal-link blue (`#428bff`) are sub-brand
-graces — they carry no operator role and never become a second accent (see §7). Star ratings render in
-ink, not gold, and that carries over: numbers are ink, not a yellow accent.
-
-## 3 Typography
-
-One sans, one mono. `font-sans` is Airbnb Cereal VF (with Circular and Inter as the licensed/open
-fallbacks — Inter is the closest open substitute); the whole ramp rides it, display voice carried by
-size and modest weight, not a second family. Airbnb runs deliberately modest weights — `font-weight-strong`
-stops at 600, never the 700+ that fintech and enterprise systems lean on. `font-mono` is derived: Airbnb
-ships no monospace, but operator IDs, codes, and timestamps need one. Numeric columns render
-`tabular-nums` so figures align down a column.
-
-| Step | Role | Size · line | Weight · tracking |
-| --- | --- | --- | --- |
-| h1 | page title | 22px / 1.2 | `font-weight-strong` · `heading-tracking` |
-| h2 | section head | 18px / 1.3 | `font-weight-strong` · `heading-tracking` |
-| h3 | card / group head | 16px / 1.35 | `font-weight-strong` |
-| body | UI + prose | 14px / 1.45 | `font-weight-normal` |
-| small | labels, meta, dense table | 13px / 1.3 | `font-weight-normal` |
-| caption | uppercase eyebrow | 12px / 1.2 | `font-weight-strong`, `+0.02em`, uppercase |
-
-The 64px rating display and the 28px marketing hero stay behind — that peak-scale typographic moment is
-a marketing trust signal, not operator chrome. Bump weight one step for emphasis; never reach past 600.
-
-## 4 Component Stylings
-
-Every recurring operator component composes from the primitives — no literal values.
-
-- **Button** — `primary`: filled `primary` on `primary-foreground`, `radius`, no pill (the pill CTA is a
-  marketing form and stays behind). Secondary: `card` fill, 1px `border`, `foreground`. Ghost:
-  transparent, `accent` on hover.
-- **Input** — `card` fill, 1px `border` (`border-weight`), `radius`; on focus the border thickens toward
-  2px and flips to `ring` (ink) — no glow, no colored ring, the signature Airbnb focus.
-- **Card** — `card` surface, 1px `border`, a larger corner step from the radius scale, one soft shadow
-  only when floated (`shadow-intensity`); inset by `density-inset`.
-- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on
-  numeric columns; row selection tints `accent`.
-- **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`
-  for content-heavy), beside the work, not over it.
-- **Badge** — pill (the largest radius step), hairline `border`, `muted`/status fill, uppercase caption;
-  status badges take `success` / `warning` / `destructive`, never `primary`.
-
-## 5 Layout
-
-Base spacing unit 4px (with a 2px micro-step); the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 · 32 · 48
-· 64`. Shell dimensions map one-to-one to the layout primitives: sidebar `sidebar-width-expanded` /
-`sidebar-width-collapsed`, topbar `topbar-height`, side panel `side-panel-width` /
-`side-panel-width-rich`, modal cap `modal-width-max`, forms `form-max-width`, tables full-width. Card
-internal padding runs generous (24px on rich cards, 16px on meta blocks). Density is governed globally
-by `density-tier` and stepped per archetype by the surface catalog — never by absolute overrides.
-
-## 6 Depth
-
-Flat. Hierarchy comes from the surface ladder, hairlines, and rounded-corner clipping — not shadow:
-
-- **0 — canvas** `background`, no border.
-- **1 — panel / card** `card` on a 1px `border`; the one soft shadow tier only when a card must float off
-  the canvas.
-- **2 — overlay** `popover` / side panel / modal — the same single soft shadow, over a black scrim at 50%
-  opacity for modals. No level stacks a heavier shadow to signal rank; rank is border and position.
-
-Focus is a 2px `ring` outline in ink (never a glow, never a colored ring), visible on every interactive
-element. Three z-levels: content, sticky chrome, overlay.
-
-## 7 Do's & Don'ts
-
-- **Do** reserve `primary` (Rausch) for the single most important action on a surface; everything else is
-  neutral or status. Most surfaces are 90% white + ink with one Rausch moment.
-- **Do** keep corners soft — `radius` on interactive elements, the larger step on cards, pill on badges.
-- **Do** render numbers and ratings in ink, and apply `tabular-nums` to every numeric column; use
-  `font-mono` for IDs, codes, and timestamps.
-- **Don't** promote a second chromatic accent. Luxe purple, Plus magenta, and the legal-link blue stay
-  sub-brand-decorative; status uses `success` / `warning` / `destructive`.
-- **Don't** focus with a colored ring or a glow — Airbnb focuses by thickening the border to ink.
-- **Don't** use pure black `#000000` for ink; ink is `#222222`.
-- **Don't** pull the pill search bar, the 64px rating hero, or the 80px marketing nav into operator chrome.
-
-## 8 Responsive
-
-The operator sweep is 375 / 768 / 1024 / 1440. Grids reduce column counts cleanly at each step — never
-reflow rows.
-
-| Breakpoint | What changes |
-| --- | --- |
-| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; sticky detail collapses to a bottom bar carrying the primary action |
-| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow; card grids drop to 2-up |
-| 1024 | sidebar expands; two-pane queue+detail holds side by side; card grids 3-up |
-| 1440 | content caps for forms at `form-max-width`; tables and dashboards use the full width; card grids 4-up |
-
-## 9 Agent Prompt Guide
-
-Directives the emitting agent follows verbatim. This brand is warm and generous; keep it restrained for
-operator work.
-
-- Lead every list surface with its table; lead every entity with its primary read, not its chrome.
-- Accent only the primary action with Rausch (`primary`). If two things want the accent, one is not primary.
-- Stay flat — surface separation, hairlines, and rounded clipping before shadow. Reach for the one soft
-  shadow tier only for a real float or overlay.
-- Focus with ink (`ring`), not a colored glow. Render numbers and ratings in ink, never gold.
-- Keep corners soft: `radius` on buttons and inputs, the larger step on cards, pill on badges. No hard corners.
-- Type stays modest — Cereal/Inter, `font-weight-strong` at 600, never 700+. Mono for IDs, codes, timestamps.
-- One accent. Luxe, Plus, and legal-blue are not operator colors here.
-- Leave marketing behind: the pill search bar, the 64px rating hero, the 80px nav, hand-illustrated
-  glyphs, and gradients do not follow the brand into a console. Light only — dark is a foreign opt-in.