Layout
Spacing is Tailwind’s 4px scale in every theme. Radius, shadows, focus and
motion belong to the theme. Each is a feel token, so a part writes
rounded-md or shadow-float and the theme decides the number. This page
opens on neutral, the app’s and the console’s look; pick tempio above for
the site’s.
neutral | tempio | |
|---|---|---|
| Radius | Follows a control’s height: 6 at 16 and 20px, 8 at 28, 9 at 32, 12 for cards, menus and a dialog’s inner panel, 16 for the dialog’s frame and board columns, 30% for tiles and logos. Every step is a fixed value measured off Attio. | 2xs, sm, chip, md, lg, xl and tile derive from --radius (0.625rem, the shadcn vega preset’s, since 2026-10-10). xs, 2xl, 3xl and 4xl are fixed at 0.125rem, 1rem, 1.5rem and 2rem. |
| Surfaces | Part by shadows and 1px inset rings; a card carries a ring and no shadow | The shadcn vega look the parts drew before the feel existed |
| Focus | A 1px --ring outline at a 1px offset | A 2px --ring outline at a 2px offset |
| Menus open over | 80ms | 100ms |
| Dialogs and ⌘K open over | 60ms | 100ms |
| A nav row’s hover | 160ms | 150ms |
| A button’s hover | 200ms, and a pressed button stays put | 150ms, and a pressed button drops 1px |
| Attention-grabbing motion | Not a rule of this look; loaded content replaces its loading state in one frame | At most one element per viewport |
Focus reads --theme-focus-width and --theme-focus-offset, and the four
durations are duration-fast, duration-instant, duration-nav and
duration-hover. The Feel table on
the DESIGN.md page lists every duration and easing.
In both themes, prefers-reduced-motion collapses all animation (see
styles/base.css).
Radius steps
Changing --radius in brand.json moves tempio’s seven derived steps and
leaves its four fixed ones where they are. Each specimen prints the value the
theme on the switcher gives it, and the parts it was measured on under
neutral.
rounded-2xscalc(var(--radius) - 8px)Under neutral: Stage-bar segments, a tab’s underlinerounded-xs0.125remUnder neutral: 14px badges, small kbd chipsrounded-smcalc(var(--radius) - 4px)Under neutral: 20px buttons, 16px badges and checkboxes, skeleton barsrounded-chipcalc(var(--radius) - 3px)Under neutral: 22px tag chipsrounded-mdcalc(var(--radius) - 2px)Under neutral: 28px buttons and chips, menu items, tooltips, toastsrounded-lgvar(--radius)Under neutral: 32px buttons, fields, nav rowsrounded-xlcalc(var(--radius) + 4px)Under neutral: Record chips, the segmented control, the peek sidebarrounded-2xl1remUnder neutral: Cards, menus, popovers, a dialog’s inner panelrounded-3xl1.5remUnder neutral: The bulk action barrounded-4xl2remUnder neutral: A dialog’s frame, ⌘K’s frame, board columnsrounded-tilecalc(var(--radius) - 2px)Under neutral: Object tiles, logos, the workspace avatar
Shadow set
Each shadow on a sample surface, with the parts that wear it under
neutral. Hover a specimen for its light and dark values.
shadow-controlUnder neutral: Secondary and outline buttons, tooltipsshadow-primaryUnder neutral: Primary buttonsshadow-floatUnder neutral: Menus, popovers, toasts, the bulk bar, a dragged cardshadow-modalUnder neutral: A dialog’s outer shadow, which shadow-frame carriesshadow-panel-ringUnder neutral: A dialog’s inner panel ring, which shadow-frame carriesshadow-card-ringUnder neutral: Board and kanban cards, and a table's cards on a phoneshadow-chip-ringUnder neutral: Sort and filter chipsshadow-badge-ringUnder neutral: Count badgesshadow-kbd-ringUnder neutral: Kbd chipsshadow-segmentUnder neutral: The segmented control’s active segmentshadow-pinned-columnUnder neutral: A table’s first column, once the table scrollsshadow-frameUnder neutral: Dialogs, alert dialogs, the note editor and the task composer, each one box with the frame’s shadow and the panel’s ring