Interfaces › Cheat Sheet

User Interface

-Use concentric border radius on nested elements.<br>-Align for optical alignment, not geometric alignment.<br>-Give images a 1px outline, offset by -1px: black at 8% opacity in light mode, white at 8% in dark mode.

Animation

-Never use transition: all, name the exact properties that change instead.<br>-Slightly scale down buttons to a value between 0.95 and 0.98 when pressed with transition: scale 200ms ease-out.<br>-Cross-fade icons when they swap. The entering icon scales 0.25 → 1, opacity 0 → 1 and blur 4px → 0px. The exiting one reverses the same animation.<br>-Use CSS transitions for interactions, because they can be interrupted. Use keyframes for sequences that only run once.<br>-Disable all transitions when changing theme from light to dark and vice versa.<br>-Use will-change only for properties that are actually changing. transform, opacity and filter.<br>-When you run into an issue with an element shifting randomly by 1-2px when animating, especially in Safari on iOS, add will-change: transform to the element.<br>-When animating entrance, stagger elements by group or by invidivual element. Stagger staged entrances by around 100ms.<br>-Don't animate high-frequency interactions such as color change of an item on hover in a list.

Typography

-Always use .woff2 on the web, never .ttf or .otf.<br>-Use font-variant-numeric: tabular-nums on every value that changes and in tables: timers, counters, prices, data columns. Skip if you're already using a monospace font.<br>-Cap long-form text at 60–75 characters per line.<br>-Use text-wrap: balance on headings, text-wrap: pretty on descriptions, neither in long-form text.<br>-Use overflow-wrap: break-word where long words, links or IDs can escape; white-space: nowrap on labels and badges.<br>--webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale once on the root, never per component.<br>-Store copy in natural case and control the presentation with text-transform.<br>-Smart punctuation: curly quotes, an en dash for ranges, an em dash for asides, the single ellipsis character.<br>-text-underline-position: from-font with text-decoration-skip-ink: auto, so underlines clear the descenders.<br>-Truncated text keeps the full value reachable in a tooltip or an expanded view.

Colors

-Every step in a color palette should have a purpose: page background, component hover, border, solid fill, body text. Don't add steps that nothing uses.<br>-Components should use semantic tokens (--color-text-secondary), never primitives (--blue-500). The primitive is the raw value, the token is how the value is used.<br>-Never name a token for its appearance or its first use: --color-accent-solid, not --color-blue-button or --color-sidebar-gray.<br>-Reserve accent for the brand color so primary never means both the brand and the main body text.<br>-Don't reuse a token from another role just because it's the right color. When that role's color changes your element changes with it, so add a token for the new role instead.<br>-Measure contrast against the background the element actually renders on, not the page background.<br>-Dark mode palette is not the light palette reversed.<br>-Pick one theme switching mechanism: prefers-color-scheme or a .dark class and use it for every token.<br>-You can define a gradient's interpolation space: use in oklab for even brightness, in oklch for more vivid middle tones or neither which falls back to sRGB with a classic muted midpoint.

Accessibility

-Use semantically correct native elements: for buttons, for links, never a plain when you can use a native element.<br>-Style :focus-visible; don't use outline: none without a replacement.<br>-Only use tabindex="0" and tabindex="-1" — positive values break the natural tab order.<br>-Give icon-only buttons a descriptive aria-label and never put aria-hidden="true" on a focusable element.<br>-Write alt text by purpose: alt="Search" on a search button, not alt="magnifying glass". Decorative images get alt="".<br>-Give every input a real , type and inputmode.<br>-Never block paste; people paste passwords and one-time codes.<br>-A tooltip on a disabled control never opens for keyboard or touch. Put the explanation in visible text next to it, or use aria-disabled="true" to keep the control focusable.<br>-Keep submit enabled until the request starts, then validate on submit: aria-invalid="true", aria-describedby pointing at the error, focus on the first invalid field.<br>-Use at least a 24x24px hit-area, 44x44px on touch and 40x40px on desktop where possible. Make sure extended hit areas never overlap.<br>-Use pointer-events: none on decorative elements like glows and gradients so they never swallow clicks meant for control.<br>-Put hover styling behind @media (hover: hover). On touch, :hover sticks after a tap and looks selected.<br>-Wrap motion in @media (prefers-reduced-motion: no-preference) so it only plays for people who haven't asked to reduce it.<br>-Use role="status" for routine updates and role="alert" only for urgent errors.<br>-For status changes add an icon,...