Conventions
The brand palette, base font-size sequence, and shared components every app reuses.
Color palette
Every app shares the same monotone sage palette, defined identically
in each app's globals.css:
--color-sage-50: oklch(98.2% 0.006 145);
--color-sage-500: oklch(55% 0.055 150);
--color-sage-950: oklch(14% 0.012 155);Dark mode is handled with prefers-color-scheme alone — none of the
internal tools have a manual light/dark toggle (that's specific to
the public web app, via next-themes).
Base font size
Each internal app sets a slightly different base html { font-size }
so they're visually distinguishable at a glance when several are open
side by side:
| App | Base size |
|---|---|
| seo | 104% |
| smm | 106% |
| dir | 108% |
| doc | 110% |
Shared components
Reach for @ketryon/ui before writing something new — this session's
recurring lesson has been finding the same button, modal, or card
hand-copied into three different apps before someone noticed. Check
what already exists:
Card,Container,Heading,Badge,EyebrowButton,SoftButton,PlainButton(and their*Linkvariants)Modal/ModalCloseButtonSetupScreen— the "missing env var" screen every DB-backed app showsXIcon,PlusIcon,MinusIcon,ArrowRightIcon
If two apps end up hand-rolling the same thing independently, that's
usually a sign it belongs in @ketryon/ui instead.