|
1 | | ---- |
2 | | -name: CodingCat.dev 13-Module Design System & Agent Toolkit Specification |
3 | | -version: 1.0.0 |
4 | | -colors: |
5 | | - bg-primary: '#0F172A' |
6 | | - bg-void: '#000000' |
7 | | - surface: '#1E293B' |
8 | | - surface-elevated: '#334155' |
9 | | - purple-primary: '#4B2E83' |
10 | | - purple-vivid: '#7C3AED' |
11 | | - purple-lip: '#351F5E' |
12 | | - lavender: '#B4A7D6' |
13 | | - lime: '#C5E86C' |
14 | | - lime-lip: '#9BC53D' |
15 | | - mint: '#86EFAC' |
16 | | - coral: '#FCA5A5' |
17 | | - text-primary: '#F8FAFC' |
18 | | - text-muted: '#94A3B8' |
19 | | -typography: |
20 | | - display: |
21 | | - fontFamily: 'Nunito, Inter, system-ui, sans-serif' |
22 | | - fontWeight: '800 / 900' |
23 | | - usage: 'Chunky H1 display titles and hero headlines' |
24 | | - sans: |
25 | | - fontFamily: 'Inter, system-ui, sans-serif' |
26 | | - fontWeight: '400 / 500 / 600 / 700 / 800' |
27 | | - usage: 'UI components, H2-H6 headings, and long-form prose' |
28 | | - mono: |
29 | | - fontFamily: 'JetBrains Mono, monospace' |
30 | | - fontWeight: '400 / 500 / 700' |
31 | | - usage: 'Code blocks, terminal snippets, badge tags, and metadata' |
32 | | - hand: |
33 | | - fontFamily: 'Virgil, Excalifont, Caveat, cursive, sans-serif' |
34 | | - fontWeight: '400 / 700' |
35 | | - usage: 'Dark-mode Excalidraw diagram explanations and sketchy annotations' |
36 | | -radius: |
37 | | - none: '0px' |
38 | | - md: '6px' |
39 | | - lg: '8px' |
40 | | - xl: '12px' |
41 | | - 2xl: '16px' |
42 | | - full: '9999px' |
43 | | ---- |
| 1 | +# CodingCat.dev Canonical Design System (2026 Dual-Theme Chalkboard & Royal Purple) |
44 | 2 |
|
45 | | -# CodingCat.dev 13-Module Design System & Agent Toolkit Specification |
| 3 | +This document defines the canonical design system for CodingCat.dev based on the Google Stitch reference screens: |
| 4 | +- **Light Mode (Chalkboard Paper)**: `https://stitch.withgoogle.com/projects/3020591313534241286?node-id=8d1319903d504a79ae56110486455e17` |
| 5 | +- **Dark Mode (Obsidian Chalkboard)**: `https://stitch.withgoogle.com/projects/3020591313534241286?node-id=b9e00f99c0d34e9884bf7766a014577b` |
46 | 6 |
|
47 | | -This document is the canonical root specification for **CodingCat.dev** ("Purrfect Web Tutorials"), unifying Web UI, W3C Design Tokens, AJ the Cat Mascot & Dark-Mode Excalidraw Visual Rules, Video Production Workflows, and **Alex Patterson (`@alex.patterson`)** Voice & Copy across Google Antigravity (`agy`) and Gemini Web. |
| 7 | +## 1. Visual Direction & Dual-Theme Philosophy |
48 | 8 |
|
49 | | ---- |
| 9 | +CodingCat.dev blends Duolingo-inspired playful educational UI with authentic, hand-drawn Excalidraw architectural diagrams, sticky notes, and live code teardowns. Both Light Mode and Dark Mode are first-class citizens: |
| 10 | +- **Light Mode (`:root`)** uses a warm Chalkboard Paper background (`#FAF9FC`) with a subtle lavender dot grid (`#D8B4FE`), crisp white cards (`#FFFFFF`), deep Royal Purple ink (`#2A1155`), and hard-offset sketch shadows (`3px 4px 0 #2A1155`). |
| 11 | +- **Dark Mode (`.dark`)** uses an Obsidian Chalkboard background (`#0B1326`) with ambient purple/fuchsia radial glows, slate-obsidian cards (`#131B2E` / `#171F33`), deep code/diagram wells (`#060E20`), chalk-white sketch borders (`rgba(255, 255, 255, 0.22)`), and dark offset sketch shadows (`3px 4px 0 rgba(0, 0, 0, 0.75)`). |
50 | 12 |
|
51 | | -## The 13-Module Taxonomy |
| 13 | +## 2. Dual-Theme Color Tokens |
52 | 14 |
|
53 | | -| # | Category | Module Path | Purpose Across CodingCat.dev | Core Contents | |
54 | | -| :--- | :--- | :--- | :--- | :--- | |
55 | | -| **01** | **Overview** | `skills/codingcat-design-system/references/01-overview.md` | Brand ethos & core identity | Mission, dark-mode-first philosophy, when to use AJ vs. Alex Patterson. | |
56 | | -| **02** | **Colors** | `skills/codingcat-design-system/references/02-colors.md` | Web UI, image prompts, video LUTs | Hex/RGB/Tailwind tokens (`#0F172A`, `#000000`, `#1E293B`, `#334155`, `#4B2E83`, `#B4A7D6`, `#C5E86C`, `#86EFAC`, `#FCA5A5`), semantic states. | |
57 | | -| **03** | **Typography** | `skills/codingcat-design-system/references/03-typography.md` | Web CSS, thumbnail text, captions | `Nunito` (`800`/`900` chunky `H1` display), `Inter` (UI & `H2`-`H6`), `JetBrains Mono` (code/badges), `Virgil` / `Excalifont` (Excalidraw explanations). | |
58 | | -| **04** | **Spacing** | `skills/codingcat-design-system/references/04-spacing.md` | Web layout, thumbnail safe-zones | `4px`/`8px` grid rules, `1280px` container padding, YouTube 16:9 (`96px` edge, `320x120px` bottom-right) and Shorts 9:16 safe margins. | |
59 | | -| **05** | **Corner Radius** | `skills/codingcat-design-system/references/05-corner-radius.md` | UI cards, lower-thirds, code frames | Tailwind `rounded-*` mappings from `0px` (`rounded-none`) to `16px` (`rounded-2xl`) and `9999px` (`rounded-full`). | |
60 | | -| **06** | **Shadows** | `skills/codingcat-design-system/references/06-shadows.md` | Elevation, neon glow effects | Dark-mode top-border highlights, `--cc-shadow-card`, `--cc-glow-purple`, `--cc-glow-lime`, and `--cc-thumbnail-drop`. | |
61 | | -| **07** | **Focus** | `skills/codingcat-design-system/references/07-focus.md` | Accessibility & interactive states | High-contrast Electric Lime (`#C5E86C`) and Soft Lavender (`#B4A7D6`) focus rings on `#0F172A` surfaces. | |
62 | | -| **08** | **Components** | `skills/codingcat-design-system/references/08-components.md` | Astro/React/shadcn UI & Canvas | Pre-approved Tailwind patterns: Primary Lime CTA, Secondary Purple Button, Bento Tutorial Card, AJ Callout Box, Comparison Table. | |
63 | | -| **09** | **Assets** | `skills/codingcat-design-system/references/09-assets.md` | Mascot (AJ) & Personal Likeness | Canonical 2D/3D AJ reference sheets (`assets/AJHeadphones.png`, `assets/AJ-2D-Bipedal.jpg`, `assets/AJ-3D-Headphones-*.jpg`). | |
64 | | -| **10** | **Files** | `skills/codingcat-design-system/references/10-files.md` | Raw templates & JSON schemas | `tokens/tokens.json`, Tailwind v4 `tokens/theme.css`, MDX frontmatter schemas, social templates. | |
65 | | -| **11** | **Voice & Copy** | `skills/alex-voice-and-copy/` | Blog posts, X threads, docs | Pragmatic Senior SE tone, **never use em-dashes**, **always use tables for comparisons**, "WTF is..." framing. | |
66 | | -| **12** | **Visual Prompts** | `skills/codingcat-media-studio/` | Thumbnails, Excalidraw, diagrams | Dark-mode Excalidraw rules (`#000000`/`#0F172A`), 2D upright bipedal & 3D vinyl-toy AJ prompts, Coral `#FCA5A5` `X` vs. Mint `#86EFAC` / Lime `#C5E86C` checkmarks. | |
67 | | -| **13** | **Video & Motion** | `skills/codingcat-media-studio/references/youtube-intros-and-video.md` | YouTube intros, shorts, motion | First-15-second retention hooks, presenter cutaway separation, lower-third plates. | |
68 | | - |
69 | | ---- |
70 | | - |
71 | | -## Summary of Core Specifications |
72 | | - |
73 | | -### 1. Color Palette (`02-colors.md` & `tokens/tokens.json`) |
74 | | - |
75 | | -| Token Name | Hex | Tailwind / CSS Variable | Primary Role | |
| 15 | +| Token Role | Light Mode (`8d1319903d504a79ae56110486455e17`) | Dark Mode (`b9e00f99c0d34e9884bf7766a014577b`) | CSS Custom Property | |
76 | 16 | | :--- | :--- | :--- | :--- | |
77 | | -| **Canvas Obsidian** | `#0F172A` | `bg-slate-900` / `--cc-bg-primary` | Primary page background | |
78 | | -| **Pure Void** | `#000000` | `bg-black` / `--cc-bg-void` | Excalidraw diagram wells & deepest dark contrast | |
79 | | -| **Surface Slate** | `#1E293B` | `bg-slate-800` / `--cc-surface` | Bento cards, code containers, callout boxes, table rows | |
80 | | -| **Elevated Surface** | `#334155` | `bg-slate-700` / `--cc-surface-elevated` | Hover states, modals, dropdowns | |
81 | | -| **CodingCat Royal Purple** | `#4B2E83` | `--cc-purple-primary` | Primary brand color, secondary buttons, AJ's headphones | |
82 | | -| **Soft Lavender** | `#B4A7D6` | `--cc-lavender` | Secondary accents, borders (`#B4A7D6/20`), overlines, AJ's collar & earcups | |
83 | | -| **Electric Lime Green** | `#C5E86C` | `--cc-lime` | Primary CTAs, focus rings, thumbnail highlight word, AJ's eyes, checkmarks | |
84 | | -| **Mint Success** | `#86EFAC` | `text-green-300` / `--cc-mint` | Excalidraw recommended pattern checkmarks (`✓`) | |
85 | | -| **Coral Anti-Pattern** | `#FCA5A5` | `text-red-300` / `--cc-coral` | Excalidraw anti-pattern `X` marks (`✗`) & errors | |
86 | | -| **Text Primary** | `#F8FAFC` | `text-slate-50` / `--cc-text-primary` | Primary headings & body copy (15.4:1 AAA on `#0F172A`) | |
87 | | -| **Text Muted** | `#94A3B8` | `text-slate-400` / `--cc-text-muted` | Secondary metadata & captions (7.1:1 AA+ on `#0F172A`) | |
88 | | - |
89 | | -### 2. Typography (`03-typography.md`) |
90 | | - |
91 | | -| Role | Font Family | Weights | Usage | |
92 | | -| :--- | :--- | :--- | :--- | |
93 | | -| **Chunky Display (`H1`)** | `Nunito` | `800`, `900` | Hero headlines, page `H1` titles, thumbnail display text (max 3-5 words) | |
94 | | -| **UI & Headings (`H2`-`H6`)** | `Inter` | `400` to `800` | Section subheadings, UI controls, body prose, comparison tables | |
95 | | -| **Code & Technical Badges** | `JetBrains Mono` | `400`, `500`, `700` | Code blocks, terminal output, category pills, timestamps | |
96 | | -| **Excalidraw Explanations** | `Virgil` / `Excalifont` | `400`, `700` | Hand-drawn diagram annotations in `#FFFFFF`, `#B4A7D6`, or `#C5E86C` | |
97 | | - |
98 | | -### 3. Canonical AJ the Cat Mascot Assets (`09-assets.md`) |
99 | | -- `assets/AJHeadphones.png`: 2D vector head-and-collar emblem of AJ wearing `"CodingCat.dev Podcast"` over-ear headphones and the pastel rainbow hexagonal `"AJ"` collar tag. |
100 | | -- `assets/AJ-2D-Bipedal.jpg`: 2D flat vector full-body upright bipedal AJ standing on two legs with dark gray oval belly patch, Electric Lime (`#C5E86C`) eyes, Soft Lavender (`#B4A7D6`) collar with hexagonal `"AJ"` tag, and over-ear Royal Purple/Lavender headphones. |
101 | | -- `assets/AJ-3D-Headphones-Front.jpg`, `assets/AJ-3D-Headphones-Left.jpg`, `assets/AJ-3D-Headphones-Right.jpg`: 3D stylized vinyl-toy turnaround renders of upright bipedal AJ on a circular pedestal base. |
102 | | - |
103 | | -### 4. Editorial & Media Studio Laws (`11` to `13`) |
104 | | -- **Zero Em-Dashes**: Never use the em-dash character anywhere in prose, UI copy, titles, or scripts. |
105 | | -- **Comparison Tables**: Always use Markdown or HTML tables when comparing tools, architectures, or trade-offs. |
106 | | -- **Excalidraw Separation**: Keep `@alex.patterson` presenter cutaways separate from dark-mode Excalidraw diagram canvases. |
| 17 | +| **Page Canvas** | `#FAF9FC` (`brand.chalk`) + `#D8B4FE` dot grid | `#0B1326` (`obsidian.DEFAULT`) + radial glows & dot grid | `--cc-bg-primary` | |
| 18 | +| **Secondary Canvas** | `#F5F3FB` (`brand.canvas`) | `#131B2E` (`obsidian.surface`) | `--cc-bg-canvas` | |
| 19 | +| **Card / Whiteboard** | `#FFFFFF` (`brand.paper`) | `#171F33` (`obsidian.card`) | `--cc-card` | |
| 20 | +| **Deep Code / Video Well** | `#2A1155` (`brand.dark`) | `#060E20` (`obsidian.deep`) | `--cc-bg-void` | |
| 21 | +| **Primary Ink / Text** | `#2A1155` (`brand.dark`) | `#F1F5F9` (`chalk.white`) | `--cc-text-primary` | |
| 22 | +| **Secondary Body Text** | `#4C1D95` (`purple-900`) | `#CBD5E1` (`slate-300`) | `--cc-text-secondary` | |
| 23 | +| **Muted / Accent Text** | `#6B21A8` (`purple-800`) | `#D8B4FE` (`purple-300`) | `--cc-text-muted` | |
| 24 | +| **Primary Brand Purple** | `#7C3AED` (hover `#8B5CF6`) | `#7C3AED` (hover `#8B5CF6`, lip `#4C1D95`) | `--cc-purple-primary` | |
| 25 | +| **Candy / Fuchsia Accent** | `#A855F7` / `#D946EF` | `#C084FC` (`chalk.candy`) / `#D946EF` | `--cc-candy` | |
| 26 | +| **Sketch Border** | `2px solid #2A1155` | `2px solid rgba(255, 255, 255, 0.22)` | `--cc-border-sketch` | |
| 27 | +| **Sunny Yellow (Sticky/Node)** | `#FEF08A` (text `#713F12`, border `#2A1155`) | Sticky `#FEF08A` / Node `rgba(66, 32, 6, 0.8)` (`#FACC15` border) | `--cc-yellow-bg` | |
| 28 | +| **Sky Blue (Node/Header)** | `#BAE6FD` (text `#0369A1`, border `#2A1155`) | `rgba(8, 47, 73, 0.8)` (`#38BDF8` border, `#BAE6FD` text) | `--cc-sky-bg` | |
| 29 | +| **Candy Pink (Node/Header)** | `#FBCFE8` (text `#9D174D`, border `#2A1155`) | `rgba(80, 7, 36, 0.55)` (`#F472B6` border, `#F9A8D4` text) | `--cc-pink-bg` | |
| 30 | +| **Lilac (Node/Header)** | `#EDE9FE` (text `#5B21B6`, border `#2A1155`) | `rgba(59, 7, 100, 0.65)` (`#C084FC` border, `#E9D5FF` text) | `--cc-lilac-bg` | |
| 31 | +| **Mint / Emerald Green** | `#86EFAC` / `#58CC02` (pill `#DCFCE7`, text `#166534`) | `#86EFAC` / `#34D399` (pill `rgba(2, 44, 34, 0.8)`, text `#6EE7B7`) | `--cc-mint` | |
| 32 | + |
| 33 | +## 3. Typography Hierarchy |
| 34 | + |
| 35 | +1. **Display Headlines (`--font-display`)**: `Nunito` / `Fredoka` (`800-900` weight, tight tracking `-0.03em`). Used for playful lowercase hero and section titles (`free. fun. purrfect.`, `learn by building.`, `meet real codingcat learners & guests`). |
| 36 | +2. **Excalidraw Hand-Drawn Explanations (`--font-hand`)**: `Virgil` / `Caveat` (`400-700` weight). Used for sketch subtitles (`learn by building real apps.`), sticky notes (`AJ's Tip`), flowchart node labels, and speech bubbles (`"Purrfect code!"`). |
| 37 | +3. **UI & Editorial Body (`--font-sans`)**: `Plus Jakarta Sans` / `Inter` (`400-700` weight). |
| 38 | +4. **Code & Metadata Badges (`--font-mono`)**: `JetBrains Mono` (`500-700` weight). |
| 39 | + |
| 40 | +## 4. Hand-Drawn Borders, Sketch Shadows & Tactile Buttons |
| 41 | + |
| 42 | +- **`.hand-border`**: |
| 43 | + ```css |
| 44 | + border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; |
| 45 | + border: 2px solid var(--cc-border-sketch); |
| 46 | + ``` |
| 47 | +- **`.hand-border-rect`**: |
| 48 | + ```css |
| 49 | + border-radius: 20px 8px 18px 10px; |
| 50 | + border: 2px solid var(--cc-border-sketch); |
| 51 | + ``` |
| 52 | +- **`.shadow-sketch`**: |
| 53 | + - Light Mode: `3px 4px 0px 0px #2A1155` (`sm`: `2px 2px`, `lg`: `6px 7px`) |
| 54 | + - Dark Mode: `3px 4px 0px 0px rgba(0, 0, 0, 0.75)` (`sm`: `2px 2px`, `lg`: `6px 7px`) |
| 55 | +- **Primary Tactile CTA (`.tactile-btn`)**: |
| 56 | + - Light Mode: `background: #2A1155` (hover `#7C3AED`), white text, `#86EFAC` arrow, `box-shadow: 3px 4px 0 #2A1155` |
| 57 | + - Dark Mode: `background: #7C3AED` (hover `#8B5CF6`), white text, `#6EE7B7` arrow, `box-shadow: 0 4px 0 #4C1D95, 0 8px 20px rgba(124, 58, 237, 0.4)` |
| 58 | +- **`.chalk-hatch`**: |
| 59 | + - Diagonal `-45deg` repeating marker hatch fill in purple/lavender (`rgba(167, 139, 250, 0.35)` Light / `rgba(168, 85, 247, 0.35)` Dark). |
0 commit comments