Get started
All interface styles

Dark-native developer console

Designed dark first rather than inverted: low-chroma dark surfaces, tonal elevation instead of shadow, and monospace where precision matters.

Also called: dark mode, developer console, terminal-inspired, night UI

Your Design Kit keeps

Colors, typefaces, the spacing scale, motifs, and brand voice.

Dark-native developer console changes

Surface material, borders, shape, depth, component layout, states, and motion.

Dark-native developer console specimen

Base components
Customer health

Accounts at risk

Atlas workspace

On track

Renewal is due in 18 days. Weekly use is up and two seats were added this month.

Seats
24
Usage
+18%
Renewal
18 days
Priority
Open account12 min ago
Dark-native developer console applied
Customer health

Accounts at risk

Atlas workspace

On track

Renewal is due in 18 days. Weekly use is up and two seats were added this month.

Seats
24
Usage
+18%
Renewal
18 days
Priority
Open account12 min ago

Look for: Every surface here is a tonal step, not a shadow — count four distinct greys between the page and the card header. The data row uses tabular monospace numerals so columns align without a table.

Both panels use the same sample Design Kit and account screen. Only the interface style changes on the right.

Choose what to restyle

Select a scope to create a prompt for your coding agent. Start with one component family or apply the style across the interface.

Choose what the style should change
Apply Dark-native developer console to cards, panels, sheets, and modals only. Keep my Design Kit's colors, typefaces, and motifs. Leave navigation, forms, actions, and page structure unchanged. Show me one representative card first, then explain the accessibility trade-offs before changing the rest.
Paste this into your coding agent, then add any product-specific constraints.

What you see

The perceptual fingerprint, in the order you notice it.

  • Near-black surfaces that are tinted, never pure #000
  • Elevation shown by a lighter surface step rather than by a shadow
  • Monospace numerals and identifiers sitting inside proportional prose
  • Accent colour used sparingly, as signal rather than decoration
  • Thin low-contrast dividers marking dense regions

Best for

  • Developer tools, logs, consoles and monitoring surfaces
  • Data-dense screens used for long sessions in low light
  • Products whose audience already lives in a dark editor

Avoid when

  • The audience reads long prose — sustained body text is measurably harder light-on-dark
  • The brand's colour identity depends on light, airy surfaces
  • You cannot commit: a half-designed dark theme is worse than a good light one

Accessibility

Where this style tends to fail an audit, and what fixes it.

  • Pure white on pure black causes halation. Use `--foreground` at around 90% lightness on a surface near 8–12%, not the extremes.
  • Dark surfaces need bigger contrast steps between elevation levels than light ones do; 3:1 between adjacent surfaces is the floor, not a goal.
  • Saturated accents vibrate on dark. Desaturate the accent for dark surfaces rather than reusing the light-mode value.

Built for

The site archetypes this render grammar suits. Each opens the catalog on that lane.

Matching design kits

A style is a render grammar. A design kit supplies the colour, type and personality it paints.

Near-black canvases, hairline surfaces, mono accents, glowing data — fintech consoles, dev tools, dashboards, dark-native brands.

Implementation bundle

What an agent needs in order to actually build Dark-native developer console on top of your design kit — surface rules, per-component behaviour, responsive behaviour, fallbacks and QA.

Surface rules

The declarations that make the render grammar, stated as CSS.

  • Surface ramp: page `--background`, panel `--card`, raised `--muted`, each at least 3% lightness apart and all carrying a slight hue from `--primary`.
  • No shadows for elevation. `box-shadow` is reserved for overlays that must detach from the page, and then only as a large soft ambient.
  • Dividers: `1px solid hsl(var(--border))` at low contrast, used to group dense rows rather than to outline components.
  • `--font-mono` with `font-variant-numeric: tabular-nums` for all identifiers, counts, timestamps and metrics.
  • Radius 6px on panels, 4px on controls — small radii keep dense screens from looking soft.

Component rules

Nav, action, input, selection, card and status, one rule each.

  • Nav is a fixed-height bar on `--card` with the active item marked by a 2px `--primary` left or bottom rule plus a lightness step.
  • Primary action: solid `--primary` with `--primary-foreground`; hover raises lightness rather than adding a shadow.
  • Inputs sit on the DARKEST surface (`--background`) inside a lighter panel — recessed reads correctly in dark, raised does not.
  • Selected row: `hsl(var(--primary) / 0.14)` fill, a 2px `--primary` leading rule, and a check glyph. Unselected rows have no fill at all.
  • Cards use a `--muted` header strip, a `--card` body, real text, a labelled status pill and a monospace data row.
  • Status pills carry a text label plus a shape difference (filled vs outlined), because desaturated dark accents are hard to tell apart.

Responsive rules

What has to change as the viewport narrows for the style to survive.

  • Dense data rows become stacked label/value pairs below 640px; horizontal scroll on a table is the wrong answer here.
  • The surface ramp collapses from four steps to three on mobile — fewer, clearer boundaries beat subtle ones on a small screen.
  • Monospace metrics drop one size step but keep tabular numerals so stacked values still line up.

Fallbacks

The degraded paths: unsupported effects, weak shadows, reduced motion.

  • Respect `prefers-color-scheme: light` — a dark-native style still needs the kit's light tokens honoured when the user asks for them.
  • On OLED, offer a true-black option by dropping `--background` only; the ramp above it stays, or the elevation language collapses.
  • Forced-colors mode: replace the tonal steps with real borders, since surface lightness is discarded by the system palette.

QA checks

What to verify before shipping an interface in this style.

  • Adjacent surfaces in the ramp clear 3:1; body text on each of them clears 4.5:1.
  • No pure `#000` or `#fff` in the computed styles.
  • Greyscale the screen: selected rows and status pills are still distinguishable.
  • Numeric columns stay aligned when values change width — tabular numerals are actually applied.

Agent tags

The vocabulary a coding agent can match this style on.

  • dark-first
  • tonal-elevation
  • monospace-data
  • low-chroma
  • console-ui