Responsive

Farn defines two breakpoint reference values as tokens: --breakpoint-mobile (640 px) and --breakpoint-tablet (768 px). CSS custom properties cannot be used inside@media conditions directly, so the tokens act as the canonical reference — every media query in the codebase is annotated with the corresponding token name in a comment so the connection is always visible and a project-wide search finds all breakpoint usage immediately.

Breakpoint scale

Two breakpoints divide the design space into three layout zones. Layouts are designed for the widest context first and collapse inward at each threshold.

Usage pattern

CSS custom properties are not supported inside @media (...) conditions by any browser. Instead, write the literal pixel value and add an inline comment naming the token. This keeps media queries greppable and ties each one back to the token system without requiring a build tool.

/* ✓ correct — literal value + token annotation */
@media (max-width: 640px) /* --breakpoint-mobile */ {
  .grid { grid-template-columns: 1fr; }
}

/* ✗ incorrect — custom properties do not work in @media */
@media (max-width: var(--breakpoint-mobile)) { ... }

When you add a new media query, search for --breakpoint-mobile first to see how existing rules are written, then follow the same comment pattern.

Reflow in action

A three-column card grid that collapses to a single column at 640 px. Resize the browser to see the transition at the --breakpoint-mobile threshold.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-md);
}

@media (max-width: 640px) /* --breakpoint-mobile */ {
  .grid { grid-template-columns: 1fr; }
}

Reflow-by-content

Before reaching for a breakpoint, lean on intrinsic sizing: flex-wrap,auto-fill/auto-fit grid tracks, and min-width: 0 on flex children often reflow naturally without a media query. Breakpoints should express a deliberate layout intent — switching from two columns to one, collapsing a nav drawer — not patch visual overflow or spacing accidents.

The example below uses auto-fit with a minmax track to reflow without any media query at all:

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
}

Heading and body sizes use clamp() to scale fluidly between breakpoints without any media queries. See Styles › Typography for the full type scale and clamp values.