Uses "t-shirt" sizes xxs, xs, sm, md, lg, xl and xxl instead of increments of 4px. We only use a few common spacings, and otherwise typically rely on many one-off values.

Text Size

Uses "t-shirt" sizes xxs, xs, sm, md, lg, xl and xxl to match our type scale.

Line Height

The text size atoms also apply a line-height with the same value as the size, for a 1:1 ratio. tight and normal are retained for use in the few places where we need leading.

Atoms #

An (mostly-complete) set of style definitions that match Tailwind CSS selectors. These are static and reused throughout the app.

import { atoms } from '#/alf'

<View style={[atoms.flex_row]} />

Theme #

Any values that rely on the theme, namely colors.

const t = useTheme()

<View style={[atoms.flex_row, t.atoms.bg]} />

Breakpoints #

Web and native use the same width thresholds: gtPhone at 500, gtMobile at 800, and gtTablet at 1300. On native, these follow the current app window, not the device's screen or model. A compact tablet window stays below gtMobile; the same device in a wider window can show the sidebar. Rotation, Split View, and window resizing can cross these thresholds.

Width does not imply mouse or hover support: keep touch actions available on native tablets even when gtMobile is true.

useLayoutBreakpoints().rightNavVisible stays false on native because the native shell has no right rail. Feed modules that move into that rail on web must remain in the native feed.

const b = useBreakpoints()

if (b.gtMobile) {
  // render tablet or desktop UI
}

Native contained surfaces can provide BreakpointWidthContext with their measured width. Dialogs and the composer do this so their children respond to the sheet's available space, not the window behind it. UIKit size classes separately control popover-to-sheet adaptation; they are not layout breakpoints.