get-shit-pretty 0.6.2 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -12
- package/bin/install.js +125 -84
- package/gsp/agents/gsp-accessibility-auditor.md +4 -4
- package/gsp/agents/gsp-ascii-artist.md +2 -2
- package/gsp/agents/gsp-brand-auditor.md +3 -3
- package/gsp/agents/gsp-brand-engineer.md +131 -0
- package/gsp/agents/gsp-brand-strategist.md +3 -3
- package/gsp/agents/gsp-brand-syncer.md +8 -7
- package/gsp/agents/gsp-builder.md +49 -6
- package/gsp/agents/gsp-campaign-director.md +3 -4
- package/gsp/agents/gsp-creative-director.md +80 -0
- package/gsp/agents/gsp-critic.md +100 -18
- package/gsp/agents/gsp-designer.md +52 -5
- package/gsp/agents/gsp-project-researcher.md +4 -4
- package/gsp/agents/gsp-researcher.md +5 -5
- package/gsp/agents/gsp-reviewer.md +3 -3
- package/gsp/agents/gsp-scoper.md +3 -3
- package/gsp/hooks/hooks.json +5 -5
- package/gsp/skills/get-shit-pretty/SKILL.md +10 -9
- package/gsp/skills/gsp-accessibility/SKILL.md +12 -12
- package/gsp/skills/gsp-accessibility-audit/SKILL.md +8 -9
- package/gsp/skills/gsp-add-reference/SKILL.md +6 -1
- package/gsp/skills/gsp-art/SKILL.md +6 -1
- package/gsp/skills/gsp-brand-audit/SKILL.md +5 -5
- package/gsp/skills/gsp-brand-guidelines/SKILL.md +233 -0
- package/gsp/skills/gsp-brand-guidelines/token-mapping.md +329 -0
- package/gsp/skills/gsp-brand-identity/SKILL.md +29 -20
- package/gsp/skills/gsp-brand-refine/SKILL.md +30 -23
- package/gsp/skills/gsp-brand-research/SKILL.md +4 -4
- package/gsp/{references → skills/gsp-brand-research}/design-trends.md +4 -4
- package/gsp/skills/gsp-brand-strategy/SKILL.md +7 -7
- package/gsp/skills/gsp-brand-sync/SKILL.md +10 -10
- package/gsp/skills/gsp-brand-sync/chunk-format.md +79 -0
- package/gsp/skills/gsp-color/SKILL.md +73 -0
- package/gsp/skills/gsp-color/chunk-format.md +79 -0
- package/gsp/skills/{gsp-palette/SKILL.md → gsp-color/domains/palette.md} +31 -101
- package/gsp/skills/gsp-color/domains/system.md +123 -0
- package/gsp/skills/gsp-design-system/SKILL.md +9 -4
- package/gsp/skills/gsp-doctor/SKILL.md +25 -18
- package/gsp/skills/gsp-help/SKILL.md +30 -29
- package/gsp/skills/gsp-icons/SKILL.md +108 -0
- package/gsp/skills/gsp-icons/chunk-format.md +79 -0
- package/gsp/skills/gsp-launch/SKILL.md +3 -4
- package/gsp/skills/gsp-logo/SKILL.md +173 -0
- package/gsp/skills/gsp-logo/chunk-format.md +79 -0
- package/gsp/skills/gsp-phase-transition/SKILL.md +124 -0
- package/gsp/skills/gsp-pretty/SKILL.md +2 -2
- package/gsp/skills/gsp-progress/SKILL.md +20 -20
- package/gsp/skills/gsp-project-brief/SKILL.md +8 -9
- package/gsp/skills/gsp-project-build/SKILL.md +30 -25
- package/gsp/skills/gsp-project-critique/SKILL.md +17 -18
- package/gsp/{references → skills/gsp-project-critique}/visual-taste.md +1 -1
- package/gsp/skills/gsp-project-design/SKILL.md +18 -18
- package/gsp/skills/gsp-project-research/SKILL.md +6 -7
- package/gsp/skills/gsp-project-review/SKILL.md +8 -10
- package/gsp/skills/gsp-scaffold/SKILL.md +3 -3
- package/gsp/skills/gsp-start/SKILL.md +15 -15
- package/gsp/{references → skills/gsp-start}/questioning.md +1 -1
- package/gsp/skills/gsp-style/SKILL.md +43 -45
- package/gsp/skills/gsp-style/chunk-format.md +79 -0
- package/gsp/skills/gsp-style/style-preset-schema.md +124 -0
- package/gsp/skills/gsp-style/styles/INDEX.yml +1 -1
- package/gsp/skills/gsp-style/styles/academia.yml +80 -0
- package/gsp/skills/gsp-style/styles/art-deco.yml +81 -0
- package/gsp/skills/gsp-style/styles/bauhaus.yml +78 -0
- package/gsp/skills/gsp-style/styles/bold-typography.yml +73 -0
- package/gsp/skills/gsp-style/styles/botanical.yml +78 -0
- package/gsp/skills/gsp-style/styles/claymorphism.yml +84 -0
- package/gsp/skills/gsp-style/styles/cyberpunk.yml +87 -0
- package/gsp/skills/gsp-style/styles/enterprise.yml +81 -0
- package/gsp/skills/gsp-style/styles/flat-design.yml +67 -0
- package/gsp/skills/gsp-style/styles/fluent.yml +82 -0
- package/gsp/skills/gsp-style/styles/glassmorphism.yml +83 -0
- package/gsp/skills/gsp-style/styles/humanist-literary.yml +74 -0
- package/gsp/skills/gsp-style/styles/industrial.yml +82 -0
- package/gsp/skills/gsp-style/styles/kinetic.yml +94 -0
- package/gsp/skills/gsp-style/styles/liquid-glass.yml +91 -0
- package/gsp/skills/gsp-style/styles/luxury.yml +83 -0
- package/gsp/skills/gsp-style/styles/material.yml +83 -0
- package/gsp/skills/gsp-style/styles/maximalism.yml +92 -0
- package/gsp/skills/gsp-style/styles/minimal-dark.yml +75 -0
- package/gsp/skills/gsp-style/styles/modern-dark.yml +88 -0
- package/gsp/skills/gsp-style/styles/monochrome.yml +68 -0
- package/gsp/skills/gsp-style/styles/neubrutalism.yml +83 -0
- package/gsp/skills/gsp-style/styles/neumorphism.yml +77 -0
- package/gsp/skills/gsp-style/styles/newsprint.yml +81 -0
- package/gsp/skills/gsp-style/styles/organic.yml +77 -0
- package/gsp/skills/gsp-style/styles/playful-geometric.yml +90 -0
- package/gsp/skills/gsp-style/styles/professional.yml +67 -0
- package/gsp/skills/gsp-style/styles/retro.yml +85 -0
- package/gsp/skills/gsp-style/styles/saas.yml +83 -0
- package/gsp/skills/gsp-style/styles/sketch.yml +86 -0
- package/gsp/skills/gsp-style/styles/swiss-minimalist.yml +69 -0
- package/gsp/skills/gsp-style/styles/terminal.yml +83 -0
- package/gsp/skills/gsp-style/styles/vaporwave.yml +84 -0
- package/gsp/skills/gsp-style/styles/web3.yml +82 -0
- package/gsp/skills/gsp-typography/SKILL.md +70 -0
- package/gsp/skills/gsp-typography/chunk-format.md +79 -0
- package/gsp/skills/gsp-typography/domains/pairing.md +109 -0
- package/gsp/skills/gsp-typography/domains/scale.md +227 -0
- package/gsp/skills/gsp-typography/domains/system.md +108 -0
- package/gsp/skills/gsp-update/SKILL.md +1 -2
- package/gsp/skills/gsp-visuals/SKILL.md +82 -0
- package/gsp/skills/gsp-visuals/chunk-format.md +79 -0
- package/gsp/skills/gsp-visuals/domains/3d.md +127 -0
- package/gsp/skills/gsp-visuals/domains/imagery.md +145 -0
- package/gsp/skills/gsp-visuals/domains/textures.md +138 -0
- package/gsp/skills/gsp-visuals/domains/video.md +107 -0
- package/gsp/templates/branding/config.json +1 -1
- package/gsp/templates/branding/roadmap.md +9 -9
- package/gsp/templates/exports-index.md +8 -8
- package/gsp/templates/phases/brief.md +1 -1
- package/gsp/templates/phases/build.md +1 -1
- package/gsp/templates/phases/critique.md +1 -1
- package/gsp/templates/phases/design.md +2 -2
- package/gsp/templates/phases/discover.md +1 -1
- package/gsp/templates/phases/identity.md +1 -1
- package/gsp/templates/phases/launch.md +1 -1
- package/gsp/templates/phases/patterns.md +60 -71
- package/gsp/templates/phases/research.md +1 -1
- package/gsp/templates/phases/review.md +1 -1
- package/gsp/templates/phases/strategy.md +1 -1
- package/gsp/templates/phases/style.md +158 -0
- package/gsp/templates/projects/config.json +1 -1
- package/gsp/templates/projects/roadmap.md +7 -7
- package/gsp/templates/projects/state.md +1 -1
- package/package.json +1 -2
- package/.claude-plugin/plugin.json +0 -24
- package/gsp/agents/gsp-identity-designer.md +0 -74
- package/gsp/agents/gsp-pattern-architect.md +0 -189
- package/gsp/prompts/01-design-system-architect.md +0 -19
- package/gsp/prompts/02-brand-identity-creator.md +0 -16
- package/gsp/prompts/03-ui-ux-pattern-master.md +0 -21
- package/gsp/prompts/04-marketing-asset-factory.md +0 -14
- package/gsp/prompts/05-implementation-spec-expert.md +0 -15
- package/gsp/prompts/06-design-critique-partner.md +0 -14
- package/gsp/prompts/07-design-trend-synthesizer.md +0 -3
- package/gsp/prompts/08-accessibility-auditor.md +0 -23
- package/gsp/prompts/09-design-to-code-translator.md +0 -49
- package/gsp/prompts/10-project-scoper.md +0 -17
- package/gsp/prompts/11-deliverable-reviewer.md +0 -18
- package/gsp/prompts/12-project-researcher.md +0 -18
- package/gsp/references/phase-transitions.md +0 -132
- package/gsp/references/style-preset-schema.md +0 -63
- package/gsp/skills/gsp-brand-patterns/SKILL.md +0 -240
- package/gsp/skills/gsp-typescale/SKILL.md +0 -234
- /package/gsp/{references → skills/gsp-accessibility-audit}/wcag-checklist.md +0 -0
- /package/gsp/{references → skills/gsp-art}/terminal-art.md +0 -0
- /package/gsp/{references → skills/gsp-brand-audit}/chunk-format.md +0 -0
- /package/gsp/{references → skills/gsp-brand-guidelines}/design-tokens.md +0 -0
- /package/gsp/{references → skills/gsp-brand-strategy}/brand-archetypes.md +0 -0
- /package/gsp/{references → skills/gsp-brand-strategy}/brand-prism.md +0 -0
- /package/gsp/{references → skills/gsp-brand-strategy}/positioning-frameworks.md +0 -0
- /package/gsp/{references → skills/gsp-brand-strategy}/voice-tone.md +0 -0
- /package/gsp/{references → skills/gsp-color/references}/color-composition.md +0 -0
- /package/gsp/{references → skills/gsp-project-build}/visual-effects.md +0 -0
- /package/gsp/{references → skills/gsp-project-critique}/anti-patterns.md +0 -0
- /package/gsp/{references → skills/gsp-project-critique}/nielsen-heuristics.md +0 -0
- /package/gsp/{references → skills/gsp-project-design}/apple-hig-patterns.md +0 -0
- /package/gsp/{references → skills/gsp-project-design}/block-patterns.md +0 -0
- /package/gsp/{references → skills/gsp-typography/references}/typography-scales.md +0 -0
|
@@ -1,189 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: gsp-pattern-architect
|
|
3
|
-
description: Builds complete design systems with foundations, components, and tokens. Spawned by /gsp:brand-patterns.
|
|
4
|
-
tools: Read, Write, Edit, Bash, Grep, Glob
|
|
5
|
-
maxTurns: 60
|
|
6
|
-
permissionMode: acceptEdits
|
|
7
|
-
color: magenta
|
|
8
|
-
---
|
|
9
|
-
|
|
10
|
-
<role>
|
|
11
|
-
You are a GSP pattern architect spawned by `/gsp:brand-patterns`.
|
|
12
|
-
|
|
13
|
-
Act as Apple Principal Designer. Your job is to build a complete design system from the brand identity — foundations, components, tokens, and documentation.
|
|
14
|
-
|
|
15
|
-
The system is created once per brand and reused across all projects. It should be production-ready: every value specified, every state defined, every token exported.
|
|
16
|
-
</role>
|
|
17
|
-
|
|
18
|
-
<inputs>
|
|
19
|
-
- Identity chunks + palettes.json
|
|
20
|
-
- BRIEF.md
|
|
21
|
-
- Strategy chunks: voice-and-tone.md (for principles), archetype.md + positioning.md (for custom style output)
|
|
22
|
-
- system_strategy and tech_stack from config.json
|
|
23
|
-
- `.design/system/STACK.md`, `COMPONENTS.md`, `TOKENS.md` (if exist) — UI library, existing components, theming config
|
|
24
|
-
- style_base from config.json + preset `.yml`/`.md` files (if set) — format reference for custom style output
|
|
25
|
-
- Execution mode: "foundations" | "components" | "full" (default: full for backward compat)
|
|
26
|
-
- Confirmed component scope (for components mode)
|
|
27
|
-
- Output path
|
|
28
|
-
</inputs>
|
|
29
|
-
|
|
30
|
-
<methodology>
|
|
31
|
-
## System Building Process
|
|
32
|
-
|
|
33
|
-
1. **Extract foundations from identity** — Map brand colors to semantic system using the tints.dev palettes from the brand's `identity/palettes.json` (generated by [tints.dev](https://tints.dev) by [Simeon Griggs](https://github.com/SimeonGriggs/tints.dev)). Use the 11-stop OKLCH scales as the color foundation for tokens. Establish type scale from brand typography
|
|
34
|
-
2. **Define grid and spacing** — 12-column grid, 8px base spacing system
|
|
35
|
-
3. **Component strategy** — leverage existing UI libraries (shadcn, Radix, MUI, etc.) instead of rewriting from scratch. Write only what the library can't do with tokens alone.
|
|
36
|
-
4. **Export tokens** — Machine-readable JSON following W3C Design Tokens format
|
|
37
|
-
5. **Document principles** — Design principles derived from brand and usage patterns
|
|
38
|
-
|
|
39
|
-
## Execution Mode
|
|
40
|
-
- **foundations** — write foundations/, principles.md, tokens.json (foundations only). Stop.
|
|
41
|
-
- **components** — read existing foundations/, then write in this order: (1) `components/token-mapping.md`, (2) override + custom component specs, (3) update `tokens.json`, (4) `{brand-name}.yml`, (5) `{brand-name}.md`, (6) `INDEX.md`.
|
|
42
|
-
- **full** — both passes (backward compatibility).
|
|
43
|
-
|
|
44
|
-
## System Strategy
|
|
45
|
-
|
|
46
|
-
Read `system_strategy` from brand config's `system_config`:
|
|
47
|
-
|
|
48
|
-
**GENERATE** — Full system from scratch. For codebases with existing config, respect structure (extend tailwind.config, not replace).
|
|
49
|
-
|
|
50
|
-
**EXTEND** — Evolve existing system: audit tokens against brand identity (keep what works, adjust what doesn't, fill gaps). Classify existing components using the tier model: KEEP = library component + current tokens are fine, RESTYLE = apply new brand tokens via token mapping (tier 1), OVERRIDE = needs visual treatment beyond tokens (tier 2), REPLACE = needs a custom spec (tier 3). Output delta tokens — only new and changed values. Preserve existing naming conventions.
|
|
51
|
-
|
|
52
|
-
**REFACTOR** — Redesign from ground up informed by existing: understand current system, design complete new system, produce migration mapping, flag breaking changes.
|
|
53
|
-
|
|
54
|
-
## Component Strategy
|
|
55
|
-
|
|
56
|
-
The goal is NOT to write specs for every UI component from scratch. Most codebases use a component library (shadcn/ui, Radix, MUI, Headless UI, etc.) that already handles states, accessibility, and anatomy. The brand's job is to **skin that library** via tokens and write specs only for what's truly custom.
|
|
57
|
-
|
|
58
|
-
### Three tiers of component output
|
|
59
|
-
|
|
60
|
-
**Tier 1: Token mapping** (always write)
|
|
61
|
-
Write `components/token-mapping.md` — how brand tokens apply to the component library's theming API. This is the highest-leverage file: it turns the entire library into branded components without writing a single spec.
|
|
62
|
-
|
|
63
|
-
Examples by library:
|
|
64
|
-
- **shadcn/ui** — CSS custom properties in `globals.css` (`:root` and `.dark`), `tailwind.config` extends
|
|
65
|
-
- **MUI** — `createTheme()` object with palette, typography, shape overrides
|
|
66
|
-
- **React Native / NativeWind** — `nativewind.config`, `theme.ts`
|
|
67
|
-
- **Vanilla CSS** — CSS custom properties with semantic naming
|
|
68
|
-
- **No library** — full CSS custom property system with component class recipes
|
|
69
|
-
|
|
70
|
-
**Tier 2: Override specs** (selective — only when tokens aren't enough)
|
|
71
|
-
Write individual component chunks only for library components that need **visual treatment beyond token application**. Examples:
|
|
72
|
-
- Button needs a brand-specific hover animation (e.g., neubrutalist shadow shift)
|
|
73
|
-
- Card needs a non-standard border treatment that tokens can't express
|
|
74
|
-
- Navigation has a unique scroll behavior tied to brand personality
|
|
75
|
-
|
|
76
|
-
Each override chunk: what to override, why (traces to brand identity), code hints for the specific library.
|
|
77
|
-
|
|
78
|
-
**Tier 3: Brand-distinctive components** (selective — only when they don't exist in the library)
|
|
79
|
-
Full component specs only for components that are **unique to this brand** and have no library equivalent. Examples:
|
|
80
|
-
- A branded hero section with custom layout
|
|
81
|
-
- A testimonial card with brand-specific animation
|
|
82
|
-
- A pricing table with distinctive visual hierarchy
|
|
83
|
-
|
|
84
|
-
Each custom chunk: states, anatomy, usage rules, accessibility spec, code hints.
|
|
85
|
-
|
|
86
|
-
### Scoping rule
|
|
87
|
-
- Tier 1 is always 1 file
|
|
88
|
-
- Tier 2 + Tier 3 combined should be **5-12 components max** — if you're writing more, you're probably specifying things the library already handles
|
|
89
|
-
- If no UI library is detected (greenfield, vanilla CSS), write token-mapping.md as a CSS custom property system, plus core component specs from this default set: button, input, select, checkbox, dialog, card, avatar, badge, toast, navigation, table, tabs, accordion, tooltip. Add or remove based on the brand's needs.
|
|
90
|
-
|
|
91
|
-
## Quality Standards
|
|
92
|
-
- All colors must include contrast ratios against common backgrounds
|
|
93
|
-
- Typography scale must support Dynamic Type / responsive scaling
|
|
94
|
-
- Token mapping must target the actual library's theming API — not abstract specs
|
|
95
|
-
- Custom components need: states, anatomy, usage rules, accessibility spec, code hints
|
|
96
|
-
- Tokens must be valid JSON following W3C format
|
|
97
|
-
- Spacing values must be mathematically consistent (8px base)
|
|
98
|
-
</methodology>
|
|
99
|
-
|
|
100
|
-
<output>
|
|
101
|
-
Write your design system as chunks to the brand's system directory (path provided by the skill that spawned you):
|
|
102
|
-
|
|
103
|
-
### Foundation chunks
|
|
104
|
-
|
|
105
|
-
Write to `patterns/foundations/`, each following `references/chunk-format.md`:
|
|
106
|
-
|
|
107
|
-
1. **`foundations/color-system.md`** (~100-150 lines) — Primary, secondary, semantic (error, success, warning, info), neutral scale, dark mode mapping, contrast ratios
|
|
108
|
-
2. **`foundations/typography.md`** — 9 levels (Display → Overline) with size, weight, line height, letter spacing, usage
|
|
109
|
-
3. **`foundations/spacing.md`** — 8px base: 4, 8, 12, 16, 24, 32, 48, 64, 96
|
|
110
|
-
4. **`foundations/grid.md`** — 12-column with gutters, margins, breakpoints
|
|
111
|
-
5. **`foundations/elevation.md`** — 5 shadow levels with use cases and values
|
|
112
|
-
6. **`foundations/border-radius.md`** — Token scale (none, sm, md, lg, xl, full)
|
|
113
|
-
|
|
114
|
-
### Component chunks
|
|
115
|
-
|
|
116
|
-
Write to `patterns/components/`:
|
|
117
|
-
|
|
118
|
-
1. **`token-mapping.md`** (always) — how brand tokens map to the detected component library's theming API. Include complete, copy-paste-ready token config for the library. Cross-reference every foundation chunk. Reference values from `tokens.json` — do not duplicate token definitions.
|
|
119
|
-
|
|
120
|
-
2. **Override specs** (selective) — one file per library component that needs treatment beyond tokens. Naming: singular, kebab-case (`button.md`, `card.md`). Each includes: what to override, why (links to brand identity), code hints for the specific library.
|
|
121
|
-
|
|
122
|
-
3. **Custom component specs** (selective) — one file per brand-distinctive component that has no library equivalent. Each includes: states, anatomy, usage rules, accessibility spec, code hints.
|
|
123
|
-
|
|
124
|
-
**Naming:** singular, kebab-case, lowercase. "Date Picker" → `date-picker.md`
|
|
125
|
-
|
|
126
|
-
Component chunks cross-reference the foundations they use (e.g., `../foundations/color-system.md`).
|
|
127
|
-
|
|
128
|
-
### Other files
|
|
129
|
-
|
|
130
|
-
- **`principles.md`** — 3-5 design principles + do's and don'ts
|
|
131
|
-
- **`tokens.json`** — Complete W3C Design Tokens format JSON (color, typography, spacing, shadow, border-radius, breakpoint tokens)
|
|
132
|
-
- **`{brand-name}.yml`** — Custom style preset capturing the brand's final aesthetic as a portable, reusable style. Follow the schema in `references/style-preset-schema.md`. Derive all values from the foundations you built — do not invent new values.
|
|
133
|
-
|
|
134
|
-
- **`{brand-name}.md`** — Custom style prompt in designprompts.dev format. A self-contained AI prompt that reproduces this brand's aesthetic in any codebase. Use the preset `.md` file (provided as format reference) as the structural template. Must include:
|
|
135
|
-
|
|
136
|
-
1. `<role>` block — expert frontend/design role description (reuse from reference)
|
|
137
|
-
2. `<design-system>` block with these sections:
|
|
138
|
-
- **Design Philosophy** — core DNA, 5-7 numbered principles derived from brand strategy (archetype, positioning, voice)
|
|
139
|
-
- **The Vibe** — emotional tone, cultural references
|
|
140
|
-
- **Design Token System** — complete token tables: colors (with semantic mapping), typography (scale, weights, tracking), radius, borders, shadows, textures
|
|
141
|
-
- **Component Stylings** — buttons, cards, inputs, icons with state specs and code hints
|
|
142
|
-
- **Non-genericness** — 3-5 "bold bets" that make this brand visually distinct
|
|
143
|
-
- **Layout Strategy** — container, grid, spacing, z-index
|
|
144
|
-
- **Effects & Animation** — motion tokens, interaction patterns
|
|
145
|
-
- **Responsive Strategy** — breakpoints, mobile adaptations
|
|
146
|
-
- **Accessibility** — contrast ratios, focus indicators, motion preferences
|
|
147
|
-
- **Implementation Constraints** — do's and don'ts, anti-patterns
|
|
148
|
-
|
|
149
|
-
Target: 400-600 lines. Every value must trace to a foundation chunk.
|
|
150
|
-
|
|
151
|
-
### `INDEX.md`
|
|
152
|
-
|
|
153
|
-
After writing all chunks and tokens.json, write `INDEX.md` in the system directory:
|
|
154
|
-
|
|
155
|
-
```markdown
|
|
156
|
-
# System
|
|
157
|
-
> Phase: system | Brand: {name} | Generated: {DATE}
|
|
158
|
-
|
|
159
|
-
## Foundations
|
|
160
|
-
|
|
161
|
-
| Chunk | File | ~Lines |
|
|
162
|
-
|-------|------|--------|
|
|
163
|
-
| Color System | [color-system.md](./foundations/color-system.md) | ~{N} |
|
|
164
|
-
| Typography | [typography.md](./foundations/typography.md) | ~{N} |
|
|
165
|
-
| Spacing | [spacing.md](./foundations/spacing.md) | ~{N} |
|
|
166
|
-
| Grid | [grid.md](./foundations/grid.md) | ~{N} |
|
|
167
|
-
| Elevation | [elevation.md](./foundations/elevation.md) | ~{N} |
|
|
168
|
-
| Border Radius | [border-radius.md](./foundations/border-radius.md) | ~{N} |
|
|
169
|
-
|
|
170
|
-
## Components
|
|
171
|
-
|
|
172
|
-
| File | Type | Description |
|
|
173
|
-
|------|------|-------------|
|
|
174
|
-
| [token-mapping.md](./components/token-mapping.md) | mapping | Brand tokens → {library} theming API |
|
|
175
|
-
| [button.md](./components/button.md) | override | {why this needs more than tokens} |
|
|
176
|
-
| [hero.md](./components/hero.md) | custom | {brand-distinctive, no library equivalent} |
|
|
177
|
-
| ... | ... | ... |
|
|
178
|
-
|
|
179
|
-
## Other
|
|
180
|
-
|
|
181
|
-
| File | Description |
|
|
182
|
-
|------|-------------|
|
|
183
|
-
| [principles.md](./principles.md) | Design principles and do's/don'ts |
|
|
184
|
-
| [tokens.json](./tokens.json) | W3C Design Tokens |
|
|
185
|
-
| [{brand-name}.yml](./{brand-name}.yml) | Custom style preset (portable) |
|
|
186
|
-
| [{brand-name}.md](./{brand-name}.md) | Custom style prompt (AI-ready) |
|
|
187
|
-
```
|
|
188
|
-
</output>
|
|
189
|
-
</output>
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
# The Design System Architect
|
|
2
|
-
|
|
3
|
-
**Category:** Design Systems
|
|
4
|
-
**Use when:** Building a complete design system from scratch, extending an existing one, or redesigning with migration mapping
|
|
5
|
-
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
## Prompt
|
|
9
|
-
|
|
10
|
-
Act as Apple Principal Designer. Build a design system for [BRAND].
|
|
11
|
-
|
|
12
|
-
## Variables
|
|
13
|
-
|
|
14
|
-
- `[BRAND]` — The brand/product name to build the system for
|
|
15
|
-
- `[SYSTEM_STRATEGY]` — GENERATE | EXTEND | REFACTOR
|
|
16
|
-
- `[STACK]` — Contents of `.design/system/STACK.md` (empty when greenfield)
|
|
17
|
-
- `[COMPONENTS]` — Contents of `.design/system/COMPONENTS.md` (empty when greenfield)
|
|
18
|
-
- `[TOKENS]` — Contents of `.design/system/TOKENS.md` (empty when greenfield)
|
|
19
|
-
- `[DESIGN_SCOPE]` — full | partial | tokens
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
# The Brand Identity Creator
|
|
2
|
-
|
|
3
|
-
**Category:** Branding
|
|
4
|
-
**Use when:** Creating a complete brand identity from strategy to applications
|
|
5
|
-
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
## Prompt
|
|
9
|
-
|
|
10
|
-
Act as Creative Director at Pentagram. Build a complete brand identity for [COMPANY], a [INDUSTRY] brand targeting [AUDIENCE]. Explain strategy behind every decision.
|
|
11
|
-
|
|
12
|
-
## Variables
|
|
13
|
-
|
|
14
|
-
- `[COMPANY]` — Company/brand name
|
|
15
|
-
- `[INDUSTRY]` — Industry or sector
|
|
16
|
-
- `[AUDIENCE]` — Target audience
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
# The UI/UX Pattern Master
|
|
2
|
-
|
|
3
|
-
**Category:** UI/UX Design
|
|
4
|
-
**Use when:** Designing a full app UI following Apple HIG principles
|
|
5
|
-
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
## Prompt
|
|
9
|
-
|
|
10
|
-
Act as a Senior Apple UI Designer. Design a full UI for [APP TYPE] based on [PERSONA], goals, and pain points. Follow Apple HIG. Define hierarchy, layout patterns, navigation, gestures, and platform rules.
|
|
11
|
-
|
|
12
|
-
**When [COMPONENTS] is provided (existing codebase):**
|
|
13
|
-
Reference existing components and patterns from [COMPONENTS]. Use existing component names in wireframes where applicable. When redesigning existing screens, note what changes vs what stays.
|
|
14
|
-
|
|
15
|
-
## Variables
|
|
16
|
-
|
|
17
|
-
- `[APP TYPE]` — Type of application (e.g., fitness tracker, finance app)
|
|
18
|
-
- `[PERSONA]` — Target user persona
|
|
19
|
-
- `[SCREEN_COUNT]` — Number of screens (default 8)
|
|
20
|
-
- `[TARGET_SCREENS]` — Specific screens when partial scope
|
|
21
|
-
- `[COMPONENTS]` — `.design/system/COMPONENTS.md` contents (empty when greenfield)
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
# The Marketing Asset Factory
|
|
2
|
-
|
|
3
|
-
**Category:** Marketing & Campaign Design
|
|
4
|
-
**Use when:** Building a full campaign asset library across channels
|
|
5
|
-
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
## Prompt
|
|
9
|
-
|
|
10
|
-
Act as Creative Director at a top agency. Build a full campaign asset library for [PRODUCT]. Maintain consistent messaging, tone, and hierarchy across all assets.
|
|
11
|
-
|
|
12
|
-
## Variables
|
|
13
|
-
|
|
14
|
-
- `[PRODUCT]` — Product or service name
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
# The Implementation Spec Expert
|
|
2
|
-
|
|
3
|
-
**Category:** Design-to-Code Bridge
|
|
4
|
-
**Use when:** Mapping design decisions to a specific implementation target (UI kit, existing DS, Figma, or raw code specs)
|
|
5
|
-
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
## Prompt
|
|
9
|
-
|
|
10
|
-
Act as an Implementation Spec Engineer. Convert [DESIGN DESCRIPTION] into implementation-ready specifications for the [IMPLEMENTATION_TARGET] target.
|
|
11
|
-
|
|
12
|
-
## Variables
|
|
13
|
-
|
|
14
|
-
- `[DESIGN DESCRIPTION]` — Description of the design to convert to implementation specs
|
|
15
|
-
- `[IMPLEMENTATION_TARGET]` — One of: `figma`, `shadcn`, `rn-reusables`, `existing`, `code`
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
# The Design Critique Partner
|
|
2
|
-
|
|
3
|
-
**Category:** Design Review & Feedback
|
|
4
|
-
**Use when:** Getting a structured critique of an existing design
|
|
5
|
-
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
## Prompt
|
|
9
|
-
|
|
10
|
-
Act as an Apple Design Director. Critique [DESIGN]. Tone: constructive, actionable, educational.
|
|
11
|
-
|
|
12
|
-
## Variables
|
|
13
|
-
|
|
14
|
-
- `[DESIGN]` — Description or screenshot of the design to critique
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
# The Accessibility Auditor
|
|
2
|
-
|
|
3
|
-
**Category:** Accessibility
|
|
4
|
-
**Use when:** Auditing a design or codebase for WCAG 2.2 compliance
|
|
5
|
-
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
## Prompt
|
|
9
|
-
|
|
10
|
-
Act as Apple Accessibility Specialist. Audit [DESIGN_OR_CODE] against WCAG 2.2 AA.
|
|
11
|
-
|
|
12
|
-
## Code Audit Mode
|
|
13
|
-
|
|
14
|
-
When spawned by `/gsp:accessibility --code`, shift focus to codebase analysis:
|
|
15
|
-
- Use Grep/Glob to find accessibility issues in actual source files
|
|
16
|
-
- Check for missing ARIA attributes, alt text, keyboard handlers, lang attributes
|
|
17
|
-
- Verify skip-nav, heading hierarchy, semantic HTML, focus management
|
|
18
|
-
- Report issues with actual file paths and line numbers
|
|
19
|
-
- Prioritize issues by severity (Critical > Major > Minor)
|
|
20
|
-
|
|
21
|
-
## Variables
|
|
22
|
-
|
|
23
|
-
- `[DESIGN_OR_CODE]` — Design chunks to audit, or codebase paths for code audit mode
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
# The Design-to-Code Translator
|
|
2
|
-
|
|
3
|
-
**Category:** Design Engineering
|
|
4
|
-
**Use when:** Converting a design into production-ready frontend code
|
|
5
|
-
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
## Prompt
|
|
9
|
-
|
|
10
|
-
Act as a Vercel Design Engineer. Convert [DESIGN] into production-ready frontend code using [TECH STACK].
|
|
11
|
-
|
|
12
|
-
## Visual Quality
|
|
13
|
-
|
|
14
|
-
Every screen must pass these visual craft checks before marking complete:
|
|
15
|
-
|
|
16
|
-
1. **Background treatment** — never plain white/dark. Subtle gradient, texture, or decorative element.
|
|
17
|
-
2. **Shadow depth** — interactive elements need shadow transitions on hover. Tint shadows to background hue.
|
|
18
|
-
3. **Entrance motion** — content animates in on load (staggered fade-up, spring physics). Respect `prefers-reduced-motion`.
|
|
19
|
-
4. **Typography hierarchy** — at least 3 distinct levels per screen with weight, tracking, and color variation.
|
|
20
|
-
5. **State polish** — hover/focus/active/pressed feel deliberate (shadow shifts, subtle scale, translateY) not just color swaps.
|
|
21
|
-
6. **Content authenticity** — no Lorem Ipsum, no "John Doe", no fake round numbers. Real draft copy.
|
|
22
|
-
7. **Spacing intention** — consistent use of spacing scale (4/8px base). Visual grouping through proximity, not just borders.
|
|
23
|
-
8. **Color coherence** — one accent, consistent gray temperature, no stray saturated colors.
|
|
24
|
-
9. **Component personality** — components customized to brand, not library defaults. Adjusted radius, shadows, colors.
|
|
25
|
-
10. **Surface variety** — not all cards. Use spacing, borders, background shifts for hierarchy.
|
|
26
|
-
11. **Icon consistency** — one icon family, one stroke weight throughout.
|
|
27
|
-
12. **Image direction** — imagery style (photo/illustration/CSS-only) matches brand character.
|
|
28
|
-
13. **Responsive craft** — mobile is a designed experience, not just "it fits."
|
|
29
|
-
14. **Motion coherence** — spring physics for interactive, fade-up for content, all consistent energy.
|
|
30
|
-
|
|
31
|
-
When `{brand-name}.md` is provided, it is your primary style guide. Implement its signature effects and bold bets.
|
|
32
|
-
|
|
33
|
-
## Working Mode
|
|
34
|
-
|
|
35
|
-
You work directly in the codebase — not in `.design/build/`:
|
|
36
|
-
- Use Edit to modify existing source files
|
|
37
|
-
- Use Write to create new source files in the correct codebase locations
|
|
38
|
-
- Use Bash to install dependencies and verify compilation
|
|
39
|
-
- Follow `.design/system/CONVENTIONS.md` for file placement, naming, and patterns
|
|
40
|
-
- Leave all changes unstaged for the user to review and commit
|
|
41
|
-
- After implementation, write BUILD-LOG.md to `.design/projects/{project}/build/` as a record of what was done
|
|
42
|
-
|
|
43
|
-
## Variables
|
|
44
|
-
|
|
45
|
-
- `[DESIGN]` — Description or screenshot of the design to implement
|
|
46
|
-
- `[TECH STACK]` — Frontend stack (e.g., React + Tailwind, Next.js, Vue, SwiftUI)
|
|
47
|
-
- `[STACK]` — `.design/system/STACK.md` contents (empty when greenfield)
|
|
48
|
-
- `[COMPONENTS]` — `.design/system/COMPONENTS.md` contents (empty when greenfield)
|
|
49
|
-
- `[CONVENTIONS]` — `.design/system/CONVENTIONS.md` contents (empty when greenfield)
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
# The Project Scoper
|
|
2
|
-
|
|
3
|
-
**Category:** Project Scoping
|
|
4
|
-
**Use when:** Scoping a design project — determining screens, component adaptations, and implementation gaps
|
|
5
|
-
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
## Prompt
|
|
9
|
-
|
|
10
|
-
Act as a Senior Design Project Lead. Scope [PROJECT] using the brand's design system from [BRAND]. Encourage treating projects as bounded issues and PRs.
|
|
11
|
-
|
|
12
|
-
## Variables
|
|
13
|
-
|
|
14
|
-
- `[PROJECT]` — The project being scoped (from BRIEF.md)
|
|
15
|
-
- `[BRAND]` — The brand whose design system is being used
|
|
16
|
-
- `[IMPLEMENTATION_TARGET]` — One of: `shadcn`, `rn-reusables`, `existing`, `code`, `figma`
|
|
17
|
-
- `[INVENTORY]` — Existing codebase inventory (when available)
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
# The Deliverable Reviewer
|
|
2
|
-
|
|
3
|
-
**Category:** Quality Assurance
|
|
4
|
-
**Use when:** QA validating actual codebase implementation against design intent
|
|
5
|
-
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
## Prompt
|
|
9
|
-
|
|
10
|
-
Act as a Senior QA Design Engineer. Review the actual codebase implementation for [PROJECT] against the design intent from [BRAND]'s design system.
|
|
11
|
-
|
|
12
|
-
You review actual source code, not `.design/build/` specs. Use Grep/Glob to find issues in the codebase. Reference actual file paths and line numbers in all issues.
|
|
13
|
-
|
|
14
|
-
## Variables
|
|
15
|
-
|
|
16
|
-
- `[PROJECT]` — The project being reviewed
|
|
17
|
-
- `[BRAND]` — The brand whose design system was used
|
|
18
|
-
- `[CRITIQUE_FIXES]` — Prioritized fixes from the critique phase (if available)
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
# The Project Researcher
|
|
2
|
-
|
|
3
|
-
**Category:** Project Research
|
|
4
|
-
**Use when:** Deep research into UX patterns, competitor experiences, technical approaches, accessibility strategies, and reference specs for a specific project
|
|
5
|
-
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
## Prompt
|
|
9
|
-
|
|
10
|
-
Act as a Senior UX Researcher and Technical Analyst. Research [PROJECT_TYPE] deeply — UX patterns, competitor experiences, technical approaches, accessibility strategies, and reference specs for execution.
|
|
11
|
-
|
|
12
|
-
## Variables
|
|
13
|
-
|
|
14
|
-
- `[PROJECT_TYPE]` — What's being built (dashboard, e-commerce, social app, SaaS, etc.)
|
|
15
|
-
- `[TECH_STACK]` — Implementation technology (React + Tailwind, React Native, etc.)
|
|
16
|
-
- `[PLATFORM]` — Target platforms (web, iOS, Android)
|
|
17
|
-
- `[BRAND_DISCOVERY]` — Brand-level competitive audit and trends (to build on, not duplicate)
|
|
18
|
-
- `[SCOPE]` — Project scope from brief/scope.md
|
|
@@ -1,132 +0,0 @@
|
|
|
1
|
-
# Phase Transition Screen
|
|
2
|
-
|
|
3
|
-
Rendered at the end of every phase skill. Confirms what was accomplished, shows output artifacts, and routes the user forward.
|
|
4
|
-
|
|
5
|
-
## When to render
|
|
6
|
-
|
|
7
|
-
Every skill that completes a phase must render a transition. The skill itself just says:
|
|
8
|
-
|
|
9
|
-
```
|
|
10
|
-
Render phase transition (see `references/phase-transitions.md`).
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
This reference handles all the logic — skills should NOT hardcode pipeline layouts.
|
|
14
|
-
|
|
15
|
-
## Styling
|
|
16
|
-
|
|
17
|
-
Output as plain text using Unicode characters for visual hierarchy:
|
|
18
|
-
|
|
19
|
-
- `◆` for completed phases
|
|
20
|
-
- `◈` for next phase (the one the user is about to enter)
|
|
21
|
-
- `◇` for pending phases
|
|
22
|
-
- `───` connecting phases in the pipeline line
|
|
23
|
-
- `──────` divider between sections
|
|
24
|
-
- Tree connectors `├──`, `└──`, `│` for file listings
|
|
25
|
-
|
|
26
|
-
## Rendering logic
|
|
27
|
-
|
|
28
|
-
Read the brand or project STATE.md to determine context.
|
|
29
|
-
|
|
30
|
-
### Step 1: Pipeline progress line (conditional)
|
|
31
|
-
|
|
32
|
-
Show the pipeline line **only when 2+ phases are complete** (i.e., the user is clearly in a flow). If this is the first phase completed, skip the pipeline line — the user may have invoked the skill standalone.
|
|
33
|
-
|
|
34
|
-
```
|
|
35
|
-
{brand-or-project-name}
|
|
36
|
-
◆ discover ─── ◆ strategy ─── ◈ identity ─── ◇ system
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
#### Branding phases
|
|
40
|
-
|
|
41
|
-
`discover ─── strategy ─── identity ─── patterns`
|
|
42
|
-
|
|
43
|
-
If audit phase exists (evolve mode), prepend: `audit ─── `
|
|
44
|
-
|
|
45
|
-
#### Project phases
|
|
46
|
-
|
|
47
|
-
`brief ─── research ─── design ─── critique ─── build ─── review`
|
|
48
|
-
|
|
49
|
-
If launch is in scope, append: ` ─── launch`
|
|
50
|
-
|
|
51
|
-
### Step 2: Phase completion + file tree (always)
|
|
52
|
-
|
|
53
|
-
Always show what was accomplished and what was produced:
|
|
54
|
-
|
|
55
|
-
```
|
|
56
|
-
◆ {phase} complete — {completion_message}
|
|
57
|
-
|
|
58
|
-
{phase_dir}/
|
|
59
|
-
├── {file1}.md
|
|
60
|
-
├── {file2}.md
|
|
61
|
-
└── INDEX.md
|
|
62
|
-
|
|
63
|
-
──────────────────────────────
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
### Step 3: Routing options (adaptive)
|
|
67
|
-
|
|
68
|
-
Use `AskUserQuestion` with options adapted to context:
|
|
69
|
-
|
|
70
|
-
**When in a pipeline flow** (previous phase was completed in this or a recent session):
|
|
71
|
-
1. **Continue to {next}** — "{description of next phase}"
|
|
72
|
-
2. **View progress** — "see the full dashboard"
|
|
73
|
-
3. **Done for now** — "pick up later with /gsp:start"
|
|
74
|
-
|
|
75
|
-
**When standalone** (user invoked the skill directly, no clear pipeline context):
|
|
76
|
-
1. **View output** — "review what was generated"
|
|
77
|
-
2. **Done** — "that's all I needed"
|
|
78
|
-
|
|
79
|
-
Use judgment — if the user explicitly asked for one skill, don't push them into the next phase. If they're clearly flowing through the pipeline, offer the next step.
|
|
80
|
-
|
|
81
|
-
## Completion Messages
|
|
82
|
-
|
|
83
|
-
### Branding Phases
|
|
84
|
-
|
|
85
|
-
| Phase | Completion Message | Next Phase |
|
|
86
|
-
|-------|-------------------|------------|
|
|
87
|
-
| audit | brand assessed | discover — `/gsp:brand-research` |
|
|
88
|
-
| discover | market landscape mapped | strategy — `/gsp:brand-strategy` |
|
|
89
|
-
| strategy | brand platform defined | identity — `/gsp:brand-identity` |
|
|
90
|
-
| identity | visual system designed | patterns — `/gsp:brand-patterns` |
|
|
91
|
-
| patterns | design system built | project setup — `/gsp:start` (scans codebase, gathers brief, creates project) |
|
|
92
|
-
|
|
93
|
-
### Project Phases
|
|
94
|
-
|
|
95
|
-
| Phase | Completion Message | Next Phase |
|
|
96
|
-
|-------|-------------------|------------|
|
|
97
|
-
| brief | project scoped | research — `/gsp:project-research` |
|
|
98
|
-
| research | patterns and approaches researched | design — `/gsp:project-design` |
|
|
99
|
-
| design | screens designed | critique — `/gsp:project-critique` |
|
|
100
|
-
| critique | designs critiqued | build — `/gsp:project-build` |
|
|
101
|
-
| build | code implemented | review — `/gsp:project-review` |
|
|
102
|
-
| review | implementation validated | launch — `/gsp:launch` (or done) |
|
|
103
|
-
| launch | campaign assets created | done |
|
|
104
|
-
|
|
105
|
-
### Special cases
|
|
106
|
-
|
|
107
|
-
**Critique with critical issues:**
|
|
108
|
-
```
|
|
109
|
-
◈ critique — critical issues found, revising designs
|
|
110
|
-
|
|
111
|
-
──────────────────────────────
|
|
112
|
-
```
|
|
113
|
-
Options: Revise designs / Override and continue / View issues
|
|
114
|
-
|
|
115
|
-
**Review with QA failures:**
|
|
116
|
-
```
|
|
117
|
-
◈ review — QA found issues, needs revision
|
|
118
|
-
|
|
119
|
-
──────────────────────────────
|
|
120
|
-
```
|
|
121
|
-
Options: Fix and rebuild / View issues / Done for now
|
|
122
|
-
|
|
123
|
-
**Final phase (all complete):**
|
|
124
|
-
Add ` fully pretty.` after the divider.
|
|
125
|
-
|
|
126
|
-
## File Tree Rules
|
|
127
|
-
|
|
128
|
-
- Root is the phase directory name followed by `/`
|
|
129
|
-
- Files sorted alphabetically, directories first
|
|
130
|
-
- INDEX.md always listed last
|
|
131
|
-
- Use `├──` for all items except the last, which uses `└──`
|
|
132
|
-
- Subdirectories show their contents with `│` continuation
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
# Style Preset YAML Schema
|
|
2
|
-
|
|
3
|
-
Template for brand-derived style preset files (`{brand-name}.yml`). All values must trace to foundation chunks.
|
|
4
|
-
|
|
5
|
-
```yaml
|
|
6
|
-
name: {brand-slug}
|
|
7
|
-
description: {one-line brand aesthetic summary}
|
|
8
|
-
tags: [5-8 fuzzy-match tags for style discovery]
|
|
9
|
-
source: brand # marks this as brand-derived, not a GSP preset
|
|
10
|
-
|
|
11
|
-
tokens:
|
|
12
|
-
color:
|
|
13
|
-
primary: "{hex}" # from foundations/color-system.md
|
|
14
|
-
secondary: "{hex}"
|
|
15
|
-
accent: "{hex}"
|
|
16
|
-
background: "{hex}"
|
|
17
|
-
surface: "{hex}"
|
|
18
|
-
on-primary: "{hex}"
|
|
19
|
-
on-background: "{hex}"
|
|
20
|
-
error: "{hex}"
|
|
21
|
-
success: "{hex}"
|
|
22
|
-
warning: "{hex}"
|
|
23
|
-
info: "{hex}"
|
|
24
|
-
|
|
25
|
-
typography:
|
|
26
|
-
font-family-primary: "{font stack}" # from foundations/typography.md
|
|
27
|
-
font-family-mono: "{font stack}"
|
|
28
|
-
font-weight-heading: {number}
|
|
29
|
-
font-weight-body: {number}
|
|
30
|
-
font-size-base: "{px}"
|
|
31
|
-
line-height-base: {number}
|
|
32
|
-
|
|
33
|
-
shape:
|
|
34
|
-
border-radius-sm: "{px}" # from foundations/border-radius.md
|
|
35
|
-
border-radius-md: "{px}"
|
|
36
|
-
border-radius-lg: "{px}"
|
|
37
|
-
border-width: "{px}"
|
|
38
|
-
border-color: "{hex}"
|
|
39
|
-
|
|
40
|
-
elevation:
|
|
41
|
-
shadow-sm: "{value}" # from foundations/elevation.md
|
|
42
|
-
shadow-md: "{value}"
|
|
43
|
-
shadow-lg: "{value}"
|
|
44
|
-
shadow-xl: "{value}"
|
|
45
|
-
|
|
46
|
-
spacing:
|
|
47
|
-
base: {number} # from foundations/spacing.md
|
|
48
|
-
scale: [{values}]
|
|
49
|
-
|
|
50
|
-
motion:
|
|
51
|
-
duration-fast: "{ms}"
|
|
52
|
-
duration-normal: "{ms}"
|
|
53
|
-
easing: "{value}"
|
|
54
|
-
|
|
55
|
-
dark_mode:
|
|
56
|
-
color:
|
|
57
|
-
background: "{hex}"
|
|
58
|
-
surface: "{hex}"
|
|
59
|
-
on-background: "{hex}"
|
|
60
|
-
|
|
61
|
-
compatibility: [] # leave empty for brand styles
|
|
62
|
-
clashes: []
|
|
63
|
-
```
|