Design toolkit
The kit that keeps it consistent
Colours, type, icons and components — one source of truth so every new page, episode and project looks like Fork Along. Pair it with the media kit.
◆ Colours
Orange--orange · #ff7a1f
Orange soft--orange2 · #ffab6b
Ink deep--deep · #0c0d0f
Ink--ink · #101216
Ink 2--ink2 · #171a20
Line--line · #242832
Paper--paper · #f0ece4
Muted--muted · #8a909a
Green--green · #5bd97d
◆ Type
Own your software. Don't rent it.
Body copy is the system UI stack — fast, familiar, no web fonts to load.
// ui-monospace for kickers, labels, tags, code and the terminal feel
◆ Icons — Lucide · ISC, stroke-based, offline via inline SVG
We use Lucide — it matches our rounded-stroke logo, ships as inline SVG (no runtime), and inherits colour via currentColor. Add one by dropping its SVG into src/icons/.
routethe path / journey
git-forkfork
git-branchbranch
compassthe way / method
terminalterminal / CLI
sparklesAI / magic
wand-sparklesmake it yours
packagestarter / repo
folder-treeproject structure
shield-checksafety
scan-eyecheck before you run
eyeunderstand / review
lockprivate / secure
key-roundkeys & secrets
keyboardkeyboard / password
imagescreenshot help
gamepad-2game project
flagflag a mine
book-openmanifesto / read
playwatch the show
downloadmedia kit
hand-heartcredit / give back
heartsupport
mapdirectory
chevron-rightstep / next
circle-check-bigdone / verified
arrow-up-rightexternal link
circle-helphelp
◆ Components
Goal box: the orange-bordered highlight for the one thing that matters on a page.
Callout / gotcha. The dashed note for heads-ups — e.g. the sudo password shows no characters as you type.
◆ Logo
The fork-in-the-road mark (bright dominant path + faint start). Variants, lockups and rules in the media kit and BRAND.md.
Fork Along design toolkit · icons by Lucide (ISC) · a Mergodon Pty Ltd project