Skip to content

Commit 31735f0

Browse files
committed
Tighten introduction and meta copy
1 parent a619768 commit 31735f0

File tree

9 files changed

+152
-135
lines changed

9 files changed

+152
-135
lines changed

README.md

Lines changed: 67 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ See [Implementation Checklist](docs/adoption/implementation-checklist) for compl
123123

124124
1. Read [CSS Consumption](docs/consumption/css) or [TypeScript Consumption](docs/consumption/typescript)
125125
2. Use generated CSS variables or TypeScript types
126-
3. Follow [Framework Integration](docs/consumption/frameworks) for React/Vue
126+
3. Follow [UI Library Integration](docs/consumption/frameworks) for React/Vue
127127
4. Test variable consumption
128128

129129
### For Design Engineers
@@ -138,79 +138,81 @@ See [Implementation Checklist](docs/adoption/implementation-checklist) for compl
138138

139139
### Introduction
140140

141-
- [Why Variables](docs/introduction/why-variables) - Why "variables" not "design tokens"
142-
- [Comparison](docs/introduction/comparison) - Variable Design Standard vs DTCG, Style Dictionary, Material, Adobe
143-
- [Positioning](docs/introduction/positioning) - What Variable Design Standard is and is not
141+
- [Why Variables](docs/introduction/why-variables): Why "variables" not "design tokens"
142+
- [Comparison](docs/introduction/comparison): Variable Design Standard vs DTCG, Style Dictionary, Material, Adobe
143+
- [Positioning](docs/introduction/positioning): What Variable Design Standard is and is not
144144

145145
### Contract reference
146146

147-
- [Variable Design Standard](docs/contract/variable-contract) - JSON shape and structure
148-
- [Groups](docs/contract/groups) - Group structure and extension
149-
- [References](docs/contract/references) - Reference syntax and resolution
150-
- [Modes](docs/contract/modes) - Mode structure and resolution
151-
- [Types](docs/contract/types) - Type system reference
152-
- [Composite Types](docs/contract/composite-types) - Border, Transition, Shadow, Gradient, Typography
153-
- [Naming](docs/contract/naming) - Naming convention
154-
- [Anatomy](docs/contract/anatomy) - Base, alias, and component tokens
147+
- [Variable Design Standard](docs/contract/variable-contract): JSON shape and structure
148+
- [Groups](docs/contract/groups): Group structure and extension
149+
- [References](docs/contract/references): Reference syntax and resolution
150+
- [Modes](docs/contract/modes): Mode structure and resolution
151+
- [Types](docs/contract/types): Type system reference
152+
- [Composite Types](docs/contract/composite-types): Border, Transition, Shadow, Gradient, Typography
153+
- [Naming](docs/contract/naming): Naming convention
154+
- [Anatomy](docs/contract/anatomy): Base, alias, and component tokens
155155

156156
### Adoption
157157

158-
- [Getting Started](docs/adoption/getting-started) - Team adoption guide
159-
- [Implementation Checklist](docs/adoption/implementation-checklist) - Pre/post implementation checklists
160-
- [Migration Strategy](docs/adoption/migration-strategy) - Phased migration approaches
158+
- [Getting Started](docs/adoption/getting-started): Team adoption guide
159+
- [Implementation Checklist](docs/adoption/implementation-checklist): Pre/post implementation checklists
160+
- [Migration Strategy](docs/adoption/migration-strategy): Phased migration approaches
161161

162162
### Governance
163163

