Fast integration
Purpose-built components that reflect this brand language in every interaction.
Berlin techno: stark black, strobe white, bass magenta.
Real product preview
Berlin techno: stark black, strobe white, bass magenta.
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: Nightclub Strobe
description: Berlin techno: stark black, strobe white, bass magenta.
colors:
primary: "#F6F6F6"
secondary: "#7A7A7A"
tertiary: "#FF2A7F"
neutral: "#000000"
surface: "#0A0A0A"
on-primary: "#000000"
typography:
display:
fontFamily: Archivo Black
fontSize: 5rem
fontWeight: 900
letterSpacing: "-0.04em"
h1:
fontFamily: Archivo Black
fontSize: 2.4rem
fontWeight: 900
body:
fontFamily: Inter
fontSize: 0.92rem
lineHeight: 1.5
label:
fontFamily: Archivo
fontSize: 0.7rem
fontWeight: 700
letterSpacing: "0.22em"
rounded:
sm: 0px
md: 0px
lg: 0px
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 techno-club palette: stark monochrome with one strobe-magenta that punches through.
## Colors
The palette is built around high-contrast neutrals and a single accent that drives interaction.
- **Primary (`#F6F6F6`):** Headlines and core text.
- **Secondary (`#7A7A7A`):** Borders, captions, and metadata.
- **Tertiary (`#FF2A7F`):** The sole driver for interaction. Reserve it.
- **Neutral (`#000000`):** The page foundation.
## Typography
- **display:** Archivo Black 5rem
- **h1:** Archivo Black 2.4rem
- **body:** Inter 0.92rem
- **label:** Archivo 0.7rem
## 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.
Chapel Stained / UI
Preview
Chapel hymnal: stained-glass blue, gilt, parchment.
Crypto Violet / UI
Preview
Web3 violet: holo gradients, mono addresses.
Cyber Matrix / UI
Preview
Cyberpunk neon grid meets operator terminal.