Design System · v2.0 · Nothing OS edition

UDL

Ultimate Designers Lab. A monochromatic, instrument-panel design language built on Nothing OS principles — Doto display, Space Grotesk + Space Mono, OLED black, one red accent.

DisplayDoto
BodySpace Grotesk
DataSpace Mono
Accent#D71921
01 · Identity

Branding

The wordmark is set in Doto. No gradients, no glow — the dot-matrix structure IS the identity.

UDLUltimate Designers Lab
UDLUltimate Designers Lab
02 · Tokens

Colors

Monochromatic. OLED-true black. Gray scale carries hierarchy. Red is an interrupt — used once per screen, never decorative.

Surfaces

Text

Accent · Status

03 · Type

Typography

Display: Doto (dot-matrix). Body: Space Grotesk. Data & labels: Space Mono. Max 2 families, 3 sizes per screen.

Display-XL · Doto72.0
Display-LG · DotoHero · 48
Display-MD · BodyPage title
Heading · BodySection heading
Body · GroteskBody — the quick brown fox jumps over the lazy dog.
Body-SM · GroteskSecondary body for compact UI text.
Caption · Mono12px caption · timestamps · footnotes
Label · Mono CAPSLABEL · METADATA · INSTRUMENT PANEL
04 · Scale

Spacing

8-px base. Spacing carries meaning — tight (4-8) groups items, vast (64+) starts a new context.

05 · Form

Radius

Technical (0–8 px) for surfaces · Pill (999 px) only for buttons and chips. Never > 16 px.

none
0
technical
4px
compact
8px
pill
999
06 · Action

Buttons

Space Mono · ALL CAPS · 13 px · pill (999 px). Min height 44 px. No shadows, no gradients.

Variants

With glyph

07 · Status

Tags & Labels

Outline-only. Space Mono ALL CAPS. Border carries the status meaning.

Branding v0.9.2 Active Live Shipped Pending
08 · Forms

Inputs

Underline preferred. Label above in Mono CAPS. Focus brightens the underline to white. Errors switch to red.

enter a valid address

Checkbox · Radio · Switch

09 · Data

Segmented Progress

The signature data visualization. Discrete rectangular blocks with 2-px gaps — mechanical, instrument-like. Always paired with a numeric readout.

Sprint completion
8/10PROJECTS
Capacity · this week
72%
Storage
106%
Render queue
12/30
10 · Surface

Cards

Flat surfaces · 1 px border · no shadows. Imagery rendered as dot-grid panels — structure IS the visual.

Brand · 2026

Volta Identity

A re-imagined visual system for an electric-mobility startup.

9 weeksVIEW →
Motion · 2026

Kinetic Studio Reel

A 90-second cinematic showcase rendered in WebGL.

R3F · GSAPVIEW →
Product · 2025

Mono Editor v3

A keyboard-first writing surface for technical authors.

14 monthsVIEW →
11 · Identity

Avatars

Monogram in Space Mono on raised surface. Border separation, never filled colour.

AQ SR MK
AQ SR JD +8
12 · Feedback

Alerts

Inline bracket-prefixed status. No toasts. No red backgrounds — the left rule and the prefix tag carry the state.

[INFO]
New brief assigned
Volta has requested a kickoff session for next Tuesday.
[OK]
Deployed
Production build is live at volta.com — atomic deploy completed in 12.3 s.
[WARN]
Storage near limit
Studio storage at 92 %. Archive completed projects to recover space.
[ERR]
Build failed
Three.js bundle exceeded 1.4 MB. Consider code-splitting the hero scene.
13 · Data

Tables

No zebra striping. Dividers carry rhythm. Active row uses left accent rule and raised surface.

ProjectClientStageLeadBudget
Volta IdentityVolta MobilityIn productionAhmed Q.$48,000
Kinetic ReelMono LabsDiscoverySara R.$22,500
Atlas SiteAtlas StudiosShippedJad D.$64,000
Mono EditorMonoPausedMona K.$36,000
14 · Nav

Tabs

Bracket-active tabs and segmented control for compact toggles.

Overview
Brief
Files
Invoices
All
Brand
Motion
Product
15 · Nav

Pagination

Date-nav style: previous / current / next, with thin chevrons.

16 · Overlay

Modal

Solid backdrop · 1 px visible border · no shadow · bracket close button.

17 · Hint

Tooltips

Inverted (white on black). Mono caps. No arrow tail.

Detail on demand Help
18 · State

Loading & Empty

No skeleton screens · no sad-face illustrations. Bracket text and dot-grid carry the state.

Sync status
Loading projects
42 % est. 18 s
No projects yet
Start your first engagement and we'll track every artifact end-to-end.
19 · Pattern

Inquiry Form

20 · Pattern

Project Spotlight

Asymmetric layout. One hero number. Spec rows on a divider rhythm. One red accent.

FEATURED · 2026
9wk

Volta — A new shape for mobility.

A complete visual identity, web product, and motion language for the next generation of electric two-wheelers. Shipped in 9 weeks.

Sprint
9WK
Team
4LEADS
Stack
NEXT · GSAP · R3F
Status
LIVE
Awwwards
SOTD
Copied