Genie Studio — Agent Skill
This is a design system extracted from the Genie Studio web app (codename: Creative Cortex), an AI canvas-based image creation tool by Genie Labs. Use these tokens, components, and conventions when designing for or extending the product.
When to use this skill
Reach for this skill when you're:
- Designing new screens, flows, or features for Genie Studio (the web app at
/boards, /board/:id)
- Building marketing or onboarding surfaces in the Genie Studio visual language
- Making internal tools that should match the Genie brand
- Recreating Genie Studio UI in mocks, prototypes, or hi-fi designs
Don't use it for: unrelated Genie Labs products, marketing collateral that calls for its own visual identity, or anything that needs full-bleed photography / heavy gradients (the system explicitly avoids those).
Where to look
| Need |
File |
| Color + type tokens (CSS vars) |
colors_and_type.css |
| Tone of voice, copy patterns |
README.md → CONTENT FUNDAMENTALS |
| Spacing, radii, shadows, motion |
README.md → VISUAL FOUNDATIONS |
| Iconography rules (bespoke + Lucide) |
README.md → ICONOGRAPHY |
| Brand mark |
assets/genie-icon.svg |
| Product icons (24×24 SVG, currentColor) |
assets/icons/ |
| Token review cards |
preview/ |
| Composed screens (Boards + Canvas + Chat) |
ui_kits/web/index.html |
Hard rules (memorize)
- One brand color, used sparingly. Genie blue
#45b3fd (--genie-4) for primary buttons, focus, links, brand. Charcoal carries the rest.
- Sentence case everywhere. "+ New board", not "+ New Board".
- No emoji. Ever. Not in copy, not as icons.
- No marketing gradients. The thinking shimmer is the only expressive gradient. Don't invent purple/blue washes.
- Padding + flex/grid + gap. No layout margins.
- Icons are stroke 1.5px, currentColor, 24×24 — bespoke set in
assets/icons/, otherwise Lucide. Never Heroicons / Phosphor / Material.
- Floating chrome over canvas = translucent white pill.
bg-white/95 + backdrop-blur + border-charcoal-2.5 + shadow-card. Never use vignette/protection gradients.
- Soft shadows only. Three canonical:
shadow-card, shadow-button, shadow-attachment. No inner, no colored, no glow.
- Light mode only. No dark mode in production.
- Inter is a stand-in for SF Pro. Real product looks slightly tighter. Don't add other display fonts.
Copy templates
- CTA:
+ New board, + New, Share
- Empty state:
No boards yet / Create your first board to get started
- Loading:
Creating… (U+2026, never ...)
- Error toast:
Failed to <verb> <noun> (e.g. Failed to save board name)
- Page header: noun + short noun-phrase subtitle (
Boards / Your canvas workspaces)
- Tab labels:
Genie, Asset Library, Image History
- Affordance labels: verbs only (
Edit, Resize, Remove BG, Split layers, Download)
Default component recipes
- Button (primary):
h-8 px-4 rounded-lg bg-charcoal-7 text-white text-sm font-medium, hover → bg-charcoal-6.
- Card:
bg-white border border-charcoal-2 rounded-lg shadow-button, hover → shadow-md, border-charcoal-2.5.
- Toolbar (floating over canvas): vertical capsule, 4px inner padding, 36px buttons, 8px radius. Hover →
highlight-2. Active → highlight-4.
- Side panel: fixed 400px right, full height, 24px page padding, inner panel =
bg-white/92 + backdrop-blur + 16px radius + shadow-card.
- Prompt input: 12px-radius bordered group, textarea + addon row with attachment / layout icon-buttons on left, 32px send button (
bg-charcoal-7) on right.
- Thinking shimmer:
Inter 300, gradient genie-4 → mag-4(0.75) → genie-4, 3s linear infinite, background-clip:text.
Caveats
- SF Pro substituted with Inter; production text is slightly tighter.
- No Figma — component specs come from reading the React source.
- No dark mode coverage.
- No marketing/landing surfaces in source.
1---2name: genie-studio3description: Genie Studio — Agent Skill4---5# Genie Studio — Agent Skill67This is a design system extracted from the **Genie Studio** web app (codename: Creative Cortex), an AI canvas-based image creation tool by Genie Labs. Use these tokens, components, and conventions when designing for or extending the product.89## When to use this skill1011Reach for this skill when you're:12- Designing **new screens, flows, or features** for Genie Studio (the web app at `/boards`, `/board/:id`)13- Building **marketing or onboarding surfaces** in the Genie Studio visual language14- Making **internal tools** that should match the Genie brand15- Recreating Genie Studio UI in mocks, prototypes, or hi-fi designs1617Don't use it for: unrelated Genie Labs products, marketing collateral that calls for its own visual identity, or anything that needs full-bleed photography / heavy gradients (the system explicitly avoids those).1819## Where to look2021| Need | File |22|---|---|23| Color + type tokens (CSS vars) | `colors_and_type.css` |24| Tone of voice, copy patterns | `README.md` → CONTENT FUNDAMENTALS |25| Spacing, radii, shadows, motion | `README.md` → VISUAL FOUNDATIONS |26| Iconography rules (bespoke + Lucide) | `README.md` → ICONOGRAPHY |27| Brand mark | `assets/genie-icon.svg` |28| Product icons (24×24 SVG, currentColor) | `assets/icons/` |29| Token review cards | `preview/` |30| Composed screens (Boards + Canvas + Chat) | `ui_kits/web/index.html` |3132## Hard rules (memorize)33341. **One brand color, used sparingly.** Genie blue `#45b3fd` (`--genie-4`) for primary buttons, focus, links, brand. Charcoal carries the rest.352. **Sentence case everywhere.** "+ New board", not "+ New Board".363. **No emoji. Ever.** Not in copy, not as icons.374. **No marketing gradients.** The thinking shimmer is the *only* expressive gradient. Don't invent purple/blue washes.385. **Padding + flex/grid + gap. No layout margins.**396. **Icons are stroke 1.5px, currentColor, 24×24** — bespoke set in `assets/icons/`, otherwise Lucide. Never Heroicons / Phosphor / Material.407. **Floating chrome over canvas = translucent white pill.** `bg-white/95 + backdrop-blur + border-charcoal-2.5 + shadow-card`. Never use vignette/protection gradients.418. **Soft shadows only.** Three canonical: `shadow-card`, `shadow-button`, `shadow-attachment`. No inner, no colored, no glow.429. **Light mode only.** No dark mode in production.4310. **Inter is a stand-in for SF Pro.** Real product looks slightly tighter. Don't add other display fonts.4445## Copy templates4647- **CTA:** `+ New board`, `+ New`, `Share`48- **Empty state:** `No boards yet` / `Create your first board to get started`49- **Loading:** `Creating…` (U+2026, never `...`)50- **Error toast:** `Failed to <verb> <noun>` (e.g. `Failed to save board name`)51- **Page header:** noun + short noun-phrase subtitle (`Boards` / `Your canvas workspaces`)52- **Tab labels:** `Genie`, `Asset Library`, `Image History`53- **Affordance labels:** verbs only (`Edit`, `Resize`, `Remove BG`, `Split layers`, `Download`)5455## Default component recipes5657- **Button (primary):** `h-8 px-4 rounded-lg bg-charcoal-7 text-white text-sm font-medium`, hover → `bg-charcoal-6`.58- **Card:** `bg-white border border-charcoal-2 rounded-lg shadow-button`, hover → `shadow-md, border-charcoal-2.5`.59- **Toolbar (floating over canvas):** vertical capsule, 4px inner padding, 36px buttons, 8px radius. Hover → `highlight-2`. Active → `highlight-4`.60- **Side panel:** fixed 400px right, full height, 24px page padding, inner panel = `bg-white/92 + backdrop-blur + 16px radius + shadow-card`.61- **Prompt input:** 12px-radius bordered group, textarea + addon row with attachment / layout icon-buttons on left, 32px send button (`bg-charcoal-7`) on right.62- **Thinking shimmer:** `Inter 300`, gradient `genie-4 → mag-4(0.75) → genie-4`, 3s linear infinite, `background-clip:text`.6364## Caveats6566- SF Pro substituted with Inter; production text is slightly tighter.67- No Figma — component specs come from reading the React source.68- No dark mode coverage.69- No marketing/landing surfaces in source.
genielabsopensource