LA UI Design System
This CSS style guide documents the approved patterns for app UI, especially Django apps. It shows the components, usage rules, and markup developers should copy.
Use this as the shared UI library for apps. Change client branding through tokens. Keep component markup and class names stable unless the system needs a new component or style class.
How to use this
- For a new client, change token values and product text first.
- Pick the component that already exists here.
- Do not create page-only variants unless the pattern belongs in the system.
File import order
@import url("./foundation/tokens.css");
@import url("./foundation/base.css");
@import url("./layout/shell.css");
@import url("./components/navigation.css");
@import url("./components/buttons.css");
@import url("./components/cards.css");
@import url("./components/forms.css");
@import url("./components/tables.css");
@import url("./components/feedback.css");
@import url("./components/workflow.css");
@import url("./components/charts.css");
@import url("./utilities/utilities.css");Foundation
Components
04
Navigation
Sidebar nav, section groups, and active link states
05
Save
Cancel
Buttons
Primary, ghost, danger, icon, and button row variants
06
Cards
Info cards, panels, split layouts, and linked card variants
07
Forms
Inputs, selects, checkboxes, radio groups, and form layout
08
Tables
Data tables, sortable headers, filters, and empty states
09
Active
Done
Feedback
Badges, alerts, toasts, empty states, and progress
10
Workflow
Step indicators, progress trackers, and status flows
11
Charts
Bar charts, horizontal bars, donut rings, sparklines, and legends