--- name: Carbon Folio theme: dark-portfolio version: "1.0" colors: primary: "#111110" surface: "#1A1A18" surface2: "#222220" accent: "#D4A262" text: "#F8F6F2" muted: "#6B6B68" border: "rgba(248, 246, 242, 0.08)" fonts: display: "Plus Jakarta Sans" body: "DM Sans" mono: "JetBrains Mono" spacing: base: 4px scale: [4, 8, 12, 16, 24, 32, 48, 64, 96, 128] radius: sm: 4px md: 8px lg: 16px components: - Buttons - Badges - Cards - Form Inputs - Stat Block - Section Header - Portfolio Grid - Blog Grid - Timeline - Skills Grid modes: - dark (default) - light pages: - index.html - portfolio.html - about.html - blog.html - contact.html agent_rules: - "Use the spacing scale — no arbitrary values" - "Accent (#D4A262) only for interactive elements, highlights, and CTAs" - "Cards use --surface, never --bg directly" - "Dark mode is default; light mode via [data-theme='light'] on element" - "Mouse spotlight: update --mx/--my on :root via mousemove event in pixels" - "Plus Jakarta Sans for all headings (700-800 weight, often uppercase)" - "DM Sans for body text (400-500 weight)" - "Border separation preferred over shadows for card definition" full-kit: "stacklift.design/kits/carbon-folio" --- # Carbon Folio — Design System Drop this file at your repo root. Your AI agent reads it automatically. ## Pages - `index.html` — Home (hero, clients, selected work, services, about teaser, contact CTA) - `portfolio.html` — Full work grid with category filters - `about.html` — Bio, stats, experience timeline, skills - `blog.html` — Article grid with tags and dates - `contact.html` — Contact form + info ## Theme modes Dark mode is default. Add `data-theme="light"` to `` for light mode. All CSS vars switch automatically. ## Mouse spotlight Track cursor with `mousemove` → set `--mx` / `--my` on `:root` in px → `body::before` renders a radial-gradient amber glow following the cursor. Subtle (5% opacity), premium.