164-
- [Governance Overview](docs/governance/overview) - Governance principles and workflow
165-
- [Change Control](docs/governance/change-control) - Review and release process
166-
- [Validation](docs/governance/validation) - Validation tools and CI setup
167-
- [Versioning](docs/governance/versioning) - Semantic versioning and breaking changes
168-
- [Migration](docs/governance/migration) - Migrating from other formats
169-
- [Troubleshooting](docs/governance/troubleshooting) - Common issues and solutions
170-
- [Accessibility](docs/governance/accessibility) - Accessibility constraints
164+
- [Governance Overview](docs/governance/overview): Governance principles and workflow
165+
- [Change Control](docs/governance/change-control): Review and release process
166+
- [Validation](docs/governance/validation): Validation tools and CI setup
167+
- [Versioning](docs/governance/versioning): Semantic versioning and breaking changes
168+
- [Migration](docs/governance/migration): Migrating from other formats
169+
- [Troubleshooting](docs/governance/troubleshooting): Common issues and solutions
170+
- [Accessibility](docs/governance/accessibility): Accessibility constraints
171171

172172
### Scenarios
173173

174-
- [Multi-Brand](docs/scenarios/multi-brand) - Multi-brand architecture patterns
175-
- [Multi-Theme](docs/scenarios/multi-theme) - Theme composition and mode inheritance
176-
- [Large Sets](docs/scenarios/large-sets) - Performance considerations
177-
- [Component Integration](docs/scenarios/component-integration) - Component library integration
174+
- [Multi-Brand](docs/scenarios/multi-brand): Multi-brand architecture patterns
175+
- [Multi-Theme](docs/scenarios/multi-theme): Theme composition and mode inheritance
176+
- [Large Sets](docs/scenarios/large-sets): Performance considerations
177+
- [Component Integration](docs/scenarios/component-integration): Component library integration
178178

179179
### Tooling
180180

181-
- [Ecosystem](docs/tooling/ecosystem) - Tools that support Variable Design Standard
182-
- [CI/CD](docs/tooling/ci-cd) - CI/CD integration patterns
183-
- [Build Pipelines](docs/tooling/build-pipelines) - Complete build pipeline examples
184-
- [Figma Adapter](docs/adapters/figma) - Figma export normalization
185-
- [Tokens Studio Adapter](docs/adapters/tokens-studio) - Tokens Studio export normalization
186-
- [Style Dictionary Adapter](docs/adapters/style-dictionary) - CSS/TypeScript output generation
181+
- [Ecosystem](docs/tooling/ecosystem): Tools that support Variable Design Standard
182+
- [CI/CD](docs/tooling/ci-cd): CI/CD integration patterns
183+
- [Build Pipelines](docs/tooling/build-pipelines): Complete build pipeline examples
184+
- [Figma Adapter](docs/adapters/figma): Figma export normalization
185+
- [Tokens Studio Adapter](docs/adapters/tokens-studio): Tokens Studio export normalization
186+
- [Style Dictionary Adapter](docs/adapters/style-dictionary): CSS/TypeScript output generation
187187

188188
### Consumption
189189

190-
- [CSS](docs/consumption/css) - CSS variable consumption patterns
191-
- [TypeScript](docs/consumption/typescript) - TypeScript type generation
192-
- [Frameworks](docs/consumption/frameworks) - React/Vue integration
190+
- [CSS](docs/consumption/css): CSS variable consumption patterns
191+
- [TypeScript](docs/consumption/typescript): TypeScript type generation
192+
- [UI Libraries](docs/consumption/frameworks): React/Vue integration
193193

194194
### Design
195195

196-
- [Figma Naming](docs/design/figma-naming) - How to name variables in Figma
197-
- [Figma Workflow](docs/design/figma-workflow) - Designer workflow
198-
- [Component Variables](docs/design/component-variables) - Using variables in Figma components
196+
- [Figma Naming](docs/design/figma-naming): How to name variables in Figma
197+
- [Figma Workflow](docs/design/figma-workflow): Designer workflow
198+
- [Component Variables](docs/design/component-variables): Using variables in Figma components
199199

200200
### Testing
201201

