Card

Storybook

A family of card components used throughout the system

The base card handles previews and navigation links. Specialized variants like colour swatches, spacing swatches, and typography specimens are purpose-built for documenting tokens on the foundations pages.

Card

Button

Toggle switch

Card

Case study card

Shipping the northlight docs site in a weekend cover
Northlight

Shipping the northlight docs site in a weekend

How a fictional team assembled a docs site from the system's templates

Retheming an analytics product with one token file cover
Fieldnote

Retheming an analytics product with one token file

A fictional rebrand riding the primitive layer: swap the ramps, keep the semantics

Acme

Coming soon

This case study is still being written.

Acme

The cover slot takes any element

A cover node: the cover prop takes any element and fills the same slot coverSrc would

Entity card

home
settings
search
person
favorite
star

Colour swatch

Primary

Primitive--teal--07--
Hex#118AB2
RGB17 / 138 / 178

Secondary

Primitive--orange--07--
Hex#F4845F
RGB244 / 132 / 95

Background

Hex#050505
RGB5 / 5 / 5

Typography swatch

Heading 1
SemiBoldFont weight
36Font size
44pxLine height
-1%Letter spacing
Paragraph
RegularFont weight
16Font size
24pxLine height
0Letter spacing

Spacing swatch

SM8px
MD12px
LG16px
XS1px
tsx
// From the npm package
import { Card } from 'rift-ds/components/Card/Card';

// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/card.json