Visual hierarchy

Principles

• Build structure with planes first. Tone and spacing divide a screen before any line or shadow does.
• Raise only what overlaps the work. Elevation means "on top for now", so static content such as cards and charts stays flat.
• Draw a line only where planes can't separate. A line marks a control's edge or a meeting of same-tone areas.
• Keep points for content. Bold labels, icons, and colored text can't stand in for a plane, a heading, or spacing.
• Never nest a card in a card. Inside a plane, separate content with spacing and headings.

Hierarchy order

Four tiers build a screen, heaviest first. A plane changes the whole screen, and a point changes one word. Reach for the next tier only when the one before can't do the job.

1. 1Plane

   Divides the screen into regions by tone.

   --surf-chrome--surf-canvas--surf-surface--surf-selected

2. 2Elevation

   Lifts what sits over the work for now.

   --surf-shadow-float--surf-shadow-sheet--surf-layer-popup

3. 3Line

   Marks a control's edge, or splits same-tone areas.

   --surf-control-border--surf-line--surf-menu-border

4. Aa

   4Point

   Carries the content: type, icons, and badges.

   --surf-ink--surf-ink-muted--surf-brand-ink--surf-size-icon-default

Step-by-step build

This workspace uses real components. Each step turns on one more tier through its tokens, inside this preview only.

Planes

• Use the roles by depth: --surf-chrome for the frame, --surf-canvas for the sheet, --surf-surface for a secondary area, and --surf-selected for the current item.
• Neighboring roles differ by at least 1.05:1, enough to read as regions without a line.
• Keep one surface level inside the sheet.
• Inside that level, a track, a read-only value or a tab list takes --surf-recessed, which turns to the canvas on a surface, so it still shows.
• Inset a nested plane equally on all sides, with the radius max(0, outer radius − inset).
• Blur the screen to check: the regions should still read from tone and spacing alone.
• Forced colors flatten every plane to Canvas, so cards, surfaces, toolbars and menubars draw a 1px CanvasText edge there.

Elevation

• Floating UI takes --surf-shadow-float with its --surf-layer-* token. A shadow without its layer misreports what is on top.
• The only resting shadow is --surf-shadow-sheet, a hairline between the sheet and the frame.
• Menus, popovers, selects and toasts float on the tone of the page, so they keep an opaque --surf-menu-background and a 1px --surf-menu-border: shadows fade in the dark theme and vanish in forced colors.
• Dialogs, sheets and drawers sit on a backdrop that already sets them apart, so they take no line. Forced colors draw their edge.

Lines

• --surf-control-border marks inputs, selects, checkboxes, outline buttons, toggles and icon buttons. As the one line with meaning, it meets 3:1 against its plane (WCAG 1.4.11).
• --surf-line is decorative: section dividers, and the edge where fixed chrome meets same-tone scrolling content.
• Don't box what tone or spacing already separates. Table rows part by spacing, and hover and selection fill them. Only a wide table with many columns takes the lined or grid variant.
• Don't mark status with a one-sided accent border. Use a label and an icon.

Points

• Rank points by type role and ink, not decoration: --surf-ink, then --surf-ink-body, then --surf-ink-muted.
• Spend small saturated points, such as badges and status dots, on status, the current location, and the primary action.

Related

• Layers — Sets the stacking order of app chrome, dialogs, popups, and tooltips.
• Color — Defines color roles, contrast minimums, and how palettes are built.
• Typography — Sets typefaces, type roles, line length, and Korean text rules.
• Interaction states — Defines how controls show hover, press, focus, selection, and pending work.