202-
- [Validation](docs/testing/validation) - Testing variable changes
203-
- [Visual Regression](docs/testing/visual-regression) - Visual regression testing
204-
- [Consumption Tests](docs/testing/consumption-tests) - Testing generated outputs
202+
- [Validation](docs/testing/validation): Testing variable changes
203+
- [Visual Regression](docs/testing/visual-regression): Visual regression testing
204+
- [Consumption Tests](docs/testing/consumption-tests): Testing generated outputs
205205

206206
### Patterns
207207

208-
- [Multi-Brand Architecture](docs/patterns/multi-brand-architecture) - Complete multi-brand example
209-
- [Theme Composition](docs/patterns/theme-composition) - Theme composition patterns
210-
- [Performance](docs/patterns/performance) - Performance optimization
208+
- [Multi-Brand Architecture](docs/patterns/multi-brand-architecture): Complete multi-brand example
209+
- [Theme Composition](docs/patterns/theme-composition): Theme composition patterns
210+
- [Performance](docs/patterns/performance): Performance constraints
211211

212212
## Requirements
213213

214+
JSON-as-API means file paths and names are the interface. Treat renames as breaking changes.
215+
214216
Variable Design Standard JSON files MUST:
215217

216218
- Use DTCG 2025.10 format
@@ -219,7 +221,7 @@ Variable Design Standard JSON files MUST:
219221
- Include `$type` and `$value` on all variables
220222
- Resolve all references (no broken references)
221223
- Avoid circular references
222-
- Use consistent mode keys within collections
224+
- Use the same mode key set within each collection
223225

224226
Variable Design Standard JSON files SHOULD:
225227

@@ -247,7 +249,7 @@ Validation checks:
247249
- Reference resolution (all references resolve)
248250
- Circular reference detection (no reference cycles)
249251
- Type correctness (`$value` matches `$type`)
250-
- Mode consistency (mode keys shared within collections)
252+
- Mode key set checks (keys match within each collection)
251253

252254
See [Validation](docs/governance/validation) for validation tools and CI setup.
253255

@@ -270,7 +272,7 @@ Non-breaking changes:
270272

271273
- New variables
272274
- New modes
273-
- Value changes (if documented and intentional)
275+
- Value changes (if approved in review and documented)
274276

275277
See [Versioning](docs/governance/versioning) for complete versioning strategy.
276278

@@ -315,21 +317,21 @@ See [Style Dictionary Adapter](docs/adapters/style-dictionary) for details.
315317

316318
## Examples
317319

318-
- [Figma Export JSON](docs/examples/figma-export) - Example Figma export
319-
- [DTCG Compliant Example](docs/examples/dtcg-compliant) - Complete DTCG 2025.10 example
320-
- [Adapter Pipeline](docs/examples/adapter-pipeline) - End-to-end transformation example
320+
- [Figma Export JSON](docs/examples/figma-export): Example Figma export
321+
- [DTCG Compliant Example](docs/examples/dtcg-compliant): Complete DTCG 2025.10 example
322+
- [Adapter Pipeline](docs/examples/adapter-pipeline): Export-to-contract conversion example
321323

322-
## UDS Framework
324+
## UDS System
323325

324-
Variable Design Standard is part of UDS (UI Design Standard), a comprehensive framework for design-to-code governance.
326+
Variable Design Standard is part of UDS (UI Design Standard), a comprehensive standard set for design-to-code governance.
325327

326328
UDS components:
327329

328-
- Variable Design Standard (VDS) - this spec
329-
- Integrity Design Standard (IDS) - tooling layer (future)
330-
- Component Design Standard (future) - component mapping
331-
- Pattern Design Standard (future) - pattern mapping
332-
- Design-Dev Mapping (future) - artifact relationships
330+
- Variable Design Standard (VDS): this spec
331+
- Integrity Design Standard (IDS): tooling layer (future)
332+
- Component Design Standard (future): component mapping
333+
- Pattern Design Standard (future): pattern mapping
334+
- Design-Dev Mapping (future): artifact relationships
333335

334336
Variable Design Standard is the first standard in UDS, focusing on variables.
335337

