Brand

Margin is named after the ruled margin of a notebook page: the narrow column where good notes live. The brand should feel like a well-kept notebook: warm paper, an editorial serif for titles, and almost nothing else. It is quiet, exact and monochrome, and it gets out of the way of the work.

The rules on this page apply to the app, the website, these docs, social images and anything else that carries the name.

Name and tagline#

Margin is independent of Cambridge University Press & Assessment. Never imply otherwise, and never use Cambridge's logo or a past-paper cover as imagery.

Product names#

The tools have fixed names. Use them exactly, in sentence case, wherever they appear as a label: navigation, tab titles, buttons, headings and the command palette.

In running text they read as ordinary nouns: "open the grapher", "add it to your cheat sheet". AI tutor and My notes keep their capitals because they would be ambiguous without them.

Courses use the titles in their manifests, such as Pure Mathematics 1, AS Physics and A Level Chemistry, and their short labels where space is tight: P1, M1, S2, AS, A2.

Logo#

The mark is a page with its ruled margin and three lines of writing cut out of it. The lockup sets it beside the name in Geist semibold.

The mark is drawn from one set of geometry in src/components/brand/mark.ts. Small sizes have their own hand-hinted drawings, so every edge lands on a whole pixel: 16, 20, 24, 32 and 40 px are pixel-exact, and 44 px and above use the display master with rounded cuts. In code, always use the components rather than an exported image:

import { Logo, LogoMark, Wordmark } from '#/components/brand/Logo'

<Logo />                  // the lockup, sized by the surrounding font size
<LogoMark size={16} />    // the mark alone

Clear space and size#

• Clear space around the lockup is at least the width of the mark on every side. Nothing else sits inside it.
• The lockup is designed at 15 px text with a 20 px mark and a 7 px gap. At 13 to 14 px text, use the 16 px mark.
• Minimum size is a 16 px mark. Below that, use the name in text instead.
• Colour is the text colour: foreground on background in either theme. The mark is drawn in currentColor, so it follows the theme on its own.

Do not#

• Recolour the mark, add a gradient, outline, shadow or glow, or place it on a photograph.
• Stretch, rotate, crop or redraw it, or rebuild the cuts at sizes other than the hinted ones.
• Set the name in another typeface or weight, or add a tagline inside the lockup.
• Put the mark in a coloured container. The only tile is the app icon, which is generated.

Generated assets#

Every icon and social image in public/ is generated from the same geometry by scripts/brand-assets.mjs. Do not edit the files by hand: change the mark or the template and run the script. Its header explains the one-off setup.

Voice and tone#

Margin sounds like a good teacher who respects your time: calm, precise and plain. It explains rather than sells.

• Plain words. Say what something does. "Graph any function" beats "Unlock powerful visualisations".
• Short sentences. One idea each. Cut words that do no work.
• Second person. Speak to the student as "you". Margin is "Margin", not "we", in product copy.
• British spelling. Colour, organise, practise (verb), practice (noun), programme, centre.
• Sentence case for every page title, heading, button and menu item. Capitals only for proper nouns and product names. Note and unit titles too: Integration by parts, Coordinate geometry.
• No exclamation marks and no emoji, anywhere.
• No hype. No "revolutionary", "supercharge", "game-changing" or "AI-powered" as a selling point.
• Only true claims. No testimonials, user counts, ratings, school logos or results that have not happened. Numbers come from the content itself, such as the count of published notes.
• Calm about problems. Errors say what happened and what to do next, without blame or alarm: "Page not found. The link may be out of date, or the page may have moved."

Typography#

• Display titles are large and confident, at regular weight (400 to 500) with slight negative tracking. Body text is calm.
• Interface text is 13 to 14 px. Notes are set at 16 px with a 1.75 line height.
• Hierarchy comes from size, weight, shade and whitespace, never from colour and rarely from boxes.
• Titles stand on their own. Never put small numbered or indexed labels above a title ("01 / Features", "Step 2 of 5"), and never use small uppercase, letter-spaced kickers. If a section needs context, put it in the title.

Layout and surfaces#

• Show only what is needed, when it is needed. Hide anything that carries no information, such as an exam countdown with no exam set. Everything else is one ⌘ K away in the console.
• Almost no boxes. Sections are separated by whitespace and, at most, one very light full-width hairline. Lists are plain rows, not cards.
• One soft panel. The workspace is a single rounded panel on the sidebar canvas. Inside it, do not nest bordered cards. A raised surface, such as an AI answer, is a soft card with a gentle shadow, used sparingly.
• Quiet controls. Buttons are small pills. Each surface has at most one strong dark pill for its primary action; everything else is ghost or outlined. Metadata sits in one outlined pill, such as a note's "AS · P1 · 15 min".
• Underline for active navigation, not a filled box.

Colour#

Margin is monochrome with warm neutrals: every colour token sits on one warm hue at near-zero chroma, so pages read as off-white paper and dark mode reads as warm, soft charcoal. There are no accent colours, in the app or on the website. Things are told apart by weight, shade, fill and dash pattern; in charts and graphs, by line style.

Use the semantic tokens from src/styles.css, never raw colour values:

Dark mode is a full set of the same tokens under .dark, not an inversion. Fixed values exist only where a token cannot reach, such as the generated icons and the browser's theme-color, and they mirror the tokens: #fbfaf7 and #1b1a18 for the page backgrounds.

Iconography#

• Use lucide icons only, through lucide-react. Do not mix in other icon sets or draw one-off icons.
• Size icons to the text beside them: 16 px (size-4) with 13 to 14 px text, 14 px (size-3.5) in dense rows. Keep lucide's default stroke.
• Icons support a label; they rarely replace one. An icon-only button needs an aria-label and a tooltip.
• Each tool and subject has one icon, defined in src/components/meta.tsx, and it is the same everywhere: sidebar, tabs and the command palette.

Imagery#

• Show the real product. Screens, notes, graphs and flashcards as they actually look, in the current design, never mocked up to look better than they are.
• No stock photography, no illustrations of people and no 3D or AI-generated art.
• No decoration for its own sake: no gradients, glows, blurred blobs or noise. Ruled lines and the margin rule are the one motif, used sparingly.
• Diagrams are monochrome and drawn with the same line styles as the grapher. Prefer a ```graph block over an image wherever the figure is a graph.
• Social images come from scripts/brand-assets.mjs, so every page shares one template: ruled paper, the lockup, a single title and a short line of text.