A dead-simple
style guide.

Use one accent.

Yellow belongs on the primary action, selected navigation, and grade ruler. Keep the rest quiet. Course colors identify courses; grade colors identify letter bands.

Use the Mac’s own type.

System sans for text, rounded system type for headings, and monospace only for codes and shortcuts. Use tabular numbers for grades. Give the whole number more weight than its decimals.

Make the number easy to read.

Show grades to two decimal places. Keep full precision in calculations. Round required scores up. The ruler runs from 60 to 100, with an exact readout for values outside that range.

Keep the page simple.

• One clear heading and one primary action per section.
• Use space and alignment before adding another box.
• Use 8-pixel spacing steps and restrained, rounded corners.
• Follow system light and dark appearance.
• Keep visible keyboard focus, labeled inputs, and readable contrast.
• Respect reduced motion. Animate only when it explains a change.
• Use plain, specific words. Label examples, estimates, and official grades clearly.