Terminal

Where it comes from

Before graphical interfaces, people worked in text: a grid of fixed-width characters, a prompt, and output that scrolled by. Programmers still do much of their work there, and the look has become a shorthand for tools that are exact, fast and built for people who read code.

As an interface style it uses one monospace family for everything, tight spacing, square outlined panels and no easing. It packs a lot of information into a small area and rewards people who already read that way. It is a poor first impression for someone who does not, so it asks for obvious graphical navigation next to the text.

Written by us, in our own words, as background. It is not a claim about users.

Traits

Type

One monospace family for body, display and code, a slightly smaller scale, bold headings with no tracking and uppercase labels. Columns line up because every character has the same width.

--ca-font-sans --ca-font-display --ca-font-mono --ca-font-scale --ca-label-case

Colour

Dark by default: a near-black surface, bright text and one accent used like a phosphor. The recipe defaults to the dark scheme; the light scheme is still supported.

--ca-brand-fill --ca-surface-base --ca-text-primary

Shape

Square corners and one-pixel outlines on every panel, like cells in a grid. Compact density keeps rows tight.

--ca-radius-scale --ca-density --ca-border-width

Depth

None. Panels are outlined rectangles; there is no shadow, blur or tint.

--ca-shadow-md --ca-mat-edge

Motion

None by design: the motion scale is zero and the curve is stepped, so state changes are instant. This also makes the recipe safe for people who reduce motion.

--ca-motion-scale --ca-ease-standard

Before and after, on real components

The same components twice: with the package default and with this style. Use the toggle to flip between them or put them side by side.

Do and don't

These are our own guidance for using the recipe well. The accessibility items below carry their sources.

Accessibility pitfalls

Each item names what goes wrong, what the library already does about it and what is left to you.

Compact density can push targets below the minimum pointer size

What to do. Keep the interactive area at least 24 by 24 CSS pixels (the components keep a larger hit area than their visible box) and give touch layouts the comfortable density.

Removing all motion is safe, but do not remove state feedback with it

What to do. Keep a clear change in fill, outline or label for hover, pressed and selected so the instant transition still shows what changed.

Components that fit

Developer tools, logs, consoles, infrastructure dashboards and documentation for engineers.

Avoid it when: Consumer onboarding, content for general audiences, or anywhere people are not used to reading fixed-width text.

Where it fits is our judgement from using the recipe, not a measured result.

• CodeSnippet: Boxed monospace output.
• SimpleTable: Compact, aligned rows.
• TextField: A square, outlined, monospace field.
• Kbd: Keyboard hints in the same face.

export const theme = designStyle("terminal");

Overlays such as Dialog and Tooltip render in the page body, outside this style's subtree, so they are not shown here. Apply the style to the whole site to see them wear it.

The ThemeOptions recipe

One call in src/lib/theme.ts. Everything below is what the recipe sets; override any of it on top.

import { designStyle, type ThemeOptions } from "@codeatlasdev/ui";

export const theme: ThemeOptions = designStyle("terminal");

With your own brand colour on top:

import { designStyle, type ThemeOptions } from "@codeatlasdev/ui";

export const theme: ThemeOptions = designStyle("terminal", {
	presets: [{ id: "acme", color: "#ff5c00" }],
	defaultPreset: "acme",
});

{
	"defaultStyle": "outlined",
	"defaultScheme": "dark",
	"radius": 0,
	"elevation": "none",
	"density": "compact",
	"fonts": {
		"body": "ui-monospace, \"JetBrains Mono\", \"SFMono-Regular\", Menlo, Consolas, monospace",
		"display": "ui-monospace, \"JetBrains Mono\", \"SFMono-Regular\", Menlo, Consolas, monospace",
		"mono": "ui-monospace, \"JetBrains Mono\", \"SFMono-Regular\", Menlo, Consolas, monospace"
	},
	"typography": {
		"scale": 0.95,
		"weights": {
			"heading": 700,
			"semibold": 600
		},
		"headingTracking": "0em",
		"labelCase": "uppercase"
	},
	"motion": {
		"scale": 0,
		"easing": "steps"
	},
	"iconStroke": 1.5
}

Try it on this site

Prompt for your AI

Paste this into a coding agent. It carries the recipe, the limits and the accessibility rules.

Build this interface in the "Terminal" style with @codeatlasdev/ui: Monospace everywhere, square cells, outlined panels and instant motion.

1. In src/lib/theme.ts export `theme = designStyle("terminal")` (import it from "@codeatlasdev/ui", or from "@codeatlasdev/ui/vite" in a file shared with vite.config). Add your brand as a preset on top: `designStyle("terminal", { presets: [{ id: "brand", color: "#…" }], defaultPreset: "brand" })`.
2. Use the library components as they are. Change the look only through ThemeOptions or `--ca-*` tokens: no `!important`, no overrides of `.ca-*` classes, no hard-coded colours.
3. The style's traits: type: One monospace family for body, display and code, a slightly smaller scale, bold headings with no tracking and uppercase labels. Columns line up because every character has the same width. Shape: Square corners and one-pixel outlines on every panel, like cells in a grid. Compact density keeps rows tight. Depth: None. Panels are outlined rectangles; there is no shadow, blur or tint. Motion: None by design: the motion scale is zero and the curve is stepped, so state changes are instant. This also makes the recipe safe for people who reduce motion.
4. Do: Use the monospace family for data, identifiers and code, where alignment helps comparison. Keep a visible, high-contrast focus ring; keyboard users are this style's main audience. Offer plain graphical navigation (a sidebar or tabs) beside any command-style input. Keep rows compact but keep touch targets large enough on touch devices.
5. Do not: Do not use a monospace face for long paragraphs of prose; the uneven rhythm slows reading. Do not imitate a blinking cursor everywhere; motion with no meaning is noise. Do not use green-on-black as the only palette without checking contrast and colour-blind legibility. Do not hide features behind typed commands with no visible alternative.
6. Accessibility, which this style puts at risk: Compact density can push targets below the minimum pointer size. Keep the interactive area at least 24 by 24 CSS pixels (the components keep a larger hit area than their visible box) and give touch layouts the comfortable density. Removing all motion is safe, but do not remove state feedback with it. Keep a clear change in fill, outline or label for hover, pressed and selected so the instant transition still shows what changed.
7. Fits: Developer tools, logs, consoles, infrastructure dashboards and documentation for engineers. Avoid it when: Consumer onboarding, content for general audiences, or anywhere people are not used to reading fixed-width text.
8. Keep content, hierarchy and behaviour identical to a plain baseline so the two can be compared. Do not claim the style performs better; validate it with your users.
Docs: https://ui.codeatlas.com.br/styles/terminal/