Kina.ai
Menu

Design · Actions

Actions

Controls are pills. Primary is Pelorous. Ghost sits in chrome. Chips are facts, not links. The live masthead and footer on this page are the chrome specimens.

Buttons

Primary, default, ghost, destructive

.action is the default surface. .action-primary is the one filled control on a page. .action-ghost is reserved for chrome controls, such as theme and menu. It appears below only as a reference specimen.

Current statusBrowse examplesGhost specimen
.action-primary
Pelorous fill, action ink. One per cluster.
.action
Elevated fill, hairline border, body ink. Secondary path.
.action-ghost
No border, muted ink. Chrome controls only; shown above for reference.
.action-danger
Error-colored boundary for a destructive operation. Keep the label explicit and require confirmation when the result is difficult to reverse.
disabled / aria-busy
Use native disabled when no interaction is available. Keep a busy button enabled only when the operation can be cancelled or safely repeated.

Semantics

Links go somewhere; buttons do something

Navigation

Use a link with .action when activating it changes the URL or moves to another document.

Operation

Use button type="button" for toggles, dialogs, dismissal, and local state changes.

Submission

Use button type="submit" only inside a form with an explicit submission contract.

Chips

Facts, not controls

A chip states a constraint. It does not navigate. IBM Plex Mono, step−2, pill.

Phase 0 spec completePhase 1 compiler emits MLIRStoryLM-0 is a forward graph

Icon policy

Text first, symbols only when established

The site has no decorative icon set. Controls keep visible text labels. Use a familiar symbol only as a compact supplement, hide decoration with aria-hidden, and give an icon-only control an explicit accessible name.

Preferred

Current status · Browse examples · Dismiss notification

Compact exception

The toast uses a visual × with aria-label="Dismiss notification" on the button.

Chrome

Masthead and colophon

Do not restyle these per page. The skip link, brand, primary nav, theme switch, and footer already sit on every route — including this one.

Skip

.skip

Hidden until focus. Targets #content. Ink on canvas, inverted.

Brand

.brand

Kina.ai in the masthead. The suffix is Pelorous.

Nav

.nav / .menu / .panel

Desktop row from 48rem. Below that, a details menu opens the panel. Current-page state comes from aria-current.

Theme

ThemeSwitch

Ghost action with a stable Dark label and aria-pressed. The pressed state adds a boundary and primary wash. The live control is in the masthead.

Footer

.colophon

Plex Mono step−2, muted. Reminds the visitor this is a research language site.

.nav
The primary link row shown at 48rem and wider.
details.menu
The native disclosure below 48rem. Its summary uses the ghost-action treatment.
.panel
The anchored mobile surface containing the same primary links and the live theme switch. The masthead above is the responsive specimen.