Editorial

Where it comes from

Print journalism and long-form publishing solved a problem that a lot of software now has: how to hold a person's attention on a lot of text for more than a few seconds. The answers were a clear typographic hierarchy, a measure short enough to follow, generous margins, hairline rules between sections and a display face with character set against a quiet text face.

On screen the same moves make a product feel curated instead of busy. The cost is that a page built for reading can hide its actions: when everything is quiet, the one button that matters can disappear, so the style asks for deliberate emphasis where it counts.

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

Traits

Type

A serif for display and headings, a clean text face for the body, a slightly larger scale, a line height near 1.7 and a measure capped at about 65 characters.

--ca-font-display --ca-font-scale --ca-line-height-body --ca-measure --ca-label-case --ca-label-tracking

Colour

Restrained and warm-neutral. Ink on paper with one accent; large areas stay close to the page colour so the text carries the page.

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

Shape

Nearly square corners (a fifth of the default radius) and hairline dividers. Surfaces are flat panels, not floating cards.

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

Depth

None. No shadows and no blur; the flat material separates with a hairline. Rhythm comes from spacing and rules.

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

Motion

Calm and a little slower than default (about 130%): a fade or a short slide that never competes with the text.

--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.

Airy spacing and a wide display scale can break at large text sizes

What to do. Use relative units for sizes and test at 200% text size. Containers should grow with the text instead of clipping it.

A quiet page can hide the one action that matters

What to do. Give the primary action the brand fill and a clear label; keep secondary actions as outlined or text buttons.

Components that fit

Content-led products: publications, documentation, case studies, portfolios, reports and pricing or product pages that tell a story before they sell.

Avoid it when: Dense operational tools, small-screen data entry, or anywhere a user scans for a value rather than reads.

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

• Heading: The display size reads the serif display family.
• Card: A flat card with a hairline is a column, not a tile.
• Highlight: A hand-set emphasis inside running text.
• Accordion: Progressive disclosure for long pages.

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("editorial");

With your own brand colour on top:

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

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

{
	"defaultStyle": "flat",
	"radius": 0.2,
	"elevation": "none",
	"density": "airy",
	"fonts": {
		"display": "ui-serif, Georgia, Cambria, \"Times New Roman\", serif"
	},
	"typography": {
		"scale": 1.06,
		"weights": {
			"heading": 500
		},
		"headingTracking": "-0.015em",
		"lineHeight": 1.7,
		"measure": "65ch",
		"labelCase": "uppercase",
		"labelTracking": "0.12em"
	},
	"motion": {
		"scale": 1.3,
		"easing": "standard"
	},
	"iconStroke": 1.25
}

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 "Editorial" style with @codeatlasdev/ui: A serif display face, a long line and plenty of space: reading comes first.

1. In src/lib/theme.ts export `theme = designStyle("editorial")` (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("editorial", { 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: A serif for display and headings, a clean text face for the body, a slightly larger scale, a line height near 1.7 and a measure capped at about 65 characters. Shape: Nearly square corners (a fifth of the default radius) and hairline dividers. Surfaces are flat panels, not floating cards. Depth: None. No shadows and no blur; the flat material separates with a hairline. Rhythm comes from spacing and rules. Motion: Calm and a little slower than default (about 130%): a fade or a short slide that never competes with the text.
4. Do: Cap the line length of running text; wider is not more comfortable. Pair one expressive display face with a plain text face, and keep to two families. Use space and a hairline, not a box, to group related content. Make the primary action visibly an action: a filled button, not a text link.
5. Do not: Do not use a display serif for small interface text such as table cells, badges or captions. Do not hide navigation to keep the page quiet; people should see where the routes are. Do not set long text in all caps; reserve uppercase for short labels. Do not let a hero image push the first paragraph off the first screen without a reason.
6. Accessibility, which this style puts at risk: Airy spacing and a wide display scale can break at large text sizes. Use relative units for sizes and test at 200% text size. Containers should grow with the text instead of clipping it. A quiet page can hide the one action that matters. Give the primary action the brand fill and a clear label; keep secondary actions as outlined or text buttons.
7. Fits: Content-led products: publications, documentation, case studies, portfolios, reports and pricing or product pages that tell a story before they sell. Avoid it when: Dense operational tools, small-screen data entry, or anywhere a user scans for a value rather than reads.
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/editorial/