444 design system / v1.0
One design language for every 444 product.
The shared tokens, components and rules for building clear, controlled and recognisably 444 digital experiences.
01 / Foundations
Tokens before decoration.
All 444 interfaces use semantic roles. Product code describes purpose—primary, surface, border—not a literal colour. This lets every app inherit improvements safely.
Primary
--primary
Decisive actions and earned emphasis
Background
--background
Primary canvas
Surface
--card
Grouped content and tools
Secondary
--secondary
Supporting controls and regions
Border
--border
Structure and separation
Destructive
--destructive
Irreversible actions only
Typography
Systems-led.
System sans throughout. Bold, direct headings; calm, readable body copy; no negative letter spacing.
Spacing
A 4px base rhythm keeps density consistent.
Shape & depth
Radii stay at 8px or below for core UI. Shadows communicate elevation, never ornament.
02 / Components
Shared, accessible patterns.
Buttons
Do
- — Use one primary action per decision area
- — Pair icons with labels when meaning is not universal
Don’t
- — Use destructive styling for ordinary cancellation
- — Create new button shapes or one-off colours
<Button variant="primary">Continue</Button>
<Button variant="secondary">Save draft</Button>Inputs
Use the address connected to your business.
Enter a company name.
Do
- — Keep labels visible and persistent
- — Put actionable validation beside the field
Don’t
- — Use placeholder text as the only label
- — Validate before a person has had a chance to respond
Cards
Standard
Operational clarity
A calm surface for grouped information.
Quiet
Supporting detail
Lower emphasis without losing structure.
Priority
Next best action
Use the lime signal only where attention is earned.
System health
84%
Workflows operating as designed.
Do
- — Use cards for repeated items or framed tools
- — Match emphasis to information priority
Don’t
- — Place cards inside cards
- — Wrap every page section in a floating surface
Modals
Reserve modals for focused decisions that must interrupt the current workflow. Always provide a clear title, escape route and action hierarchy.
Navigation
03 / Brand presets
Client444 alignment, instantly.
Apply one stable attribute set to inherit the shared colour, type and imagery language without changing product components.
Client444 Core / light
Operational clarity, built into the interface.
System sans carries product decisions clearly. Monospace is reserved for status, evidence and technical detail.
TYPE / CLIENT444 SYSTEM
Aa Bb Cc 0123 — clear at every scale
Monochrome, high-contrast and human. The default Client444 treatment.
<main
data-444-brand="client444"
data-444-theme="light"
data-444-type="client444"
data-444-imagery="documentary"
>04 / Themes
One hierarchy. Two environments.
Light and dark themes share the same semantic contract. Components must remain structurally identical; only token values change.
LightSystem opportunity
Make the next move clear.
Use contrast to create hierarchy, not decoration. Every state remains legible and operational.
Connected workflow
Ready for human approval
DarkSystem opportunity
Make the next move clear.
Use contrast to create hierarchy, not decoration. Every state remains legible and operational.
Connected workflow
Ready for human approval
05 / Usage
Build with meaning.
Import the centralized token file before application styles. Use shared 444 components for actions, fields, cards, modals and navigation. Extend semantic roles only when an existing role cannot communicate the purpose.
@import "./design-system/444-tokens.css";
.panel {
background: var(--card);
color: var(--card-foreground);
border: 1px solid var(--border);
}Release checklist
- Uses semantic tokens rather than literal colours
- Works in light and dark themes
- Uses shared components for standard controls
- Maintains visible keyboard focus
- Has no nested cards or decorative UI clutter
- Has been checked at mobile and desktop widths