FairGarden Design

Spec Grid

The signature spec list: a boxless grid of cells, each topped by a hairline at column width, with a caps label over its value. Use it for an item's measurable attributes: a species' size and range, a product's dimensions.

import { SpecGrid, SpecGridItem } from '@fairgarden-private/design/components/SpecGrid'

Each SpecGridItem has an optional decorative icon and a muted caps label on its first line, with the value below it, flush under the icon. Units sit after a no-break space with the metric figure first: "28–34 cm (11–13 in)". The gutter equals the page margin, and there is no rule after the last row. The sheet carries no ornament.

At a glance

At a glance

The grid reflows on its own width, not the viewport's: 1 column below 360 px, 2 from 360, 3 from 768 and 4 from 1024. Without container queries it packs 160 px columns, capped at 4. estimated swaps the hairline for a dotted rule and adds "≈" before the value.

Length
28–34 cm (11–13 in)
Wingspan
≈ 55 cm (22 in)
Weight
70–90 g (2.5–3.2 oz)
Habitat
Wet meadows, marsh edges and slow streams
Diet
Insects in summer; seeds and berries in winter
Nesting
Cup nest in reeds, 1–2 m above water
Range
Eastern North America, north to Ontario
Status
Least concern
SpecGridGlance.tsx
import { SpecGrid, SpecGridItem } from '@fairgarden-private/design/components/SpecGrid'

/** An "At a glance" sheet: rule-topped cells, 1 to 4 columns by the grid's own width. */
export function SpecGridGlance() {
  return (
    <SpecGrid label="At a glance">
      <SpecGridItem label="Length">28–34 cm (11–13 in)</SpecGridItem>
      <SpecGridItem label="Wingspan" estimated>
        55 cm (22 in)
      </SpecGridItem>
      <SpecGridItem label="Weight">70–90 g (2.5–3.2 oz)</SpecGridItem>
      <SpecGridItem label="Habitat">Wet meadows, marsh edges and slow streams</SpecGridItem>
      <SpecGridItem label="Diet">Insects in summer; seeds and berries in winter</SpecGridItem>
      <SpecGridItem label="Nesting">Cup nest in reeds, 1–2 m above water</SpecGridItem>
      <SpecGridItem label="Range">Eastern North America, north to Ontario</SpecGridItem>
      <SpecGridItem label="Status">Least concern</SpecGridItem>
    </SpecGrid>
  )
}

In print

The grid prints 2-up. Its rules and dots print black at 0.75 pt, and cells never split across pages.

API Reference

SpecGrid

The spec grid. Put SpecGridItems inside. The gutter equals the page margin; there is no rule after the last row; cells never split in print.

PropTypeDescription
label
string | undefined

Accessible name for the list, e.g. “At a glance”, when no heading labels it.

primary
| 'ruby'
| 'olive'
| 'sage'
| 'slate'
| 'sand'
| 'gray'
| 'mauve'
| 'brown'
| 'bronze'
| 'gold'
| 'red'
| 'crimson'
| 'tomato'
| 'pink'
| 'plum'
| 'indigo'
| 'iris'
| 'violet'
| 'purple'
| null
| undefined

Primary Radix scale: rules, labels, icons and values. Never defaulted; omitted, it inherits the scope [D133].

secondary
| 'ruby'
| 'olive'
| 'sage'
| 'slate'
| 'sand'
| 'gray'
| 'mauve'
| 'brown'
| 'bronze'
| 'gold'
| 'red'
| 'crimson'
| 'tomato'
| 'pink'
| 'plum'
| 'indigo'
| 'iris'
| 'violet'
| 'purple'
| 'amber'
| 'blue'
| 'cyan'
| 'grass'
| 'green'
| 'jade'
| 'lime'
| 'mint'
| 'orange'
| 'sky'
| 'teal'
| 'yellow'
| null
| undefined

Secondary Radix scale: unused; the sheet carries no accents. Never defaulted.

SpecGridItem

One spec cell: icon and caps label on line 1, the value (type-body-ui) below, flush under the icon. Units sit outside the figure after a no-break space, metric in parentheses: “28–34 cm (11–13 in)".

PropTypeDescription
label
React.ReactNode

The caps label (type-label); author it in sentence case.

estimated
boolean | undefined

An estimated value: dotted top rule and a leading “≈". Don’t write the “≈” yourself.

icon
| 'menu'
| 'search'
| 'circle'
| 'arrow_forward'
| 'arrow_upward'
| 'expand_more'
| 'close'
| 'remove'
| 'add'
| 'check'
| 'chevron_right'
| 'chevron_left'
| 'more_horiz'
| 'play_arrow'
| 'pause'
| 'download'
| 'zoom_in'
| 'zoom_out'
| 'recenter'
| 'help'
| 'mail'
| undefined

A decorative data icon before the label (Material Symbols Rounded, inline tier, FILL 0). The label carries the meaning.

Additional types

specGrid
specGridCell

A spec cell; estimated swaps the hairline for a dotted --role-rule top rule.

type specGridCell = specGridCell
SpecGridItemProps

Props for SpecGridItem: div props, the label, an optional icon and the estimate flag.

type SpecGridItemProps = React.ClassAttributes<HTMLDivElement> &
  React.HTMLAttributes<HTMLDivElement> & {
    label: React.ReactNode;
    icon?:
      | 'menu'
      | 'search'
      | 'circle'
      | 'arrow_forward'
      | 'arrow_upward'
      | 'expand_more'
      | 'close'
      | 'remove'
      | 'add'
      | 'check'
      | 'chevron_right'
      | 'chevron_left'
      | 'more_horiz'
      | 'play_arrow'
      | 'pause'
      | 'download'
      | 'zoom_in'
      | 'zoom_out'
      | 'recenter'
      | 'help'
      | 'mail';
    estimated?: boolean;
  }
SpecGridProps

Props for SpecGrid: div props (the container) and the color axes.

type SpecGridProps = React.ClassAttributes<HTMLDivElement> &
  React.HTMLAttributes<HTMLDivElement> & {
    primary?:
      | 'ruby'
      | 'olive'
      | 'sage'
      | 'slate'
      | 'sand'
      | 'gray'
      | 'mauve'
      | 'brown'
      | 'bronze'
      | 'gold'
      | 'red'
      | 'crimson'
      | 'tomato'
      | 'pink'
      | 'plum'
      | 'indigo'
      | 'iris'
      | 'violet'
      | 'purple'
      | null;
    secondary?:
      | 'ruby'
      | 'olive'
      | 'sage'
      | 'slate'
      | 'sand'
      | 'gray'
      | 'mauve'
      | 'brown'
      | 'bronze'
      | 'gold'
      | 'red'
      | 'crimson'
      | 'tomato'
      | 'pink'
      | 'plum'
      | 'indigo'
      | 'iris'
      | 'violet'
      | 'purple'
      | 'amber'
      | 'blue'
      | 'cyan'
      | 'grass'
      | 'green'
      | 'jade'
      | 'lime'
      | 'mint'
      | 'orange'
      | 'sky'
      | 'teal'
      | 'yellow'
      | null;
    label?: string;
  }

Specification: DESIGN-SYSTEM.md §8.3 (key-value and spec lists) and §12.7 (spec sheet).