# freedesignmd.com > Free, curated design.md library for AI coding agents (Claude Code, Cursor, Lovable, and others). Each system is a single markdown contract — color tokens, typography, spacing, components — that an AI agent can drop into a project to produce consistent UI. ## How to use Every design system has a machine-readable markdown file at `/system/.md` containing YAML frontmatter (tokens) plus prose (intent + do/don't rules). Patterns expose the same at `/pattern/.md`. Fetch the `.md` URL directly — no parsing required. ## Design systems (108) - [Linear Orbit](https://www.freedesignmd.com/system/linear-orbit.md): Hairline-thin product workspace. Cool off-white surfaces, Inter Display with tight tracking, a single indigo accent, every divider 1px at 6% ink. Engineered calm. - [Devshell Mono](https://www.freedesignmd.com/system/devshell-mono.md): A developer console as a brand. Warm off-white, JetBrains Mono everywhere, a single cyan caret as the only accent. Every divider, label, and CTA aligns to a 4px mono baseline grid. Built to look like a terminal that's been art-directed. - [Vinyl Noir](https://www.freedesignmd.com/system/vinyl-noir.md): A music platform that sounds like late-night radio looks. Deep charcoal surfaces with a faint vertical warmth, Instrument Serif italic for album titles, Inter for everything else, a single burnt-amber accent reserved for the now-playing state. Built for music streaming, label sites, and audio products that want warmth in the dark without leaning on neon. - [Prism Glass](https://www.freedesignmd.com/system/prism-glass.md): Real glassmorphism without the cliché. A soft tonal backdrop in cool lavender, surfaces that actually blur the layers behind them, hairline edges in 8% ink, and a single periwinkle accent. The depth is restraint, not decoration. - [Arcade Night](https://www.freedesignmd.com/system/arcade-night.md): Esports broadcast in dark mode. Near-black surfaces, sharp display serif paired with a square mono, knife-edge corners, a single high-voltage lime accent. Built for tournaments and launch events. - [Maison Vox](https://www.freedesignmd.com/system/maison-vox.md): Design-agency editorial in print mode. Oversized DM Serif Display headlines that nearly touch the gutter, asymmetric two-column body in Inter, a single tomato accent that lives only in the first letter of the H1 and the period of the CTA. Built for studio sites and case studies. - [Titanium Deck](https://www.freedesignmd.com/system/titanium-deck.md): Brushed metal as a quiet design system. Cool grey surfaces with a faint vertical machined gradient, Space Grotesk display, IBM Plex Mono for technical labels, a single warm amber accent that reads like a status LED. Built for hardware companies and infrastructure dashboards. - [Linen Press](https://www.freedesignmd.com/system/linen-press.md): Warm bone minimalism with a serif voice. Fraunces display headlines paired with Inter body, a single cognac accent reserved for active states, and generous hairline-only chrome. The quiet end of editorial — built for studios, journals, and brands that whisper. - [Nocturne Stage](https://www.freedesignmd.com/system/nocturne-stage.md): Live-event design at midnight. Deep ink-blue surfaces, oversized Bricolage Grotesque headlines with negative tracking, a single electric magenta that reads like a stage spotlight on a single name. Built for festivals, concert series, and event platforms that earn their drama from typography, not glow. - [Graphite Shell](https://www.freedesignmd.com/system/graphite-shell.md): A developer tool that finally feels warm. Graphite surfaces (never black, never grey), JetBrains Mono for everything technical, Inter for prose, a single sage-green accent reserved for the active state. Built for CLIs, infra dashboards, and dev portals that want to look serious without looking like a 90s terminal. - [Helvetic Grid](https://www.freedesignmd.com/system/helvetic-grid.md): Swiss-poster discipline at web scale. Inter Tight 900 headlines that fill the column, ink on bone, a visible 12-column grid as 1px hairlines, and a single vermillion accent that lives only on the underline of the active nav item. Built for design studios, agencies, and brands that earn authority through restraint. - [Peony Zine](https://www.freedesignmd.com/system/peony-zine.md): A printed quarterly that happens to live on the web. Soft blush-bone surfaces, Fraunces 600 italic display headlines, Geist Mono for marginalia, a single deep plum accent on drop caps and pull-quote bars. Built for journals, newsletters, and slow-content brands that want warmth without preciousness. - [Statute Press](https://www.freedesignmd.com/system/statute-press.md): A government document made beautiful. Source Serif 4 hero, 3px black borders that read as legal-page rules, IBM Plex Mono for clause numbers and timestamps, a single mustard-stamp accent that lives only on the approval seal and the active filing tab. Built for legal tech, civic, and document-heavy products. - [Ledger Quiet](https://www.freedesignmd.com/system/ledger-quiet.md): A trading desk that whispers. Off-white surfaces with hairline-only chrome, IBM Plex Sans for prose, IBM Plex Mono with tabular numerals for every figure, a single forest-green accent reserved for positive deltas. Built for fintech dashboards, treasury tools, and any product where the numbers must be the loudest thing on the screen. - [Atrium Folio](https://www.freedesignmd.com/system/atrium-folio.md): An architecture studio's monograph rendered in HTML. Cormorant Garamond at oversized scale for project titles, Inter for body, concrete-grey surfaces with one warm terracotta accent reserved for the project number. Built for architecture firms, design studios, and portfolio sites where each project deserves its own page. - [Signal AI](https://www.freedesignmd.com/system/signal-ai.md): Modern AI product surface without the clichés. Geist sans across the board, Geist Mono for prompts and metrics, very fine off-white surfaces with a 1px white inset highlight, a single muted electric-indigo accent reserved for the assistant's response state. Built for AI-first products that want to feel premium without leaning on rainbow gradients. - [Summit Canvas](https://www.freedesignmd.com/system/summit-canvas.md): An expedition brand that earned its weather. Warm sand-canvas surfaces, Inter for prose, Fraunces small-caps for coordinates and elevations, a single deep pine accent on trail markers and the active route. Built for outdoor brands, gear retailers, and travel platforms that want gravitas without the moody-mountain photography cliché. - [Clinic Pearl](https://www.freedesignmd.com/system/clinic-pearl.md): Clinical software that doesn't feel clinical. Cool pearl off-white surfaces with hairline-only chrome, Manrope for prose, IBM Plex Mono with tabular numerals for vital signs and dosages, a single deep teal accent reserved for the active patient pane. Built for healthcare platforms, clinical SaaS, and any product where calm authority matters more than personality. - [Vestige Folio](https://www.freedesignmd.com/system/vestige-folio.md): Fashion editorial that doesn't shout. Off-bone surfaces, Playfair Display 400 for product names at oversized scale, Inter for body and UI, generous negative space, and a single muted oxblood accent reserved for the Add-to-Bag CTA. Built for fashion houses, jewellery brands, and high-end retail that wants the catalogue feel of a glossy quarterly. - [Thesis Quarterly](https://www.freedesignmd.com/system/thesis-quarterly.md): An academic journal that lives well online. Cream-paper surfaces, Source Serif 4 for body running text, IBM Plex Mono for footnote numerals and citations, a single deep cobalt accent reserved for the active citation link. Built for research publications, scientific journals, and long-form scholarly content. - [Token Mesh](https://www.freedesignmd.com/system/token-mesh.md): Crypto without the neon cliché. Dark slate surfaces, Geist sans for prose and Geist Mono with tabular numerals for every figure, a single cool mint accent reserved for positive deltas. Built for crypto exchanges, DeFi dashboards, and on-chain analytics that want to look serious — no glow, no purple-blue gradient, no rocket emoji. - [Hôtel Rivière](https://www.freedesignmd.com/system/hotel-riviere.md): A boutique hotel that wears its restraint as luxury. Warm pearl-bone surfaces, Cormorant Infant for room names at oversized scale, Inter for body, a single sage-olive accent reserved for the Reserve CTA. Built for hospitality, restaurant groups, and travel brands that want quiet European elegance over moody hotel-stock photography. - [Broadcast Pearl](https://www.freedesignmd.com/system/broadcast-pearl.md): A podcast platform with the calm of public radio. Soft pearl off-white surfaces, Inter Display 700 for episode titles, Geist Mono for timestamps and chapter marks, a single deep burgundy accent reserved for the now-playing waveform. The light counterpart to a late-night studio — built for podcast networks, audio publishers, and editorial radio brands. - [Atlas Admin](https://www.freedesignmd.com/system/atlas-admin.md): An enterprise admin tool that respects density. Cool bone-grey surfaces, Inter for prose and IBM Plex Mono with tabular numerals for every figure, a single steel-blue accent reserved for the active module pane border. Built for B2B internal tools, ops dashboards, and admin consoles where information density is the feature, not the bug. - [Chambers Counsel](https://www.freedesignmd.com/system/chambers-counsel.md): A law firm that earns trust through restraint. Deep oxford-navy ink on warm parchment, EB Garamond at oversized scale for partner names and case headings, Inter for body, a single muted gold-leaf accent reserved for case-number tags and verified-citation marks. Built for law firms, chambers, advisory practices, and policy institutes where gravitas is the brand. - [Bureau Data](https://www.freedesignmd.com/system/bureau-data.md): A research bureau that publishes data the way a quality newspaper does. Cream-paper surfaces, Source Serif 4 for prose, IBM Plex Sans for UI labels, IBM Plex Mono with tabular-nums for every figure, a single rust accent reserved for footnote daggers and the active data point on charts. Built for data journalism, policy research, think-tanks, and white-papers that need to read as authoritative without ever shouting. - [Atelier Glass](https://www.freedesignmd.com/system/atelier-glass.md): A studio interface built around real glassmorphism — frosted backdrop-blur cards floating over a soft tonal lavender-bone backdrop. Plus Jakarta Sans for UI, Spectral italic for accent display, a single indigo reserved for the active panel ring and the primary CTA. Built for creative studios, design tools, and product surfaces where the glass IS the interface chrome. - [Dawn Quartz](https://www.freedesignmd.com/system/dawn-quartz.md): A soft tonal gradient that stays in one hue. Quartz-pink shading down to bone-white across the page, Manrope for UI, Fraunces for display, graphite ink, a single muted plum accent reserved for the primary CTA and the active step indicator. Built for early-stage product pages, wellness brands, and onboarding flows that need warmth without sweetness. - [Bronze Foundry](https://www.freedesignmd.com/system/bronze-foundry.md): A workshop interface cast in brushed bronze. Warm metallic tonal surfaces with a subtle vertical sheen, Fraunces for display and Inter for UI, sharp 2px corners, a single patina-green accent reserved for verified-cast marks and the primary CTA. Built for craft brands, manufacturing portfolios, and premium hardware product pages where the surface itself reads as machined metal. - [Monolith CLI](https://www.freedesignmd.com/system/monolith-cli.md): A premium command-line aesthetic that earned its calm. JetBrains Mono carries display, body, and labels at three sizes; warm off-white paper for surfaces; precise hairlines instead of cards; a single cobalt accent reserved for the cursor caret, the active path crumb, and the primary action. Built for developer-tool marketing pages, technical documentation hubs, and infra products that want to read as terminal-native without going dark. - [Obsidian Rail](https://www.freedesignmd.com/system/obsidian-rail.md): A precision dark dev-tool surface. Near-black background, every divider a single 1px hairline at 8% white, Inter Display for headings and Geist Mono for IDs and timestamps with tabular-nums, a single electric mint accent reserved for active status pills and the primary CTA. Built for infrastructure dashboards, observability tools, and developer-platform marketing pages where the chrome itself reads as a precision instrument. - [Mallow SaaS](https://www.freedesignmd.com/system/mallow-saas.md): A soft modern SaaS surface with the warmth of a marshmallow. Cream-mallow page background, butter-soft cards with generous radius, Manrope for UI and DM Mono for figures, a single muted lavender accent reserved for the primary CTA and the active sidebar item. Built for early-stage product pages, friendly B2C dashboards, and onboarding flows that need to feel approachable without going saccharine. - [Null Grid](https://www.freedesignmd.com/system/null-grid.md): An ultra-minimal restraint exercise. Pure white surfaces, every layout snapped to a strict 12-column grid with a 4px baseline, Inter at three sizes for the entire system, sharp 0px corners, and one vermilion accent reserved for exactly one moment per page. Built for product pages, design portfolios, and brand surfaces where the discipline of the grid IS the design. - [Mistveil Gradient](https://www.freedesignmd.com/system/mistveil-gradient.md): A soft single-hue tonal gradient that stays in pale steel-blue. Page background runs from a faint mist top to bone-white bottom, Inter for display, IBM Plex Mono for figures with tabular-nums, a single graphite accent reserved for the primary CTA and the active step indicator. Built for product pages, technical hubs, and infrastructure marketing where calm depth carries the surface. - [Hemlock Paper](https://www.freedesignmd.com/system/hemlock-paper.md): A warm off-white paper system that earns trust through quiet. Cream-paper surfaces, EB Garamond at oversized scale for headlines paired with Inter for UI, generous reading line-heights, a single forest-green accent reserved for verified marks and the primary CTA. Built for advisory firms, professional services, premium brands, and editorial sites that want quiet European authority. - [Pastel Mesh](https://www.freedesignmd.com/system/pastel-mesh.md): The design.md house style — Source Serif 4 with blue italic accent words, soft pastel mesh background (peach, lavender, mint), translucent glass panes with hairline borders, and a single deep editorial blue pill CTA. - [Sorbet Tonal](https://www.freedesignmd.com/system/sorbet-tonal.md): A multi-stop pastel gradient runs across the page — desaturated lavender, peach, seafoam, cream — every stop at ~25% chroma so it reads as soft sorbet rather than rainbow. Pure paper-white cards, ink text, hairlines. Calm and considered. - [Prism Conic](https://www.freedesignmd.com/system/prism-conic.md): A slow conic gradient sweeps behind the page through desaturated lavender, sage, peach at ~22% chroma — soft prismatic light, never rainbow. Pure white cards on top, ink text, hairlines. - [Quartz Monochrome](https://www.freedesignmd.com/system/quartz-monochrome.md): No chromatic color at all. Five steps of grey on a paper-white canvas, generous 16px radii, oversized whitespace, one humanist sans for everything. The discipline is the brand. - [Frostlite](https://www.freedesignmd.com/system/frostlite.md): Light glass. Pale daylight canvas with a soft mesh aurora behind it; cards float as frosted panes with a 28px backdrop-blur and faint inset highlight. Depth without the weight of dark mode. - [Mineral Dusk](https://www.freedesignmd.com/system/mineral-dusk.md): A single beautifully calibrated diagonal gradient runs across the page — cool slate into dusty mauve into champagne mist — while every other element stays restrained ink and hairlines. The gradient is the room. - [Dawn Gradient](https://www.freedesignmd.com/system/dawn-gradient.md): Minimal canvas with a single restrained gesture — a deep indigo-to-steel gradient on the primary CTA and one accent word. Everything else is whitespace and quiet type. - [Quiet Cobalt](https://www.freedesignmd.com/system/quiet-cobalt.md): Crystalline ice-white canvas, abundant whitespace, gently rounded corners, and a single deep cobalt accent. Ultra-clean modern SaaS with quiet confidence. - [Blanc Minimal](https://www.freedesignmd.com/system/blanc-minimal.md): Endless whitespace. Bold Inter headlines at -3% tracking. A single black accent. Soft 6px corners. Nothing else. - [Soft Linen](https://www.freedesignmd.com/system/soft-linen.md): Warm linen canvas with abundant whitespace, gently rounded corners, and a single sage accent. Calm, airy, considered. Nothing shouts. - [Liquid Metal](https://www.freedesignmd.com/system/liquid-metal.md): Dark graphite glassmorphism — heavy 48px backdrop blur on near-opaque graphite panes, hairline pewter borders, and brushed-silver text accents. No color, no glow, no aurora. Just clean machined glass over a flat charcoal canvas with subtle metallic gradients on display type. - [Argent Machined](https://www.freedesignmd.com/system/argent-machined.md): Cool brushed silver on a slate canvas. The metallic surface appears only on the primary CTA and one hero badge — everywhere else is graphite ink and quiet steel hairlines. Premium hardware, machined. - [Hairline Light](https://www.freedesignmd.com/system/hairline-light.md): Light dev-tool. Bone canvas with a 1px graphite hairline grid, mono-forward labels, one signal-violet accent. The aesthetic of an API console — built for developer-facing platforms that ship a light theme. - [Vellum Quiet](https://www.freedesignmd.com/system/vellum-quiet.md): Warm vellum paper canvas, humanist sans at quiet sizes, refined 6px corners, no shadows — only a faint warm hairline. One deep moss accent. Calibrated to feel like a well-set page in a notebook. - [Linnea Serif](https://www.freedesignmd.com/system/linnea-serif.md): Ultra-minimal modern serif. Pure off-white canvas, Fraunces variable serif tuned for warmth and optical size, one slate-blue accent. No shadows, no gradients — the serif itself is the system. - [Dune Glass](https://www.freedesignmd.com/system/dune-glass.md): Mid-tone soft glass. Warm dusty-sand canvas with a peach-and-rose aurora behind; cards float as cream-tinted frosted panes with 26px backdrop-blur and a faint inset top highlight. The mid-tone is the system. - [Cirrus Pane](https://www.freedesignmd.com/system/cirrus-pane.md): Cool soft-glass system on a pale icy-blue canvas. True frosted cards at 18% white with 28px backdrop-blur, 160% saturate, 1px white hairline, inner top-edge gloss. One restrained slate-blue accent. - [Whisper Studio](https://www.freedesignmd.com/system/whisper-studio.md): Near-white canvas with warm stone undertones, ethereal light-weight display type, and whisper-soft multi-layer shadows. - [Geistlab](https://www.freedesignmd.com/system/geistlab.md): Developer infrastructure made invisible. Geist with -2.4px tracking, shadow-as-border philosophy, multi-layer shadow stacks, ligatures everywhere. - [Kinfolk Stone](https://www.freedesignmd.com/system/kinfolk-stone.md): Wabi-sabi calm. Warm stone and oat tones, asymmetric editorial layout, crimson hairline accent, classical serif lyrics. Slow, considered, quietly luxurious. - [Lumen Material](https://www.freedesignmd.com/system/lumen-material.md): Tonal elevation, dynamic-color purple primary, full-rounded buttons, Roboto Flex throughout. Faithful to the modern tonal-surface spec — generous, accessible, dependable for product UI. - [Tide Material](https://www.freedesignmd.com/system/tide-material.md): tonal-surface with a teal seed — cool tonal surfaces, full-rounded tonal buttons, Roboto Flex throughout. The tonal-surface spec applied to a calm aqua palette. - [Moss Material](https://www.freedesignmd.com/system/moss-material.md): tonal-surface with a moss-green seed — warm tonal surfaces, full-rounded tonal buttons, Roboto Flex throughout. Calm and grounded. - [Slate Material](https://www.freedesignmd.com/system/slate-material.md): tonal-surface with a slate-blue seed — cool tonal surfaces, full-rounded tonal buttons, Roboto Flex throughout. The trustworthy B2B tonal-surface dialect. - [Soft Pastel SaaS](https://www.freedesignmd.com/system/soft-pastel-saas.md): Lavender and cream, generous rounding, friendly and approachable. - [Aurora Haze](https://www.freedesignmd.com/system/aurora-haze.md): Warm grainy aurora applied with restraint — amber bleeds into coral and softens into violet, with real fractal-noise grain layered on top. Inter throughout, generous bone-white surfaces, and the gradient appears in exactly two places: the primary CTA and the featured hero tile. Everything else stays calm so the bloom carries. - [Solflare Bloom](https://www.freedesignmd.com/system/solflare-bloom.md): A low-sun grainy gradient that runs deep ember to marigold with real fractal-noise grain. Cream surface, Inter Tight display in heavy 800, generous slabs of negative space, and the gradient burns through exactly the primary CTA, the featured tile, and the active chart bar. A warm, restrained bloom — never sunset cliché. - [Nebula Drift](https://www.freedesignmd.com/system/nebula-drift.md): A near-black dark canvas where one cosmic grainy gradient does all the talking — deep indigo bleeds into magenta and ignites into warm amber, with real fractal-noise grain layered on top. Inter throughout, hairlines at 8% white, and the gradient burns through the primary CTA, the featured hero tile, and the active chart bar. Quiet space, hot bloom. - [Champagne Foundry](https://www.freedesignmd.com/system/champagne-foundry.md): Brushed champagne and bronze on a cream-paper canvas. The metallic surface appears only on the primary CTA and one hero accent — everywhere else is quiet cream and ink. Premium without ostentation. - [Mercure Editorial](https://www.freedesignmd.com/system/mercure-editorial.md): Design-studio editorial. Massive display serif at 7rem with tight tracking, hairline rules between sections, asymmetric column grids, captions in small-caps mono. One ox-blood accent. The page reads like a printed monograph. - [Maison Folio](https://www.freedesignmd.com/system/maison-folio.md): Design-agency editorial: a single oversized Bodoni Moda display at 7rem, a single ink, an off-white canvas. The signature is the radical scale gap — hero 7rem, body 1rem, nothing in between except a mono eyebrow. - [Atlas Display](https://www.freedesignmd.com/system/atlas-display.md): Design-agency oversized grotesque. 8rem condensed display sans with -5% tracking — the type itself is the layout. Off-white canvas, one molten-orange accent, hairline grid, asymmetric columns. Hits hard the moment it loads. - [Terra Bone](https://www.freedesignmd.com/system/terra-bone.md): Radical two-color: deep terracotta and warm bone, nothing else. Humanist serif display at scale, soft 12px corners, generous body. Earthen and quiet — for artisan brands, ceramics, slow-food, hospitality. - [Indigo Bone](https://www.freedesignmd.com/system/indigo-bone.md): Radical two-color: deep indigo and warm bone, nothing else. Cool but editorial — never electric. Considered serif/sans pairing, refined 6px corners, no shadows. Discipline and quiet authority. - [Aurora Glass](https://www.freedesignmd.com/system/aurora-glass.md): Extreme glassmorphism. Translucent panes float on a vivid aurora mesh — ultramarine, magenta, and mint cyan, blurred to 40px with 200% saturation. Every surface — cards, CTAs, even the primary button — is frosted glass. Nothing is opaque. - [Botanical Press](https://www.freedesignmd.com/system/botanical-press.md): Pressed-herbarium editorial — deep forest ink and oxidized terracotta on bone paper. Italic Cormorant display, generous leading, hairline rules, and a single warm spot color used like a botanist's annotation stamp. - [Parchment Atelier](https://www.freedesignmd.com/system/parchment-atelier.md): Warm cream parchment canvas, humanist variable sans, opacity-driven gray scale, and the signature inset-shadow dark pill — quiet craft over cold tech. - [Warm Canvas](https://www.freedesignmd.com/system/warm-canvas.md): Approachable minimalism on warm white. Compressed Inter at -2.125px, whisper borders, multi-layer 4-stack shadows, and a single saturated blue accent. - [Warm Editorial](https://www.freedesignmd.com/system/warm-editorial.md): A warm, high-contrast palette rooted in broadsheet newspaper aesthetics. - [Duotone Press](https://www.freedesignmd.com/system/duotone-press.md): A two-color press operation: warm bone and persimmon, nothing else. Bricolage Grotesque for display at oversized scale, Newsreader for body, sharp 0px corners, every accent and every CTA in the same persimmon. Built for editorial sites, indie magazines, and brands that want one disciplined color move and zero decoration. - [Studio Margaux](https://www.freedesignmd.com/system/studio-margaux.md): A design-studio identity built on asymmetric oversized typography. Cream surfaces, Fraunces at extreme display scale paired with Inter Tight for body, an inked black block reserved for the studio mark and the single primary CTA, and an italic serif accent line that breaks every layout. Built for design agencies, art-direction portfolios, and creative studios that lead with type instead of imagery. - [Gazette Broadside](https://www.freedesignmd.com/system/gazette-broadside.md): A maximalist editorial broadside that earns every inch with prose. Sage-grey paper surface, Old Standard TT at extreme display scale for headlines, drop-caps that span eight body lines, full-bleed pull-quote slabs in oversized serif italic, Inter for navigation, a single muted burgundy accent reserved for the editor's mark and the issue-number tag. Built for long-form magazines, opinion sections, and editorial publishers who lead with words at oversized scale. - [Atelier AI](https://www.freedesignmd.com/system/atelier-ai.md): Literary salon as product page. Parchment canvas, serif headlines at weight 500, terracotta brand, exclusively warm neutrals, and ring-shadow depth. - [Halogen Editor](https://www.freedesignmd.com/system/halogen-editor.md): Dark-mode-native canvas where content emerges like starlight. Geometric variable sans, the signature 510 weight, semi-transparent white borders, and a single indigo-violet accent. - [Iris Pay](https://www.freedesignmd.com/system/iris-pay.md): Fintech-grade clarity on white. Whisper-weight 300 display headlines, deep navy ink, electric violet accents, and signature blue-tinted multi-layer shadows. - [Twilight Mail](https://www.freedesignmd.com/system/twilight-mail.md): Luxury productivity. Deep purple hero against pristine white, non-standard variable weight 460/540, ultra-tight 0.96 leading, warm cream CTAs, lavender as the only accent. - [Cinescope Mail](https://www.freedesignmd.com/system/cinescope-mail.md): Pure black void with frost-blue borders. Editorial serif hero, geometric sans sections, pill CTAs, and a multi-color accent system that performs against the dark. - [Ink & Citron](https://www.freedesignmd.com/system/ink-citron.md): Radical 2-color duotone. Deep ink-blue and acid citron, with no third hue. Every surface is one of the two colors or a tint thereof — the constraint is the personality. - [Stadium Bank](https://www.freedesignmd.com/system/stadium-bank.md): Billboard-scale fintech. Geometric grotesque at -2.72px tracking, universal pill buttons with generous padding, zero shadows — depth through dark/light alternation only. - [Coinblue Exchange](https://www.freedesignmd.com/system/coinblue-exchange.md): Crypto-grade trust on white. Saturated brand blue, ultra-tight 1.00 line-height display, distinctive 56px radius pill CTAs, alternating white/near-black sections. - [Wanderstay Rentals](https://www.freedesignmd.com/system/wanderstay-rentals.md): Travel magazine that happens to be an app. Single-family typography, coral-pink accent reserved for primary CTAs, generous photography and 14–20px image radius. - [Limepress Fintech](https://www.freedesignmd.com/system/limepress-fintech.md): Lime-bright fintech with weight-900 display at 0.85 line-height — billboard-density typography, dark-green-on-lime pill CTAs, ring-shadow depth. - [Kiln Craft](https://www.freedesignmd.com/system/kiln-craft.md): Warm cream canvas with named swatch palette (matcha, lemon, ube, slushie). Display at -3.2px tracking, generous radii, multi-layer pressed-clay shadow. - [Magazine Bold](https://www.freedesignmd.com/system/magazine-bold.md): High-contrast red, oversized Playfair headlines, dense editorial layout. - [Acid Chrome](https://www.freedesignmd.com/system/acid-chrome.md): Liquid chrome and oil-slick iridescence on onyx — holographic gradients, polished metal CTAs, and prismatic accents. Y2K reborn as molten metal, not neon. Chrome is the color. - [Neo-Memphis](https://www.freedesignmd.com/system/neo-memphis.md): 1980s Memphis Group revival — primary red, electric blue, and chrome yellow squiggling across cream paper. Hand-drawn shapes, chunky geometric sans, hard black borders, zero gradients. - [Neon Y2K](https://www.freedesignmd.com/system/neon-y2k.md): Hot magenta and cyber-lime on absolute black. Oversized monospace, chrome gradients, hard-edged buttons, glowing accents. Built for clubs and clients with attitude. - [Risograph Press](https://www.freedesignmd.com/system/risograph-press.md): Two-color spot print, halftone vibes. Fluorescent pink + ink-black on cream paper, 3px misregistration outlines, hand-cut chunky type. - [Mono Brutalist](https://www.freedesignmd.com/system/mono-brutalist.md): Pure black on white. Hard borders, monospace everywhere, zero compromise. - [Pierre Dev](https://www.freedesignmd.com/system/pierre-dev.md): Dev-tool dark. Near-black canvas, hairline grid, mono-forward display type, one signal-cyan accent. The aesthetic of a precision instrument — built for developer platforms and infra consoles. - [Console Paper](https://www.freedesignmd.com/system/console-paper.md): Coding-vibe on warm paper. Mono everywhere — display, body, captions — with a single muted terracotta accent. Hairlines instead of shadows, strict 4px subgrid. Developer discipline without the dark canvas. - [Citrine IDE](https://www.freedesignmd.com/system/citrine-ide.md): Premium IDE light theme. Warm paper canvas, three syntax-color tokens (amber, teal, plum) used semantically, JetBrains Mono for structure, IBM Plex Sans for body, refined 4-6px corners. Editor-aesthetic with warmth. - [Obsidian Glass](https://www.freedesignmd.com/system/obsidian-glass.md): Dark glass. Deep midnight canvas with a faint indigo-violet aurora behind; cards float as smoked glass panes with 32px backdrop-blur and a faint inset top highlight. Depth and theater without going gaudy. - [Halo Soft](https://www.freedesignmd.com/system/halo-soft.md): Soft-glow neon dark. Deep ink canvas with one cyan accent that radiates a soft outer glow on buttons and links. Generous corners, humanist sans, restrained — warmth in the dark without going gaudy. - [Spotlight Noir](https://www.freedesignmd.com/system/spotlight-noir.md): A single soft spotlight beam falls from the top-center across a near-black canvas, fading to ink at the edges. Cards float as solid surfaces in the beam. One warm-amber accent. Theatrical without being maximalist. - [Onyx Quarterly](https://www.freedesignmd.com/system/onyx-quarterly.md): Premium dark editorial. Flat near-black canvas, oversized Fraunces variable serif at 6.5rem with opsz/SOFT axes, hairline rules between sections, one warm-cream accent for pull-words. The discipline of a printed quarterly, in the dark. - [Gunmetal Forge](https://www.freedesignmd.com/system/gunmetal-forge.md): Dark brushed metallic. Anthracite canvas with cool brushed-steel CTAs catching a polished top-edge highlight under directional light. Premium hardware in dark theme — pro tools, audio, automotive. - [Sable Hairline](https://www.freedesignmd.com/system/sable-hairline.md): Precise dark surface with a faint 32px hairline grid baked into the canvas. Geist-class sans, JetBrains Mono, one desaturated violet accent. The primary CTA carries a 1px violet underline as its only chromatic mark. - [Voidstage](https://www.freedesignmd.com/system/voidstage.md): Pure black void canvas, geometric medium-weight display with extreme negative tracking, frosted glass pills, and a single electric blue accent. - [Dark Terminal](https://www.freedesignmd.com/system/dark-terminal.md): Emerald on near-black. Monospace developer aesthetic with thin borders. - [DBase Console](https://www.freedesignmd.com/system/dbase-console.md): Dark-mode-native developer platform. Emerald (#3ecf8e) as identity marker, 1.00 line-height hero, depth from layered borders not shadows, mono uppercase labels. - [Inkwell IDE](https://www.freedesignmd.com/system/inkwell-ide.md): Warm cream canvas with yellow-undertone ink, gothic compressed display, literary serif body, and warm crimson hover — code-editor elegance as print publication. - [Pace Athletic](https://www.freedesignmd.com/system/pace-athletic.md): A training platform with the discipline of a stopwatch. Near-black surfaces with a single chartreuse PB indicator, Archivo Black for split times at oversized scale, Inter for prose, JetBrains Mono with tabular-nums for every pace and heart-rate. Built for endurance training apps, gym programming, and athlete-facing dashboards where the only thing that matters is the next interval. ## Layout patterns (7) - [Full-bleed Grid with Dividers](https://www.freedesignmd.com/pattern/full-bleed-grid.md): Vertical column hairlines that span the entire viewport height, paired with horizontal section dividers. Content sits inside a centered max-width while the grid lives in the page background. - [Asymmetric Editorial Split](https://www.freedesignmd.com/pattern/asymmetric-split.md): A 1/3 + 2/3 vertical split with a single hairline running the full page height. The narrow column carries metadata and eyebrow type; the wide column carries the lead. Classic magazine architecture for landing pages. - [Marginalia Notes](https://www.freedesignmd.com/pattern/marginalia-notes.md): A narrow left margin carries mono caps section numbers, dates, and inline footnotes alongside a wide reading column. Inspired by scholarly typesetting — perfect for documentation, case studies, and long-form essays. - [Stacked Hero Bands](https://www.freedesignmd.com/pattern/stacked-bands.md): Full-bleed horizontal sections stacked floor-to-ceiling, alternating between plain surface and a diagonal-stripe band. No vertical grid — the rhythm comes from the section heights and the hard hairline between them. - [Centered Single Column](https://www.freedesignmd.com/pattern/centered-column.md): One narrow centered column on a clean canvas. No grid, no dividers, no chrome — the entire rhythm comes from generous vertical spacing between blocks. The most disciplined layout in the catalog. - [Bento Quiet](https://www.freedesignmd.com/pattern/bento-quiet.md): A 12-column bento grid where every module shares the same radius, the same hairline, and the same surface tone. Variation comes only from module size and content — never from styling. The discipline is the design. - [Sticky Index Rail](https://www.freedesignmd.com/pattern/sticky-index-rail.md): A narrow sticky rail on the left holds a numbered section index that highlights the active section as the user scrolls. The right side of the page carries the actual content. Quiet, navigational, scholarly. ## Design lexicon (56) A–Z visual reference of UI design vocabulary — definitions, do/don't, and example systems. - [Bento Grid](https://www.freedesignmd.com/lexicon/bento-grid): A modular grid of differently-sized rectangular cards arranged like a Japanese bento box. - [Asymmetric Split](https://www.freedesignmd.com/lexicon/asymmetric-split): A two-column layout where the columns have intentionally unequal widths, often 60/40 or 70/30. - [Swiss Grid (International Typographic Style)](https://www.freedesignmd.com/lexicon/swiss-grid): A strict modular grid system from mid-century Swiss design, using a baseline grid and sans-serif type for objective clarity. - [Blueprint Grid](https://www.freedesignmd.com/lexicon/blueprint-grid): A page-wide background grid of faint horizontal and vertical lines, evoking architectural drafting paper. - [Marginalia Layout](https://www.freedesignmd.com/lexicon/marginalia): A wide margin column running alongside the main content, used for footnotes, sidenotes, or metadata. - [Sticky Pin (Scroll-Pin Storytelling)](https://www.freedesignmd.com/lexicon/sticky-pin): A scroll technique where an element pins to the viewport while surrounding content continues to scroll past it. - [Full-Bleed Grid](https://www.freedesignmd.com/lexicon/full-bleed-grid): A layout where content extends to the very edges of the viewport with no horizontal padding. - [Stacked Bands](https://www.freedesignmd.com/lexicon/stacked-bands): Horizontal full-width sections of alternating background color or texture, stacked top to bottom. - [Glassmorphism](https://www.freedesignmd.com/lexicon/glassmorphism): A surface treatment that uses background blur and translucency to make UI panes look like frosted glass. - [Neumorphism](https://www.freedesignmd.com/lexicon/neumorphism): A soft 3D surface style using paired inner and outer shadows on a single background color to simulate extruded plastic. - [Hairline Border](https://www.freedesignmd.com/lexicon/hairline-border): A 1px-or-thinner border at very low opacity, used to separate UI elements without visual weight. - [Grainy Gradient](https://www.freedesignmd.com/lexicon/grainy-gradient): A smooth color gradient with film-grain noise overlaid to add tactile texture and prevent banding. - [Mesh Gradient](https://www.freedesignmd.com/lexicon/mesh-gradient): A gradient generated by blending multiple colored points across a 2D surface, creating soft organic color washes. - [Duotone](https://www.freedesignmd.com/lexicon/duotone): An image or design treatment using exactly two colors — typically one dark, one light — replacing the full tonal range. - [Monochrome](https://www.freedesignmd.com/lexicon/monochrome): A color scheme using a single hue across multiple lightness and saturation values. - [Neon Glow](https://www.freedesignmd.com/lexicon/neon-glow): A surface effect where text or elements emit a saturated colored light, simulating neon tubes against dark surfaces. - [Dark Mode](https://www.freedesignmd.com/lexicon/dark-mode): A UI color scheme where backgrounds are dark and content is light, designed to reduce eye strain in low-light contexts. - [Editorial Serif](https://www.freedesignmd.com/lexicon/editorial-serif): A high-contrast or transitional serif typeface used at display sizes to give a UI a magazine-quality feel. - [Display Type](https://www.freedesignmd.com/lexicon/display-type): Typography used at large sizes (48px+) where the typeface's personality dominates over readability concerns. - [Monospace UI](https://www.freedesignmd.com/lexicon/mono-ui): A user interface that uses a monospace typeface — where every character occupies the same horizontal space — for body text, labels, or even headlines. - [Pill Button](https://www.freedesignmd.com/lexicon/pill-button): A button with a fully-rounded radius (border-radius: 9999px) so the ends form perfect semicircles. - [Ghost Button](https://www.freedesignmd.com/lexicon/ghost-button): A button with no fill — just a border (or no border at all) and a text label, used as a low-emphasis secondary action. - [Parallax Scroll](https://www.freedesignmd.com/lexicon/parallax): A scroll effect where background and foreground layers move at different speeds, creating an illusion of depth. - [Scroll Reveal](https://www.freedesignmd.com/lexicon/scroll-reveal): An animation pattern where elements fade, slide, or scale into view as they enter the viewport on scroll. - [Marquee Strip](https://www.freedesignmd.com/lexicon/marquee): A horizontally-scrolling band of content (logos, words, images) that moves continuously at a constant speed. - [Brutalism (Web)](https://www.freedesignmd.com/lexicon/brutalism): A web design aesthetic that rejects polish — using raw HTML defaults, harsh borders, system fonts, and deliberate ugliness as expressive choices. - [Flat Design](https://www.freedesignmd.com/lexicon/flat-design): A design language that removes shadows, gradients, and skeuomorphic textures in favor of solid colors and 2D shapes. - [Skeuomorphism](https://www.freedesignmd.com/lexicon/skeuomorphism): A design approach that mimics real-world materials and objects — leather textures, metal surfaces, paper grain — in digital UI. - [Risograph Aesthetic](https://www.freedesignmd.com/lexicon/risograph): A print-inspired aesthetic mimicking the limited-palette, mis-registered, grainy look of Riso duplicator printing. - [Centered Column](https://www.freedesignmd.com/lexicon/centered-column): A single column of content centered horizontally on the page with generous symmetric whitespace on both sides. - [Sticky Index Rail](https://www.freedesignmd.com/lexicon/sticky-rail): A vertical sidebar that stays pinned to the viewport while the main content scrolls, typically holding navigation or a table of contents. - [Split-Screen Hero](https://www.freedesignmd.com/lexicon/split-screen-hero): A hero section divided into two equal vertical halves, typically pairing a content side with a visual or accent side. - [Magazine Mosaic](https://www.freedesignmd.com/lexicon/magazine-mosaic): An editorial composition mixing drop caps, pull-quotes, asymmetric image blocks, and column rules — print-magazine logic on the web. - [Horizontal Scroll Section](https://www.freedesignmd.com/lexicon/horizontal-scroll-section): A section where vertical scrolling is translated into horizontal movement, usually via position:sticky and transform. - [Magnetic Cursor](https://www.freedesignmd.com/lexicon/magnetic-cursor): An interaction where buttons and links pull the cursor toward them, or deform slightly when the cursor approaches. - [Text Scramble & Variable Morph](https://www.freedesignmd.com/lexicon/text-scramble): An animation where characters cycle through random glyphs before resolving — or where a variable font's weight/width morphs on interaction. - [View Transitions](https://www.freedesignmd.com/lexicon/view-transitions): Native browser animations that morph elements between page states — a thumbnail can grow into a full hero on navigation. - [OKLCH / Wide-Gamut Palette](https://www.freedesignmd.com/lexicon/oklch-palette): A color system using the OKLCH color space (perceptually uniform) and Display-P3 gamut for vibrant, accessible color. - [Conic Aura](https://www.freedesignmd.com/lexicon/conic-aura): A circular, multi-stop conic gradient used as an ambient glow behind hero elements, often blurred and slowly rotating. - [Command Palette](https://www.freedesignmd.com/lexicon/command-palette): A keyboard-first search overlay (usually triggered with ⌘K) that exposes navigation, actions, and search in a single dialog. - [Spotlight Card](https://www.freedesignmd.com/lexicon/spotlight-card): A card with a soft radial glow that follows the cursor, usually combined with a hairline border on a dark surface. - [Toast Notification](https://www.freedesignmd.com/lexicon/toast): A small, transient message that appears at the edge of the screen to confirm an action or surface a status update. - [Skeleton Loader](https://www.freedesignmd.com/lexicon/skeleton-loader): A placeholder UI that mimics the shape of upcoming content, usually with a shimmering animation, while real data loads. - [Empty State](https://www.freedesignmd.com/lexicon/empty-state): A designed view shown when a list, table, or page has no content yet — explains what should be there and how to get it. - [Breadcrumbs](https://www.freedesignmd.com/lexicon/breadcrumbs): A horizontal trail of links showing the user's location in a hierarchical structure, separated by slashes or chevrons. - [Stepper](https://www.freedesignmd.com/lexicon/stepper): A horizontal sequence of numbered steps showing progress through a multi-step flow like checkout, onboarding, or a wizard. - [Card Stack](https://www.freedesignmd.com/lexicon/card-stack): A z-axis stack of overlapping cards where the top card is fully visible and lower cards peek out behind it. - [Modal Dialog](https://www.freedesignmd.com/lexicon/modal): A focused overlay that interrupts the page to confirm an action, collect input, or surface critical information. - [Tooltip](https://www.freedesignmd.com/lexicon/tooltip): A small, transient label that appears on hover or focus to explain an icon, button, or truncated text. - [Segmented Control](https://www.freedesignmd.com/lexicon/segmented-control): A horizontal row of mutually exclusive options where exactly one is selected, styled as connected pill buttons. - [Avatar Group](https://www.freedesignmd.com/lexicon/avatar-group): A row of slightly-overlapping circular avatars showing multiple people associated with an item, often with a +N overflow chip. - [Editorial Web Design](https://www.freedesignmd.com/lexicon/editorial-web-design): A web design approach that borrows from print magazine craft — strong typographic hierarchy, baseline grids, generous whitespace, and treating the page like a spread. - [Dot Grid Texture](https://www.freedesignmd.com/lexicon/dot-grid-texture): A subtle background texture of evenly-spaced dots, used as a quiet structural reference instead of a solid color. - [Kinetic Typography](https://www.freedesignmd.com/lexicon/kinetic-typography): Type that moves — words and letters animated as the primary visual element of a screen, not as decoration around static type. - [Variable Font Animation](https://www.freedesignmd.com/lexicon/variable-font-animation): Animating a font's design axes — weight, width, slant, optical size — over time, so a single typeface morphs without swapping files. - [Dark Glassmorphism](https://www.freedesignmd.com/lexicon/dark-glassmorphism): The frosted-glass surface treatment applied on a dark base — translucent panels with backdrop blur over a deep, colorful backdrop. ## Optional - [Full corpus (single file)](https://www.freedesignmd.com/llms-full.txt) - [Sitemap](https://www.freedesignmd.com/sitemap.xml) - [RSS](https://www.freedesignmd.com/rss.xml)