The breakpoints

Name	Token	Min width	Range
sm	--jh-breakpoint-sm	512px	512–767px
md	--jh-breakpoint-md	768px	768–1023px
lg	--jh-breakpoint-lg	1024px	1024–1279px
xl	--jh-breakpoint-xl	1280px	1280px and up

Below 512px is the default (xs). There is no xs token.

Using them

• Write min-width queries, not max-width. Layout should stack by default and expand at a breakpoint.
• Change layout at a breakpoint, not visual style. Type, color, and spacing tokens are the same at every width.
• Don't add a breakpoint for one component. If a component needs to respond to its own container, use a container query.

In code

Media queries need the literal value. Custom properties can't be used in @media.

/* md and up */
@media (min-width: 768px) {
  .layout { grid-template-columns: 1fr 1fr; }
}

Use the custom property anywhere a length is allowed.

max-width: var(--jh-breakpoint-lg);

Read the values from the flat JSON export in JavaScript.

import tokens from '@jack-henry/jh-tokens/platforms/json/json-flat/jh-theme-light.json' with { type: 'json' };
const breakpoint = Object.fromEntries(tokens.filter(t => t.token.startsWith('jh-breakpoint-')).map(t => [t.type, t.computedValue]));

In Figma

The same four values are alias tokens in the v2 Forge Kit. Use them as frame widths when designing a layout at each size. Design the xs layout first.

Migrating

These replace per-app breakpoints. Move to the Forge values when you next touch a layout's media queries. Don't do a global find-and-replace.