Image-top card
Use fixed aspect ratios for aligned card grids.
Living Styleguide
The Luminor design system is built for long-lived applications with strict correctness and consistency requirements. Use this page as the production source of truth for tokens, component states, and composed interface components.
01 - Design Principles
Consistency at scale
Use semantic classes and shared templ components instead of one-off utility stacks in page templates.
Accessible by default
All interactive patterns require visible focus, sufficient contrast, and predictable semantics.
Composable architecture
Build pages from atoms, molecules, and organisms so teams can evolve the UI without visual drift.
02 - Tokens
Color Ramps
Primary
Accent
Stone
Spacing and Radius
Use `lmn-card`, `lmn-button-*`, and `lmn-form-*` primitives to enforce spacing and radius rhythm.
Elevation and Motion
Use semantic wrappers (`lmn-card-hover`, `lmn-stat-card`) for hover and elevation instead of custom shadows and transforms.
03 - Typography
Display Heading
Gradient Display Heading
Section Heading
Subsection Heading
Write body copy with clear reading rhythm. Add inline semantic links such as this example link only when the destination adds value.
Secondary metadata and helper text should remain concise.
"Consistency is a product feature. A styleguide only works when implementation and documentation stay in lockstep."
- Prefer semantic classes over ad-hoc visual utilities.
- Use component wrappers for repeated components.
- Preserve dark-mode parity for every showcase item.
04 - Action Matrix (Links and Buttons)
Buttons
Links as Buttons
Buttons as Links
05 - Forms
Form Elements and States
Please provide a valid value.
Simple Form
Complex Form
06 - Card Archetypes
Simple Feature
Use for compact feature descriptions and low-density informational blocks.
Icon Card
Use icon-centered cards to communicate product capabilities quickly.
"The new UI language gives us consistency, confidence, and faster delivery."
- Product Team Lead
07 - Status, Badges, Alerts
Badges
Success Warning Info Error Neutral
Saved successfully.
Some values need review before submission.
A critical error occurred.
Informational update for non-blocking events.
Operation completed
All changes were persisted and synchronized.
Operation failed
The service returned an error. Please retry.
08 - Data Display (Table and Pagination)
| Name | Role | Status | Team |
|---|---|---|---|
| Jane Cooper | Regional Manager | Active | Operations |
| Cody Fisher | Project Owner | Pending | Product |
Showing 1 to 10 of 120 results
09 - Image and Media Compositions
Headline on full-bleed image
Apply a dark overlay to preserve readability and contrast across image variance.
Split layout: image left, content right
Alternate split compositions in narrative sections on content-heavy landing pages.
Property card variant
Suitable for inventory views and listing overviews.
10 - Composition Library
Marketing-oriented compositions
Hero Composition
Combine display typography, clear hierarchy, and explicit primary/secondary actions.
98%
Occupancy
500+
Managed Units
24/7
Support
Transparent Reporting
Clear, predictable metrics with narrative context.
Operational Reliability
Consistent service quality through reusable interface components and state handling.
Future-ready UX
Components scale across modules and teams without style drift.
"The styleguide let us scale new features without visual inconsistency."
- Engineering Manager
"Design reviews are faster because every component state is documented."
- Product Designer
Ready to ship consistent UI at scale?
Treat this styleguide as the implementation contract between design, engineering, and QA.
App UI composition: Casework Dashboard
Case FALL-2024-1847
In progress UrgentTenant communication, AI triage actions, scheduling, and resolution updates in one thread.
The heating stopped working overnight. It is very cold and we have a small child. Please help urgently.
Automatically classified as urgent maintenance and raised case priority based on risk signals.
Prepared empathetic response with immediate ETA, temporary safety guidance, and follow-up commitments.
Technician slots fetched: 10:00-12:00 (recommended), 14:00-16:00, tomorrow 08:00-10:00.
App UI composition: Incident Coordination Workbench
Incident FALL-2024-1835 · Water damage coordination
SLA risk Response window: 42m remaining
Priority High · multi-tenant impact
Water is dripping from the bathroom ceiling and getting worse.
Mapped unit relationship and linked 3A as potential source. Triggered parallel notification.
Temporary repair completed. Permanent fix scheduled after replacement part arrival.