Design guidelines
How a Luma app looks, reads and behaves: layout, spacing, type, color, icons, motion, accessibility and writing.
- Design principlesThe ideas behind every Luma app, what they mean in practice, and how the design guidelines are organized.
- Windows, title rows and islandsDesign guidance for the Luma window, the identity and title, the sidebar, islands, the details pane, bars, empty states and dialogs.
- TypographyFigtree, LumaUI's type roles and text styles, numbers, and how to keep text readable at every size and in every language.
- ColorLuma’s color tokens with their light and dark values, the Frost, Glass and high contrast treatments, how to use the accent and tones, and the rule against literal colors.
- Spacing and sizingA spacing scale for your own content, the window gutter, corner radii, control heights, touch targets, row heights and widths used across Luma.
- IconsDesigning your app icon for Luma’s tile, using Prairie’s Lucide-style symbolic icons, drawing your own symbolic icons in the right format, and sizes.
- MotionLumaUI’s motion tokens and easing, what should and should not animate, and how to honor reduced motion.
- AccessibilityThe accessibility requirements every Luma app meets, what LumaUI does for you, how to label custom widgets, and a test plan covering keyboard, screen readers, contrast, text size, motion and right-to-left.
- Writing styleHow Luma apps write: voice, capitalization, labels, buttons, menus, empty states, errors, confirmations, numbers and punctuation.