Compare the available themes in this catalogue before choosing how your site looks. Open Site > Catalogs > Themes in the site admin to review and choose a theme on your site.
Checked against the product’s code on 7 November 2026.
In the descriptions, grotesque means sans serif type; Didone is a high-contrast serif style. Chroma is colour intensity. Leading is line spacing, measure is text column width, and elevation is the depth suggested by shadows.
Compare 72 themes by their buyer families. A theme can belong to more than one family; the lists below link to its full details.
The swatches show the native mode. Each strip uses the theme’s page, surface, heading, text, accent and button colours, in that order. The strip also shows the base corner radius and shadow. Faces below name the heading and body families.
Choose and review a theme in Themes and tokens. For a ready page set paired with a theme, compare starter sites.
Find a family
Section titled “Find a family”A family groups themes with a similar look. Faces are the fonts used for headings and body text. Depth describes their shadows. Native mode is the theme’s starting light or dark colour set. The colour codes and size units let a developer compare exact design values.
| Family | Themes |
|---|---|
| Executive | Folio, Sovereign, Almanac, Dossier, Harbor, Pulse, Atrium, Beacon, Gazette, Counsel, Clinic, Commons |
| Editorial | Folio, Sovereign, Almanac, Pinwheel, Kiln, Harbor, Gazette, Carnival, Commons, Broadsheet |
| Warm | Folio, Hearth, Pinwheel, Kiln, Scholar, Slab, Hospitality, Campus, Bazaar, Terracotta |
| Toned down | Atelier, Dossier, Harbor, Pulse, Estate, Verbena, Clinic, Commons, Sage, Mist |
| Happy | Azure, Foxglove, Verdant, Meadow, Pinwheel, Emporium, Bloom, Carnival, Confetti, Bubblegum |
| Brilliant | Bold, Hearth, Brutal, Pinwheel, Bloom, Manual, Carnival, Citrus, Ultraviolet, Signal |
| Elegant | Atelier, Noir, Atrium, Hospitality, Estate, Counsel, Verbena, Couture, Gilded, Velvet |
| Tech | Bold, Carbon, Noir, Bloom, Manual, Terminal, Voyage, Matrix, Quantum, Circuit |
| Minimal | Clean, Lumen, Civic, Monograph, Grid, Paper, Air, Mono, Gallery, Outline |
| Brutalist / raw | Concrete, Xerox, Stencil, Tabloid, Acid, Industrial, Ransom, Terminal Block, Manifesto, Warehouse |
Executive
Section titled “Executive”Folio
Editorial paper: warm reading canvas, navy serif display kept deliberately modest, a big body size with generous line spacing, narrow text column; and the blue-slate dark mode with an orange accent.
| Detail | Value |
|---|---|
| Family | Executive, Editorial, Warm |
| Palette | Page #f5e9cb; Surface #fbf7ea; Heading #172033; Text #262524; Accent #00629c; Button #172033 |
| Faces | Headings: Source Serif 4. Body: Source Sans 3. |
| Corners | Rounded base corners (.375rem); rounded buttons (.375rem). |
| Depth | Layered soft shadows |
| Native mode | Light |
| Modes | Light, Dark |
Sovereign
Public-institution plain speech: Public Sans body, slab headings, navy authority with a single alert red, near-square corners and a dense, businesslike rhythm. For civic and regulated sites.
| Detail | Value |
|---|---|
| Family | Executive, Editorial |
| Palette | Page #f1efeb; Surface #fcfcfc; Heading #1b1b1b; Text #1b1b1b; Accent #b50909; Button #1a4480 |
| Faces | Headings: Bitter. Body: Public Sans. |
| Corners | Rounded base corners (.125rem); rounded buttons (.125rem). |
| Depth | Hard offset shadow |
| Native mode | Light |
| Modes | Light, Dark |
Almanac
Newsprint discipline: Newsreader headlines over a Chivo sans serif, a wide column, hairline rules instead of cards, no shadows and a masthead red. For newsrooms and trade publications.
| Detail | Value |
|---|---|
| Family | Executive, Editorial |
| Palette | Page #d6dadf; Surface #e8e6e0; Heading #0f0e0d; Text #1c1b19; Accent #b3261e; Button #1c1b19 |
| Faces | Headings: Newsreader. Body: Chivo. |
| Corners | Square base corners (0); square buttons (0). |
| Depth | Flat, no shadow |
| Native mode | Light |
| Modes | Light, Dark |
Dossier
A stark personal-document look: pure black on white, near-square corners, hard flat shadows and a tight 900px measure. For CVs, portfolios and writing that wants no ornament.
| Detail | Value |
|---|---|
| Family | Executive, Toned down |
| Palette | Page #ffffff; Surface #f5f5f5; Heading #000000; Text #0d0d0d; Accent #262626; Button #0d0d0d |
| Faces | Headings: Libre Franklin. Body: Karla. |
| Corners | Rounded base corners (.25rem); rounded buttons (.125rem). |
| Depth | Hard offset shadow |
| Native mode | Light |
| Modes | Light, Dark |
Harbor
Calm professional credibility: geometric sans over a literary serif, deep harbour blue on a slate-blue mid-tone canvas rather than white, restrained corners and a measured, unhurried rhythm. For advisory, legal and B2B services.
| Detail | Value |
|---|---|
| Family | Executive, Editorial, Toned down |
| Palette | Page #a5b7d3; Surface #bec3c5; Heading #0f3d56; Text #1f2b33; Accent #146a8a; Button #0f3d56 |
| Faces | Headings: Spectral. Body: Manrope. |
| Corners | Rounded base corners (.375rem); rounded buttons (.3125rem). |
| Depth | Soft shadow |
| Native mode | Light |
| Modes | Light, Dark |
Pulse
Clinical calm: marine and teal on cool white, Sora headings over a Figtree body at a legible 17px, an even eight-point rhythm and almost no shadow depth. For clinics, practices and health services.
| Detail | Value |
|---|---|
| Family | Executive, Toned down |
| Palette | Page #e2f5f1; Surface #f7ffff; Heading #0b3d4d; Text #17323b; Accent #0f766e; Button #0b6b8a |
| Faces | Headings: Sora. Body: Figtree. |
| Corners | Rounded base corners (.5rem); rounded buttons (.625rem). |
| Depth | Soft shadow |
| Native mode | Light |
| Modes | Light, Dark |
Atrium
Architectural restraint: Marcellus roman capitals at wide tracking over a geometric Jost body, limestone and graphite with one bronze accent, near-square corners and a great deal of air.
| Detail | Value |
|---|---|
| Family | Executive, Elegant |
| Palette | Page #d4d1ca; Surface #e0ded7; Heading #1b1a16; Text #2c2b26; Accent #8a5524; Button #26251f |
| Faces | Headings: Marcellus. Body: Jost. |
| Corners | Rounded base corners (.0625rem); square buttons (0). |
| Depth | Hard offset shadow |
| Native mode | Light |
| Modes | Light, Dark |
Beacon
Federal service: a navy-and-blue ladder in one voice, a deliberate small corner, and honest elevation. Institutional without being cold.
| Detail | Value |
|---|---|
| Family | Executive |
| Palette | Page #e1f2ff; Surface #f7feff; Heading #162e51; Text #1b1b1b; Accent #005ea2; Button #005ea2 |
| Faces | Headings: Public Sans. Body: Public Sans. |
| Corners | Rounded base corners (.25rem); rounded buttons (.25rem). |
| Depth | Soft shadow |
| Native mode | Light |
| Modes | Light, Dark |
Gazette
News and magazine: a Baskerville masthead over grotesque copy, a printer’s red used sparingly, tight column rhythm and a long measure built for reading.
| Detail | Value |
|---|---|
| Family | Executive, Editorial |
| Palette | Page #f1e7db; Surface #f7f5ef; Heading #0c0c0b; Text #1c1b19; Accent #c8102e; Button #111111 |
| Faces | Headings: Libre Baskerville. Body: Libre Franklin. |
| Corners | Rounded base corners (.0625rem); rounded buttons (.0625rem). |
| Depth | Flat, no shadow |
| Native mode | Light |
| Modes | Light, Dark |
Counsel
Professional services: a serif body beneath a serif display, wide-tracked capitals, deep navy on warm stone, and no elevation anywhere.
| Detail | Value |
|---|---|
| Family | Executive, Elegant |
| Palette | Page #ccdfee; Surface #ede9e0; Heading #12233b; Text #22262c; Accent #8a6d3b; Button #12233b |
| Faces | Headings: Marcellus. Body: Spectral. |
| Corners | Rounded base corners (.0625rem); square buttons (0). |
| Depth | Flat, no shadow |
| Native mode | Light |
| Modes | Light, Dark |
Clinic
Healthcare: warmed neutrals rather than cold grey, a calm teal instead of the expected blue, soft corners, and generous spacing between everything.
| Detail | Value |
|---|---|
| Family | Executive, Toned down |
| Palette | Page #f4fcef; Surface #eaf1f0; Heading #123433; Text #233231; Accent #0d7f7d; Button #116b69 |
| Faces | Headings: Public Sans. Body: Source Sans 3. |
| Corners | Rounded base corners (.5rem); rounded buttons (.5rem). |
| Depth | Soft shadow |
| Native mode | Light |
| Modes | Light, Dark |
Commons
Nonprofit: a cool ink-blue and a reading serif that carry a report rather than a campaign, with a wide measure and a deliberately plain link language.
| Detail | Value |
|---|---|
| Family | Executive, Editorial, Toned down |
| Palette | Page #a6c8c4; Surface #cbced0; Heading #152b42; Text #262c31; Accent #2f6f8f; Button #1b3a5c |
| Faces | Headings: Newsreader. Body: Work Sans. |
| Corners | Rounded base corners (.375rem); rounded buttons (.375rem). |
| Depth | Flat, no shadow |
| Native mode | Light |
| Modes | Light, Dark |
Editorial
Section titled “Editorial”Pinwheel
Cheerful startup optimism: a heavy serif headline over geometric sans, white cards floating on an off-white canvas, fully rounded CTAs and a sunset-orange accent.
| Detail | Value |
|---|---|
| Family | Editorial, Warm, Happy, Brilliant |
| Palette | Page #fddfd1; Surface #f2f2f2; Heading #2b1b3d; Text #2f2b33; Accent #fe6019; Button #fe6019 |
| Faces | Headings: Lora. Body: Rubik. |
| Corners | Rounded base corners (.75rem); pill buttons (999px). |
| Depth | Soft shadow |
| Native mode | Light |
| Modes | Light, Dark |
Kiln
Handmade warmth: a soft characterful serif over a workhorse grotesque, clay and ochre on warm paper, organic corners and warm-tinted shadows. For makers, bakeries and small-batch brands.
| Detail | Value |
|---|---|
| Family | Editorial, Warm |
| Palette | Page #f5ccbc; Surface #e9e0d4; Heading #2b211a; Text #3a2f26; Accent #b3552b; Button #8a3d12 |
| Faces | Headings: Fraunces. Body: Barlow. |
| Corners | Rounded base corners (.875rem); rounded buttons (.625rem). |
| Depth | Soft shadow |
| Native mode | Light |
| Modes | Light, Dark |
Carnival
Dark-first on a plum dusk: a serif display over a geometric sans, full-pill buttons, and a violet-to-coral gradient carried in the elevation so colour arrives as light rather than as a block.
| Detail | Value |
|---|---|
| Family | Editorial, Happy, Brilliant |
| Palette | Page #5b446f; Surface #605963; Heading #ffffff; Text #f5eefa; Accent #ff5a5f; Button #ffd23f |
| Faces | Headings: DM Serif Display. Body: Outfit. |
| Corners | Rounded base corners (1rem); pill buttons (999px). |
| Depth | Layered soft shadows |
| Native mode | Dark |
| Modes | Dark, Light |
Broadsheet
Broadsheet editorial: warm newsprint, compact columns, sober red rules and a display serif that gives long-form reporting a real front page.
| Detail | Value |
|---|---|
| Family | Editorial |
| Palette | Page #d8c9a7; Surface #eadfca; Heading #11100d; Text #211d17; Accent #9b2c2c; Button #7a1f1f |
| Faces | Headings: DM Serif Display. Body: Libre Franklin. |
| Corners | Square base corners (0px); square buttons (0px). |
| Depth | Flat, no shadow |
| Native mode | Light |
| Modes | Light, Dark |
Hearth
Workshop signage: stone and sand neutrals, a safety-yellow CTA with near-black ink, square corners, industrial headline type, stamped shadows. Trades, workshops, local services.
| Detail | Value |
|---|---|
| Family | Warm, Brilliant |
| Palette | Page #fcdbbe; Surface #f3ede0; Heading #191309; Text #221c15; Accent #d97706; Button #facc15 |
| Faces | Headings: Work Sans. Body: Work Sans. |
| Corners | Rounded base corners (.25rem); rounded buttons (.25rem). |
| Depth | Mixed hard and soft shadows |
| Native mode | Light |
| Modes | Light, Dark |
Scholar
Academic reading first: a Crimson Pro serif body at a generous 19px, Zilla Slab headings, ink and oxblood on laid paper, a narrow text column and almost no shadow. For universities and research groups.
| Detail | Value |
|---|---|
| Family | Warm |
| Palette | Page #ddd3b1; Surface #e3dfd7; Heading #17140f; Text #262320; Accent #8c1d24; Button #7d1d26 |
| Faces | Headings: Zilla Slab. Body: Crimson Pro. |
| Corners | Rounded base corners (.1875rem); rounded buttons (.25rem). |
| Depth | Flat, no shadow |
| Native mode | Light |
| Modes | Light, Dark |
Slab
Neobrutalist: a 5px corner, a 2px black outline, and a hard shadow with no blur that never softens. Playful and loud, and completely sure of itself.
| Detail | Value |
|---|---|
| Family | Warm |
| Palette | Page #ebc238; Surface #e8d18e; Heading #000000; Text #141414; Accent #ff5c00; Button #0047d1 |
| Faces | Headings: Syne. Body: Archivo. |
| Corners | Rounded base corners (.3125rem); rounded buttons (.3125rem). |
| Depth | Hard offset shadow |
| Native mode | Light |
| Modes | Light, Dark |
Hospitality
Warm luxury: a loose, large Garamond display over quiet sans copy, low-contrast warm surfaces, and elevation deep enough to sit over a photograph.
| Detail | Value |
|---|---|
| Family | Warm, Elegant |
| Palette | Page #eddac3; Surface #f1e9dd; Heading #241c16; Text #2f2620; Accent #9a6b3f; Button #7a4f2a |
| Faces | Headings: EB Garamond. Body: Lato. |
| Corners | Rounded base corners (.125rem); square buttons (0). |
| Depth | Soft shadow |
| Native mode | Light |
| Modes | Light, Dark |
Campus
Education: square corners on a warm amber-and-indigo palette, dense practical spacing, and a slightly irregular grotesque that stays friendly at any size.
| Detail | Value |
|---|---|
| Family | Warm |
| Palette | Page #cfbfa3; Surface #cbcdd4; Heading #141a3c; Text #20242e; Accent #d27e00; Button #1f2a63 |
| Faces | Headings: Bricolage Grotesque. Body: Barlow. |
| Corners | Square base corners (0); rounded buttons (.125rem). |
| Depth | Soft shadow |
| Native mode | Light |
| Modes | Light, Dark |
Bazaar
High-density retail: the tightest rhythm in the library, heavy display type, saturated ink and small label-like corners. Built for a page with a hundred things on it.
| Detail | Value |
|---|---|
| Family | Warm |
| Palette | Page #ceb7a8; Surface #c9c7c4; Heading #101010; Text #232323; Accent #e03e00; Button #c23100 |
| Faces | Headings: Chivo. Body: Archivo. |
| Corners | Rounded base corners (.1875rem); rounded buttons (.1875rem). |
| Depth | Soft shadow |
| Native mode | Light |
| Modes | Light, Dark |
Terracotta
Terracotta warmth: a hand-thrown clay canvas, generous hospitality rhythm, soft umber depth and a lively oldstyle serif for makers and places.
| Detail | Value |
|---|---|
| Family | Warm |
| Palette | Page #c97f5b; Surface #e0a27e; Heading #140b08; Text #24140e; Accent #7a2e14; Button #63220f |
| Faces | Headings: Fraunces. Body: Karla. |
| Corners | Rounded base corners (10px); pill buttons (999px). |
| Depth | Soft shadow |
| Native mode | Light |
| Modes | Light, Dark |
Toned down
Section titled “Toned down”Atelier
Monochrome gallery: black on white with a mint companion surface, oversized serif display, pill buttons, no shadows; whitespace and hairlines do the work. Agencies, studios, portfolios.
| Detail | Value |
|---|---|
| Family | Toned down, Elegant |
| Palette | Page #ffffff; Surface #f0f7ef; Heading #000000; Text #191919; Accent #1f513f; Button #101010 |
| Faces | Headings: Roboto Serif. Body: Lato. |
| Corners | Rounded base corners (1.25rem); pill buttons (999px). |
| Depth | Flat, no shadow |
| Native mode | Light |
| Modes | Light, Dark |
Estate
Dark-first on a deep olive ground; a single olive-sage hue and no accent colour anywhere, a high-contrast serif display at one weight, and the widest measure in the library.
| Detail | Value |
|---|---|
| Family | Toned down, Elegant |
| Palette | Page #4a4d37; Surface #595a54; Heading #ffffff; Text #eef0e8; Accent #9aa88c; Button #e8ecdf |
| Faces | Headings: Instrument Serif. Body: Jost. |
| Corners | Square base corners (0); square buttons (0). |
| Depth | Flat, no shadow |
| Native mode | Dark |
| Modes | Dark, Light |
Verbena
Wellness and beauty: desaturated sage and dusty rose, a quiet Garamond display, unhurried leading and almost no elevation. Calm without being beige.
| Detail | Value |
|---|---|
| Family | Toned down, Elegant |
| Palette | Page #f7dde5; Surface #f2f0ec; Heading #243330; Text #2e332f; Accent #8a5560; Button #456b66 |
| Faces | Headings: EB Garamond. Body: Karla. |
| Corners | Rounded base corners (.625rem); pill buttons (999px). |
| Depth | Soft shadow |
| Native mode | Light |
| Modes | Light, Dark |
Sage
Sage calm: a muted garden palette, softened utility corners, unhurried line-height and a readable humanist-to-serif voice.
| Detail | Value |
|---|---|
| Family | Toned down |
| Palette | Page #aeb9a3; Surface #cbd2c4; Heading #111711; Text #20271f; Accent #58705c; Button #385443 |
| Faces | Headings: Lora. Body: Atkinson Hyperlegible. |
| Corners | Rounded base corners (8px); rounded buttons (8px). |
| Depth | Soft shadow |
| Native mode | Light |
| Modes | Light, Dark |
Mist
Mist toned down: blue-grey atmospheric layers, fine soft corners, a quiet display serif and measured spacing for reflective professional sites.
| Detail | Value |
|---|---|
| Family | Toned down |
| Palette | Page #c7d2db; Surface #dfe6eb; Heading #11161b; Text #20272d; Accent #5b7483; Button #365a70 |
| Faces | Headings: Instrument Serif. Body: Figtree. |
| Corners | Rounded base corners (6px); rounded buttons (6px). |
| Depth | Soft shadow |
| Native mode | Light |
| Modes | Light, Dark |
Azure
SaaS precision: azure CTAs and violet accents on ice-tinted layers, tight-tracked display type, layered navy shadows, a wide product column, deep-navy dark mode.
| Detail | Value |
|---|---|
| Family | Happy |
| Palette | Page #eefbff; Surface #eaeff7; Heading #030b1a; Text #0e1726; Accent #6d28d9; Button #0154cf |
| Faces | Headings: Manrope. Body: Inter. |
| Corners | Rounded base corners (.75rem); pill buttons (999px). |
| Depth | Layered soft shadows |
| Native mode | Light |
| Modes | Light, Dark |
Foxglove
Vivid rounded product: magenta energy on pink-cast layers, geometric display type, big radii, glow shadows, deep-raspberry bands; and a plum dark mode, not another navy.
| Detail | Value |
|---|---|
| Family | Happy |
| Palette | Page #daafc6; Surface #d0c4ca; Heading #180f20; Text #251c2e; Accent #be185d; Button #be185d |
| Faces | Headings: Outfit. Body: Inter. |
| Corners | Rounded base corners (1.25rem); pill buttons (999px). |
| Depth | Layered soft shadows |
| Native mode | Light |
| Modes | Light, Dark |
Verdant
Bistro style with high-contrast serif type: cream canvas, deep-green CTAs, a restrained red for specials, high-contrast serif display in the Didot family; and a candlelit green dark mode with brass links.
| Detail | Value |
|---|---|
| Family | Happy |
| Palette | Page #d8d8c5; Surface #e9e3d2; Heading #10382e; Text #27332c; Accent #b52a10; Button #136f5e |
| Faces | Headings: Playfair Display. Body: Source Sans 3. |
| Corners | Rounded base corners (.5rem); pill buttons (999px). |
| Depth | Layered soft shadows |
| Native mode | Light |
| Modes | Light, Dark |
Meadow
Rounded community: a soft sage canvas with lighter sage layers, forest-green CTAs, a burnt-orange accent, rounded type and pill buttons everywhere, soft green shadows. Nonprofits, clinics, community groups.
| Detail | Value |
|---|---|
| Family | Happy |
| Palette | Page #e0e9ce; Surface #eef5e4; Heading #1d4535; Text #2b342d; Accent #c2410c; Button #2d6a4f |
| Faces | Headings: Nunito. Body: Nunito. |
| Corners | Rounded base corners (1.125rem); pill buttons (999px). |
| Depth | Layered soft shadows |
| Native mode | Light |
| Modes | Light, Dark |
Emporium
A polished storefront: borderless cards floating on soft two-layer shadows, an unusually light display weight over a workhorse sans, and a wide product-grid measure. For retail and catalogues.
| Detail | Value |
|---|---|
| Family | Happy |
| Palette | Page #eef4fb; Surface #feffff; Heading #0b1220; Text #3a4351; Accent #3066ff; Button #0b1220 |
| Faces | Headings: Figtree. Body: DM Sans. |
| Corners | Rounded base corners (.375rem); rounded buttons (.375rem). |
| Depth | Layered soft shadows |
| Native mode | Light |
| Modes | Light, Dark |
Bloom
Dark-first. Loud and joyful: hot pink and sunny yellow at full saturation on a deep aubergine canvas that lets them glow rather than shout, Fredoka display at poster size, big soft corners and sticker shadows. For kids’ clubs and camps.
| Detail | Value |
|---|---|
| Family | Happy, Brilliant, Tech |
| Palette | Page #1c0f2e; Surface #2a1743; Heading #ffd84d; Text #f0e6f7; Accent #ff5fa8; Button #ffc82e |
| Faces | Headings: Fredoka. Body: Rubik. |
| Corners | Rounded base corners (1.5rem); pill buttons (999px). |
| Depth | Hard offset shadow |
| Native mode | Dark |
| Modes | Dark, Light |
Confetti
Confetti happy: candy-pink ground, cyan layers, sunny buttons, bubble corners and a rounded display voice built for celebrations and kids.
| Detail | Value |
|---|---|
| Family | Happy |
| Palette | Page #f4c8ea; Surface #bfe8f0; Heading #160b1c; Text #251629; Accent #ed73bd; Button #f7d43a |
| Faces | Headings: Fredoka. Body: Nunito. |
| Corners | Rounded base corners (18px); pill buttons (999px). |
| Depth | Hard offset shadow |
| Native mode | Light |
| Modes | Light, Dark |
Bubblegum
Bubblegum pop: a cyan-and-pink sticker system with springy spacing, oversized crafted grotesk headlines and unapologetically pill-shaped actions.
| Detail | Value |
|---|---|
| Family | Happy |
| Palette | Page #a9dff4; Surface #f1bad9; Heading #07171e; Text #10242c; Accent #ee5aa5; Button #29b9c9 |
| Faces | Headings: Bricolage Grotesque. Body: DM Sans. |
| Corners | Rounded base corners (14px); pill buttons (999px). |
| Depth | Hard offset shadow |
| Native mode | Light |
| Modes | Light, Dark |
Brilliant
Section titled “Brilliant”Bold
Brutalist poster: violet and amber at full volume on near-black, industrial display type, square corners, hard offset shadows. For agencies and launches that want to be loud.
| Detail | Value |
|---|---|
| Family | Brilliant, Tech |
| Palette | Page #0a0a11; Surface #16121f; Heading #ffffff; Text #f4f2f8; Accent #f59e0b; Button #f59e0b |
| Faces | Headings: Space Grotesk. Body: Space Grotesk. |
| Corners | Square base corners (0rem); square buttons (0rem). |
| Depth | Hard offset shadow |
| Native mode | Dark |
| Modes | Dark, Light |
Brutal
Neobrutalist: square corners, ink-black borders, hard offset shadows, acid-yellow CTAs and a monospaced body. For studios and products that want to be loud on purpose.
| Detail | Value |
|---|---|
| Family | Brilliant |
| Palette | Page #ffffff; Surface #f5f5f0; Heading #0a0a0a; Text #0a0a0a; Accent #ffe600; Button #ffe600 |
| Faces | Headings: Archivo. Body: Space Mono. |
| Corners | Square base corners (0); square buttons (0). |
| Depth | Hard offset shadow |
| Native mode | Light |
| Modes | Light, Dark |
Manual
Dark-first: a restrained display ramp on an ink-violet canvas, long leading, hairline rules between every band, and a violet reserved for the one thing on the page you are meant to click.
| Detail | Value |
|---|---|
| Family | Brilliant, Tech |
| Palette | Page #17162a; Surface #211f3b; Heading #ffffff; Text #dedbf0; Accent #b3a1ff; Button #8f76ff |
| Faces | Headings: Space Grotesk. Body: Figtree. |
| Corners | Rounded base corners (.3125rem); rounded buttons (.3125rem). |
| Depth | Soft shadow |
| Native mode | Dark |
| Modes | Dark, Light |
Citrus
Citrus brilliant: saturated lemon and lime, cut-fruit corners, energetic rhythm and a wide geometric display voice with dark-ink actions.
| Detail | Value |
|---|---|
| Family | Brilliant |
| Palette | Page #f5d547; Surface #ffea85; Heading #0e0c02; Text #201b05; Accent #74a900; Button #ff8a1f |
| Faces | Headings: Syne. Body: Rubik. |
| Corners | Rounded base corners (12px); pill buttons (999px). |
| Depth | Hard offset shadow |
| Native mode | Light |
| Modes | Light, Dark |
Ultraviolet
Ultraviolet brilliant: a dark-first neon club language with cyan actions, magenta glow, capsule edges and deliberately oversized display type.
| Detail | Value |
|---|---|
| Family | Brilliant |
| Palette | Page #281153; Surface #3d1b72; Heading #ffffff; Text #f4edff; Accent #e44cff; Button #65edff |
| Faces | Headings: Bricolage Grotesque. Body: Sora. |
| Corners | Rounded base corners (10px); pill buttons (999px). |
| Depth | Soft shadow |
| Native mode | Dark |
| Modes | Dark, Light |
Signal
Signal brilliant: traffic-orange canvas, electric cyan accents, compressed black typography and placard geometry designed to stop the scroll.
| Detail | Value |
|---|---|
| Family | Brilliant |
| Palette | Page #f06b3e; Surface #ff9a70; Heading #120703; Text #251006; Accent #20e0ff; Button #ffd21c |
| Faces | Headings: Archivo. Body: Public Sans. |
| Corners | Rounded base corners (4px); rounded buttons (4px). |
| Depth | Hard offset shadow |
| Native mode | Light |
| Modes | Light, Dark |
Elegant
Section titled “Elegant”Noir
Quiet luxury, dark-first: charcoal canvas, champagne accents, a high-contrast Cormorant display at wide tracking, square corners and a great deal of space. For premium brands.
| Detail | Value |
|---|---|
| Family | Elegant, Tech |
| Palette | Page #0d0b09; Surface #171310; Heading #f4efe6; Text #e9e2d6; Accent #c9a86a; Button #c9a86a |
| Faces | Headings: Cormorant Garamond. Body: Jost. |
| Corners | Square base corners (0); square buttons (0). |
| Depth | Flat, no shadow |
| Native mode | Dark |
| Modes | Dark, Light |
Couture
Couture elegance: rose-stone canvas, tailored hairline geometry, salon-scale space and a high-contrast serif that feels composed rather than ornate.
| Detail | Value |
|---|---|
| Family | Elegant |
| Palette | Page #cfbeb9; Surface #e4d8d4; Heading #140d0f; Text #241b1d; Accent #84536c; Button #5f3142 |
| Faces | Headings: Cormorant Garamond. Body: DM Sans. |
| Corners | Rounded base corners (2px); rounded buttons (2px). |
| Depth | Soft shadow |
| Native mode | Light |
| Modes | Light, Dark |
Gilded
Gilded elegance: muted gold ground, engraved edges, ceremonial spacing and a classical display face held in check by sober modern body type.
| Detail | Value |
|---|---|
| Family | Elegant |
| Palette | Page #b59a55; Surface #d8c58c; Heading #110e05; Text #241d0c; Accent #765b18; Button #4e3a0f |
| Faces | Headings: Marcellus. Body: Libre Franklin. |
| Corners | Rounded base corners (1px); rounded buttons (1px). |
| Depth | Soft shadow |
| Native mode | Light |
| Modes | Light, Dark |
Velvet
Velvet elegance: plum night, jewel-case corners, nocturne spacing and a dramatic display serif with soft rose actions rather than gold clichés.
| Detail | Value |
|---|---|
| Family | Elegant |
| Palette | Page #251321; Surface #3c2035; Heading #fff8fd; Text #f3e7ef; Accent #b46a91; Button #d6a4bc |
| Faces | Headings: DM Serif Display. Body: Lato. |
| Corners | Rounded base corners (3px); rounded buttons (3px). |
| Depth | Soft shadow |
| Native mode | Dark |
| Modes | Dark, Light |
Carbon
Terminal industrial: monospace display type, graphite and steel layers, cyan CTAs, hard panel shadows, the densest rhythm in the library. Dev tools, platforms, tech events.
| Detail | Value |
|---|---|
| Family | Tech |
| Palette | Page #0a0f14; Surface #131c25; Heading #f0f5f8; Text #d3dde5; Accent #0d9488; Button #0e7490 |
| Faces | Headings: IBM Plex Mono. Body: IBM Plex Sans. |
| Corners | Rounded base corners (.25rem); rounded buttons (.25rem). |
| Depth | Mixed hard and soft shadows |
| Native mode | Dark |
| Modes | Dark, Light |
Terminal
Console: monospace throughout, square corners, a hard green prompt colour and an underline where other themes would use a button. Its native mode is paper, not phosphor.
| Detail | Value |
|---|---|
| Family | Tech |
| Palette | Page #aab4a3; Surface #bdbdb7; Heading #101010; Text #22221f; Accent #0f7a4a; Button #0f7a4a |
| Faces | Headings: Space Mono. Body: IBM Plex Mono. |
| Corners | Square base corners (0); square buttons (0). |
| Depth | Flat, no shadow |
| Native mode | Light |
| Modes | Light, Dark |
Voyage
Dark-first. Travel after dark: a genuinely polychrome palette; cyan, violet and mint carried together rather than one brand colour plus greys; over a deep marine canvas and rounded, generous cards.
| Detail | Value |
|---|---|
| Family | Tech |
| Palette | Page #0e1a1f; Surface #16262d; Heading #f0f9fb; Text #dce9ec; Accent #3ec9c9; Button #c08ee0 |
| Faces | Headings: Bricolage Grotesque. Body: Nunito. |
| Corners | Rounded base corners (.875rem); rounded buttons (2rem). |
| Depth | Soft shadow |
| Native mode | Dark |
| Modes | Dark, Light |
Matrix
Matrix technical: phosphor green-black console surfaces, terminal-square geometry, dense data rhythm and a mono display voice for infrastructure tools.
| Detail | Value |
|---|---|
| Family | Tech |
| Palette | Page #071b18; Surface #0e2c27; Heading #f4fffb; Text #d8fff3; Accent #00d99f; Button #b6ff32 |
| Faces | Headings: Space Mono. Body: IBM Plex Sans. |
| Corners | Square base corners (0px); rounded buttons (2px). |
| Depth | Hard offset shadow |
| Native mode | Dark |
| Modes | Dark, Light |
Quantum
Quantum technical: indigo laboratory surfaces, instrument corners, compact analytical spacing and a mono heading voice with electric-blue signals.
| Detail | Value |
|---|---|
| Family | Tech |
| Palette | Page #121a3d; Surface #1d2858; Heading #ffffff; Text #e8edff; Accent #775cff; Button #64d8ff |
| Faces | Headings: IBM Plex Mono. Body: Manrope. |
| Corners | Rounded base corners (3px); rounded buttons (3px). |
| Depth | Soft shadow |
| Native mode | Dark |
| Modes | Dark, Light |
Circuit
Circuit technical: cyan-black board layers, chassis corners, product-dense spacing and tight grotesk headings with amber signal actions.
| Detail | Value |
|---|---|
| Family | Tech |
| Palette | Page #062c3a; Surface #0d4052; Heading #ffffff; Text #e0f8ff; Accent #00b7d9; Button #ffcf4a |
| Faces | Headings: Space Grotesk. Body: Chivo. |
| Corners | Rounded base corners (5px); rounded buttons (5px). |
| Depth | Hard offset shadow |
| Native mode | Dark |
| Modes | Dark, Light |
Minimal
Section titled “Minimal”Clean
Swiss neutral: cool slate ink, one restrained blue, crisp corners, tight display tracking. The decided default for any site before a personality is chosen.
| Detail | Value |
|---|---|
| Family | Minimal |
| Palette | Page #ffffff; Surface #f2f5f9; Heading #0a1122; Text #131c2e; Accent #2563eb; Button #1d4ed8 |
| Faces | Headings: Inter. Body: Inter. |
| Corners | Rounded base corners (.5rem); rounded buttons (.5rem). |
| Depth | Layered soft shadows |
| Native mode | Light |
| Modes | Light, Dark |
Lumen
Built for legibility first: Atkinson Hyperlegible, a larger base size, a narrow reading measure, visible borders and no decorative shadow. For public-sector, health and education sites.
| Detail | Value |
|---|---|
| Family | Minimal |
| Palette | Page #ffffff; Surface #f5f5f5; Heading #000000; Text #111111; Accent #0b4fbf; Button #0b4fbf |
| Faces | Headings: Atkinson Hyperlegible. Body: Atkinson Hyperlegible. |
| Corners | Rounded base corners (.25rem); rounded buttons (.25rem). |
| Depth | Flat, no shadow |
| Native mode | Light |
| Modes | Light, Dark |
Civic
Public service: black on white, square corners, no elevation at all, thick rules instead of cards, and a yellow used only for focus. A page that reads as a form of the state, not a brochure.
| Detail | Value |
|---|---|
| Family | Minimal |
| Palette | Page #ffffff; Surface #f6f5f4; Heading #0b0c0c; Text #0b0c0c; Accent #1d70b8; Button #00703c |
| Faces | Headings: Libre Franklin. Body: Source Sans 3. |
| Corners | Square base corners (0); square buttons (0). |
| Depth | Flat, no shadow |
| Native mode | Light |
| Modes | Light, Dark |
Monograph
Monograph minimal: warm-grey paper, hairline edges, book-airy rhythm and a spare literary display face for portfolios where the work leads.
| Detail | Value |
|---|---|
| Family | Minimal |
| Palette | Page #d9d5ca; Surface #eeeae1; Heading #11110f; Text #232220; Accent #6d6556; Button #33322e |
| Faces | Headings: Instrument Serif. Body: Source Sans 3. |
| Corners | Rounded base corners (1px); rounded buttons (1px). |
| Depth | Flat, no shadow |
| Native mode | Light |
| Modes | Light, Dark |
Grid
Grid minimal: cool rational planes, a Swiss spacing cadence, restrained corners and a classical reading serif locked to a visible baseline.
| Detail | Value |
|---|---|
| Family | Minimal |
| Palette | Page #e2e7ea; Surface #f3f5f6; Heading #0c1114; Text #1e2529; Accent #4b6c7d; Button #214e63 |
| Faces | Headings: Libre Baskerville. Body: Inter. |
| Corners | Rounded base corners (2px); rounded buttons (2px). |
| Depth | Soft shadow |
| Native mode | Light |
| Modes | Light, Dark |
Paper
Paper minimal: tactile kraft ground, folded corners, reading-first proportions and a practical serif that makes a plain page feel made, not defaulted.
| Detail | Value |
|---|---|
| Family | Minimal |
| Palette | Page #c8bfad; Surface #e5ddce; Heading #13100c; Text #28231b; Accent #80633b; Button #573c21 |
| Faces | Headings: Roboto Serif. Body: Work Sans. |
| Corners | Rounded base corners (4px); rounded buttons (4px). |
| Depth | Soft shadow |
| Native mode | Light |
| Modes | Light, Dark |
Air
Air minimal: pale aqua atmosphere, cloud-soft edges, a light reading voice and expansive negative space for wellness and quiet service brands.
| Detail | Value |
|---|---|
| Family | Minimal |
| Palette | Page #d8e7e2; Surface #eff5f2; Heading #0c1512; Text #1d2825; Accent #5a8d7f; Button #31695c |
| Faces | Headings: Lora. Body: Figtree. |
| Corners | Rounded base corners (16px); rounded buttons (16px). |
| Depth | Soft shadow |
| Native mode | Light |
| Modes | Light, Dark |
Mono
Mono minimal: neutral dark-first code canvas, terse spacing, square geometry and one disciplined monospaced voice with no ornamental layer.
| Detail | Value |
|---|---|
| Family | Minimal |
| Palette | Page #171717; Surface #262626; Heading #ffffff; Text #ededed; Accent #d4d4d4; Button #f0f0f0 |
| Faces | Headings: IBM Plex Mono. Body: IBM Plex Mono. |
| Corners | Square base corners (0px); square buttons (0px). |
| Depth | Flat, no shadow |
| Native mode | Dark |
| Modes | Dark, Light |
Gallery
Gallery minimal: concrete museum canvas, frame-square edges, exhibition-scale whitespace and a delicate serif reserved for the work’s title cards.
| Detail | Value |
|---|---|
| Family | Minimal |
| Palette | Page #b9b5b0; Surface #d6d2cd; Heading #0f0e0d; Text #242220; Accent #736459; Button #413830 |
| Faces | Headings: Cormorant Garamond. Body: Karla. |
| Corners | Square base corners (0px); square buttons (0px). |
| Depth | Flat, no shadow |
| Native mode | Light |
| Modes | Light, Dark |
Outline
Outline minimal: blue-grey diagram planes, visibly outlined sections, controlled spacing and a sturdy slab voice for information architecture and guides.
| Detail | Value |
|---|---|
| Family | Minimal |
| Palette | Page #d0d7dc; Surface #e9edf0; Heading #0c1114; Text #20262a; Accent #58788a; Button #31596c |
| Faces | Headings: Zilla Slab. Body: Public Sans. |
| Corners | Rounded base corners (6px); square buttons (0px). |
| Depth | Outline, no blur |
| Native mode | Light |
| Modes | Light, Dark |
Brutalist / raw
Section titled “Brutalist / raw”Concrete
Concrete brutalism: exposed grey aggregate, monolithic Archivo, zero softness, construction-scale spacing and black offset planes with a single warning red.
| Detail | Value |
|---|---|
| Family | Brutalist / raw |
| Palette | Page #b9b6ae; Surface #d5d1c8; Heading #000000; Text #151515; Accent #c52219; Button #111111 |
| Faces | Headings: Archivo. Body: Archivo. |
| Corners | Square base corners (0px); square buttons (0px). |
| Depth | Hard offset shadow |
| Native mode | Light |
| Modes | Light, Dark |
Xerox
Xerox brutalism: hot red copier stock, black toner blocks, clipped corners and zine-dense mono rhythm that looks duplicated, stapled and urgent.
| Detail | Value |
|---|---|
| Family | Brutalist / raw |
| Palette | Page #ef3f2f; Surface #ffb3a8; Heading #000000; Text #150403; Accent #000000; Button #000000 |
| Faces | Headings: Space Grotesk. Body: Space Mono. |
| Corners | Square base corners (0px); square buttons (0px). |
| Depth | Layered hard shadows |
| Native mode | Light |
| Modes | Light, Dark |
Stencil
Stencil brutalism: hazard-yellow steel plates, asphalt offsets, condensed mass and no decorative softness; an industrial campaign system at billboard scale.
| Detail | Value |
|---|---|
| Family | Brutalist / raw |
| Palette | Page #e7c800; Surface #fff179; Heading #090800; Text #1d1900; Accent #0057b8; Button #111111 |
| Faces | Headings: Archivo. Body: Barlow. |
| Corners | Rounded base corners (2px); square buttons (0px). |
| Depth | Hard offset shadow |
| Native mode | Light |
| Modes | Light, Dark |
Tabloid
Tabloid brutalism: cobalt dusk, yellow headline ink, square news blocks and an outsized Syne voice arranged like a front page shouting above the fold.
| Detail | Value |
|---|---|
| Family | Brutalist / raw |
| Palette | Page #2455d6; Surface #173a9a; Heading #ffffff; Text #ffffff; Accent #ffea2f; Button #ffea2f |
| Faces | Headings: Syne. Body: Libre Franklin. |
| Corners | Square base corners (0px); square buttons (0px). |
| Depth | Hard offset shadow |
| Native mode | Dark |
| Modes | Dark, Light |
Acid
Acid brutalism: radioactive green ground, purple rave blocks, one pill-shaped provocation and compressed poster rhythm for culture and nightlife.
| Detail | Value |
|---|---|
| Family | Brutalist / raw |
| Palette | Page #9bea32; Surface #caff84; Heading #071000; Text #102000; Accent #6413c5; Button #6413c5 |
| Faces | Headings: Bricolage Grotesque. Body: Rubik. |
| Corners | Rounded base corners (4px); pill buttons (999px). |
| Depth | Hard offset shadow |
| Native mode | Light |
| Modes | Light, Dark |
Industrial
Industrial brutalism: raw charcoal steel, exposed borders, factory-scale spacing and a condensed heavy voice with amber safety actions and no blur.
| Detail | Value |
|---|---|
| Family | Brutalist / raw |
| Palette | Page #222222; Surface #383838; Heading #ffffff; Text #eeeeee; Accent #ffb000; Button #ffb000 |
| Faces | Headings: Archivo. Body: Chivo. |
| Corners | Square base corners (0px); square buttons (0px). |
| Depth | Hard offset shadow |
| Native mode | Dark |
| Modes | Dark, Light |
Ransom
Ransom brutalism: hot-pink collage stock, cyan misregistration, clipped corner systems and cut-letter display rhythm that refuses corporate polish.
| Detail | Value |
|---|---|
| Family | Brutalist / raw |
| Palette | Page #ef76bf; Surface #ffc0e5; Heading #11050c; Text #260d1c; Accent #ffe500; Button #00b8d4 |
| Faces | Headings: Syne. Body: Karla. |
| Corners | Square base corners (0px); rounded buttons (2px). |
| Depth | Layered hard shadows |
| Native mode | Light |
| Modes | Light, Dark |
Terminal Block
Terminal-block brutalism: teal machine panels, yellow status ink, punched-card corners and command-dense mono copy under a massive industrial heading.
| Detail | Value |
|---|---|
| Family | Brutalist / raw |
| Palette | Page #00b8a9; Surface #73e2d8; Heading #03110f; Text #071f1d; Accent #ffea00; Button #ffea00 |
| Faces | Headings: Archivo. Body: IBM Plex Mono. |
| Corners | Square base corners (0px); rounded buttons (4px). |
| Depth | Hard offset shadow |
| Native mode | Light |
| Modes | Light, Dark |
Manifesto
Manifesto brutalism: agitprop orange paper, navy print blocks, pamphlet spacing and an all-caps-ready grotesk voice for campaigns that take a position.
| Detail | Value |
|---|---|
| Family | Brutalist / raw |
| Palette | Page #f08019; Surface #ffb05d; Heading #100700; Text #241000; Accent #092b5f; Button #092b5f |
| Faces | Headings: Space Grotesk. Body: Work Sans. |
| Corners | Rounded base corners (2px); square buttons (0px). |
| Depth | Hard offset shadow |
| Native mode | Light |
| Modes | Light, Dark |
Warehouse
Warehouse brutalism: purple loading-dock dusk, amber construction marks, billboard spacing and a broad crafted grotesk built for events and studios.
| Detail | Value |
|---|---|
| Family | Brutalist / raw |
| Palette | Page #6750a4; Surface #49367f; Heading #ffffff; Text #ffffff; Accent #ffbf2f; Button #ffbf2f |
| Faces | Headings: Bricolage Grotesque. Body: Source Sans 3. |
| Corners | Square base corners (0px); square buttons (0px). |
| Depth | Hard offset shadow |
| Native mode | Dark |
| Modes | Dark, Light |
Your next step
Section titled “Your next step”Choose a theme to inspect, then follow Themes and tokens to review its preview and the effect of activation.