Fast integration
Purpose-built components that reflect this brand language in every interaction.
Chapel hymnal: stained-glass blue, gilt, parchment.
Real product preview
Chapel hymnal: stained-glass blue, gilt, parchment.
Purpose-built components that reflect this brand language in every interaction.
Purpose-built components that reflect this brand language in every interaction.
Purpose-built components that reflect this brand language in every interaction.
99.99%
Uptime
4.8M
Monthly users
147ms
Median response
24/7
Support
---
version: alpha
name: Chapel Stained
description: Chapel hymnal: stained-glass blue, gilt, parchment.
colors:
primary: "#F3E9CC"
secondary: "#A89478"
tertiary: "#E2B44C"
neutral: "#0F1E4A"
surface: "#152658"
on-primary: "#F3E9CC"
typography:
display:
fontFamily: Cormorant Garamond
fontSize: 5rem
fontWeight: 500
letterSpacing: "-0.015em"
h1:
fontFamily: Cormorant Garamond
fontSize: 2.5rem
fontWeight: 500
body:
fontFamily: EB Garamond
fontSize: 1.05rem
lineHeight: 1.75
label:
fontFamily: EB Garamond
fontSize: 0.78rem
letterSpacing: "0.22em"
rounded:
sm: 2px
md: 4px
lg: 6px
spacing:
sm: 8px
md: 16px
lg: 32px
components:
button-primary:
backgroundColor: "{colors.tertiary}"
textColor: "{colors.on-primary}"
rounded: "{rounded.md}"
padding: 12px 20px
card:
backgroundColor: "{colors.surface}"
textColor: "{colors.primary}"
rounded: "{rounded.lg}"
padding: 24px
---
## Overview
A chapel-inspired palette: stained-glass blue surface, gilt accent, parchment body.
## Colors
The palette is built around high-contrast neutrals and a single accent that drives interaction.
- **Primary (`#F3E9CC`):** Headlines and core text.
- **Secondary (`#A89478`):** Borders, captions, and metadata.
- **Tertiary (`#E2B44C`):** The sole driver for interaction. Reserve it.
- **Neutral (`#0F1E4A`):** The page foundation.
## Typography
- **display:** Cormorant Garamond 5rem
- **h1:** Cormorant Garamond 2.5rem
- **body:** EB Garamond 1.05rem
- **label:** EB Garamond 0.78rem
## Do's and Don'ts
- **Do** use Tertiary for exactly one action per screen.
- **Do** let Neutral carry the composition — negative space is a feature.
- **Don't** introduce gradients. This system is flat on purpose.
- **Don't** mix Tertiary with alternate accents; the single-accent rule is load-bearing.
3d Sculpt
/design-mds/dark/3d-sculpt/design.md
Battle Royale
/design-mds/dark/battle-royale/design.md
Cafe Racer
/design-mds/dark/cafe-racer/design.md
Chapel Stained
/design-mds/dark/chapel-stained/design.md
Crypto Violet
/design-mds/dark/crypto-violet/design.md
Cyber Matrix
/design-mds/dark/cyber-matrix/design.md
Cyberpunk City
/design-mds/dark/cyberpunk-city/design.md
Daw Waveform
/design-mds/dark/daw-waveform/design.md
Defi Chrome
/design-mds/dark/defi-chrome/design.md
Devops Graphite
/design-mds/dark/devops-graphite/design.md
Dungeon Crawl
/design-mds/dark/dungeon-crawl/design.md
Exchange Tick
/design-mds/dark/exchange-tick/design.md
Graphite
/design-mds/dark/graphite/design.md
Hackerspace
/design-mds/dark/hackerspace/design.md
Horology Chronograph
/design-mds/dark/horology-chronograph/design.md
Jazz Club
/design-mds/dark/jazz-club/design.md
Midjourney Dream
/design-mds/dark/midjourney-dream/design.md
Neon Arcade
/design-mds/dark/neon-arcade/design.md
Nightclub Strobe
/design-mds/dark/nightclub-strobe/design.md
Observatory
/design-mds/dark/observatory/design.md
Obsidian
/design-mds/dark/obsidian/design.md
Ocean Depth
/design-mds/dark/ocean-depth/design.md
Poker Felt
/design-mds/dark/poker-felt/design.md
Quantum Lab
/design-mds/dark/quantum-lab/design.md
Social Dusk
/design-mds/dark/social-dusk/design.md
Space Mission
/design-mds/dark/space-mission/design.md
Speakeasy
/design-mds/dark/speakeasy/design.md
Speedrun Clock
/design-mds/dark/speedrun-clock/design.md
Tarot Deck
/design-mds/dark/tarot-deck/design.md
Tattoo Studio
/design-mds/dark/tattoo-studio/design.md
Terminal
/design-mds/dark/terminal/design.md
Tokyo Midnight
/design-mds/dark/tokyo-midnight/design.md
Vercel Ink
/design-mds/dark/vercel-ink/design.md
Wealth Noir
/design-mds/dark/wealth-noir/design.md
Whisky Peat
/design-mds/dark/whisky-peat/design.md
Zed Dev
/design-mds/dark/zed-dev/design.md
3D Sculpt / UI
Preview
3D viewport: studio grey, mesh cyan, normal magenta.
Battle Royale / UI
Preview
Drop-in HUD: blood-orange alerts, squad chevrons.
Cafe Racer / UI
Preview
Cafe-racer: engine black, tank stripe, chrome spoke.
Crypto Violet / UI
Preview
Web3 violet: holo gradients, mono addresses.
Cyber Matrix / UI
Preview
Cyberpunk neon grid meets operator terminal.
Cyberpunk City / UI
Preview
Neon signage, acid yellow, deep violet.