Surfaces

Graphite cards, rounded corners, no shadows: depth comes from shades of grey. Sections and containers give the page its rhythm.

Cards with a watermark

Instead of icons in bordered badges, a card can carry a very large, thin icon half out of its corner. Almost invisible at rest, it takes the accent on hover. Use it for unordered lists, like pillars or features.

Sober

Lots of black, a single accent, nothing shouting.

Thin

A light typography that carries the page on its own.

Alive

Interactions you notice without being distracted.

TSDemo.tsx

<Card watermark={<CompassIcon />} padding="lg">
  <Heading as="h3" size="md">Sober</Heading>
  <Text>Lots of black, a single accent, nothing shouting.</Text>
</Card>

Two tones

To set two parallel blocks apart, give one of them the alt tone rather than an inverted white card.

For organizations

Default card, graphite surface.

For field agents

Alt tone, one step lighter.

TSDemo.tsx

<Card padding="lg">…</Card>
<Card tone="alt" padding="lg">…</Card>

Clickable cards

Render the card as a link with as, and add interactive: the background lightens slightly on hover and the focus ring shows for keyboard users.

Install

Compose

Publish

TSDemo.tsx

<Card as={Link} href="/install" interactive>
  <StepNumber n={1} />
  <Heading as="h3" size="sm">Install</Heading>
</Card>

Prop	Type	Default	Description
`as`	`ElementType`	`"div"`	Rendered element or component.
`tone`	`"default" \| "alt"`	`"default"`	alt: a slightly lighter grey, to tell two side-by-side blocks apart.
`padding`	`"none" \| "sm" \| "md" \| "lg"`	`"md"`	20, 28 or 32–40 px.
`interactive`	`boolean`	`false`	Lightens on hover, for cards that are links or buttons.
`watermark`	`ReactNode`	–	Large decorative icon, half out of the top-right corner; takes the accent on hover.

Inset sections

With inset, a section becomes a large rounded graphite card, a few pixels from the screen edges: the “magazine” effect, for calls to action and banners.

Ready to start?

An inset section: the page breathes around it.

TSDemo.tsx

<Section inset spacing="lg">
  <Container size="narrow" style={{ textAlign: "center" }}>
    <Heading>Ready to *start*?</Heading>
    <Text size="lg">An inset section: the page breathes around it.</Text>
    <PillButton solid>Install trc-ui</PillButton>
  </Container>
</Section>

Prop	Type	Default	Description
`as`	`ElementType`	`"section"`	Rendered element or component.
`spacing`	`"none" \| "sm" \| "md" \| "lg"`	`"md"`	Vertical padding: 48, 72–96 or 96–128 px.
`inset`	`boolean`	`false`	Turns the section into a large graphite card, 8–16 px from the screen edges.

Container

Centers the content within a max width, with side gutters that grow with the screen (16, 24 then 40 px).

<Container as="main">…</Container>
<Container size="narrow">…</Container>  {/* 768 px */}
<Container size="wide">…</Container>    {/* 1600 px */}

Prop	Type	Default	Description
`as`	`ElementType`	`"div"`	Rendered element or component.
`size`	`"narrow" \| "default" \| "wide"`	`"default"`	Max width: 768, 1280 or 1600 px. Gutters grow from 16 to 40 px with the screen.