Diametral

Design System — Welcome to (the real)

Minimal · Enduring · Elegant

A flat, buildless design system extracted from the Diametral brand: 1px rules, no shadows, no border-radius, Ufficio headings over Geist body. Refined and structured — deliberately away from tech and consulting clichés.

▸ Open the live demo app Installation guide

Noir
#161616
Gris
#767884
Marron
#9F8667
Kaki
#AAB0A6
Beige
#D5D3C4
Jaune
#F4FBDA

The system in numbers

Components
57 +
React exports
65
Showcase pages
80
Themes
2

Foundations

Color
Brand, semantic & status tokens
Typography
Ufficio + Geist, the type scale
Spacing
The spacing scale
Layout
Containers, grid, sticky patterns
Borders & rules
1px lines, no shadows
Motion
Transitions & the fade-in
No radius
The flat parti pris
Logo
The mark, construction & usage
Iconography
Line icons, 1.5 stroke
Photography
Natural macro textures

Components

Actions

Buttons
Ghost · primary · danger
Button variants
Sizes, groups, split, loading
Toggle switch
On / off / disabled
Segmented
Filter pills

Forms

Form fields
Labels, inputs, rows
Form controls
Checkbox, radio, select, range
Combobox
Typeahead with filtered list
Tag input
Removable token field
Number input
−/+ stepper field
Date picker
Input + calendar popover
File upload
Dropzone + file list
Date range
Two-month range picker
Color picker
Swatch grid + hex
Multi-select
Multi-value combobox
Time picker
Hour / minute popover
Date-time
Date + time combined

Data display

Data grid
Sortable, lazy-loading grid
Table
Data table
Status panel
The signature result card
Metrics
Stat rows
Card
Bordered surface, no shadow
Panel
Sunken content panel
Description list
Key / value rows
Badges
Uppercase pills
Tag
Status labels, removable
Chips
Compact labeled pills
Avatar
Initials, image, group
Timeline
Vertical event feed
Tree view
Nested disclosure list
Stat card
KPI tile with delta
Sparkline
Inline mini line chart
Bar chart
Flat vertical / horizontal bars
Rating
Five-star score

Feedback

Alert
Inline status message
Callout
Semantic alert box
Banner
Full-width notice
Toast
Transient notification
Spinner
Circular loading ring
Progress
Determinate & indeterminate
Skeleton
Loading placeholders
Empty state
Zero-result placeholder

Navigation

Tabs
Accent underline + sublabel
Breadcrumb
Compact path trail
Pagination
Page strip + ellipsis
Vertical nav
Sidebar navigation column
Stepper
Ordered progress trail
Wizard
Multi-step flow with footer
Dividers
Section headings

Layout

App shell
Header · sidebar · main scaffold
Toolbar
Horizontal action bar

Overlays

Modal
Overlay + dialog
Dropdown menu
Anchored action list
Popover
Anchored signpost box
Tooltip
Hover / focus label
Accordion
Stacked disclosure rows
Drawer
Off-canvas edge panel
Command palette
⌘K command surface

Utilities

Code block
Dark panel + copy
Keyboard key
Inline keycap

Platform

Web Components
The custom-element layer
React
The React component layer

Templates

Login
Centered sign-in screen
Dashboard
App shell + KPIs + live data grid
404 / Error
Empty-state page

Blocks

Composed, copy-paste sections — app chrome, auth, marketing and data/detail — built from the components and the visible grid system.

Blocks gallery
App chrome · Auth · Marketing · Data & detail

Live demo app Live React

One full app — login, dashboard, projects & project detail, kanban board, recruiting pipeline → CV, team, reports, calendar, invoices, knowledge base, files — rendered live in the browser with no build.

▸ Console (demo app)
14 views · ⌘K palette · live charts & data grid
Installation guide
npm · Vite · Next · Angular · Vue · CDN

Principles

Flat & sharp — 1px borders, no shadows, no border-radius.  ·  White / whitesmoke surfaces, black ink.  ·  Ufficio titles over Geist body, uppercase labels at 0.08em, tabular numerals. Read more in the repository's docs/principles.md.