letbe-ds
A complete design system in three plain files — no build step, no dependencies, no framework. Tokens drive everything: retune a handful of values and the whole system wears your brand, light and dark. From buttons and forms to data tables, dashboards, kanban boards and AI chat. MIT.
80 pages · 3-file runtime · DTCG tokens · Figma round-trip
Foundation · 10
The vocabulary — color, type, size, radius, shadow, motion. Everything below is built from these tokens.
Token Architecture
The reasoning behind the tokens: three tiers (DTCG source → generated CSS), the naming grammar, role prefixes (`bg` fills, `fg` ink — text AND icons, `border`…
Typography
Six semantic text roles — display, heading, body, action, label, caption — each with multiple sizes. Use display for hero moments, heading for section titles,…
Colors
Six L1 color palettes — neutral, violet (brand), blue (info), green (success), yellow (warning), red (danger) — each with 11 steps from 50 (lightest) to 950…
Icons
254 icons bundled as standalone SVGs in three categories. OUTLINED (Lucide, stroke-based, default) — navigation, actions, status, people, docs, AI-era set…
Size
L1 size scale — used across spacing, padding, gap, heights, widths, and (via reference) border-widths. Built on a 4px base grid with a 2px sub-grid for…
Radius
Corner radius primitives (L1) and semantic aliases (L2) for interactive, field, surface, overlay, badge, and full/pill shapes. Theme editor's corner-radius…
Shadow
Elevation shadows. L1 shadow.1–4 define progressively deeper drop-shadows; L2 aliases (card, dropdown, modal, tooltip, focus) point at the right primitive for…
Opacity
Opacity scale for transparent overlays and muted elements. L1 provides 0, 0.05, 0.1, 0.2, 0.4, 0.6, 0.8, 1. L2 names them (hidden, faint, subtle, light,…
Animation
Motion tokens — durations (0–500ms) and easing curves. L2 aliases give semantic names like `dur-fast` (100ms, state changes), `dur-normal` (150ms,…
Layout
Four single-purpose layout primitives covering ~80% of the spacing patterns we use: **Stack** (vertical, gap), **Cluster** (horizontal, gap, wraps) with…
Charts · 8
Hand-rolled SVG and pure CSS data viz — no charting library.
Charts
The data visualization suite — Stat, Sparkline, Bar List, Donut, Bar Chart, and Line Chart. All hand-rolled SVG (or pure CSS), no charting libraries, no…
Bar Chart
Categorical bar chart — vertical (default) or horizontal, single or multi-series, grouped or stacked. Hand-rolled SVG. Computes nice round-number axis ticks…
Bar List
Ranked horizontal bar list — top countries, top sources, top pages. Each row is a label + value with a proportional bar layer behind. Pure HTML/CSS — JS only…
Dashboard
A worked composition putting the whole Charts suite in context. Resizable shell with Tree navigation rail on the left, a stacked main column with a KPI strip…
Donut
Proportions chart. Hand-rolled SVG using same-radius circles with `stroke-dasharray` arcs and per-segment rotation. Configurable thickness (set thickness to 50…
Line Chart
Time-series chart — single or multi-series, line or area fill. Hand-rolled SVG. Reuses the same niceTicks helper as Bar Chart for round-number axis ticks.…
Sparkline
Inline mini chart — line, area, or bar — with no axes, no legend, no chrome. Hand-rolled SVG with a 100-unit viewBox so it scales fluidly to its host's CSS…
Stat
KPI primitive — label, big number, optional delta indicator, optional caption. Optional leading `.lb-stat__icon` in the label row (opt-in markup, aria-hidden,…
Components · 54
The working set, from form atoms to data tables, boards and media. Each page documents markup, variants, a11y and the JS API.
Accordion
Collapsible panels for progressively disclosing content. Use when you have grouped information that doesn't need to be visible at once — FAQ lists, settings…
Avatar
User or entity representation with image fallback to initials. Three sizes: small, medium, large. Use in user lists, comments, nav user-menus, chat messages.…
Badge
Compact status label, and the read-only counterpart to Chip — use `--default` for neutral non-status descriptors. Four variants: default (brand), success,…
Banner
Contextual message spanning the top of a section or page. Four status variants (info, success, warning, danger), three sizes (small, medium, large). Supports…
Breadcrumb
Hierarchical navigation showing the user's location in the app. Use when pages are nested three or more levels deep. The current page gets…
Button
Primary action trigger. Variants: primary (main action), secondary (alternative action, outlined), subtle/ghost (low emphasis), danger. Sizes: medium, small.…
Calendar
Event & booking calendar with three views (Month / Week / List) and two intents (browse / book). Sits in the data-viz family alongside Bar Chart and Stat —…
Card
Surface container for grouped content. Default is bordered with 24px padding. Variants: `--elevated` (shadow), `--interactive` (hover lift + brand border +…
Chat
AI Chat component set — Bubble, Thread, Composer, ToolCall, ConvList, ContextBudgetBar, AI Chat template, Artifact panel. letbe-ds ships chrome + layout +…
Checkbox
Binary or ternary selection control. Supports checked, unchecked, indeterminate, and disabled states. Use for multi-select lists, settings toggles (when a…
Chip
Compact, toggle-able tag. Unselected state uses the secondary action style; selected uses primary. Click to toggle selection; X icon appears when selected to…
Code Block
Styled code surface for snippets, configs, theme exports. Optional header strip with language label, filename, line numbers, opt-in regex highlighter for…
Color Picker
Saturation × value surface plus hue and (optional) alpha sliders. Below the picker: a HEX / RGB / HSL format toggle that swaps the bottom input row between a…
Command Palette
Global ⌘K / Ctrl+K launcher. Jump to any page, action, or setting without leaving the keyboard. Composes the List primitive in filterable mode for the command…
Counter
Numeric notification pill — the small bubble used by Tabs, Accordion, Calendar cells, and Button. Single component shared by all four hosts so the shape,…
Date Picker
Calendar date selection. Supports single-date and range modes; available inline or in a popover. Month/year navigation via custom selects. Use when the user…
Divider
Horizontal or vertical rule separating content. Use between logically distinct sections or between items in a list. Prefer whitespace over dividers when the…
Dropdown
Combobox input — type to filter, pick from a list. Use when the option set is large (>10 items) and the user knows roughly what they want. For small option…
Empty State
Reusable 'no data yet' placeholder for list views, search results, filtered tables, dashboards, inbox-zero screens, 404s, and error states. Slots: icon (48px…
File Uploader
Drag-drop zone + click-to-browse native input + uploaded-files list with progress bars and remove controls. Constraints: `data-lb-accept` (MIME/extension…
Flag
Country flag with optional code or name label. Uses the same vendored flag set as the Phone input (173 ISO-coded SVGs at `/assets/flags/`). Three sizes (small…
Footer
Site/app footer — pure CSS, no JS. Two flavors from one component: **marketing** (default: brand zone with logo + tagline + social row, 3–5 link columns,…
Forms
Layout primitives for building forms: `.lb-field` (single field wrapper, vertical default + `--horizontal` for label-left), `.lb-field-group` (semantic…
Header
Site/app navigation header (`LB.Header`) — one component covering three base compositions: **contained bar** (default, app-shell), **mega-menu** (categorized…
Input
Single-line text entry. States: default, focus, hover, disabled, error, success. Variants: password (with eye toggle), clearable (with X), search (with search…
Kanban
Kanban board vocabulary (`LB.Board`, Stage-5 item #2; the verified gap: no mainstream free design system ships one — it is a paid-tier item everywhere). The…
Link
Inline text link. Use for navigation between pages, external references, or in-paragraph actions that take the user somewhere. For actions that mutate state…
List
Shared primitive for option lists. Used internally by Select, Dropdown (combobox), MultiSelect, Menu, the Phone input country picker, and Datepicker month/year…
Media Player
Controls skin over a native `<audio>` / `<video>` element — letbe-ds owns the controls + layout, the playback engine stays native (attach hls.js / shaka-player…
Menu
Contextual popup list attached to a trigger button. Six patterns demonstrated: text+chevron trigger, kebab/icon-only trigger, user-account menu (avatar +…
Modal
Overlay dialog that blocks the page until dismissed. Three sizes (small / medium / large). Includes the **Alert Dialog** variant on the same page — focused…
Navigation
App-level navigation. Two variants — horizontal (top app bar with underline-marked active item) and vertical (sidebar with left-bar active marker, sectioned…
Pagination
Page-range selector for long lists. Use when you have more than 10–12 items that users need to browse rather than search. For open-ended feeds (social, news),…
Popover
Non-modal floating panel anchored to a trigger. Four positions: top, bottom, left, right. Use for quick supplementary info, tool panels, or simple actions that…
Progress
Linear progress indicator. Sizes: small, medium, large. Variants for success/warning/danger. Use for determinate progress (uploads, multi-step form progress).…
Radio
Single-choice selection from a group. Horizontal or vertical layout. Use when the user must pick exactly one option and you want all options visible at once…
Rating
Native radiogroup of icon items. Two modes: **cumulative** (default) — star-style 1→N fill for ordinal scales like product ratings; **select** — pick-one with…
Resizable
Splittable panel container — flex layout with auto-injected drag handles between adjacent panels. Horizontal (sidebar + main) or vertical (top + bottom).…
Scroll Area
Documented primitive for 'scrollable content block' — constrains height (or width via `--horizontal`) and hands rendering to the global thin-scrollbar styles.…
Segmented
Pill-style selector for mutually-exclusive choices in one visual unit — view modes, time ranges, sort orders, density presets. Visually and semantically…
Select
Dropdown for choosing one option from a predefined list. Use when you have a moderate number of options (5–30) and no need for filtering. For filtering, use…
Sheet
Side panel that slides in from an edge. Positions: right, left, top, bottom. Use for transient forms, filters, or detail views. Less dismissive than Modal —…
Skeleton
Placeholder shimmer for content loading states. Variants: text line, circular (avatar), rectangular (image/card). Compose to mirror the final layout. Use when…
Slider
Numeric value selection via drag handle. Sizes: small, medium. Use when values are continuous and the specific number matters less than the relative position…
Spinner
Indeterminate loading indicator. Three sizes: small, medium, large. Use for waits of unknown duration under ~5 seconds. For longer waits, pair with a message…
Stepper
Multi-step progress indicator for signup flows, checkouts, onboarding wizards, multi-part forms. Horizontal (default) or vertical (`--vertical`) layout. States…
Switch
Binary on/off toggle with immediate effect. Use for settings where the change applies instantly (notifications on/off, dark mode). For multi-step forms where…
Table
Semantic tabular layout for data-dense views — user lists, invoices, reports, admin panels. Cells are slots: drop any letbe-ds component (badge, avatar,…
Tabs
Switch between related views of the same data in a shared context. Supports label-only, label + count badge (for filters), label + notification dot, icon +…
Time Picker
Hours and minutes selector — implemented as a `data-lb-mode="time"` mode of the Date Picker so it shares dialog chrome, accessibility, keyboard handling, and…
Timeline
Standalone trim / playhead / ruler primitive — set an in/out window over a duration, with an auto-scaled time-axis ruler (M:SS.mmm under a minute, MM:SS under…
Toast
Brief non-blocking notification appearing bottom-right. Four status variants (info, success, warning, danger) plus `neutral` — the actionable/undo flavor: an…
Tooltip
Short hint that appears on hover or focus. Four positions (top, bottom, left, right) with directional arrow carets. Default 300ms delay on mouse hover…
Tree
Hierarchical list with expand / collapse, single-select, and full keyboard navigation. Markup-driven: `<ul data-lb-tree>` of `<li data-lb-node>` elements that…
Templates · 8
Composed screens built entirely from the components above — copy them as starting points.
AI Chat
AI-chat workspace TEMPLATE (Stage 5 opener; successor to the AI Chat template dashboard chrome) — pure composition, zero new components: `LB.Shell` frame…
App Shell
The dashboard skeleton (`LB.Shell`) — the 2026 "inverted L": full-height sidebar + content column whose topbar lives INSIDE the column (a nested header never…
Auth
Composed authentication TEMPLATES (screens, not primitives) — first entry of the Templates group. Six flows: **login**, **signup**, **forgot-password…
Data Table
The composed data-table VIEW (Stage-5 item #1; designed, token-driven, and framework-free). An admin screen, not a component: `LB.Shell` frame + toolbar…
Composer Dock
Workspace input module (S1 of the workspace-modules program) — mounts the existing `.lb-composer` (chips/attach/mic/send/model slots, all `LB.Composer`…
Inspector Panel
Right-rail detail/settings CONTENT pattern (workspace-modules S4) — song detail, object properties, issue panels, agent settings. Pure CSS anatomy: `__head`…
Library view
Media-library TEMPLATE (workspace-modules S3) — three modules on one canvas. **Toolbar Row** (`.lb-toolbar`): search (`.lb-input--has-start`) · filter button…
Playbar
Persistent bottom now-playing/status dock (workspace-modules S5) — three zones: `__now` (thumb + title/artist) · `__transport` (icon-btn buttons + scrubber…