Themes by design style.

A sharable showcase of templates you can grab and go if you like that style.

13 repositories, one per register. Each ships annotated design tokens with their measured contrast ratios, a component layer, two Tailwind adapters, and a demo that opens from a file with nothing installed. MIT, so fork it and rename the tokens.

The VivaOcean theme's demo page, rendered from its own tokens and components.

Newest

VivaOcean

Shell · Animated scene

One window held in open water: a depth gradient, sunbeams built out of flat shapes rather than a blur, and schools of fish drifting behind the page, on a ground that animates forever and still clears AA over every frame of it.

The ground is the product here, which is why it gets the wide frame: the water is a depth gradient, five sunbeams built out of flat shapes because a blur filter on a moving element is re-rasterised every frame, and three schools on three clocks. It animates forever, costs a little over two percent of one core, and the lightest paint it can produce is a measured number, so text over it clears AA on every frame rather than on the frame somebody checked.

  • ToneConversational
  • AestheticPolished Standard
  • RelationshipPeer
  • SensoryResonant

underwater website · animated background · ocean UI · CSS scene animation

View on GitHubLive demofor the VivaOcean theme
  • The Neobrutalism theme's demo page, rendered from its own tokens and components.

    Neobrutalism

    Surface register

    Hard borders, offset shadows with no blur, and saturated flat fills on a warm paper ground.

    • TonePlayful
    • AestheticControlled Maximalist
    • RelationshipPeer
    • SensoryConsidered

    neobrutalism · brutalist UI · hard shadows · flat fills

    View on GitHubLive demofor the Neobrutalism theme
  • The Glassmorphism theme's demo page, rendered from its own tokens and components.

    Glassmorphism

    Surface register

    Frosted surfaces at three elevation tiers over a lit ground, with every contrast ratio measured against a computed worst case.

    • ToneConversational
    • AestheticPolished Standard
    • RelationshipPeer
    • SensoryConsidered

    glassmorphism · frosted glass · backdrop blur · liquid glass

    View on GitHubLive demofor the Glassmorphism theme
  • The Swiss style theme's demo page, rendered from its own tokens and components.

    Swiss style

    Surface register

    A twelve-column grid and a modular type scale set on an eight-pixel baseline, with type doing the work.

    • ToneProfessional
    • AestheticEditorial Restrained
    • RelationshipAuthority
    • SensoryConsidered

    Swiss style · International Typographic Style · grid systems · editorial layout

    View on GitHubLive demofor the Swiss style theme
  • The Bento grid theme's demo page, rendered from its own tokens and components.

    Bento grid

    Layout

    A mosaic layout kept separate from the surface it wears, with three named arrangements and a re-skin demo that proves the separation.

    • ToneProfessional
    • AestheticPolished Standard
    • RelationshipPeer
    • SensoryConsidered

    bento grid · bento box layout · dashboard mosaic · CSS grid spans

    View on GitHubLive demofor the Bento grid theme
  • The Terminal UI theme's demo page, rendered from its own tokens and components.

    Terminal UI

    Surface register

    Monospace throughout on a character grid, with the console's conventions treated as a design system rather than a costume.

    • ToneProfessional
    • AestheticEditorial Restrained
    • RelationshipPeer
    • SensoryConsidered

    terminal UI · TUI · monospace · console aesthetic

    View on GitHubLive demofor the Terminal UI theme
  • The SaaS landing theme's demo page, rendered from its own tokens and components.

    SaaS landing

    Surface register

    The conventions a modern product page is expected to use, executed at the craft level that separates them from a template.

    • ToneConversational
    • AestheticPolished Standard
    • RelationshipPeer
    • SensoryConsidered

    SaaS landing page · startup landing · product marketing page · shadcn theme

    View on GitHubLive demofor the SaaS landing theme
  • The Corporate Memphis theme's demo page, rendered from its own tokens and components.

    Corporate Memphis

    Surface register

    Flat geometric illustration with oversized figures and a soft palette, the register most often used without being named.

    • ToneConversational
    • AestheticPolished Standard
    • RelationshipCompanion
    • SensoryConsidered

    corporate memphis · flat illustration · humaaans · alegria style

    View on GitHubLive demofor the Corporate Memphis theme
  • The Brutalist web theme's demo page, rendered from its own tokens and components.

    Brutalist web

    Surface register

    The hostile one: default browser styles, unstyled links, and no concession offered, where the discomfort is the argument.

    • ToneProvocative
    • AestheticExpressive Maximalist
    • RelationshipPeer
    • SensoryFunctional

    brutalist web design · raw HTML · anti-design · unstyled

    View on GitHubLive demofor the Brutalist web theme
  • The Desktop OS theme's demo page, rendered from its own tokens and components.

    Desktop OS

    Shell

    A desktop operating system as a website: cascading windows with a real if deliberately small window manager, an icon grid, a taskbar that tracks what is open, and a wallpaper slot under all of it.

    • TonePlayful
    • AestheticPolished Standard
    • RelationshipPeer
    • SensoryConsidered

    desktop OS UI · site as an operating system · window manager · web desktop

    View on GitHubLive demofor the Desktop OS theme
  • The Phone launcher theme's demo page, rendered from its own tokens and components.

    Phone launcher

    Shell

    A phone home screen as a website, native at 390 and presented on a stage above it rather than stretched, with pages opening as full-screen app sheets and no window stack at all.

    • TonePlayful
    • AestheticPolished Standard
    • RelationshipPeer
    • SensoryConsidered

    phone launcher UI · home screen design · app grid · mobile first shell

    View on GitHubLive demofor the Phone launcher theme
  • The Game console UI theme's demo page, rendered from its own tokens and components.

    Game console UI

    Shell

    A dashboard for a screen across a room: rows of tiles as the whole navigation surface, type sized for ten feet, and arrow keys that move a focus ring by reading live geometry rather than a cached map.

    • ToneConversational
    • AestheticPolished Standard
    • RelationshipPeer
    • SensoryConsidered

    game console UI · 10 foot UI · TV interface · spatial keyboard navigation

    View on GitHubLive demofor the Game console UI theme
  • The Retro desktop theme's demo page, rendered from its own tokens and components.

    Retro desktop

    Shell

    The same shell at the other temperature, wearing 1995: beveled silver chrome composed from shadow tokens because no border-style value draws an era edge, on a teal ground with a programs menu.

    • TonePlayful
    • AestheticPolished Standard
    • RelationshipPeer
    • SensoryResonant

    Windows 95 aesthetic · Windows 95 website · retro desktop UI · 90s computer interface

    View on GitHubLive demofor the Retro desktop theme

