Surfaces and depth

Guide index · Color · Shape

Material character

Surfaces resemble dark graphite instruments: slightly lifted panels, cooler chrome and quiet near-black reading fields. Gradients are restrained tonal changes within the same material. There is no bloom, glass blur, noise, scanline, specular streak or animated lighting.

Use the same local gradient direction on related components. Do not add a radial spotlight behind each card or change hue from cyan to violet across a panel.

Authoritative surface recipes

surface.focus is the opaque lighter fill #52677E. Use it only for keyboard focus on a toggle, switch, checkbox, radio, or invalid field whose semantic edge must remain blue or danger-colored. It replaces the face without an outer ring; checks, dots, thumbs, and error text remain visible. Ordinary focus recolors the existing 1px contour cyan at 0 offset and leaves its face unchanged. This graphical fill exception does not apply to terminal cells.

Angles use CSS linear-gradient convention: 0° points up, 90° points right. Native renderers must match the resulting direction, not copy the angle into an incompatible API.

Recipe Stops and positions Use
Canvas Flat #080B12 Workspace background
Content #151E2C-> #101722-> #0D131D - 120° Stops: 0%, 55%, 100% Cards, panels, drawer body
Chrome #1C2738-> #182131-> #151D2B - 110° Stops: 0%, 55%, 100% App bar, toolbar, fixed footer and drawer header
Input Flat #0D131D Fields, code editor and long reading/input regions
Control #0D2545-> #0F1D31 - 110° Stops: 0%, 100% Enabled standard buttons and selected content tabs
Control hover #10294A-> #10223B - 110° Stops: 0%, 100% Hover over an enabled blue control
Control pressed #0B203B-> #0C192A - 110° Stops: 0%, 100% Held pointer/key activation
Neutral selection #293447-> #202B3B - 110° Stops: 0%, 100% Selected navigation/list context
Disabled Flat #101722 Disabled action or input
Semantic Flat matching semantic surface Status chip, notice or destructive button
Floating overlay Chrome recipe Menu, popover and dialog

The blue face is the same for primary and secondary standard buttons and the selected tab. Primary emphasis comes from a blue edge, weight and position, not a bright opaque fill. The normal secondary button has an essential neutral edge. Selected tabs have a blue top marker and quiet side edges.

Menu-row hover uses the opaque neutral chrome fill --menu-row-hover: #253247; it preserves text and glyph roles. Field hover changes only the essential edge to --field-hover-edge: #91A0B7. Semantic-edge focus uses the lighter --focus-fill: #52677E while retaining the semantic edge.

“Inactive” tabs are not blue controls; use the content recipe with secondary labels. Quiet/text actions have no face. Warnings and destructive actions keep their semantic colors.

CanvasFlat workspace
ContentCards and panels
ChromeToolbar plane
InputEditing field
ControlEnabled action
Control hoverPointer hover
Control pressedHeld activation
Neutral selectionNav/list
DisabledInactive control
SemanticPositive
SemanticWarning
SemanticDanger

Floating overlay

Menu

Chrome recipe · layer 3

Translucent appearance without transparency

Control values are final opaque colors. They evoke a low-opacity blue tint over graphite; they are not an instruction to set alpha on the whole component. Do not use actual backdrop blur or make text translucent. Opaque paint keeps the same result over cards, chrome and scrolling content.

Control colors are the opaque stops listed in the surface recipes table. Terminal equivalents use the same flat values.

Layers and elevation

Layer Plane Separation
0 Canvas Spacing
1 Reading content and cards Quiet contour; no shadow
2 Fixed/sticky chrome Opaque chrome and 1px divider; no shadow
3 Menu/popover Essential edge; optional shadow 0 8px 24px #00000066
4 Modal dialog Essential edge; shadow 0 16px 40px #00000080; scrim below
5 Tooltip Small chrome surface and essential edge

These are ordering roles, not z-index numbers to copy across nested stacking contexts. Sticky content stays above its body but below menus. A modal's focus and scrim isolate the background.

A modal scrim is flat black at 56% opacity. It is the intentional exception to opaque surface paint. Text, focus and dialog surfaces remain opaque. The terminal does not alpha-dim its underlying application: replace or cover the active region and suspend background interaction.

0 · Canvas — spacing

1 · Content — quiet contour

2 · Chrome — divider, no shadow

3 · Menu/popover

5 · Tooltip

4 · Modal dialog

Essential edge · dialog shadow · scrim below

Frames and decoration

Draw a single shape-conforming border with the subtle top-right hexagonal recess or popout defined in shape. Carry the existing quiet outline and surface material through the detail; do not add another accent color, floating badge or extra frame. The detail is decorative and does not indicate focus, selection or status.

Optional header accents are cyan, 48px long by 4px high, inset 16px from the leading edge; use one per major region, not every cell or toolbar slot. Keep these structural accents separate from borders; cyan borders represent focus only. Reserve a title area below the accent so it never strikes through text. Small plain panels can omit the accent. Square-profile controls such as tab headers use only their top-right cutout and do not acquire the separate hexagonal ornament.

A card on a content panel may share the same fill, separated by space and a quiet edge. Do not keep adding lighter “elevation” layers to every nested region. An editable field is darker than its containing card.

Major panel

48×4 cyan accent · hex recess

Small plain panel

8px cut · no accent

Content card

Shared fill · quiet edge · darker field

Input plane
revision: 8

Terminal equivalent

Flatten content to #101722, chrome to #182131, and inputs to #0D131D. Terminal controls retain their containing background with no state-owned cell fills. Primary actions are bold pale text in brackets; secondary actions use the essential edge color. Selected tabs are bold pale text with the square-profile endcap. Selection uses a persistent glyph on surface.content. Focus recolors only the label cyan, leaving the value unchanged and the selection glyph visible. Use the same semantic foregrounds. Gradients, shadows and alpha do not translate to repeated cell patterns. See terminal.