Foundation

Borders and dividers

Structure in Inline is drawn, not cast. One hairline weight carries every in-flow boundary, three quiet neutrals color the lines, and 2px belongs only to the yellow selection language.

Three widths

Three steps cover every line in the product. Hairline is the default boundary; emphasis never outlines a surface for importance.

None border.width.none · 0px

Spacing or a surface change carries the boundary

Hairline border.width.hairline · 1px

Default for cards, inputs, dividers, tables, menus

Emphasis border.width.emphasis · 2px

Selection language only, always a yellow step

State changes color, never width.

The hovered question card border moves from line to ink-300, the active one to ink-400, and both stay 1px. Nothing in the product thickens on hover or selection.

--inline-border-w-none: 0px;
--inline-border-w-hairline: 1px;
--inline-border-w-emphasis: 2px;

Line colors

Three neutrals cover every hairline: two decorative grays hint at structure, and border-strong serves boundaries a student must find. The draft name card from the compose flow carries all three.

Name this draft
Card boundaryline · #DFE0E2
Internal ruleline-soft · #ECEDEA
Input boundaryborder-strong · #707B8D
TokenHexUseContrast on paper
line#DFE0E2Card and component boundaries on paperDecorative, below 3:1
line-soft#ECEDEAInternal rules, table rows, dividers inside a bordered surfaceDecorative, below 3:1
border-strong#707B8DInput boundary when 3:1 is required3.95:1, UI pass

Divider recipes

A rule's reach tells the reader what it separates. Page regions get full-bleed rules, card rows get inset rules, and tables mix both.

Draft tools Rerun feedback

Full bleed

A page-level rule runs edge to edge. line

Draft 3Reviewed today
Draft 24 questions
Draft 1Brainstorm

Inset

Card rows divide at the content padding. line-soft

DraftQuestions
Draft 34
Draft 26

Table

Header rule line; body rows line-soft; none after the last row.

Space before borders.

Spacing rule 8 asks whitespace to carry the boundary first. A rule appears only when space is not enough, and two hairlines never stack.

Emphasis strokes

A 2px stroke is a Butter Yellow step that answers where the student is and what is selected, with one neutral exception: the progress rail's current-step ring, which marks position. Each stroke has one fixed recipe, shown here at product scale.

Argument Evidence Clarity
Active bar 2px brand-500

The debate turned on civic memory.

Active passage brand-200 · inset 0 −2px brand-700
Focus ring outline 2px brand-700 · offset 2
This note carries the fourth emphasis stroke.

The callout accent is a 2px brand-600 left border, the only 2px line that marks content rather than selection.

The dashed exception

Dashed has exactly one job: the empty region that invites a draft. Dotted never ships.

Drop your draft here or paste it into the editor
Do reserve the dashed hairline for the one empty region that invites an upload. It is an input, so it uses border-strong.
03

Which sentence carries your main claim?

Don't draw an in-flow card with a dashed or dotted line. If content exists, the boundary is solid.

Rules

The line vocabulary stays small so every border keeps a readable job.

  1. Draw structure with hairlines. The default boundary is 1px line; shadow and fill never substitute for a border.
  2. Use space before borders. Add a rule only where whitespace cannot carry the boundary.
  3. Never stack two hairlines. When a divider meets a card edge or another rule, keep one line.
  4. Keep line-soft inside. Interior rules stay quieter than the line boundary that contains them.
  5. Give inputs border-strong. A boundary the student must find reaches 3.95:1 on paper.
  6. Reserve 2px for selection. Focus, the active passage, the active bar, and the callout accent; never decoration.
  7. Dashed means drop zone. One empty region inviting an upload; dotted never ships.
  8. Reject local values. No 1.5px, no 3px, no new grays, and no colored hairlines outside the tokens.