Repository navigation
v0.15.0 — Meet Nightshift
Meet Nightshift, the CarlNotes design system.
Nightshift is one set of colors, type, and components for everything CarlNotes draws: the app, the emails, the
share cards, and the phone app to come. Browse it at carlnotes.com/nightshift,
or follow Nightshift Design System in the footer. Every color shows its light and dark value. Every type style
shows its size and weight. Every shared component runs live, so you can try it before you use it.
Your emails read better. They used to keep 15 colors of their own. They now use the app's colors, so a scan email
looks like the app it came from. Labels, ranks, and source names were the faintest text in them. Their contrast with
the background rose from as low as 2.4 to 1 to at least 5.6 to 1. That clears the 4.5 to 1 the Web Content Accessibility
Guidelines (WCAG) ask of body text. Headings grow from 22 to 24 pixels, and the intro from 15 to 16.
The browser holds 301 stories across 60 components and 9 patterns. Each story has controls for its options, a light
and dark switch, and an accessibility check against WCAG 2.2 at levels A and AA. The check fixed the names screen
readers announce on count buttons, update badges, menus, and profile links. It also found muted text and links too
faint on the page and in subtables: in the footer, under a topic's title, and in the team and admin tables. This
release fixes them. Muted text, links, and the error red each move one small step, darker in light mode and lighter in
dark. Every text color now reads at 4.5 to 1 or better on every surface it sits on, and a test keeps it there. A link
inside a sentence, like the credits in the footer, now carries a faint underline, so it no longer depends on color.
For people who build CarlNotes: every color, radius, and type style now lives in TypeScript in
packages/nightshift. One command writes the web app's stylesheet and two Figma variable files, one per mode, and a
test fails if any of them drifts from the source. Run bun run dev:storybook, and Claude Code or OpenCode reads the
component catalog through Storybook's Model Context Protocol (MCP) server. An agent then reuses a component instead of
writing a new one.
This release also moves the code into Bun workspaces: four apps over nine packages, with checks that keep the
browser's code free of server code. Nothing you see changed for that part.
