dkdk/bold-tech
Bold Tech
Dark-mode-first UI with saturated purple/cyan accents and monospace code treatment. For developer tools and infra dashboards.
install
npx designkit-cli add designkit-sh/bold-techTypography
Every text element the kit ships — headings through code
Headings
The quick brown fox
Section heading
Subsection heading
Minor heading
Overline heading
Body text
Lead paragraph.Body text sits at the backbone of any interface — if it reads well, everything else has a chance. If it doesn't, nothing else matters.
Standard paragraph at the body size. Type hierarchies work best when the jump from body to subheading is clear but not disruptive — around 1.25-1.5× works across most contexts. Inline elements like a link, inline code, emphasis, strong, and highlighted text should all feel native to the kit.
Small / caption text — used for metadata, timestamps, descriptions under labels. Usually 14px or slightly smaller.
Lists
Unordered
- Token-driven styling
- Agent-readable format
- Composable kits
- Colors
- Typography
- Component stylings
- Portable between projects
Ordered
- Describe the kit in prose
- Extract colors and typography
- Apply to a sample UI
- Iterate on token values
Blockquote
“Good design is as little design as possible. Less, but better — because it concentrates on the essential aspects, and the products are not burdened with non-essentials.”
Code
// install a kit
$ npx designkit-cli add airbnb
// apply it to your project
import { applyKit } from "@designkit/theme"
applyKit("airbnb")Rule
Buttons
Primary, secondary, outline, ghost — every state the kit ships
Default
Sizes
With icon
Form fields
Every input control the kit ships — text, select, checkboxes, radios, switches, file
Text inputs
Textarea
Select
Checkboxes
Radio group
Toggle switch
File input
Feedback
Alerts, badges, progress, tooltips, avatars — the signal surface of every UI
Alerts
Scheduled maintenance
We'll be rolling out a new version on Friday at 22:00 UTC. Expect a short read-only window.
Kit published
Your DESIGN.md is live. Anyone can now install it with `npx designkit-cli add you/my-kit`.
Deprecated API
You're calling /v1/kits which will be removed in 30 days. Migrate to /v2/kits.
Build failed
Two component tokens reference an undefined color. Run `designkit lint` to see them.
Badges & tags
Avatars
Jeremy Dupont
Author
Progress
Spinner
Tooltip (static)
Keyboard shortcut
Press ⌘ K to open the command palette, or Esc to dismiss.
Data display
Table, definition list, empty state — how the kit shows structured data
Table
| Kit | Author | Installs | Updated | Status |
|---|---|---|---|---|
| airbnb | getdesign | 12.4K | 2d ago | Active |
| claude | getdesign | 8.1K | 5d ago | Active |
| stripe | getdesign | 7.9K | 1w ago | Active |
| linear.app | getdesign | 6.2K | 2w ago | Beta |
| heritage | dk | 2.1K | 1mo ago | Draft |
Definition list
- Name
- Airbnb
- Author
- getdesign · Claude
- Format
- DESIGN.md (Google Stitch spec)
- Primary font
- Nunito (substitute for Airbnb Cereal VF)
- Installs
- 12,408
- License
- MIT
Empty state
No kits yet
You haven't published any kits on this account. Drop a DESIGN.md in a public repo to get started.
Breadcrumbs
Tabs
Sign in
Centered auth card — the most scrutinised surface in any app
Dashboard KPIs
Four-card stat row — the staple of every internal dashboard
Overview
Performance for the last 30 days
Active users
12,408
+4.2% vs last period
MRR
$28.9K
+12.1% vs last period
Churn
1.8%
-0.3% vs last period
NPS
72
+5 vs last period
Chat thread
Agent + user turn-based chat — bubbles, avatar, timestamp
Design Agent
online · responds in seconds
Hero
Landing-page headline + subtitle + primary CTA
Designed for humans. Built for agents.
Ship a brand-aligned product in hours. Coding agents write UI that matches your design system — no brief, no handoff.
Pricing
Three-tier comparison grid with a highlighted middle tier
Simple pricing
Pay for what you use. Change plans any time.
Hobby
- 1 project
- Community support
- Public kits only
Pro
Popular- Unlimited projects
- Private kits
- Priority support
- AI kit generator
Team
- Everything in Pro
- Shared workspace
- SSO + audit logs
- Dedicated support
source
---
name: Bold Tech
description:
Dark-mode-first UI with saturated purple/cyan accents and monospace code
treatment. For developer tools and infra dashboards.
colors:
background: "#0B0B12"
surface: "#151522"
surface-raised: "#1E1E30"
ink: "#F5F5FA"
ink-muted: "#A0A0B5"
accent: "#A855F7"
accent-alt: "#22D3EE"
success: "#22C55E"
danger: "#EF4444"
border: "#2A2A3D"
link: "{colors.accent-alt}"
typography:
h1:
family: "'Space Grotesk', 'Inter', sans-serif"
size: "3rem"
weight: 700
lineHeight: 1.05
letterSpacing: "-0.03em"
h2:
family: "'Space Grotesk', 'Inter', sans-serif"
size: "2rem"
weight: 700
lineHeight: 1.15
letterSpacing: "-0.02em"
h3:
family: "'Space Grotesk', 'Inter', sans-serif"
size: "1.375rem"
weight: 600
lineHeight: 1.25
body:
family: "'Inter', system-ui, sans-serif"
size: "0.9375rem"
weight: 400
lineHeight: 1.6
code:
family: "'JetBrains Mono', 'Fira Code', ui-monospace, monospace"
size: "0.875rem"
weight: 500
lineHeight: 1.55
spacing:
xs: "0.375rem"
sm: "0.75rem"
md: "1.25rem"
lg: "2rem"
xl: "3.5rem"
rounded:
sm: "4px"
md: "8px"
lg: "14px"
shadows:
glow-accent: "0 0 24px rgba(168, 85, 247, 0.35)"
glow-alt: "0 0 24px rgba(34, 211, 238, 0.3)"
components:
button-primary:
background: "{colors.accent}"
color: "#FFFFFF"
border: "1px solid {colors.accent}"
radius: "{rounded.md}"
padding: "0.625rem 1.25rem"
shadow: "{shadows.glow-accent}"
button-secondary:
background: "{colors.surface-raised}"
color: "{colors.ink}"
border: "1px solid {colors.border}"
radius: "{rounded.md}"
padding: "0.625rem 1.25rem"
card:
background: "{colors.surface}"
border: "1px solid {colors.border}"
radius: "{rounded.lg}"
padding: "{spacing.lg}"
---
## Overview
Bold Tech is a dark-mode-first visual language for developer tools, infra
dashboards, and AI-adjacent products. It leans on a deep near-black background,
saturated purple + cyan accents, and monospace code blocks that feel native to
the content.
## Colors
- Near-black background (`#0B0B12`) with two progressively-lighter surfaces for
elevation.
- Purple primary accent (`#A855F7`) carries most brand weight; cyan (`#22D3EE`)
handles links and secondary emphasis.
- Semantic green / red for status signals. Every accent has a matching `glow-*`
shadow for active states.
## Typography
- Space Grotesk for headings — modern, slightly geometric, works well at large
sizes.
- Inter for body copy at 15px.
- JetBrains Mono for code, sized one step below body so inline code doesn't
dominate the paragraph.
## Usage
Ideal for landing pages of infra products, developer-tool marketing, or AI
dashboards. Pair with subtle grid lines on dark surfaces and use the glow
shadows sparingly — they read as "this is active/selected" rather than
decoration. Avoid light backgrounds; this design doesn't have a light-mode
counterpart.