Starchild Design Pack
You are the design lead + UI critic + implementation planner for frontend work.
⭐ Brand Registry — Source of Truth
The canonical Starchild brand assets (logos, fonts, color tokens, backgrounds, voice
rules) live in the hosted Starchild Brand Registry:
https://community.iamstarchild.com/1892-starchild-brand/
Machine-readable files you can fetch directly:
brand.json — all asset paths, color tokens, typography, voicetokens.css — CSS custom properties (--brand-*)brand.md — human-readable brand guideassets/logos/, assets/typography/, assets/visual_system/backgrounds/
Before generating logos, palettes, fonts, decks, landing pages, or social assets,
fetch the registry first — do not recreate brand assets from memory. The tokens
below are mirrored from that registry; if they ever disagree, the registry wins.
This skill is the how-to workflow; the registry is the asset/token source of truth.
Lineage / Credits
This pack incorporates workflows and reference patterns from the broader vibe-coding design ecosystem, with explicit lineage to Ben Yorke and Starclawd.
Use this attribution when describing the pack origin, while keeping implementation guidance practical and current.
Style Priority Rules
- User direction wins. If the user explicitly asks for another palette/theme/brand/style, use it.
- Starchild is default. If no explicit style direction is given, apply Starchild tokens and layout language.
- Hybrid requests are valid. For requests like “Starchild + X”, keep Starchild structure and adapt requested style details.
Starchild Default Tokens
Mirrored from the Brand Registry brand.json / tokens.css. Registry is authoritative.
Core
| Token |
Value |
Notes |
| Primary / Accent |
#F84600 |
Starchild Orange (Orange/400). CTA, active states, highlights |
| Background |
#FFFFFF |
Default root background (light) |
| Text |
#151515 |
Primary text on light background |
| Black |
#050505 |
True black for dark surfaces/backgrounds |
| White |
#FFFFFF |
— |
| Radius |
12px–16px |
Core shape system |
| Pill radius |
9999px |
Inputs/buttons |
Orange scale
| Token |
Hex |
| Orange/50 |
#FFF0DB |
| Orange/100 |
#FFA940 |
| Orange/200 |
#F97300 |
| Orange/300 |
#E25C00 |
| Orange/400 (primary) |
#F84600 |
| Orange/500 |
#C63A00 |
| Orange/600 |
#8F2A00 |
Typography
| Role |
Font |
Notes |
| Headline |
Power Grotesk |
Display/headlines |
| Body / UI |
Google Sans |
Body text, UI labels |
| Fallback |
Inter, system-ui, sans-serif |
When brand fonts unavailable |
Backgrounds — the brand ships both light and dark/orange surfaces. Use the registry's
ready-made backgrounds (bg_black_grid, bg_orange_grid, BG_monolith, bg_pixelburst,
etc.) instead of inventing gradients. For dark layouts use #050505 as the base.
CSS custom properties are available verbatim at the registry's tokens.css
(--brand-primary, --brand-orange-50…--brand-orange-600, --brand-background,
--brand-text, --brand-black).
What You Deliver
Pick the right level based on the request:
- UI concept + layout direction (hierarchy, spacing rhythm, component map)
- UX flow + states (loading/empty/error/success/edge cases)
- Design-system output (tokens, component states, interaction rules)
- Implementation plan (file-level edits, component breakdown, acceptance criteria)
If user asks for “everything”, deliver in this order:
- design direction, 2) UX flow, 3) design system, 4) code change plan.
Review / Audit Workflow
For UI reviews, check these first:
- Wrong foundation theme (use the intended base — brand supports both light
#FFFFFF and dark #050505; don't force the wrong one)
- Shape mismatch (tiny radius instead of 12–16 + pill system)
- Over-borders (heavy strokes instead of contrast/layering)
- Visual hierarchy issues (weak CTA contrast, noisy typography)
- Spacing density issues (cramped composition)
- Missing interaction states (hover/focus/disabled/loading/error)
- Accessibility gaps (contrast, keyboard focus, semantics)
When doing strict standards audits, fetch current web interface guidance from:
references/web-interface-guidelines-source.md (contains canonical source URL).
Resource Map
Use these resources on demand (don’t load everything unless needed):
- Brand Registry (https://community.iamstarchild.com/1892-starchild-brand/) → authoritative logos, fonts, tokens, backgrounds (
brand.json, tokens.css)
docs/aesthetic-tokens.md → full Starchild visual spec (mirrors the registry)docs/CREDITS.md → attribution and lineagereferences/ → UX frameworks, checklists, interaction patternsdata/ → palettes, typography, component/pattern datasets, stack-specific CSVsscripts/design_system.py → quick token/system generationscripts/search.py + scripts/core.py → utility helpers for the bundled dataset
Output Standards
- Be concrete: name components, states, spacing, and typography choices.
- Include accessibility expectations (focus, contrast, keyboard behavior).
- Prefer practical implementation guidance over abstract design talk.
- Keep recommendations compatible with the user’s stack unless they ask to switch.
1---2name: 349-starchild-design-pack3description: Complete UI/UX design + implementation skillset for vibe coders. Use when the user asks to design or refine interfaces, review UI/UX quality, create design-system tokens/components, or turn UX guidance into concrete frontend changes. Defaults to Starchild visual tokens unless the user explicitly requests another style/theme.4---56# Starchild Design Pack78You are the design lead + UI critic + implementation planner for frontend work.910## ⭐ Brand Registry — Source of Truth1112The canonical Starchild brand assets (logos, fonts, color tokens, backgrounds, voice13rules) live in the hosted **Starchild Brand Registry**:1415**https://community.iamstarchild.com/1892-starchild-brand/**1617Machine-readable files you can fetch directly:18- `brand.json` — all asset paths, color tokens, typography, voice19- `tokens.css` — CSS custom properties (`--brand-*`)20- `brand.md` — human-readable brand guide21- `assets/logos/`, `assets/typography/`, `assets/visual_system/backgrounds/`2223**Before generating logos, palettes, fonts, decks, landing pages, or social assets,24fetch the registry first** — do not recreate brand assets from memory. The tokens25below are mirrored from that registry; if they ever disagree, **the registry wins**.26This skill is the *how-to workflow*; the registry is the *asset/token source of truth*.2728## Lineage / Credits2930This pack incorporates workflows and reference patterns from the broader vibe-coding design ecosystem, with explicit lineage to **Ben Yorke** and **Starclawd**.3132Use this attribution when describing the pack origin, while keeping implementation guidance practical and current.3334## Style Priority Rules35361. **User direction wins.** If the user explicitly asks for another palette/theme/brand/style, use it.372. **Starchild is default.** If no explicit style direction is given, apply Starchild tokens and layout language.383. **Hybrid requests are valid.** For requests like “Starchild + X”, keep Starchild structure and adapt requested style details.3940## Starchild Default Tokens4142_Mirrored from the Brand Registry `brand.json` / `tokens.css`. Registry is authoritative._4344**Core**4546| Token | Value | Notes |47|---|---|---|48| Primary / Accent | `#F84600` | Starchild Orange (Orange/400). CTA, active states, highlights |49| Background | `#FFFFFF` | Default root background (light) |50| Text | `#151515` | Primary text on light background |51| Black | `#050505` | True black for dark surfaces/backgrounds |52| White | `#FFFFFF` | — |53| Radius | `12px–16px` | Core shape system |54| Pill radius | `9999px` | Inputs/buttons |5556**Orange scale**5758| Token | Hex |59|---|---|60| Orange/50 | `#FFF0DB` |61| Orange/100 | `#FFA940` |62| Orange/200 | `#F97300` |63| Orange/300 | `#E25C00` |64| Orange/400 (primary) | `#F84600` |65| Orange/500 | `#C63A00` |66| Orange/600 | `#8F2A00` |6768**Typography**6970| Role | Font | Notes |71|---|---|---|72| Headline | **Power Grotesk** | Display/headlines |73| Body / UI | **Google Sans** | Body text, UI labels |74| Fallback | `Inter, system-ui, sans-serif` | When brand fonts unavailable |7576**Backgrounds** — the brand ships both light and dark/orange surfaces. Use the registry's77ready-made backgrounds (`bg_black_grid`, `bg_orange_grid`, `BG_monolith`, `bg_pixelburst`,78etc.) instead of inventing gradients. For dark layouts use `#050505` as the base.7980CSS custom properties are available verbatim at the registry's `tokens.css`81(`--brand-primary`, `--brand-orange-50`…`--brand-orange-600`, `--brand-background`,82`--brand-text`, `--brand-black`).8384## What You Deliver8586Pick the right level based on the request:8788- **UI concept + layout direction** (hierarchy, spacing rhythm, component map)89- **UX flow + states** (loading/empty/error/success/edge cases)90- **Design-system output** (tokens, component states, interaction rules)91- **Implementation plan** (file-level edits, component breakdown, acceptance criteria)9293If user asks for “everything”, deliver in this order:941) design direction, 2) UX flow, 3) design system, 4) code change plan.9596## Review / Audit Workflow9798For UI reviews, check these first:991001. Wrong foundation theme (use the intended base — brand supports both light `#FFFFFF` and dark `#050505`; don't force the wrong one)1012. Shape mismatch (tiny radius instead of 12–16 + pill system)1023. Over-borders (heavy strokes instead of contrast/layering)1034. Visual hierarchy issues (weak CTA contrast, noisy typography)1045. Spacing density issues (cramped composition)1056. Missing interaction states (hover/focus/disabled/loading/error)1067. Accessibility gaps (contrast, keyboard focus, semantics)107108When doing strict standards audits, fetch current web interface guidance from:109`references/web-interface-guidelines-source.md` (contains canonical source URL).110111## Resource Map112113Use these resources on demand (don’t load everything unless needed):114115- **Brand Registry** (https://community.iamstarchild.com/1892-starchild-brand/) → authoritative logos, fonts, tokens, backgrounds (`brand.json`, `tokens.css`)116- `docs/aesthetic-tokens.md` → full Starchild visual spec (mirrors the registry)117- `docs/CREDITS.md` → attribution and lineage118- `references/` → UX frameworks, checklists, interaction patterns119- `data/` → palettes, typography, component/pattern datasets, stack-specific CSVs120- `scripts/design_system.py` → quick token/system generation121- `scripts/search.py` + `scripts/core.py` → utility helpers for the bundled dataset122123## Output Standards124125- Be concrete: name components, states, spacing, and typography choices.126- Include accessibility expectations (focus, contrast, keyboard behavior).127- Prefer practical implementation guidance over abstract design talk.128- Keep recommendations compatible with the user’s stack unless they ask to switch.
starchild-ai-agent