Skip to main content
Context GrammarContext-aware AI
intentfirst.ai

Design system contents

Radius and hairline

Structure is square and drawn in 1px hairlines. The one round shape is a control you pick, such as a chip; a dot marks a state.

  • Square

    --radius-0: 0px

    Card, field, panel

  • Round

    --radius-control: 999px

    Chip

  • Hairline

    --hairline: 1px

    Every border and rule

Usage

Do

  • Keep cards, fields and panels square, edged with a 1px hairline.

Don’t

  • Don’t round a container to make it feel friendlier.