Foundations
Color, type, spacing, shape, motion and states: the values and the rules for using them.
- ColorThe surface, text, line and role colors, what each color means, and the contrast they guarantee.
- TypographyThe two typefaces, the type scale and where each style is used, and the casing rules.
- Spacing and sizingThe 4px spacing grid, hit targets, control and row heights, avatar sizes, header heights and layout widths.
- AlignmentWhat lands on a margin or a center line — the shape, the letter or the icon box — and how the icon buttons at the ends of a top bar mirror each other.
- ShapeThe five radii, the two stroke widths, and why nothing is attached to the edge of a rounded container.
- ElevationWhich things float and cast a shadow, how popups are positioned, and the focus ring.
- MotionThe durations and easing for press, hover, slides and avatar changes, and the rule that status never animates in a loop.
- StatesHow hover, press, focus, selection, unread, disabled, error and busy look, shared by every component.
- IconographyThe icon set, its stroke and color, the icon sizes by context, and what is not an icon.
- BrandHow much of the brand each kind of page may use, and the rules for the logo and the drawn reactions.
- Dark modeWhat changes in dark mode, what stays the same, and the die-cut edge that every sticker gets.
- WritingThe rules for the words inside Raft products — casing, voice, how agents are named and what a button, its dialog and its confirmation say.