Sketchbook

Where it comes from

Before software, products were worked out on paper: graph-ruled pads, pencil, a margin note with an arrow, a circled word. A sketchbook look borrows that working surface on purpose. It says that the thing is in progress and made by hand, which lowers the stakes of reading it and suits tools for people who make things.

This is the language of the documentation you are reading. We chose it because it carries two moods at once: the structure of a printed grid and the warmth of marks made with a pen. It sits between the rigour of a plain grid style and the shouting of a heavy-stroke style, with outlined cards that cast a hard offset shadow and a serif for headings.

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

Traits

Type

A serif display face over a plain body face, semibold headings, uppercase labels with open tracking, and a generous line height near 1.65. Captions are italic.

--ca-font-display --ca-font-weight-heading --ca-label-case --ca-label-tracking --ca-line-height-body

Colour

Paper and pencil: a quiet surface, graphite text, and the brand colour for marks and the active state. The page grid is drawn in a subtle outline colour so it stays texture.

--ca-brand-main --ca-outline-subtle --ca-mark-color --ca-page-mesh

Shape

Square corners with a two to three pixel outline. Hand-drawn underlines and margin notes (`.ca-mark-underline`, `.ca-mark-note`) add the pen.

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

Depth

A hard offset shadow, like a card laid on a desk. No blur. The paper itself is flat grid lines.

--ca-shadow-md --ca-mat-regular-shadow

Motion

Short and plain at about 60% of the default, with the standard curve: things appear, they do not perform.

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

A busy background pattern can reduce how readable text over it is

What to do. Keep the paper pattern at low contrast (it uses `--ca-outline-subtle` at about half strength) and keep text on a raised, opaque surface rather than directly on the grid.

Decorative marks must not carry meaning

What to do. Marks are drawn with CSS masks and are not announced; any emphasis they give must also be in the words (bold, a label, an order), and in forced-colors mode they fall back to the system text colour.

Components that fit

Developer tools, documentation, learning products, portfolios and products for people who make things, where warmth and structure should coexist.

Avoid it when: Formal institutions, finance, or any context where a hand-made look would read as unserious.

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

• Highlight: A hand-drawn emphasis on the words that matter.
• Card: An outlined card with a hard shadow is a page of the book.
• Callout: A margin note with a clear tone.
• CodeSnippet: A boxed block that sits well on paper.

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

With your own brand colour on top:

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

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

{
	"defaultStyle": "outlined",
	"radius": 0,
	"elevation": "hard",
	"border": {
		"width": 2,
		"strong": 3
	},
	"fonts": {
		"display": "ui-serif, Georgia, Cambria, \"Times New Roman\", serif"
	},
	"typography": {
		"weights": {
			"heading": 600,
			"semibold": 600
		},
		"headingTracking": "-0.015em",
		"labelCase": "uppercase",
		"labelTracking": "0.08em",
		"lineHeight": 1.65
	},
	"motion": {
		"scale": 0.6,
		"easing": "standard"
	},
	"paper": "grid"
}

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 "Sketchbook" style with @codeatlasdev/ui: A journal on grid paper: serif display, square outlined cards, hand-drawn marks.

1. In src/lib/theme.ts export `theme = designStyle("sketchbook")` (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("sketchbook", { 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 display face over a plain body face, semibold headings, uppercase labels with open tracking, and a generous line height near 1.65. Captions are italic. Shape: Square corners with a two to three pixel outline. Hand-drawn underlines and margin notes (`.ca-mark-underline`, `.ca-mark-note`) add the pen. Depth: A hard offset shadow, like a card laid on a desk. No blur. The paper itself is flat grid lines. Motion: Short and plain at about 60% of the default, with the standard curve: things appear, they do not perform.
4. Do: Keep the grid faint; it is texture behind the content, not a pattern in front of it. Use the hand-drawn marks sparingly, once or twice a page, on the words that matter. Let captions and notes be italic and secondary so the body stays plain. Pair it with a light and a dark scheme and check the grid ink in both.
5. Do not: Do not draw a mark on every heading; a mark only means something when it is rare. Do not put text over the grid lines at a size where they cross the letters. Do not use a handwriting font for body text. The warmth comes from marks and layout, not from illegible type. Do not add blur or gradients; they fight the paper.
6. Accessibility, which this style puts at risk: A busy background pattern can reduce how readable text over it is. Keep the paper pattern at low contrast (it uses `--ca-outline-subtle` at about half strength) and keep text on a raised, opaque surface rather than directly on the grid. Decorative marks must not carry meaning. Marks are drawn with CSS masks and are not announced; any emphasis they give must also be in the words (bold, a label, an order), and in forced-colors mode they fall back to the system text colour.
7. Fits: Developer tools, documentation, learning products, portfolios and products for people who make things, where warmth and structure should coexist. Avoid it when: Formal institutions, finance, or any context where a hand-made look would read as unserious.
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/sketchbook/