Overlay primitive that coordinates native dialog behavior with shared overlay stack rules.
@threadlabs/looma
Default
Fellowship briefing
Content stays readable while the rim reveals the scene.
Everyday surface
A restrained lift for ordinary content.
Expressive surface
Finish, edge light, glow and the decorative rim.
Floating material
Adjust glass, separation and translucency with this open.
Palette
No suggestions.
Base colors
Action: Primary fill; readable labels and contextual action text are derived separately. Canvas: The ground behind surfaces. Surface: Fields, cards and floating surfaces. Text: Readable content; supporting text follows this and Surface.
Supporting accents
Optional second and third accents. Choose None inside a picker to leave it unset. Components use these only when that accent is chosen.
Use colors for
Choose the accent for selected rows and choices.
Choose the accent for keyboard focus rings.
Choose the accent for inline Text links and editor links.
Neutrals & borders
Derive restrained neutrals from text, an accent family or an untinted gray. Shared border contrast and readable labels stay governed.
How much neutral pigment appears in quiet filled controls. Borders remain shared with fields.
Minimum border-to-surface contrast for outlined buttons and form fields, independent of text readability. 2:1 is the default; raise it for stronger boundaries.
Status colors
Choose a semantic hue, harmonize it with primary, or use a governed brand-accent family.
Choose a semantic hue, harmonize it with primary, or use a governed brand-accent family.
Choose a semantic hue, harmonize it with primary, or use a governed brand-accent family.
Choose a semantic hue, harmonize it with primary, or use a governed brand-accent family.
Coordinate derived status pigment, text and quiet tints with the primary accent. Brand mappings keep the chosen family intact.
0% cool, 50% original, 100% warm paper and ink; your brand hue stays independent.
0% quiet, 50% original, 100% vivid, coordinated across surfaces, actions and status colors.
How should the colors work together?
Light
Fellowship
There and back.
Second breakfast at nine.
Secondary accentTertiary accent
A supporting highlight
A category or feature can carry another accent while the main action stays primary.
Compare the same actions and fields at each size. Rhythm separates these groups and opens the lines of text; spacing adjusts the room between controls.
Small
Medium
Large
Grouped content
Frodo plans the journey. Sam brings lunch. A longer paragraph makes the line rhythm visible alongside the space between groups.
Motion
Shared feedback pace; floating transitions take proportionally longer.
How movement accelerates and settles.
X1Y1X2Y2
Motion preview
Replay shows the shared curve. The popover demonstrates it in a real component. System reduced-motion preferences are respected.
Sam has booked the quiet room. Frodo is bringing the maps.
Motion study
Export & save
Every export includes light and dark. Leave data-theme off the page to follow system preference, or set it to light or dark on the page or a section. Installation and mode guidance
