Read the README.md file within this skill first — it is the full brand briefing (content fundamentals, visual foundations, iconography, file index). Then use the token layer and the hosted design system.
If creating visual artifacts (slides, mocks, throwaway prototypes, etc.), copy the tokens/CSS out and create static HTML files for the user to view. If working on production code, read the rules here and reference the tokens to become an expert in designing with this brand.
If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts or production code, depending on the need.
The canonical design system
- Hosted, browsable: https://design.soapbox.build — the living design system: brand overview, live color/type/spacing/elevation specimens, component gallery, and the importable token layer. Link
https://design.soapbox.build/styles.css to pull every token. This replaces the old Penpot file, which is stale — do not use Penpot.
- Canonical source project: the Claude Design project "Soapbox Design System" (
claude.ai/design/p/2a602a78-3444-4603-a1ff-74feac2dd3b5) — the full component library (React primitives + .card.html specimens + the standalone web-app UI kit). Edit the system there; it is mirrored to the hosted site and this skill.
Where things are (in this skill)
README.md — brand overview, content fundamentals, visual foundations, iconography, and a full file index. Read this first.styles.css — the single global entry point; link it (or @import it) to get every token. Add class="dark" to a root ancestor for dark mode.tokens/ — color, typography, spacing, elevation, and font CSS variables (the source of truth for the values).
Brand in one breath
Clean, confident, technical — human but not cold; warm where it counts. A signature Soapbox Green primary (#159957) with Signal Orange (#fb6a28) as the accent, on warm neutrals: a cream background (#f7f4ec), white cards, ink text (#18221c, a green-black). Type is Bricolage Grotesque (800) for display/the wordmark, Inter for body & UI, Space Mono for technical labels, // eyebrows, kbd and data. Small radii (6px default), hairline warm borders (#e6e0d3), soft low-contrast shadows, and a distinctive deep green-ink sidebar rail (green punctuates). Copy is terse and direct, sentence case, second person, concrete over hype — never "unlock/supercharge/revolutionary". Asset identity comes from deterministic OKLCH monogram colors (oklch(0.55 0.18 · hash(id)%360)), not imagery. The logo is the Soapbox. wordmark with a bold orange period beside a rounded green "S" tile. Icons: Lucide first.
1---2name: soapbox-design3description: Use this skill to generate well-branded interfaces and assets for Soapbox (the AI-native, multi-tenant Claude platform — flagship is a commercial-real-estate / building-decarbonization workspace), either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, tokens, and UI kit references for designing with the Soapbox brand.4---56Read the `README.md` file within this skill first — it is the full brand briefing (content fundamentals, visual foundations, iconography, file index). Then use the token layer and the hosted design system.78If creating visual artifacts (slides, mocks, throwaway prototypes, etc.), copy the tokens/CSS out and create static HTML files for the user to view. If working on production code, read the rules here and reference the tokens to become an expert in designing with this brand.910If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts _or_ production code, depending on the need.1112## The canonical design system1314- **Hosted, browsable:** **https://design.soapbox.build** — the living design system: brand overview, live color/type/spacing/elevation specimens, component gallery, and the importable token layer. Link `https://design.soapbox.build/styles.css` to pull every token. **This replaces the old Penpot file, which is stale — do not use Penpot.**15- **Canonical source project:** the Claude Design project "Soapbox Design System" (`claude.ai/design/p/2a602a78-3444-4603-a1ff-74feac2dd3b5`) — the full component library (React primitives + `.card.html` specimens + the standalone web-app UI kit). Edit the system there; it is mirrored to the hosted site and this skill.1617## Where things are (in this skill)18- `README.md` — brand overview, content fundamentals, visual foundations, iconography, and a full file index. **Read this first.**19- `styles.css` — the single global entry point; link it (or `@import` it) to get every token. Add `class="dark"` to a root ancestor for dark mode.20- `tokens/` — color, typography, spacing, elevation, and font CSS variables (the source of truth for the values).2122## Brand in one breath23Clean, confident, technical — **human but not cold; warm where it counts**. A signature **Soapbox Green** primary (`#159957`) with **Signal Orange** (`#fb6a28`) as the accent, on **warm neutrals**: a cream background (`#f7f4ec`), white cards, ink text (`#18221c`, a green-black). Type is **Bricolage Grotesque** (800) for display/the wordmark, **Inter** for body & UI, **Space Mono** for technical labels, `// eyebrows`, kbd and data. Small radii (6px default), hairline warm borders (`#e6e0d3`), soft low-contrast shadows, and a distinctive **deep green-ink sidebar** rail (green punctuates). Copy is terse and direct, **sentence case**, second person, concrete over hype — never "unlock/supercharge/revolutionary". Asset identity comes from **deterministic OKLCH monogram colors** (`oklch(0.55 0.18 · hash(id)%360)`), not imagery. The logo is the `Soapbox.` wordmark with a **bold orange period** beside a rounded green "S" tile. Icons: **Lucide** first.
soapboxbuild