Primer

Primer is for learning: an online course, a school, a coding class, a language app's website, a workbook. It should feel like a good exercise book: cream paper, deep-teal ink, one deep blue to press, and a small set of bright colors that show progress and draw charts. The bright colors mark and measure. They never carry text.

• Primary (#095C78) is deep blue, with white text on it, for the one main action: "Start the course", "Check my answer". In dark mode the main action is yellow with ink text. Links in running text use the text color, underlined.
• Secondary (#FFD166) is yellow, with ink on it, for every other button. In dark mode the other buttons are a lighter blue.
• Tertiary (#06D6A0) is green, with ink on it, for one badge and for progress: "Completed", "New", the filled part of a progress bar.
• Azure (#118AB2), sun (#FFD166) and berry (#EF476F) are chart colors, the same in both modes: a bar, a line, a dot, a rule. With green they make a set of four, used in this order: azure, green, sun, berry. No text is ever set on azure, sun or berry, and no chart color is a text color.
• Neutral (#3E6270) sets durations, counts and captions.
• Background (#FFFBF0) is cream paper. Surface (#FFFFFF) is the white of a card.
• Error (#B3123F) is used only with a message. A wrong answer is told in words, with the right one beside it.

Lexend sets headings at weight 700: a wide, even sans made to be easy to read. Plus Jakarta Sans sets body text at 16px. Fira Code sets labels in sentence case at weight 500: lengths of lessons, counts, scores, levels, and any code. Figures in a table or a chart are tabular.

A 12-column grid, 1200px at its widest, with 32px gutters. Spacing comes from the scale (4, 8, 12, 20, 32, 80): 20px inside a card and between cards, 80px between sections. A lesson is read in one column of eight; a catalogue is a grid of three cards; a progress page puts figures above charts above a list.

Flat. A card is white on cream with a 1px border and no shadow. Menus and dialogs float on one short, neutral shadow.

Friendly: 6px for badges and checkboxes, 10px for buttons and inputs, 16px for cards. Avatars, progress bars, the dots of a chart's legend and switches are fully round.

• Buttons: deep blue for the one main action (yellow in dark mode), yellow for the rest (a lighter blue in dark mode). Sentence-case labels in the body font, weight 600.
• Cards: white, 16px corners, 20px padding, a 1px border.
• Badges: green with ink text, one or two words.
• Progress bars: 8px tall and fully round, green on a track of the border color, with the figure beside it in a label.
• Charts: flat bars or one line, drawn with plain elements, in the four chart colors, each with its figure written beside it in ink.
• Lesson lists: a number, a title, a length in a label, and a state: done, next or locked.
• Icons: 2px stroke line icons with round caps. Never emoji.

• Do write the figure beside every bar and every progress bar: color alone says nothing.
• Do keep one main action in view: the next lesson, the next question.
• Do tell a learner where they are: lesson 4 of 12, 35 minutes left.
• Don't set text on azure, sun or berry, and don't use any chart color for text.
• Don't use more than the four chart colors, and don't use gradients or glows.
• Don't put a card inside a card.
• Don't introduce a color, size or radius that is not a token above.