Design System
Brand colors, typography, and the reusable UI components — Button, Input, Card, Badge — plus navigation shells. Use the toggle in the header to preview dark mode.
1 · Brand
Logo direction
Text-based logo: rounded brand-indigo tile with a sigma “∑” glyph + “MathKit” wordmark. Modern educational-SaaS feel — calm, trustworthy, no hacker aesthetic.
2 · Colors
Brand — Indigo
Primary brand color
Accent — Teal
Single restrained accent
Neutrals & Semantic
Text, surface, page, border
3 · Typography
Display / hero
48px — Display
H1
36px — H1 heading
H2
28px — H2 heading
H3
22px — H3 heading
H4 / Body
18px — H4 heading
Body
16px — Body text. The quick brown fox jumps over the lazy dog. 0123456789
Body SM
14px — Secondary text, buttons, inputs
Caption
12px — Captions, badges, meta
Font: Inter via Google Fonts (fallback self-hostable later). Weights 400/500/600/700/800.
4 · Button
Variants
Sizes
States
5 · Input
This is a hint message.
Please enter a valid number.
6 · Card
Standard card
White/light card on the light neutral page background, 12px radius, subtle shadow — the default surface for calculators, tables, and content blocks.
Interactive card
Hover-lift card for clickable tiles — category cards, popular calculators, entry-point links. Try hovering to see the lift + shadow.
7 · Badge
8 · Navigation shells
The site header (logo, primary nav links, theme toggle) and footer (brand, explore + legal link groups) are now live on every page via the base layout. Final content lands in Phase 3.