Internal · Design Studio
Code Camp Design Studio
Documentation, live token + component galleries, and content-production specs for both of our design systems — in one place for the design team.
Two systems, one studio
This studio is the single place to see, compare, and pull from Code Camp’s two design systems. The Marketing system dresses the sales surface that converts the parents and schools who pay. The Learning OS system dresses the student product itself. They are deliberately different — use the right one for the job.
Marketing — Playful-premium
Fredoka · Inter
- Social posts, ads, YouTube thumbnails, flyers — anything selling to parents or schools.
- Landing pages and the public site.
- Pastel palette, Fredoka + Inter, rounded chunky shapes, mascot & crayon as garnish.
Full doc: docs/marketing/MARKETING_DESIGN_SYSTEM.md
Learning OS — Sketch to Solid
Outfit
- Product screenshots, in-app UI, anything showing the student experience.
- Demos of the Builder Map, lessons, mastery, and progress.
- Action-green palette, Outfit, cream surfaces, meaningful crayon (sketch → solid).
Full doc: docs/learning_os/LOS_DESIGN_SYSTEM.md
Use the tabs above to open each system’s live token + component gallery, the Content production tab for platform dimensions, or the Assets & templates and QA checklist tabs when a piece is moving into production.
1. Choose the system
Start from audience and job: buyer-facing, product proof, mixed case study, or internal handoff.
2. Pull source assets
Use existing logos, proof media, mascot files, and starter briefs before inventing a one-off.
3. Build or export
Use the live galleries and sample compositions; export PNGs directly from the mockup canvases.
4. QA the handoff
Run the deliverable checklist and copy the pass summary into the handoff.