What the collection covers.

The creative direction framework sets brand direction on four axes, 15 positions in all. Every theme states where it sits, so the collection can be read as coverage rather than as a set of moods. Positions no theme has reached are listed as open, because a gap is a fact about the collection rather than something to leave out.

Tone

Professional
Swiss style, Bento grid, Terminal UI
Conversational
Glassmorphism, SaaS landing, Corporate Memphis, Game console UI, VivaOcean
Playful
Neobrutalism, Desktop OS, Phone launcher, Retro desktop
Provocative
Brutalist web

Aesthetic

Editorial Restrained
Swiss style, Terminal UI
Polished Standard
Glassmorphism, Bento grid, SaaS landing, Corporate Memphis, Desktop OS, Phone launcher, Game console UI, Retro desktop, VivaOcean
Controlled Maximalist
Neobrutalism
Expressive Maximalist
Brutalist web

Relationship

Authority
Swiss style
Peer
Neobrutalism, Glassmorphism, Bento grid, Terminal UI, SaaS landing, Brutalist web, Desktop OS, Phone launcher, Game console UI, Retro desktop, VivaOcean
Companion
Corporate Memphis
Coach
Open

Sensory

Functional
Brutalist web
Considered
Neobrutalism, Glassmorphism, Swiss style, Bento grid, Terminal UI, SaaS landing, Corporate Memphis, Desktop OS, Phone launcher, Game console UI
Resonant
Retro desktop, VivaOcean

1 of the 15 positions have no theme yet: Coach (Relationship). Those are the registers the collection does not reach yet.

If you are reading this map to find your own row, the direction matcher asks eight questions about the buying situation and returns a position on each of the four axes, with the themes that share the result.

Where to go next

If you want the reasoning rather than the artifacts, the creative direction framework is where these coordinates come from, and every theme README works through what its position costs and what it buys. If you want these positions applied to finished work rather than shipped as a kit, the showcase is the reference builds that carry them. Issues and pull requests belong on the theme repository they concern; for questions and anything conversational, use the discussions on the claude-skills repository, which is where discussion for all of these repos lives.