FoundationsBorders & lines
Two line tokens. Three widths. The rest is the components' job.
The system has exactly two line colors and three widths. Components compose those tokens to make their own borders; they don't invent new ones.
The two line colors
Both line colors are 8% and 16% black on the warm-neutral background. They are not the same as the foreground or muted tokens because they are different in role: a line is a structural element, not text.
Inside-card dividers, table row borders
rgba(26,24,22,0.08)
Card borders, section dividers
rgba(26,24,22,0.16)
The three widths
| Width | Use |
|---|---|
| 0 | None |
| 1 px | Default. Inputs, cards, table cells, table column dividers |
| 3 px | Accent. Do/don't callouts, alerts |
The lines in code
:root {
--line-subtle: rgba(26, 24, 22, 0.08);
--line-strong: rgba(26, 24, 22, 0.16);
--border: #DDD7CE;
}
.ds-card { border: 1px solid var(--line-strong); }
.ds-callout { border-left: 3px solid var(--foreground); }
.ds-dont { border-top: 3px solid var(--destructive); }What goes where
| Where | Use |
|---|---|
| Card outline | 1 px --line-strong, radius 4 px |
| Table row border | 1 px --line-subtle, no horizontal padding compensation |
| Section divider | 1 px --line-strong, no background |
| Form input outline | 1 px --border, focus → 1 px --foreground |
| Do / Don't accent | 3 px --foreground or --destructive |
| Callout left bar | 3 px --foreground |
Why only two colors
A line is supposed to be invisible at first glance — you see it only when you're looking for the structure. The two tones (8% and 16% black) are far enough apart to be distinct on a 1 px border, but neither is loud enough to draw the eye. A third tone would be tempting (a 12% to use as a "middle"), but the third tone would force every component to make a decision between two adjacent values that read identically. Two values means a component picks the right one without a coin flip.