@@ -419,10 +421,10 @@ Variable Design Standard is maintained by the editor. Contributions welcome.
419421

420422
Variable Design Standard builds on:
421423

422-
- [DTCG 2025.10 Format](https://www.designtokens.org/tr/2025.10/format/) - Base format specification
423-
- [Style Dictionary](https://styledictionary.com/) - Output generation tool
424-
- Figma Variables - Design tool integration
425-
- Tokens Studio - Design tool integration
424+
- [DTCG 2025.10 Format](https://www.designtokens.org/tr/2025.10/format/): Base format specification
425+
- [Style Dictionary](https://styledictionary.com/): Output generation tool
426+
- Figma Variables: Design tool integration
427+
- Tokens Studio: Design tool integration
426428

427429
## JSON Schema
428430

@@ -444,10 +446,10 @@ See [Schema](docs/schema) for validation tools and IDE integration.
444446

445447
## References
446448

447-
- [DTCG 2025.10 Specification](https://www.designtokens.org/tr/2025.10/format/) - Design Tokens Community Group format
448-
- [Variable Design Standard Documentation](docs/index.md) - Complete specification and governance
449-
- [DTCG Alignment](docs/contract/dtcg-alignment.md) - Compliance details
450-
- [JSON Schema](docs/schema) - Validation schema and tools
449+
- [DTCG 2025.10 Specification](https://www.designtokens.org/tr/2025.10/format/): Design Tokens Community Group format
450+
- [Variable Design Standard Documentation](docs/index.md): Complete specification and governance
451+
- [DTCG Alignment](docs/contract/dtcg-alignment.md): Compliance details
452+
- [JSON Schema](docs/schema): Validation schema and tools
451453

452454
## Conformance
453455

docs/introduction/comparison.md

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@ title: Comparison
44

55
# Variable Design Standard (VDS) vs Other Standards
66

7-
How Variable Design Standard (VDS) compares to other variable/token standards and why it wins.
7+
Scope: comparison of Variable Design Standard (VDS) to other variable and token standards.
8+
9+
Failure if ignored: teams pick formats without governance and ship incompatible rules.
810

911
## Comparison matrix
1012

@@ -18,7 +20,7 @@ How Variable Design Standard (VDS) compares to other variable/token standards an
1820
| Adapters | Yes | No | Tool-specific | No | No |
1921
| Tool-agnostic | Yes | Yes | No | No | No |
2022
| Designer-focused | Yes | No | No | Yes | Yes |
21-
| Developer-focused | Yes | No | Yes | Partial | Partial |
23+
| Engineer-focused | Yes | No | Yes | Partial | Partial |
2224

2325
## Variable Design Standard (VDS) vs DTCG 2025.10
2426

@@ -90,16 +92,16 @@ Material Design is a design system. Variable Design Standard (VDS) is a governan
9092

9193
## Variable Design Standard (VDS) vs Adobe Spectrum
9294

93-
### Adobe Spectrum is complex
95+
### Adobe Spectrum is specialized
9496

9597
Adobe Spectrum:
9698

9799
- Complex taxonomy (namespace, domain, object, base, modifiers)
98100
- Many naming segments
99101
- Brand-specific structure
100-
- Over-engineered for most use cases
102+
- More detailed taxonomy than most teams need
101103

102-
### Variable Design Standard (VDS) is simple
104+
### Variable Design Standard (VDS) keeps a smaller required surface
103105

104106
Variable Design Standard (VDS):
105107

@@ -108,39 +110,39 @@ Variable Design Standard (VDS):
108110
- Flexible structure
109111
- Practical and testable
110112

111-
Adobe Spectrum solves Adobe's problems. Variable Design Standard (VDS) solves everyone's problems.
113+
Adobe Spectrum solves Adobe-specific constraints. Variable Design Standard (VDS) keeps a smaller required surface for broader use.
112114

113-
## Why Variable Design Standard (VDS) wins
115+
## Why teams choose Variable Design Standard (VDS)
114116

115-
### 1. Simplicity
117+
### 1. Smaller contract surface
116118

117119
- Variables are variables, not special "tokens"
118120
- Simple naming (dot-separated paths)
119121
- Clear structure
120122
- Easy to understand
121123

122-
### 2. Governance
124+
### 2. Governance baked in
123125

124126
- Clear rules (not opinions)
125127
- Testable requirements
126128
- Versioning strategy
127129
- Change control process
128130

129-
### 3. Tool-agnostic
131+
### 3. Tool-agnostic by design
130132

131133
- Works with any tool
132134
- Adapter pattern for tool integration
133135
- Not tied to specific tools
134136
- Flexible consumption
135137

136-
### 4. Designer + Developer
138+
### 4. Designer and Engineer alignment
137139

138140
- Works for both audiences
139141
- Clear handoff process
140142
- Shared understanding
141143
- No separation
142144

143-
### 5. Production-ready
145+
### 5. Stable discipline
144146

145147
- Validation in CI
146148
- Version control integration

docs/introduction/positioning.md

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: Positioning
44

55
# Variable Design Standard (VDS) Positioning
66

7-
What Variable Design Standard (VDS) is, what it is not, and how it fits into the larger UDS framework.
7+
What Variable Design Standard (VDS) is, what it is not, and how it fits into the larger UDS system.
88

99
## What Variable Design Standard (VDS) is
1010

@@ -21,6 +21,7 @@ Variable Design Standard (VDS) provides:
2121
- Governance (naming rules, change control)
2222
- Validation (what to check)
2323
- Adapters (how to convert tool outputs)
24+
- File selection rule (brand and mode selection by file list)
2425

2526
## What Variable Design Standard (VDS) is NOT
2627

@@ -32,17 +33,17 @@ Variable Design Standard (VDS) is NOT:
3233
- A runtime library (use DTCG-compliant validators)
3334
- A build tool (use Style Dictionary or similar)
3435

35-
## UDS Framework
36+
## UDS System
3637

37-
Variable Design Standard is part of UDS (UI Design Standard), a comprehensive framework for design-to-code governance.
38+
Variable Design Standard is part of UDS (UI Design Standard), a comprehensive standard set for design-to-code governance.
3839

3940
UDS components:
4041

41-
- Variable Design Standard (VDS) - this spec
42-
- Integrity Design Standard (IDS) - tooling layer (future)
43-
- Component Design Standard (future) - component mapping
44-
- Pattern Design Standard (future) - pattern mapping
45-
- Design-Dev Mapping (future) - artifact relationships
42+
- Variable Design Standard (VDS): this spec
43+
- Integrity Design Standard (IDS): tooling layer (future)
44+
- Component Design Standard (future): component mapping
45+
- Pattern Design Standard (future): pattern mapping
46+
- Design-Dev Mapping (future): artifact relationships
4647

4748
Variable Design Standard is the first standard in UDS, focusing on variables.
4849

@@ -94,9 +95,21 @@ Variable Design Standard (VDS) works by:
9495
1. Defining structure (DTCG 2025.10 format)
9596
2. Adding governance (naming, validation, versioning)
9697
3. Providing adapters (tool integration)
97-
4. Enabling validation (CI checks)
98+
4. Running validation (CI checks)
9899
5. Supporting migration (from any format)
99100

101+
## JSON-as-API
102+
103+
The JSON file set is the API surface. Paths and names are the contract. Brand and mode selection happens by file list, not by a mapped layer.
104+
105+
## Standard posture
106+
107+
Variable Design Standard (VDS) is a spec and a governance layer.
108+
109+
- The contract is the JSON in version control.
110+
- CI validates structure, naming, references, and modes.
111+
- Contract changes are reviewed before merge.
112+
100113
## Success criteria
101114

102115
Variable Design Standard (VDS) succeeds when:

0 commit comments

Comments
 (0)