Content hierarchy
Sample title
Supporting text uses the body role and a readable measure.
Status labelSecondary information
Muted text, a divider and a status label demonstrate hierarchy without defining a product or workflow.
Brand system / Interactive specimens
Interface reference
Isolated examples of visual roles, control states and interaction behavior. This is a reference sheet, not a website or application design. The same rules can be adapted to web, desktop and other interfaces.
Applies to this reference only.
01 / Baseline theme
Dark components
Actions
44 px minimum control height
Default
Hover · shown
Active · shown
Focus · shown
Disabled
Loading · shown
Large · prominent call
Standard
Dense · fine pointer
Status · not a controlIn review
Status · denseIn review
Glass · dark theme over dark content
Glass · dark theme over light content
Glass · dark theme over busy content
Override · data-glass-tone="light"
Drag to turn the view. Scroll to zoom.
Drag to turn the view. Scroll to zoom.
Drag to turn the view. Scroll to zoom.
Drag to turn the view. Scroll to zoom.
Glass is opt-in for controls that float over busy or moving content. It keeps the theme's tone over any content: dark glass dims what is behind it and lowers its contrast, light glass brightens it, so text, icons and selection stay clear while the content still shows through. data-glass-tone forces a tone for a region; do not switch it with the content, which flickers in motion. The edge is a sheen of light caught by the rim, not a border. Without backdrop blur, with reduced transparency or in forced colours the same controls are solid.
Interactive preview only. Nothing is sent or saved.
Fields & selection
A persistent label with supporting text.
Use letters, numbers, and hyphens.
Error: remove the question mark.
A native select with a drawn chevron.
Dense fields use the ui type on a mouse or trackpad and the standard target and body size on touch.
Example filters
Tabs and action menu
The selected tab has a persistent indicator. Use arrow keys to move between tabs.
An action menu demonstrates anchoring, dismissal and confirmation behavior.
Raised surface / Secondary emphasis
Error
The action failed. Try again.
Warning
This change needs attention before continuing.
Saved
The action completed successfully.
Information
Additional context appears here.
02 / Baseline theme
Light components
Actions
44 px minimum control height
Default
Hover · shown
Active · shown
Focus · shown
Disabled
Loading · shown
Large · prominent call
Standard
Dense · fine pointer
Status · not a controlIn review
Status · denseIn review
Glass · light theme over light content
Glass · light theme over dark content
Glass · light theme over busy content
Override · data-glass-tone="dark"
Drag to turn the view. Scroll to zoom.
Drag to turn the view. Scroll to zoom.
Drag to turn the view. Scroll to zoom.
Drag to turn the view. Scroll to zoom.
Glass is opt-in for controls that float over busy or moving content. It keeps the theme's tone over any content: dark glass dims what is behind it and lowers its contrast, light glass brightens it, so text, icons and selection stay clear while the content still shows through. data-glass-tone forces a tone for a region; do not switch it with the content, which flickers in motion. The edge is a sheen of light caught by the rim, not a border. Without backdrop blur, with reduced transparency or in forced colours the same controls are solid.
Interactive preview only. Nothing is sent or saved.
Fields & selection
A persistent label with supporting text.
Use letters, numbers, and hyphens.
Error: remove the question mark.
A native select with a drawn chevron.
Dense fields use the ui type on a mouse or trackpad and the standard target and body size on touch.
Example filters
Content hierarchy
Sample title
Supporting text uses the body role and a readable measure.
Status labelSecondary information
Muted text, a divider and a status label demonstrate hierarchy without defining a product or workflow.
Tabs and action menu
The selected tab has a persistent indicator. Use arrow keys to move between tabs.
An action menu demonstrates anchoring, dismissal and confirmation behavior.
Raised surface / Secondary emphasis
Error
The action failed. Try again.
Warning
This change needs attention before continuing.
Saved
The action completed successfully.
Information
Additional context appears here.
Interaction reference
Motion with a purpose
Open, close and interrupt these examples. Content remains intact during exit. The preference above follows the system unless you choose otherwise.
Disclosure
Expand in place without hiding the keyboard focus.
Supplemental content stays in the document flow. Closing preserves this content until the animation finishes.
Read implementation guidanceTooltip
Focus appears immediately. Pointer hover waits briefly; Escape dismisses.
Supplemental explanation. Essential instructions also remain visible beside the control.
Completion
A brief confirmation accompanies useful status text. It never repeats to demand attention.
Activate to inspect completion feedback.
The action menus above demonstrate anchored entrance, exit and modal focus. Open and close quickly to test interruption. Read the motion specification.
Implementation notes
Applying the reference
Semantic first
Bind components to background, surface, text, action, and state roles. Both themes redefine every color role. Do not reuse a dark primitive as a light surface.
Visible & named
Pair status with words and a simple symbol. Keep links underlined. Disabled controls use the native disabled attribute and a clear label; never rely on reduced opacity alone.
Room to operate
Standalone controls use a 44 × 44 px house target, beyond WCAG 2.2 AA’s 24 × 24 px minimum and its exceptions. Inline text links remain within the reading flow.
<link rel="stylesheet" href="kits/cosmik/tokens/cosmik.css"> <link rel="stylesheet" href="kits/cosmik/components/controls.css"> <section data-theme="light"> <button class="c-button c-button--primary" type="button">Apply changes</button> <span class="c-select"><select aria-label="Order">…</select></span> </section> /* Load the baseline, then any family CSS from its brand-<product> repository, then controls.css and your own styles. Set data-family="<id>" on the family scope. */
Focus and timing use the kit tokens. Reduced motion removes spatial transitions and the loading pulse. In a real product, announce the start and completion of a pending action and restore its previous focus.
Buttons, links, selects, text fields, chips and the status label use the shared controls layer; tabs, menus, dialogs and layout are specimen-only. Product families load their own token CSS from their brand-<product> repository and keep these controls. See the validation scope and remaining checks.