dkdk/modern-minimal
Modern Minimal
Clean sans-serif, generous whitespace, neutral grays with a single blue accent. Soft corners, subtle shadows.
install
npx designkit-cli add designkit-sh/modern-minimalTypography
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: Modern Minimal
description:
Clean sans-serif, generous whitespace, neutral grays with a single blue
accent. Soft corners, subtle shadows.
colors:
background: "#FFFFFF"
surface: "#F7F8FA"
ink: "#0F172A"
ink-muted: "#64748B"
accent: "#2563EB"
accent-soft: "#93C5FD"
border: "#E2E8F0"
link: "{colors.accent}"
typography:
h1:
family: "'Inter', system-ui, -apple-system, sans-serif"
size: "2.75rem"
weight: 700
lineHeight: 1.1
letterSpacing: "-0.025em"
h2:
family: "'Inter', system-ui, sans-serif"
size: "1.875rem"
weight: 600
lineHeight: 1.2
letterSpacing: "-0.02em"
h3:
family: "'Inter', system-ui, sans-serif"
size: "1.25rem"
weight: 600
lineHeight: 1.3
body:
family: "'Inter', system-ui, sans-serif"
size: "1rem"
weight: 400
lineHeight: 1.6
spacing:
xs: "0.5rem"
sm: "1rem"
md: "1.5rem"
lg: "2.5rem"
xl: "4rem"
rounded:
sm: "6px"
md: "10px"
lg: "16px"
shadows:
sm: "0 1px 2px rgba(15, 23, 42, 0.06)"
md: "0 4px 12px rgba(15, 23, 42, 0.08)"
components:
button-primary:
background: "{colors.accent}"
color: "#FFFFFF"
border: "1px solid {colors.accent}"
radius: "{rounded.md}"
padding: "0.625rem 1.25rem"
shadow: "{shadows.sm}"
button-secondary:
background: "{colors.surface}"
color: "{colors.ink}"
border: "1px solid {colors.border}"
radius: "{rounded.md}"
padding: "0.625rem 1.25rem"
card:
background: "{colors.background}"
border: "1px solid {colors.border}"
radius: "{rounded.lg}"
padding: "{spacing.lg}"
shadow: "{shadows.md}"
---
## Overview
Modern Minimal is a restrained product-UI design language: Inter type, neutral
grays, a single blue accent, and gentle rounded corners. It reads as current
without chasing trends and works for dashboards, SaaS marketing, and internal
tools.
## Colors
- Pure white background with a very-light-gray surface for elevation.
- Slate-900 ink for headings and slate-500 for body copy / metadata.
- A single blue accent for primary actions and links. Everything else is
neutral.
## Typography
- Inter at 15-17px for body, tightened letter-spacing on headings for a modern
feel.
- Clear hierarchy: 44/30/20/16px for h1/h2/h3/body.
## Usage
Reach for Modern Minimal when the brief says "clean" or "SaaS-looking". Pair
with subtle shadows (never harsh), 10-16px corners, and lots of whitespace. Keep
the accent to roughly 5% of the UI surface.