Start

Weekwright guide

How Weekwright looks, sounds, and is built. Every UI element the app uses, with how and when to use it, rendered from the app's own stylesheets.

#What this is

This is the working reference for anyone designing, writing, or building Weekwright. It replaces guessing with a short answer: which component, which color, which words, and why.

Every specimen on this site is drawn by the app’s real CSS and sits next to the code that produced it. Nothing is a screenshot of a mock-up, and nothing is typed in twice. Colors, sizes, and type scales are read from tokens/ when the site is built.

The rule that governs the rest

Weekwright is one fixed weekly pack: what changed, the numbers behind it, and one thing to do next. Every screen leads with the answer and puts the evidence below it. If a design choice makes the answer harder to find, it is the wrong choice.

#Start here

BrandWho we areName, positioning, personality, and the five design principles. BrandWriting and copyVoice, locked strings, banned words, and how to write an error. FoundationsColorEvery role in light and dark, what each is for, and measured contrast. ComponentsWhich component?A decision table, then every primitive with when and when not to use it. PatternsPage templatesStores, store page, report, settings, sign-in. Resize them to phone width. QualityBefore you shipA checklist you can tick through before any UI change merges.

#How to use this guide

Designing a screen. Open Page templates and start from the closest one. Then check Patterns for the shape your content takes.
Building it. Find each piece in Components. Copy the HTML or the React usage from its Code panel. Use roles like --color-surface, never raw hex.
Writing the words. Use the locked strings in Writing and copy. If a string is not there, add it there first.
Checking it. Flip the theme toggle in the top bar, resize to phone width, tab through it, then run the checklist.

#The essentials on one screen

Decision	The answer
Brand color	Teal `--color-accent`. Primary actions, positive change, “ready”. Not decoration, not nav chrome.
The one pop	Violet `--color-pop`. Marks what is new or current. One or two places per screen. Never status.
Needs a look	Amber `--color-warn`. Anomalies and the week’s action.
Went wrong or down	Red `--color-danger`. Decreases, failures, destructive actions.
Type	Inter for words, IBM Plex Mono with tabular figures for every number.
Shape	6px controls, 10px cards, 14px modals. A hairline border and almost no shadow.
Money, handoffs	The only customer actions are Connect your store, Manage billing, and Continue to secure checkout.
Themes	Light and dark are both first-class. Dark follows the OS unless the owner chooses.

#Where the truth lives

This repository is the source of truth for brand. The app repository is the source of truth for shipped code. They are kept equal, and the build here checks it.

What	Lives in	If they disagree
Name, voice, copy, palette, logo	`brand` repo	Fix the product to match, or change the brand first
Component CSS and React primitives	`app` repo, `apps/web`	This guide is refreshed from it with `npm run sync`

More on keeping them in step, and how to add to this guide, is on Downloads and contributing.