Patterns

Interaction states, composition patterns, and accessibility guidelines. Every interactive element follows one of these five patterns.

Interaction states

Five patterns. Every interactive element uses one. No exceptions.

1. Sand fill

Selected toggles, filters. Background: var(--n400).

import { ACTIVE_SAND } from '@ramtt/ui'
// bg-[var(--n400)]
2. Underline

Tab navigation. 2px bottom border in --n1150.

import { ACTIVE_UNDERLINE } from '@ramtt/ui'
// border-b-2 border-[var(--n1150)]
3. White lift

Card hover. Background shifts from var(--n50) to white.

Hover this card

import { WHITE_LIFT } from '@ramtt/ui'
// hover:bg-white
4. Black fill

Primary CTA only. Never for navigation or toggles.

import { ACTIVE_ACCENT } from '@ramtt/ui'
// bg-[var(--accent)] text-white
5. Sand hover

Rows, ghost buttons. Hover background: var(--n200).

import { HOVER_SAND } from '@ramtt/ui'
// hover:bg-[var(--n200)]

Focus ring

Box-shadow technique. 2px ring in --n1050 on :focus-visible only.

import { FOCUS_RING } from '@ramtt/ui'
// focus-visible:shadow-[0_0_0_2px_var(--n1050)] focus-visible:outline-none

// For compound inputs (container gets ring when child is focused):
import { FOCUS_WITHIN_RING } from '@ramtt/ui'

Cursor

cursor: default everywhere.

cursor: default — everywhere, including buttons and links

cursor: text — text inputs only

cursor: grab/grabbing — drag handles only

Never use pointer cursors.

Transitions

The 'all' shorthand is banned. Always specify exact properties.

import { TRANSITION } from '@ramtt/ui'

TRANSITION.colors      // transition-colors duration-150
TRANSITION.background  // transition-[background-color] duration-150
TRANSITION.opacity     // transition-opacity duration-150
TRANSITION.transform   // transition-transform duration-150

Text selection

Warm selection color using --n1050. Set globally in tokens.css.

Select this text to see the warm selection color.

::selection {
  background-color: var(--n1050);
  color: var(--n50);
}

No decorative shadows

RAMTT is flat. Shadows are only used for focus rings and validation rings.

Cards separate by border only (0.5px --n400).

Modals use ::backdrop with blur, not shadow.

Dropdowns and toasts rely on border/color contrast.