OPEN-CODE APPLICATIONS · 11 STABLE THEMES

Application themes

Themes are complete application starting points, not color presets. Each entry combines responsive page source, Coordiation component primitives, design tokens, optional original media, a live preview, an install endpoint, and a machine-readable customization contract.

The source becomes part of your repository. There is no theme runtime, account, or visual builder required.

See the finished application first.Browse theme previews →

Install Coordiation CSS

Terminal

npm install @coordiation/css @coordiation/vite

Configure the scanner for your application directory so literal Coordiation utilities inside installed themes are indexed with the rest of your project.

Choose and install a theme

Editorial Advisor

A warm editorial portfolio for independent advisors, consultants, and public-facing leaders.

Terminal

npx @coordiation/cli@next add theme editorial-advisor

Quiet Journal

A warm illustrated personal journal for essays, slow-living notes, travel stories, and thoughtful newsletters.

Terminal

npx @coordiation/cli@next add theme quiet-journal

Finance Dashboard

A responsive finance operations workspace for revenue, payments, customers, cash health, transactions, and collaborator payouts.

Terminal

npx @coordiation/cli@next add theme finance-dashboard

Industrial Forge

A bold industrial engineering company site for infrastructure, manufacturing, energy, and field operations.

Terminal

npx @coordiation/cli@next add theme industrial-forge

Mono Portfolio

A high-contrast creative portfolio for independent designers, digital studios, and brand-minded developers.

Terminal

npx @coordiation/cli@next add theme mono-portfolio

Noir Habitat

A dark editorial architecture and interior studio theme for residential practices, spatial designers, and design-led firms.

Terminal

npx @coordiation/cli@next add theme noir-habitat

Studio Index

A minimal brand and product designer portfolio with an expansive work grid and reusable case-study pages.

Terminal

npx @coordiation/cli@next add theme studio-index

Signal Agency

A high-contrast digital agency theme for strategy, design, development, growth, and creative studio teams.

Terminal

npx @coordiation/cli@next add theme signal-agency

Serein Journal

A refined independent magazine theme for culture, design, food, travel, and slow-living publications.

Terminal

npx @coordiation/cli@next add theme serein-journal

Spectrum Studio

A high-energy independent creative studio theme for brand, product, web, and motion work.

Terminal

npx @coordiation/cli@next add theme spectrum-studio

Radian Studio

An expressive independent design studio theme for brand systems, digital products, motion, campaigns, and creative practice portfolios.

Terminal

npx @coordiation/cli@next add theme radian-studio

The official Coordiation CLI resolves the registry, checks every target path, refuses accidental overwrites, and writes the selected application into your project.

Use the bundled Coordiation primitives

Theme components

# Editorial Advisor
ThemeIcon + semantic page sections

# Quiet Journal
ThemeIcon + semantic page sections

# Finance Dashboard
Avatar
Badge
Button
Card
CardHeader
IconButton
Progress
SearchField
SelectControl
Table

# Industrial Forge
ForgeButton
SectionLabel
ServiceCard
ValueCard
ThemeIcon

# Mono Portfolio
PortfolioButton
SectionTag
ServiceCell
PlanCard
ThemeIcon

# Noir Habitat
StudioButton
SectionTitle
ProjectCard
ProcessStep
ArticleCard
ThemeIcon

# Studio Index
StudioHeader
ProjectCard
DetailLabel
ThemeIcon

# Signal Agency
AgencyButton
SectionHeading
ServiceCard
ProjectCard
PlanCard
TeamCard
TestimonialCard
BlogCard
ThemeIcon

# Serein Journal
JournalButton
SectionTitle
StoryCard
CompactStory
ThemeIcon

# Spectrum Studio
SectionHeading
ProjectCard
MetricCard
RoundLink
CaseVisual
PortraitVisual
ProjectBriefForm
ThemeIcon

# Radian Studio
RadianButton
SectionLabel
ProjectCard
ServiceSelector
TestimonialRotator
RevealController
LocalTime
ThemeIcon

Complex themes can bundle first-party Card, Button, Badge, Avatar, Input, Progress, Select, Table, and related primitives. Their source stays editable and their layout remains expressed with literal co-* utilities.

Bring the media with you

Theme assets

# Editorial Advisor
/themes/editorial-advisor/hero-advisor.png
/themes/editorial-advisor/insight-tower.png
/themes/editorial-advisor/testimonial-meeting.png

# Quiet Journal
/themes/quiet-journal/hero-desk.webp
/themes/quiet-journal/writer-portrait.webp
/themes/quiet-journal/story-reading.webp
/themes/quiet-journal/story-plant.webp
/themes/quiet-journal/story-travel.webp
/themes/quiet-journal/story-books-camera.webp

# Finance Dashboard
No external media — CSS-only visual system

# Industrial Forge
/themes/industrial-forge/hero.jpg
/themes/industrial-forge/about.jpg
/themes/industrial-forge/service-construction.jpg
/themes/industrial-forge/service-energy.jpg
/themes/industrial-forge/service-factory.jpg
/themes/industrial-forge/cta.jpg

