Custard Schoolbook

About Custard Schoolbook

Overview

Custard Schoolbook is for learning products that borrow from 70s textbooks, 80s software manuals and risograph print. The retro cues are limited to three things: the ochre and cream palette, Epilogue 700-800 headlines, and zero-blur offset shadows. Spacing, contrast and control sizes follow current accessibility practice. Text pairs meet at least 4.5:1 in both modes, and controls are 44px tall, so lessons stay readable over long sessions.

Color

Ochre (OKLCH hue about 70) is the only action color. It is used for primary, ring, links and progress. In light mode primary is brand.600 #96600a with white text (about 5.3:1). Against the cream background it measures about 4.9:1. The neutral ramp is tinted toward the same hue: steps 400-700 were nudged from olive toward brown so mid-greys don't go muddy. Ink is neutral.950 #1b1812, a brown-black rather than grey. Destructive is crimson (danger.600 #b92646, about 6.1:1 with white), roughly 60° of hue away from ochre, so an error never reads as a darker primary. Warning stays lemon yellow (warning.200 fill with warning.900 text) so it is not confused with the brand. Success is a warm textbook green (success.700 with white, about 7:1). In dark mode, background is neutral.950 and card/popover are neutral.900, one step lifted. Primary moves to brand.400 #e8a52d with brand.950 text (about 8:1), giving a CRT-amber glow without neon saturation.

Typography

Display and heading sizes follow a 1.4 ratio: 20 → 28 → 40 → 56px. Tracking tightens as size grows: heading-md -0.01em, heading-lg -0.015em, display-md -0.025em, display-lg -0.03em. Epilogue uses only weights 700 and 800. Karla (400/500/700) sets all body text, forms and buttons. Body sizes step 14 → 16 → 18px with line heights of 1.5-1.6 for long reading. IBM Plex Mono 400/500 (typography.code, 14/1.55) is reserved for code, keyboard shortcuts, quiz answer keys and data labels.

Layout

Comfortable density on a 4px base grid (space.1 = 4px). Reading columns max out at about 68ch (about 680px at body-md), and page containers at 1160px. Buttons and inputs are 44px tall. Card padding is space.6 (24px). Page sections are separated by space.12 to space.16 (48-64px).

Elevation

Depth uses hard-offset, zero-blur shadows: sm 2px, md 4px, lg 8px, all in brand.950 at 85% opacity, paired with a 2px border. Cards and raised buttons use shadow.sm. Popovers and dialogs use shadow.lg. In dark mode the shadow nearly disappears against neutral.950, so the 2px border carries the edge. No blurred shadows anywhere.

Shapes

Controls use radius.md (6px) and cards use radius.lg (10px), for a printed-label feel. radius.full is limited to badges and progress tracks. Cards, inputs and buttons use a 2px border: border (neutral.300 light / neutral.700 dark) on cards, input (neutral.400 / neutral.600) on fields.

Do

• Use primary (brand.600 in light, brand.400 in dark) for one main action per view, such as 'Start lesson'. Use secondary or ghost buttons for every other action in that view.
• Set display-lg (56px, -0.03em), display-md (40px, -0.025em) and heading-lg (28px, -0.015em) in Epilogue 800/800/700. Keep the token letterSpacing values; don't loosen them.
• Give cards and raised buttons a 2px border plus shadow.sm. Use shadow.lg only for dialogs and popovers.
• In dark mode, let the 2px border (neutral.700) define card and dialog edges, since the brand.950 shadow barely shows on neutral.950.
• Set lesson copy in body-md (Karla 16px / 1.6) or body-lg (18px / 1.6). Cap reading columns at 68ch.
• Show focus on buttons and inputs as a 2px ring in the ring token with a 2px offset. It measures at least 3:1 against background in both modes.
• Use typography.code (IBM Plex Mono 14px) only for code samples, keyboard shortcuts and quiz answer keys.
• Pair every success, warning and destructive state with an icon or text label so meaning never depends on color alone.

Don’t

• Don't add blur to shadows. Every shadow token is a zero-blur offset (2/4/8px).
• Don't use brand ochre for errors. Use destructive (danger.600 light / danger.400 dark), and keep warning on the warning scale (warning.200 fill with warning.900 text in light).
• Don't set Epilogue below 20px (heading-md) or under weight 700. Use Karla heading-sm or label for anything smaller.
• Don't use brand.500 or lighter for text or icons on background or card in light mode. Brand.500 is about 2.9:1 and brand.400 about 2:1 on neutral.50.
• Don't use #000000, #ffffff or cool grey for page backgrounds. Stay on the neutral ramp; light card and popover may use #fffdf8.
• Don't place more than one primary-filled button in the same card, dialog footer or toolbar.
• Don't round buttons or inputs beyond radius.md (6px) or cards beyond radius.lg (10px). Reserve radius.full for badges and progress tracks.