Design System
A single source of truth for the Atlas Digital Asset Management workspace. It documents the grid, spacing, typography, component specifications, iconography, interaction patterns, and how the product behaves when things go wrong.
01 — Foundations
Every colour in Atlas is a semantic token defined in styles.css. Components never hard-code hex values — they reference tokens so light/dark and theming stay consistent.
Brand
--color-primary--color-primary-soft--color-secondary--color-accentSurfaces
--color-background--color-canvas--color-surface--color-panelSemantic
--color-success--color-warning--color-info--color-destructiveRadius scale
Elevation
02 — Typography
Plus Jakarta Sans drives display and body copy; JetBrains Mono is reserved for code, tokens, and metadata. Keep line length under ~70 characters for readability.
03 — Grid & Spacing
Atlas uses a 12-column responsive grid on a 4px base unit. The workspace is a fixed sidebar (288px) plus a fluid content area; asset cards reflow from 1 to 4 columns across breakpoints.
12-column grid · 24px gutter
Workspace shell
Asset grid breakpoints
Spacing scale (4px base)
04 — Adaptive Layouts
Atlas is built mobile-first and reflows across four core breakpoints. Navigation, density, and the asset grid each adapt independently so the workspace stays usable from a 360px phone to an ultrawide display.
Breakpoint system
| Tier | Range | Token | Asset grid | Navigation |
|---|---|---|---|---|
| Mobile | 0 – 639px | base | 1 col | Bottom sheet / drawer |
| Tablet | 640 – 1023px | sm / md | 2 cols | Collapsible sidebar |
| Laptop | 1024 – 1279px | lg | 3 cols | Pinned sidebar |
| Desktop | ≥ 1280px | xl / 2xl | 4 cols | Sidebar + rail |
Layout reflow across devices
Adaptive patterns
Adaptive rules
05 — Element Specs
Reusable building blocks with their exact dimensions. Heights snap to the 4px grid; interactive targets keep a minimum 36px hit area for accessibility.
Buttons
Inputs & search
Badges & filter chips
Selection controls
Asset card
Sanchi Stupa
sanchistupa.jpg
06 — Iconography
Atlas uses the Lucide icon library exclusively for a consistent, lightweight, stroke-based look. Icons inherit currentColor and sit on a 24px grid at 2px stroke weight.
Sizes
Stroke
Usage
Pair icons with text labels in primary actions. Icon-only buttons must include an aria-label.
07 — Interactions
Motion is purposeful and quick. Transitions run 150–300ms on an ease-out curve. Hover states reveal affordances; active states confirm; loading states reassure.
Hover & focus
state: rest · transition 200ms ease-out
Loading & feedback
Skeleton + progress
Toast feedback
Motion tokens
08 — Error & Empty States
Every failure mode has a designed state. Each one names what happened in plain language, reassures the user nothing is lost, and offers a clear recovery path.
No assets found
No assets match your current filters. Try removing a filter or broadening your search.
You're offline
We can't reach the asset library. Check your connection — your selections are saved locally.
Something went wrong
The workspace failed to load. This is on our end, not yours. Refresh to try again.
Inline validation
Use letters, numbers, spaces, hyphens (1–60 chars).
Bulk action partially completed
5 of 8 assets were archived. 3 failed because they're locked by another user.
Error-state principles