# Mono Portfolio
/themes/mono-portfolio/hero.jpg
/themes/mono-portfolio/about.jpg
/themes/mono-portfolio/project.jpg
/themes/mono-portfolio/workspace.jpg
/themes/mono-portfolio/reviewer.jpg
/themes/mono-portfolio/blog-team.jpg
/themes/mono-portfolio/blog-design.jpg
/themes/mono-portfolio/blog-wireframe.jpg

# Noir Habitat
/themes/noir-habitat/hero.jpg
/themes/noir-habitat/studio-director.jpg
/themes/noir-habitat/service-interior.jpg
/themes/noir-habitat/service-exterior.jpg
/themes/noir-habitat/project-house.jpg
/themes/noir-habitat/project-villa.jpg
/themes/noir-habitat/project-interior.jpg
/themes/noir-habitat/process.jpg
/themes/noir-habitat/testimonial.jpg
/themes/noir-habitat/news-material.jpg
/themes/noir-habitat/news-light.jpg

# Studio Index
/themes/studio-index/root-table.jpg
/themes/studio-index/playroom.jpg
/themes/studio-index/aperture.jpg
/themes/studio-index/homebase.jpg
/themes/studio-index/signal.jpg
/themes/studio-index/sidecar.jpg
/themes/studio-index/detail-food.jpg
/themes/studio-index/detail-chef.jpg
/themes/studio-index/detail-team.jpg
/themes/studio-index/detail-work.jpg
/themes/studio-index/detail-material.jpg
/themes/studio-index/detail-mobile.jpg

# Signal Agency
/themes/signal-agency/hero-team.jpg
/themes/signal-agency/about-team.jpg
/themes/signal-agency/project-strategy.jpg
/themes/signal-agency/project-product.jpg
/themes/signal-agency/project-interface.jpg
/themes/signal-agency/blog-meeting.jpg
/themes/signal-agency/team-ana.jpg
/themes/signal-agency/team-raka.jpg
/themes/signal-agency/team-nadia.jpg
/themes/signal-agency/team-bima.jpg

# Serein Journal
/themes/noir-habitat/project-interior.jpg
/themes/studio-index/detail-food.jpg
/themes/noir-habitat/news-light.jpg
/themes/mono-portfolio/blog-design.jpg
/themes/studio-index/playroom.jpg
/themes/noir-habitat/service-interior.jpg
/themes/industrial-forge/cta.jpg
/themes/signal-agency/blog-meeting.jpg
/themes/studio-index/root-table.jpg
/themes/noir-habitat/project-house.jpg
/themes/studio-index/detail-chef.jpg

# Spectrum Studio
/themes/spectrum-studio/hero-spectrum.jpg
/themes/spectrum-studio/project-01.jpg
/themes/spectrum-studio/project-02.jpg
/themes/spectrum-studio/project-03.jpg
/themes/spectrum-studio/project-04.jpg
/themes/spectrum-studio/project-05.jpg
/themes/spectrum-studio/project-06.jpg
/themes/spectrum-studio/person-01.avif
/themes/spectrum-studio/person-02.avif
/themes/spectrum-studio/person-03.avif

# Radian Studio
/themes/radian-studio/hero.jpg
/themes/radian-studio/project-orbit.jpg
/themes/radian-studio/project-signal.jpg
/themes/radian-studio/project-ribbon.jpg
/themes/radian-studio/project-table.jpg
/themes/radian-studio/project-facade.jpg

The CLI downloads every declared public asset automatically. CSS-only themes need no copied media; illustrated themes can be self-hosted as installed or use your own optimized replacements.

Replace identity before layout

Recommended edit order

1. Brand, author identity, biography, and contact details
2. Hero and content imagery
3. Stories, events, statistics, metrics, and calls to action
4. Theme-specific CSS variables
5. Section order and optional sections

Each registry record declares its exact wrapper namespace and class prefix. Reusable layout, control, and alignment primitives remain literal co-* utilities.

Let AI inspect the contract

Discovery endpoints

GET /theme-registry.json
GET /r/themes/registry.json
GET /r/themes/editorial-advisor.json
GET /r/themes/quiet-journal.json
GET /r/themes/finance-dashboard.json
GET /r/themes/industrial-forge.json
GET /r/themes/mono-portfolio.json
GET /r/themes/noir-habitat.json
GET /r/themes/studio-index.json
GET /r/themes/signal-agency.json
GET /r/themes/serein-journal.json
GET /r/themes/spectrum-studio.json
GET /r/themes/radian-studio.json

Use the extended manifest to select exact files, sections, assets, components, utilities, and customization rules. Do not infer theme names or reconstruct a template from its screenshot.

SAFE CUSTOMIZATION

Keep what makes it dependable

The template is yours, but a few structural choices protect accessibility and maintainability.

Preserve the heading hierarchy and descriptive image alternatives.
Keep focusable navigation, buttons, forms, and contact actions semantic.
Retain literal co-* utilities and the declared theme namespace.
Use ThemeIcon and exact SVG assets from the Coordiation icon registry.
Keep the footer copyright credited to Coordiation in every template.
Use original or properly licensed replacement media.
Test all breakpoints after changing copy length or section order.

Interactive showcase← Browse themes Build the interfaceComponent registry →