# design.md | Google Labs Code | Knowledge Base | Instagit

A format specification for describing a visual identity to coding agents. DESIGN.md gives agents a persistent, structured understanding of a design system.

GitHub Stars: 18.7k

Repository: https://github.com/google-labs-code/design.md

---

## Articles

### [Can the DESIGN.md Linter Be Used Programmatically? Complete TypeScript API Guide](/google-labs-code/design.md/can-design-md-linter-be-used-programmatically)

Integrate the DESIGN.md linter programmatically with its TypeScript API. Validate design tokens, get lint findings, and generate Tailwind config synchronously. Learn how now.

- Tags: api-guide
- Published: 2026-07-04

### [Export Formats for DESIGN.md Tokens: CSS, Tailwind v4, and DTCG Output](/google-labs-code/design.md/what-are-some-example-export-formats-for-design-md-tokens)

Discover DESIGN.md token export formats like CSS, Tailwind v4, and DTCG. Transform your design tokens into usable CSS variables, Tailwind v3 JSON, or W3C standard JSON.

- Tags: api-reference
- Published: 2026-07-04

### [What Is the Export Command in DESIGN.md? A Complete Guide to Token Conversion](/google-labs-code/design.md/what-is-purpose-of-export-command-in-design-md)

Master the export command in DESIGN.md to convert design tokens into production-ready formats like Tailwind CSS W3C Design Tokens and CSS custom properties Streamline your workflow today

- Tags: how-to-guide
- Published: 2026-07-04

### [How to Use the design.md diff Command in CI/CD Pipelines](/google-labs-code/design.md/how-can-diff-command-be-used-in-ci-cd-pipelines)

Learn how to use the design.md diff command in CI/CD to automatically block pull requests with design regressions. Detect errors and warnings before they merge.

- Tags: how-to-guide
- Published: 2026-07-04

### [How to Compare Two DESIGN.md Files to Detect Changes and Regressions](/google-labs-code/design.md/how-can-i-compare-two-design-md-files-to-detect-changes-or-regressions)

Easily compare two DESIGN.md files using the design-system CLI diff command. Detect changes and regressions with a structural diff and get an exit code of 1 for errors.

- Tags: how-to-guide
- Published: 2026-07-04

### [What Validation Rules Does the `lint` Command Enforce in Design.md?](/google-labs-code/design.md/what-are-some-specific-validation-rules-lint-command-enforces)

Discover the 11 validation rules enforced by the Design.md lint command. Ensure structural integrity, token completeness, accessibility, and schema conformance for your DESIGN.md files.

- Tags: how-to-guide
- Published: 2026-07-04

### [How the design.md Lint Command Reports Validation Results and Exit Codes](/google-labs-code/design.md/how-does-lint-command-report-validation-results-and-what-are-exit-codes)

Learn how the design.md lint command reports validation results. Understand exit codes 0, 1, 2 and get detailed findings for successful runs or errors.

- Tags: how-to-guide
- Published: 2026-07-04

### [How to Validate a DESIGN.md File Using the CLI: The Complete Guide](/google-labs-code/design.md/how-can-i-validate-a-design-md-file-using-cli)

Easily validate your DESIGN.md files with the CLI using the design.md lint command. Get instant feedback on structure and rules for better documentation.

- Tags: how-to-guide
- Published: 2026-07-04

### [What Are the Four Main Subcommands of the DESIGN.md CLI?](/google-labs-code/design.md/what-are-the-four-main-subcommands-of-design-md-cli)

Explore the four main subcommands of the DESIGN.md CLI: spec, lint, export, and diff. Learn how to display specifications, validate structure, generate artifacts, and compare versions.

- Tags: how-to-guide
- Published: 2026-07-04

### [What Framework Powers the DESIGN.md CLI? Inside the Citty Architecture](/google-labs-code/design.md/what-framework-is-design-md-cli-built-with)

Discover the Citty architecture powering the DESIGN.md CLI. Explore this type-safe, lightweight framework for defining commands and sub-commands in this in-depth technical analysis.

- Tags: architecture
- Published: 2026-07-04

### [What Happens When a Token Reference in DESIGN.md Is Broken?](/google-labs-code/design.md/what-happens-if-token-reference-in-design-md-is-broken)

Learn what happens when a token reference in DESIGN.md is broken. Discover how the linter handles unresolved references and preserves your design system state.

- Tags: deep-dive
- Published: 2026-07-04

### [How to Reference Tokens Within DESIGN.md: Syntax and Examples](/google-labs-code/design.md/what-is-syntax-for-referencing-tokens-within-design-md)

Learn the syntax for referencing tokens in DESIGN.md using curly braces {section.tokenName}. Easily pull values from YAML front-matter into your design prose and component definitions.

- Tags: how-to-guide
- Published: 2026-07-04

### [How Component Variants (Hover States) Are Defined in DESIGN.md](/google-labs-code/design.md/how-are-component-variants-defined-in-design-md)

Learn how to define component variants like hover states in DESIGN.md with state-specific YAML entries and property inheritance. Optimize your UI with clear state management.

- Tags: deep-dive
- Published: 2026-07-04

### [How Component Tokens in DESIGN.md Reference Other Tokens: Syntax and Examples](/google-labs-code/design.md/how-do-component-tokens-in-design-md-reference-other-tokens)

Discover how component tokens in DESIGN.md reference other tokens using curly-brace syntax and a dot-separated path for clear, organized design system management.

- Tags: deep-dive
- Published: 2026-07-04

### [How Spacing and Corner Radius Are Defined and Referenced in DESIGN.md](/google-labs-code/design.md/how-are-spacing-and-corner-radius-defined-and-referenced-in-design-md)

Learn how to define and reference spacing and corner radius as design tokens in DESIGN.md using YAML and curly brace syntax for consistent application across your projects.

- Tags: deep-dive
- Published: 2026-07-04

### [Supported Units for Typography and Dimension Tokens in DESIGN.md](/google-labs-code/design.md/what-units-are-supported-for-typography-and-dimension-tokens-in-design-md)

Learn about supported CSS units for typography and dimension tokens in DESIGN.md. Discover px, em, and rem for flexible design.

- Tags: api-reference
- Published: 2026-07-04

### [Typography Properties in DESIGN.md Tokens: Complete Reference for Design Systems](/google-labs-code/design.md/what-typography-properties-can-be-defined-in-design-md-tokens)

Explore the seven typography properties in DESIGN.md tokens: fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, fontFeature, and fontVariation. Define consistent typographic scales.

- Tags: api-reference
- Published: 2026-07-04

### [Supported Color Token Formats in DESIGN.md: Complete Reference](/google-labs-code/design.md/what-are-supported-formats-for-color-tokens-in-design-md)

Explore supported color token formats in DESIGN.md. Learn about hex, named colors, rgb, oklch, and color-mix() conversion to sRGB for WCAG while preserving original display values.

- Tags: api-reference
- Published: 2026-07-04

### [DESIGN.md Architecture: Core Components of the Google-Labs Design Specification](/google-labs-code/design.md/what-are-main-components-of-design-md-architecture)

Explore the DESIGN.md architecture's core components: a dual-layer file format blending YAML tokens and Markdown prose, powered by a Node.js CLI for linting, diffing, and export.

- Tags: architecture
- Published: 2026-07-04

### [How DESIGN.md Combines Machine-Readable Design Tokens with Human-Readable Rationale](/google-labs-code/design.md/how-design-md-combines-machine-readable-design-tokens-with-human-readable-rationale)

Discover how DESIGN.md unites machine-readable YAML design tokens and human-readable markdown rationale into one source of truth for designers and tools.

- Tags: deep-dive
- Published: 2026-07-04

### [What is DESIGN.md and How It Solves Design-System Communication for AI Coding Agents](/google-labs-code/design.md/what-is-design-md-and-problem-it-solves-for-ai-coding-agents)

Discover DESIGN.md a dual-format spec for AI coding agents. It uses YAML and Markdown to generate consistent UI code, solving design-system communication challenges and eliminating inferring intent from comments.

- Tags: deep-dive
- Published: 2026-07-04

### [How DESIGN.md Handles Duplicate Section Headings and What Error Is Produced](/google-labs-code/design.md/how-does-design-md-handle-duplicate-section-headings-and-what-error-is-produced)

DESIGN.md's linter detects duplicate top-level sections with a fatal error, aborting the process. Learn how this check prevents issues.

- Tags: internals
- Published: 2026-07-03

### [Understanding the Relationship Between DESIGN.md Tokens and the W3C Design Tokens Format](/google-labs-code/design.md/what-is-the-relationship-between-design-md-tokens-and-the-w3c-design-tokens-format)

Discover how DESIGN.md tokens build upon the W3C Design Tokens Format, offering typed groups, reference syntax, and markdown documentation for enhanced clarity and compatibility.

- Tags: deep-dive
- Published: 2026-07-03

### [How to Create Component Tokens with Token References in DESIGN.md](/google-labs-code/design.md/how-to-create-component-tokens-with-token-references-for-properties-like-backgroundcolor-in-design-md)

Learn to create component tokens with token references in DESIGN.md using {path.to.token} syntax for properties like backgroundColor. Streamline your design system with centralized token management.

- Tags: how-to-guide
- Published: 2026-07-03

### [What Is the spec Command in DESIGN.md and How to Use It for Agent Prompts](/google-labs-code/design.md/what-is-the-purpose-of-the-spec-command-in-design-md-and-how-to-use-it-for-agent-prompts)

Learn how to use the spec command in DESIGN.md to generate compliant design documents. This CLI tool provides the schema, ordering, and linting rules for AI agents.

- Tags: how-to-guide
- Published: 2026-07-03

### [How DESIGN.md Handles Hex, RGB, Oklch, and Named Colors in Its CSS Parser](/google-labs-code/design.md/how-does-design-md-handle-various-color-formats-like-hex-rgb-oklch-and-named-colors)

Learn how DESIGN.md normalizes hex, RGB, Oklch, and named colors to sRGB, ensuring consistent accessibility and token validation in its CSS parser.

- Tags: how-to-guide
- Published: 2026-07-03

### [How to Use stdin with the DESIGN.md CLI for Build Pipeline Integration](/google-labs-code/design.md/how-to-use-stdin-with-the-design-md-cli-for-build-pipeline-integration)

Integrate DESIGN.md CLI into your build pipelines by piping content via stdin. Learn how to use the dash argument for seamless CI/CD execution.

- Tags: how-to-guide
- Published: 2026-07-03

### [What Happens If a DESIGN.md File Is Missing Primary Color or Typography Tokens?](/google-labs-code/design.md/what-happens-if-a-design-system-is-missing-primary-color-or-typography-tokens-in-design-md)

Discover what happens when your DESIGN.md file misses primary color or typography tokens. The linter warns, allowing builds to succeed while auto-generating defaults.

- Tags: deep-dive
- Published: 2026-07-03

### [How to Add Custom Component Variants Beyond Hover States in DESIGN.md](/google-labs-code/design.md/how-to-add-custom-component-variants-beyond-hover-states-in-design-md)

Unlock advanced styling in DESIGN.md by learning to add custom component variants beyond simple hover states. Streamline your design workflow with token overrides.

- Tags: how-to-guide
- Published: 2026-07-03

### [DESIGN.md Token Reference: How Cross-Token Resolution Works in google-labs-code/design.md](/google-labs-code/design.md/can-design-md-tokens-reference-other-tokens-and-how-does-that-resolution-work)

Learn how DESIGN.md tokens reference other tokens using curly braces. Discover the three-phase symbol table process for nested chains, circular dependency detection, and depth limits.

- Tags: internals
- Published: 2026-07-03

### [How the Diff Command Detects Token and Prose Regressions Between DESIGN.md Files](/google-labs-code/design.md/how-does-the-diff-command-detect-token-and-prose-regressions-between-design-md-files)

Learn how the diff command detects token and prose regressions in DESIGN.md files. It extracts token maps, compares them, and flags increased lint errors in newer versions.

- Tags: how-to-guide
- Published: 2026-07-03

### [DESIGN.md Token Types and Validation: Colors, Typography, and Component Schema](/google-labs-code/design.md/what-token-types-does-design-md-support-and-how-are-they-validated)

Explore DESIGN.md token types including colors, typography, and components, and discover how validation functions ensure design consistency across your projects. Learn more now.

- Tags: api-reference
- Published: 2026-07-03

### [How to Automatically Fix Section Ordering Issues with the Fixer Command](/google-labs-code/design.md/how-to-automatically-fix-section-ordering-issues-with-the-fixer-command)

Automatically fix DESIGN.md section ordering issues with the Fixer command. The API reorders sections to match the canonical specification, preserving the prelude.

- Tags: how-to-guide
- Published: 2026-07-03

### [How to Fix the 'orphaned-tokens' Warning in Design.md](/google-labs-code/design.md/what-does-the-orphaned-tokens-warning-mean-and-how-to-fix-it)

Learn how to fix the orphaned tokens warning in Design.md by referencing or removing unused color tokens. Resolve this common issue for cleaner design specifications.

- Tags: how-to-guide
- Published: 2026-07-03

### [How to Configure Active Linting Rules in DESIGN.md](/google-labs-code/design.md/how-to-configure-active-linting-rules-in-design-md)

Learn to configure active linting rules in DESIGN.md using the spec command with --rules or --rules-only flags. Discover how rule definitions are managed centrally.

- Tags: how-to-guide
- Published: 2026-07-03

### [How DESIGN.md Handles Unknown Sections, Tokens, and Component Properties](/google-labs-code/design.md/how-does-design-md-handle-unknown-sections-tokens-and-component-properties)

DESIGN.md detects unknown sections, tokens, and component properties, records them, and emits diagnostic warnings with typo suggestions for correction.

- Tags: how-to-guide
- Published: 2026-07-03

### [Canonical Section Order in DESIGN.md: Structure, Rules, and Validation](/google-labs-code/design.md/what-is-the-canonical-section-order-in-design-md-and-what-happens-if-its-incorrect)

Learn the canonical section order for DESIGN.md files. Discover the 8 required sections and how violations trigger linter warnings. Ensure reliable parsing for your design system documentation.

- Tags: deep-dive
- Published: 2026-07-03

### [How to Use the Programmatic API to Lint DESIGN.md Files](/google-labs-code/design.md/how-to-use-the-programmatic-api-to-lint-design-md-files)

Learn to use the programmatic API to lint DESIGN.md files with @google/design.md. Resolve tokens, run validation rules, and get a structured LintReport for efficient design system management.

- Tags: how-to-guide
- Published: 2026-07-03

### [DTCG vs JSON-Tailwind vs CSS-Tailwind: Understanding the Export Format Differences in design.md](/google-labs-code/design.md/what-is-the-difference-between-dtcg-json-tailwind-and-css-tailwind-export-formats)

Explore the differences between dtcg, json-tailwind, and css-tailwind export formats in design.md. Understand how each format translates design tokens for Tailwind CSS.

- Tags: deep-dive
- Published: 2026-07-03

### [How the Contrast-Ratio Rule Ensures WCAG Accessibility Compliance in design.md](/google-labs-code/design.md/how-does-the-contrast-ratio-rule-ensure-wcag-accessibility-compliance)

Ensure WCAG accessibility compliance with the contrast-ratio rule. This rule enforces a minimum 4.5:1 contrast ratio for text and backgrounds, flagging violations to improve your designs.

- Tags: how-to-guide
- Published: 2026-07-03

### [Valid Component Token Properties in DESIGN.md: A Complete Guide to Variants and Hover States](/google-labs-code/design.md/what-are-valid-component-token-properties-in-design-md-and-how-do-variants-like-hover-states-work)

Learn valid component token properties in DESIGN.md including variants like hover states. Discover how to use literal values or token references for full design control.

- Tags: api-reference
- Published: 2026-07-03

### [How to Export DESIGN.md Tokens to Tailwind v4 CSS Format](/google-labs-code/design.md/how-to-export-design-md-tokens-to-tailwind-v3-json-and-v4-css-formats)

Export DESIGN.md tokens to Tailwind v4 CSS format using the design.md CLI or programmatically. Convert your design tokens efficiently for seamless integration.

- Tags: how-to-guide
- Published: 2026-07-03

### [How to Contribute to the Export Functionality in design.md](/google-labs-code/design.md/contribute-to-export-functionality)

Learn how to contribute to the export functionality in design.md by extending emitter handlers or adding new formats within the CLI package. Enhance the design.md export features today.

- Tags: how-to-guide
- Published: 2026-07-02

### [How Design.md Handles Different Data Structures for Export](/google-labs-code/design.md/handle-different-data-structures-export)

Discover how Design.md exports diverse data structures like Tailwind JSON, CSS custom properties, and DTCG JSON using a strategy pattern and side-effect-free pipeline.

- Tags: internals
- Published: 2026-07-02

### [Best Practices for Using the Export Feature in Design.md: A Complete Guide](/google-labs-code/design.md/best-practices-using-export-feature)

Master Design.md export best practices. Convert token definitions to Tailwind v3 JSON, v4 CSS, or W3C DTCG for deterministic design system pipelines.

- Tags: best-practices
- Published: 2026-07-02

### [Configuration Options for Exporting in DESIGN.md: Complete CLI Guide](/google-labs-code/design.md/configuration-options-for-exporting)

Master the export command in design.md. Explore configuration options like file paths, format selection (json-tailwind, css-tailwind, dtcg, css-vars), and CSS variable prefixes for customized exports.

- Tags: how-to-guide
- Published: 2026-07-02

### [How to Debug Export Functionality Issues in the Design.md CLI](/google-labs-code/design.md/debug-export-functionality-issues)

Debug Design.md CLI export issues by inspecting DesignSystemState and toggling emitters. Resolve invalid tokens, malformed dimensions, and emitter validation failures for smooth exports.

- Tags: how-to-guide
- Published: 2026-07-02

### [design.md Exports: Purpose and CLI Implementation for Design Token Conversion](/google-labs-code/design.md/purpose-of-design-md-in-relation-to-exports)

Learn how to use the design.md file as your single source of truth for design tokens. Discover its CLI export implementation for converting tokens to Tailwind themes, CSS variables, and W3C formats.

- Tags: api-reference
- Published: 2026-07-02

### [Dependencies for the Export Module in Google Labs Design.md](/google-labs-code/design.md/dependencies-for-export-module)

Discover the export module dependencies in google-labs-code/design.md. Learn about citty CLI, internal linters, and essential runtime libraries like unified, yaml, and zod.

- Tags: api-reference
- Published: 2026-07-02

### [How Large Data Is Handled During Exports in the Design.md CLI](/google-labs-code/design.md/handling-large-data-exports)

Learn how the Design.md CLI handles large data exports. Understand its memory-bound limitations and optimize for efficient large document processing.

- Tags: performance
- Published: 2026-07-02

### [How to Schedule Exports with design.md: CLI Automation Guide](/google-labs-code/design.md/schedule-exports)

Automate design.md exports with cron or CI/CD. Learn how to schedule recurring exports using the idempotent CLI command for efficient workflow management.

- Tags: how-to-guide
- Published: 2026-07-02

### [Security Implications of the Design.md Export Feature: Path Traversal and Data Leakage Risks](/google-labs-code/design.md/security-implications-export-feature)

Explore security implications of the Design.md export feature including path traversal risks, stdout data leakage, and unprotected stdin streams. Learn how to mitigate these exposures.

- Tags: security-analysis
- Published: 2026-07-02

### [Error Handling Mechanisms for Exports in the Instagit Design.md Codebase](/google-labs-code/design.md/error-handling-for-exports)

Explore Instagit Design.md's robust export error handling. Discover Zod enums, discriminated results, and custom I/O errors to prevent uncaught exceptions and ensure type safety.

- Tags: how-to-guide
- Published: 2026-07-02

### [How to Integrate Custom Export Logic into the DESIGN.md CLI](/google-labs-code/design.md/integrate-custom-export-logic)

Learn to integrate custom export logic into the DESIGN.md CLI using its pluggable emitter architecture. Implement execute method, register handler, and validate output with Zod.

- Tags: how-to-guide
- Published: 2026-07-02

### [Performance Considerations for the Design.md Export Feature](/google-labs-code/design.md/export-feature-performance-considerations)

Explore performance considerations for the Design.md export feature. Learn how memory usage is the primary constraint for large design systems with O(N) complexity.

- Tags: performance
- Published: 2026-07-02

### [How Design MD Data Is Processed Before Exporting: A Complete Pipeline Guide](/google-labs-code/design.md/data-processing-before-export)

Learn how Design MD data is processed through a four-phase pipeline: input parsing, model resolution, linting validation, and format emission for validated design tokens.

- Tags: how-to-guide
- Published: 2026-07-02

### [How to Customize the Export Process in the design.md CLI](/google-labs-code/design.md/customize-export-process)

Customize design.md CLI export for CSS custom properties with format selection and optional prefixing. Tailor your workflow for efficient design asset management.

- Tags: how-to-guide
- Published: 2026-07-02

### [DESIGN.md Export Formats: A Complete Guide to JSON and CSS Output Options](/google-labs-code/design.md/supported-export-formats)

Explore DESIGN.md export formats including JSON and CSS. Convert DESIGN.md to Tailwind v3, Tailwind v4, and W3C Design Tokens with our comprehensive guide.

- Tags: api-reference
- Published: 2026-07-02

### [Where to Find Export Handlers in the Design.md CLI: Complete File Guide](/google-labs-code/design.md/where-to-find-export-handlers-codebase)

Locate export handlers in Design.md CLI within packages/cli/src/linter. Discover the main orchestration logic in packages/cli/src/commands/export.ts for streamlined development.

- Tags: file-guide
- Published: 2026-07-02

### [How the Export Functionality Works in design.md: From DESIGN.md to Tailwind, DTCG, and CSS Variables](/google-labs-code/design.md/how-does-export-functionality-work)

Learn how the design.md export functionality transforms DESIGN.md into Tailwind CSS, W3C Design Tokens, and CSS variables. Explore the pure, functional pipeline and emitter handlers today.

- Tags: how-to-guide
- Published: 2026-07-02

### [How to Detect Orphaned Color Tokens That Are Never Referenced in DESIGN.md](/google-labs-code/design.md/detect-orphaned-color-tokens)

Quickly find and remove unused color tokens referenced in DESIGN.md. Run the design-md lint command or import the orphanedTokens rule for automatic detection, ensuring cleaner code.

- Tags: how-to-guide
- Published: 2026-07-01

### [How to Auto-Fix Section Order Issues with the Fixer Handler in DESIGN.md](/google-labs-code/design.md/auto-fix-section-order-issues-fixer-handler)

Auto-fix DESIGN.md section order with the Fixer API.  Automatically reorder sections to match the canonical spec, preserving prelude content. Learn how to use this powerful tool.

- Tags: how-to-guide
- Published: 2026-07-01

### [Design Token Aliases vs Canonical Token Names: Understanding the Difference in DESIGN.md](/google-labs-code/design.md/design-token-aliases-vs-canonical-names)

Learn the difference between design token aliases and canonical token names. Understand how canonical names aid tooling and aliases improve ergonomics in DESIGN.md.

- Tags: deep-dive
- Published: 2026-07-01

### [How to Define Spacing Tokens with Dimensional and Unitless Values in DESIGN.md](/google-labs-code/design.md/define-spacing-tokens-dimensional-unitless)

Learn how to define spacing tokens in DESIGN.md using dimensional and unitless values. Mix absolute measurements with unitless counts and ratios in your YAML.

- Tags: how-to-guide
- Published: 2026-07-01

### [What Are the DESIGN.md Linting Rules and Their Severity Levels?](/google-labs-code/design.md/design-md-linting-rules-severity-levels)

Understand DESIGN.md linting rules and their severity levels error warning and info coded in TypeScript. Ensure code quality for your projects.

- Tags: api-reference
- Published: 2026-07-01

### [How to Define Typography Tokens with Font Family, Size, and Weight in DESIGN.md](/google-labs-code/design.md/define-typography-tokens-design-md)

Learn how to define typography tokens with font family, size, and weight in DESIGN.md. Explore YAML front-matter and schema for consistent design.

- Tags: tutorial
- Published: 2026-07-01

### [How to Use Token References Like `{colors.primary}` in Component Definitions](/google-labs-code/design.md/use-token-references-in-component-definitions)

Learn to use token references like {colors.primary} in component definitions for design.md. Effortlessly substitute primitive or composite values during consumption.

- Tags: how-to-guide
- Published: 2026-07-01

### [DESIGN.md YAML Front Matter Schema: Complete Specification for Design Tokens](/google-labs-code/design.md/design-md-yaml-front-matter-schema)

Discover the complete DESIGN.md YAML front matter schema specification. Learn about required fields and optional categories like colors, typography, and components for design tokens.

- Tags: api-reference
- Published: 2026-07-01

### [How to Convert DESIGN.md Design Tokens to W3C DTCG Format](/google-labs-code/design.md/convert-design-tokens-w3c-dtcg-format)

Easily convert DESIGN.md design tokens to W3C DTCG format using the CLI or API. Map colors, spacing, and typography to the latest DTCG schema for seamless integration.

- Tags: how-to-guide
- Published: 2026-07-01

### [How to Export DESIGN.md Tokens to Tailwind v4 CSS Theme](/google-labs-code/design.md/export-design-md-tokens-tailwind-v4-css)

Easily export DESIGN.md tokens to Tailwind v4 CSS theme using the design.md CLI. Convert design tokens into CSS @theme blocks for native Tailwind v4 consumption. Learn how now.

- Tags: how-to-guide
- Published: 2026-07-01

### [How to Export DESIGN.md Tokens to Tailwind v3 JSON Format](/google-labs-code/design.md/export-design-md-tokens-tailwind-v3-json)

Export DESIGN.md tokens to Tailwind v3 JSON format easily. Learn how to leverage the design.md CLI to generate a JSON object ready for your Tailwind CSS configuration.

- Tags: how-to-guide
- Published: 2026-07-01

### [Design CLI Export Output Formats: JSON, CSS, and W3C Tokens Explained](/google-labs-code/design.md/output-formats-available-export-json-text)

Explore design CLI export options: JSON, CSS, and W3C tokens. Streamline your design system with Tailwind CSS and W3C Design Tokens.

- Tags: api-reference
- Published: 2026-06-30

### [Does the Instagit CLI Support Standard Input (STDIN)?](/google-labs-code/design.md/cli-support-standard-input-stdin)

Learn if the Instagit CLI supports standard input (stdin). Discover how to pipe DESIGN.md content directly into Instagit commands using the hyphen argument.

- Tags: how-to-guide
- Published: 2026-06-30

### [Troubleshooting DESIGN.md CLI Installation on Windows: Complete Guide](/google-labs-code/design.md/troubleshooting-design.md-cli-installation-windows)

Troubleshoot DESIGN.md CLI installation on Windows. Learn why the .md extension causes issues and discover solutions to run the command successfully. Get your CLI working now.

- Tags: how-to-guide
- Published: 2026-06-30

### [How to Fix Missing Primary Color Warnings in design.md](/google-labs-code/design.md/fix-missing-primary-color-warnings)

Resolve missing primary color warnings in design.md by adding a primary key with a valid hex color to your colors block. Fix the linter error efficiently.

- Tags: how-to-guide
- Published: 2026-06-30

### [What Causes Token Reference Resolution Errors in DESIGN.md: 7 Root Causes Explained](/google-labs-code/design.md/causes-of-token-reference-resolution-errors)

Troubleshoot token reference resolution errors in DESIGN.md. Discover 7 root causes including missing tokens, circular dependencies, and syntax issues to fix your linter.

- Tags: deep-dive
- Published: 2026-06-30

### [How DESIGN.md Handles Unknown Content: Parsing, Preservation, and Linting](/google-labs-code/design.md/how-design.md-handles-unknown-content)

DESIGN.md preserves unknown content, surfacing warnings for typos and unparseable maps while ensuring safe export. Learn how DESIGN.md handles unrecognized YAML and markdown sections.

- Tags: internals
- Published: 2026-06-30

### [DESIGN.md Design Token Types and Formats: Complete Reference](/google-labs-code/design.md/supported-design-token-types-formats)

Discover DESIGN.md design token types like colors, typography, and spacing. Learn about YAML front-matter and CSS-compatible formats including hex and functional colors.

- Tags: api-reference
- Published: 2026-06-30

### [How to Use the design.md CLI Programmatically: JavaScript and TypeScript API Guide](/google-labs-code/design.md/use-cli-programmatically)

Learn how to use the design.md CLI programmatically with JavaScript and TypeScript via its Linter API. Integrate linting directly into your projects for seamless code quality checks.

- Tags: how-to-guide
- Published: 2026-06-30

### [DESIGN.md Section Order Requirements: Canonical Structure Explained](/google-labs-code/design.md/requirements-for-section-ordering-in-design.md)

Understand DESIGN.md section order requirements and the canonical structure. Learn how linters enforce sequence rules and use the --fix flag for automatic reordering.

- Tags: internals
- Published: 2026-06-30

### [Typography Token Schema in DESIGN.md: Structure and Properties Explained](/google-labs-code/design.md/schema-for-typography-tokens)

Explore the typography token schema in DESIGN.md. Understand the five essential properties: fontFamily, fontSize, fontWeight, lineHeight, and letterSpacing, and how they structure your design system.

- Tags: api-reference
- Published: 2026-06-30

### [How to Export Design Tokens to W3C DTCG Format from DESIGN.md](/google-labs-code/design.md/export-design-tokens-to-w3c-dtcg-format)

Export design tokens from DESIGN.md to W3C DTCG format using the CLI or programmatically. Streamline your design system workflows today and ensure W3C compliance.

- Tags: how-to-guide
- Published: 2026-06-30

### [How to Add Design Tokens in DESIGN.md: A Complete Guide](/google-labs-code/design.md/how-to-add-design-tokens-in-design.md)

Learn how to add design tokens in DESIGN.md. This guide explains organizing tokens like colors and typography in YAML front-matter for your Design.md files.

- Tags: how-to-guide
- Published: 2026-06-30

### [Validating Unknown Section Headings in DESIGN.md for Consumer Behavior](/google-labs-code/design.md/validating-unknown-section-headings-in-design-md-for-consumer-behavior)

Learn how the DESIGN.md linter validates unknown section headings without errors, preserving them for consumer behavior analysis and auto-fixing document order.

- Tags: how-to-guide
- Published: 2026-06-29

### [How Token Reference Resolution Works in DESIGN.md Components](/google-labs-code/design.md/how-does-token-reference-resolution-work-in-design-md-components)

Learn how DESIGN.md components resolve token references using a three-phase pipeline in ModelHandler. Discover cycle detection and depth limits for concrete design values.

- Tags: internals
- Published: 2026-06-29

### [Using design.md as a Library in Node.js for Programmatic API Integration](/google-labs-code/design.md/using-design-md-as-library-in-node-js-for-programmatic-api-integration)

Integrate design.md into Node.js programs. Parse DESIGN.md files, resolve design tokens, lint rules, and export Tailwind CSS with the @google/design.md npm package.

- Tags: how-to-guide
- Published: 2026-06-29

### [How to Fix Orphaned Tokens Warnings in DESIGN.md Design Systems](/google-labs-code/design.md/fixing-orphaned-tokens-warnings-in-design-md-for-design-systems)

Resolve orphaned tokens warnings in DESIGN.md. Learn to reference tokens in components, rename them per MD3 standards, or use placeholders for future use. Ensure your design system is clean and functional.

- Tags: how-to-guide
- Published: 2026-06-29

### [Detecting Token Regressions Between DESIGN.md Versions Using the diff Command](/google-labs-code/design.md/detecting-token-regressions-between-design-md-versions-using-diff-command)

Easily detect token regressions in DESIGN.md versions with the design CLI diff command. Spot lint errors and warnings with non-zero exit codes.

- Tags: how-to-guide
- Published: 2026-06-29

### [How to Resolve Broken Token References in DESIGN.md Files](/google-labs-code/design.md/how-to-resolve-broken-token-references-in-design-md-files)

Fix broken token references in DESIGN.md files. Run the linter, verify YAML tokens, correct syntax, and ensure valid sub-tokens for seamless documentation.

- Tags: how-to-guide
- Published: 2026-06-29

### [How to Configure the Linter Rules Programmatically in Instagit](/google-labs-code/design.md/how-to-configure-the-linter-rules-programmatically)

Configure linter rules programmatically in Instagit by passing a custom RuleDescriptor array to the lint function. Modify, disable, or inject rules at runtime.

- Tags: how-to-guide
- Published: 2026-06-28

### [How to Use Stdin with the DESIGN.md CLI for Piping Input](/google-labs-code/design.md/how-to-use-stdin-with-the-design-md-cli-for-piping)

Learn to pipe input into the DESIGN.md CLI using stdin. Pass the '-' argument to the lint or export commands for seamless workflow integration.

- Tags: how-to-guide
- Published: 2026-06-28

### [How the Unknown-Key Rule Detects Potential Typos in YAML Files](/google-labs-code/design.md/how-does-the-unknown-key-rule-detect-potential-typos-in-yaml)

Learn how the unknown-key rule in YAML detects typos by comparing unrecognized keys to valid schema keys using Levenshtein distance, flagging likely misspellings within a distance of 2.

- Tags: how-to-guide
- Published: 2026-06-28

### [How Color Luminance Calculation Works for Accessibility Checks in Design.md](/google-labs-code/design.md/how-does-color-luminance-calculation-work-for-accessibility-checks)

Learn how color luminance calculation ensures web accessibility. Design.md uses gamma correction and BT.709 coefficients for accurate contrast checks against WCAG standards.

- Tags: deep-dive
- Published: 2026-06-28

### [What Is the DTCG Export Format and How Is It Structured?](/google-labs-code/design.md/what-is-the-dtcg-export-format-and-how-is-it-structured)

Explore the DTCG export format a W3C compliant JSON structure for DESIGN.md token sets. Understand its hierarchical organization of colors dimensions and typography.

- Tags: architecture
- Published: 2026-06-28

### [How to Use the Fixer to Automatically Correct Section Order in DESIGN.md Files](/google-labs-code/design.md/how-to-use-the-fixer-to-automatically-correct-section-order)

Learn how to use the Instagit fixer to automatically correct section order in DESIGN.md files. This tool efficiently sorts known sections by parsing and applying canonical order for cleaner documentation.

- Tags: how-to-guide
- Published: 2026-06-28

### [How Section Order Validation Works in the DESIGN.md Linter](/google-labs-code/design.md/how-does-section-order-validation-work-in-the-linter)

Understand how the DESIGN.md linter validates section order by comparing headings to a canonical sequence using pairwise index comparison. Ensure your design documents follow the correct structure.

- Tags: internals
- Published: 2026-06-28

### [How to Migrate from Tailwind v3 to v4 Using the design.md Export Command](/google-labs-code/design.md/how-to-migrate-from-tailwind-v3-to-v4-using-the-export-command)

Easily migrate from Tailwind v3 to v4. Use the design export command to generate Tailwind v4 CSS theme files and streamline your upgrade process.

- Tags: migration-guide
- Published: 2026-06-28

### [What Is the Token Summary Info Finding and How Is It Generated?](/google-labs-code/design.md/what-is-the-token-summary-info-finding-and-how-is-it-generated)

Understand the token summary info finding and how it generates counts of design tokens in your DESIGN.md file. Learn about colors, typography, spacing, and more.

- Tags: internals
- Published: 2026-06-28

### [How to Debug Why a Token Reference Isn't Resolving in the Design MD CLI](/google-labs-code/design.md/how-to-debug-why-a-token-reference-isnt-resolving)

Debug unresolved token references in Design MD CLI. Verify syntax, inspect symbolTable, and trace resolveReference for issues like missing keys or circular references.

- Tags: how-to-guide
- Published: 2026-06-28

### [How the DESIGN.md Parser Handles YAML Front Matter vs Markdown Body](/google-labs-code/design.md/how-does-the-parser-handle-yaml-front-matter-vs-markdown-body)

Learn how the DESIGN.md parser unifies YAML front matter and markdown body into a single AST. Discover its tokenization and extraction process for comprehensive content analysis.

- Tags: how-to-guide
- Published: 2026-06-28

### [How to Extend DESIGN.md with Custom YAML Keys: A Complete Guide](/google-labs-code/design.md/how-to-extend-design-md-with-custom-yaml-keys)

Learn how to extend DESIGN.md with custom YAML keys in this complete guide. Preserve your custom data for downstream tools and keep your files clean.

- Tags: how-to-guide
- Published: 2026-06-28

### [How the broken-ref Rule Detects Unresolved Token References in DESIGN.md](/google-labs-code/design.md/how-does-the-broken-ref-rule-detect-unresolved-token-references)

Learn how the broken ref rule in DESIGN.md detects unresolved token references by identifying failed lookups during component parsing and reporting them as lint errors.

- Tags: internals
- Published: 2026-06-28

### [How to Create Component Variants (Hover and Active States) in DESIGN.md](/google-labs-code/design.md/how-to-create-component-variants-hover-active-states-in-design-md)

Learn to create component variants like hover and active states in DESIGN.md. Master state-specific CSS by following simple naming conventions for dynamic components.

- Tags: how-to-guide
- Published: 2026-06-28

### [What CSS Units Are Supported in Dimension Tokens?](/google-labs-code/design.md/what-css-units-are-supported-in-dimension-tokens)

Explore supported CSS units for dimension tokens in Design.md. Learn why only px, em, and rem are valid to ensure accurate design implementation and avoid errors.

- Tags: tutorial
- Published: 2026-06-28

### [How to Handle Circular Token References in DESIGN.md: Detection and Resolution](/google-labs-code/design.md/how-to-handle-circular-token-references-in-design-md)

Fix brokenref errors in DESIGN.md. Learn to detect and resolve circular token references by ensuring reference chains terminate at primitive values.

- Tags: how-to-guide
- Published: 2026-06-28

### [How the Diff Command Detects Token-Level Changes Between Design Systems](/google-labs-code/design.md/how-does-the-diff-command-detect-token-level-changes-between-design-systems)

Learn how the diff command detects token-level changes between DESIGN.md files by linting, extracting tokens, and performing key-by-key comparison to identify added, removed, or modified elements.

- Tags: how-to-guide
- Published: 2026-06-28

### [How to Programmatically Use the Linter API in Node.js with @google/design.md](/google-labs-code/design.md/how-to-programmatically-use-the-linter-api-in-node-js)

Learn to programmatically use the linter API in Node.js with @google/design.md. Parse DESIGN.md content and generate Tailwind CSS configurations effortlessly.

- Tags: how-to-guide
- Published: 2026-06-28

### [DesignSystemState Data Structure: Internal Design System Representation in Instagit](/google-labs-code/design.md/what-is-the-internal-designsystemstate-data-structure)

Explore the DesignSystemState data structure, Instagit's internal representation for tokens, components, and metadata. Learn how it enables fast lookup in the Instagit CLI.

- Tags: internals
- Published: 2026-06-28

### [How the WCAG Contrast Ratio Checker Calculates Compliance in Design.md](/google-labs-code/design.md/how-does-the-contrast-ratio-checker-calculate-wcag-compliance)

Learn how the WCAG contrast ratio checker calculates compliance by comparing text and background luminance. Discover the formula used and WCAG AA minimums.

- Tags: how-to-guide
- Published: 2026-06-28

### [How to Implement Custom Linting Rules in the DESIGN.md CLI](/google-labs-code/design.md/how-to-implement-custom-linting-rules-in-the-design-md-cli)

Learn to implement custom linting rules in the DESIGN.md CLI. Create RuleDescriptors with Run methods and pass them to the lint function. Enhance your design documentation workflow.

- Tags: how-to-guide
- Published: 2026-06-28

### [How DESIGN.md Token Reference Resolution Works Internally](/google-labs-code/design.md/how-does-design-md-token-reference-resolution-work-internally)

Understand DESIGN.md token reference resolution's three-phase pipeline: symbol tables, recursive reference resolution with cycle detection, and application to component properties with error reporting.

- Tags: internals
- Published: 2026-06-28

### [How to Fix npm install ENOVERSIONS Error for @google/design.md](/google-labs-code/design.md/why-npm-install-fails-with-enoversions-error-for-google-design-md)

Fix the npm install ENOVERSIONS error for @google/design.md. Learn why this private registry issue occurs and how to configure npm to successfully install this package.

- Tags: how-to-guide
- Published: 2026-06-27

### [How to Configure the DESIGN.md Linter to Run in Your CI Pipeline](/google-labs-code/design.md/how-to-configure-design-md-linter-to-run-in-ci-pipeline)

Integrate the DESIGN.md linter into your CI pipeline effortlessly. Learn how to use the built-in lint command for automated validation and ensure code quality.

- Tags: how-to-guide
- Published: 2026-06-27

### [DESIGN.md Tokens and W3C Design Tokens Format: A Complete Compatibility Guide](/google-labs-code/design.md/relationship-between-design-md-tokens-and-w3c-design-tokens-format)

Explore the relationship between DESIGN.md tokens and W3C Design Tokens Format. Learn how DESIGN.md exports compatible JSON for seamless tooling interoperability.

- Tags: deep-dive
- Published: 2026-06-27

### [How DESIGN.md Integrates with Coding Agents for UI Generation: A Technical Deep Dive](/google-labs-code/design.md/how-does-design-md-integrate-with-coding-agents-for-ui-generation)

Discover how DESIGN.md seamlessly integrates with coding agents for UI generation. Learn how it converts YAML to JSON specs, enabling the Ink renderer to build user interfaces.

- Tags: deep-dive
- Published: 2026-06-27

### [How the missing-primary Warning Affects Agent Behavior in DESIGN.md](/google-labs-code/design.md/how-missing-primary-warning-affects-agent-behavior-in-design-md)

Learn how the missing-primary warning in DESIGN.md triggers auto-generated primary colors, impacting agent behavior and designer control over UI components. Understand the consequences and solutions.

- Tags: how-to-guide
- Published: 2026-06-27

### [How to Fix Section Ordering Issues Automatically with the Fixer API](/google-labs-code/design.md/how-to-fix-section-ordering-issues-automatically-with-fixer-api)

Automatically fix DESIGN.md section ordering issues with the Fixer API. Preserve preludes and custom sections. Get a corrected document string via the fixSectionOrder function.

- Tags: how-to-guide
- Published: 2026-06-27

### [DESIGN.md Token Types: Color, Dimension, and Typography Specification](/google-labs-code/design.md/what-token-types-does-design-md-support)

Explore DESIGN.md's three core token types: Color, Dimension, and Typography. Learn how to define them in YAML front-matter for type-safe design systems.

- Tags: api-reference
- Published: 2026-06-27

### [How to Use stdin with the DESIGN.md CLI for Piping Input](/google-labs-code/design.md/how-to-use-stdin-with-design-md-cli-for-piping)

Learn to pipe content into the DESIGN.md CLI using stdin. Discover how to use the '-' filename with cat, git show, and curl for seamless workflow integration.

- Tags: how-to-guide
- Published: 2026-06-27

### [How Orphaned Tokens Detection Works in DESIGN.md: Finding Unused Color Tokens](/google-labs-code/design.md/how-orphaned-tokens-detection-works-and-why-warn-about-unused-colors)

Discover how orphaned tokens detection in DESIGN.md identifies unused color tokens. Learn to maintain design system hygiene by finding and removing these unreferenced colors.

- Tags: how-to-guide
- Published: 2026-06-27

### [Canonical Section Order in DESIGN.md: Rules, Violations, and CLI Enforcement](/google-labs-code/design.md/canonical-section-order-in-design-md-and-consequences-of-violation)

Discover the canonical section order in DESIGN.md: Overview, Colors, Typography, Layout, and more. Learn about CLI enforcement and violations in this essential guide for maintaining design consistency.

- Tags: how-to-guide
- Published: 2026-06-27

### [How to Export DESIGN.md Tokens to W3C Design Tokens Format Module (DTCG)](/google-labs-code/design.md/how-to-export-design-md-tokens-to-dtcg-format)

Easily export DESIGN.md tokens to W3C Design Tokens Format Module (DTCG) using our CLI tool or DtcgEmitterHandler class for standards-compliant JSON output.

- Tags: how-to-guide
- Published: 2026-06-27

### [How DESIGN.md Handles Unknown Section Headings and Custom Extension Keys](/google-labs-code/design.md/how-design-md-handles-unknown-section-headings-and-custom-keys)

DESIGN.md tolerates unknown headings and custom keys, preserving values and warning you. Ensure forward compatibility without failures.

- Tags: internals
- Published: 2026-06-27

### [How to Fix Broken Token References with the broken-ref Lint Rule in Design MD](/google-labs-code/design.md/what-broken-ref-lint-rule-checks-and-how-to-fix)

Fix broken token references in Design MD with the broken-ref lint rule. Learn to identify and resolve missing tokens and unsupported property names for a cleaner design system.

- Tags: how-to-guide
- Published: 2026-06-27

### [How to Use MDX Expressions in DESIGN.md Files with the `spec` Command](/google-labs-code/design.md/how-to-use-mdx-expressions-in-design-md-files-with-spec-command)

Learn how to use MDX expressions in DESIGN.md files with the spec command. This tool evaluates JavaScript expressions to generate markdown output for your documentation.

- Tags: how-to-guide
- Published: 2026-06-27

### [Why the designmd Alias Exists and When to Use It on Windows](/google-labs-code/design.md/why-designmd-alias-exist-and-when-to-use-on-windows)

Understand the designmd alias and its purpose on Windows. Avoid confusion with Markdown files and execute the designmd CLI tool effectively.

- Tags: how-to-guide
- Published: 2026-06-27

### [How the Diff Command Detects Token-Level Regressions Between DESIGN.md Files](/google-labs-code/design.md/how-diff-command-detects-token-level-regressions-between-design-md-files)

Discover how the diff command detects token level regressions in DESIGN.md files by linting and comparing token maps, flagging changes that introduce more errors. Learn about regression detection.

- Tags: how-to-guide
- Published: 2026-06-27

### [Valid Component Property Names in DESIGN.md: Complete Schema Reference](/google-labs-code/design.md/valid-component-property-names-in-design-md-schema)

Discover the eight valid component property names in the DESIGN.md schema: backgroundColor, textColor, typography, rounded, padding, size, height, and width. Get the complete reference.

- Tags: api-reference
- Published: 2026-06-27

### [How to Create Component Tokens with Variants in DESIGN.md](/google-labs-code/design.md/how-to-create-component-tokens-with-variants-in-design-md)

Learn to create component tokens with variants in DESIGN.md. Define base components and use state suffixes to customize UI elements effectively. Master variant creation now.

- Tags: how-to-guide
- Published: 2026-06-27

### [How the contrast-ratio Rule Checks WCAG Compliance in DESIGN.md](/google-labs-code/design.md/how-contrast-ratio-rule-checks-wcag-compliance-in-design-md)

Learn how the contrast-ratio rule in DESIGN.md ensures WCAG AA compliance by checking text and background color luminance ratios against the 4.5:1 threshold.

- Tags: how-to-guide
- Published: 2026-06-27

### [Understanding json-tailwind and css-tailwind Export Formats in DESIGN.md](/google-labs-code/design.md/difference-between-json-tailwind-and-css-tailwind-export-formats)

Discover the key differences between json-tailwind and css-tailwind export formats in DESIGN.md. Learn how each format configures Tailwind v3 and v4 for your projects.

- Tags: deep-dive
- Published: 2026-06-27

### [How to Programmatically Use the DESIGN.md Linter API in Node.js](/google-labs-code/design.md/how-to-programmatically-use-design-md-linter-api-in-own-code)

Programmatically use the DESIGN.md linter API in Node.js. Import the lint function and get a typed LintReport with findings and Tailwind CSS config for your markdown.

- Tags: how-to-guide
- Published: 2026-06-27

### [How to Export DESIGN.md Tokens to Tailwind v4 CSS Custom Properties](/google-labs-code/design.md/how-to-export-design-md-tokens-to-tailwind-v4-css-custom-properties-format)

Export DESIGN.md tokens to Tailwind v4 CSS custom properties with the design.md CLI. Learn how to use the --format css-tailwind flag for seamless integration.

- Tags: how-to-guide
- Published: 2026-06-27

### [DESIGN.md CLI Linting Rules: Complete Configuration Guide](/google-labs-code/design.md/what-linting-rules-does-design-md-cli-run-and-how-to-configure)

Explore DESIGN.md CLI linting rules for broken references and more. Learn how to configure these fixed rules programmatically for an optimized workflow. Master design system linting.

- Tags: how-to-guide
- Published: 2026-06-27

### [How DESIGN.md Token Reference Resolution Works: The `{path.to.token}` Syntax Explained](/google-labs-code/design.md/how-does-design-md-token-reference-resolution-work-with-path-to-token-syntax)

Understand DESIGN.md token reference resolution. Learn how the {path.to.token} syntax works with its three-phase algorithm for efficient value substitution.

- Tags: deep-dive
- Published: 2026-06-27

### [How to Use Token References in Component Definitions in Design.md](/google-labs-code/design.md/how-to-use-token-references-in-component-definitions)

Learn how to use token references in component definitions with Design.md. This guide shows you how to use curly-brace syntax to sync components with your design system.

- Tags: how-to-guide
- Published: 2026-06-26

### [How the `diff` Command Detects Regressions in DESIGN.md Files](/google-labs-code/design.md/how-does-the-diff-command-detect-regressions)

Learn how the diff command detects regressions by comparing lint statistics in DESIGN.md files. Identify issues when later versions have more errors than earlier versions.

- Tags: how-to-guide
- Published: 2026-06-26

### [Valid Component Properties in DESIGN.md: The Complete 8-Property Schema](/google-labs-code/design.md/what-are-the-valid-component-properties-in-design-md)

Discover the eight valid component properties in DESIGN.md including backgroundColor, textColor, and typography. Master UI component visual contracts for better design system management. Learn more!

- Tags: api-reference
- Published: 2026-06-26

### [How to Use DESIGN.md Tokens in Components: The Complete Reference](/google-labs-code/design.md/how-to-use-design-md-tokens-in-components)

Learn to use DESIGN.md tokens in components with the {path.to.token} syntax. Export to CSS Tailwind or JSON after CLI validation. Get the complete reference now.

- Tags: api-reference
- Published: 2026-06-26

### [How to Compare Two DESIGN.md Files Using the design.md CLI](/google-labs-code/design.md/how-to-compare-two-design-md-files-for-changes)

Easily compare two DESIGN.md files with the design.md CLI. The diff command highlights changes in tokens, components, and lint rules, alerting you to regressions.

- Tags: how-to-guide
- Published: 2026-06-26

### [How to Export DESIGN.md Tokens to Tailwind v4 CSS](/google-labs-code/design.md/how-to-export-design-md-tokens-to-tailwind-v4-css)

Export DESIGN.md tokens to Tailwind v4 CSS using the @google/design.md CLI. Learn how to generate CSS variables with the --format css-tailwind flag for seamless integration.

- Tags: how-to-guide
- Published: 2026-06-26

### [How the WCAG Contrast Ratio Check Works in Design.md](/google-labs-code/design.md/how-does-the-contrast-ratio-wcag-check-work)

Understand how the WCAG contrast ratio check works. Learn the four pipeline steps to ensure accessibility compliance and avoid design violations.

- Tags: how-to-guide
- Published: 2026-06-26

### [How to Fix Broken Token References in DESIGN.md: A Complete Guide](/google-labs-code/design.md/how-to-fix-broken-token-references-in-design-md)

Fix broken token references in DESIGN.md with this complete guide. Learn to identify and resolve invalid syntax and circular dependencies for seamless documentation.

- Tags: how-to-guide
- Published: 2026-06-26

### [How DESIGN.md Token Reference Resolution Works: A Deep Dive into the google-labs-code/design.md CLI](/google-labs-code/design.md/how-does-design-md-token-reference-resolution-work)

Discover how DESIGN.md token reference resolution works. Learn about primitive parsing, chained resolution, and component property binding facilitated by the ModelHandler class.

- Tags: deep-dive
- Published: 2026-06-26

### [Where to Find the Formal Specification for the DESIGN.md Format](/google-labs-code/design.md/where-to-find-the-formal-specification-for-the-design-md-format)

Discover the DESIGN.md formal specification in the google labs code repository. Understand its YAML schema, markdown hierarchy, and design token syntax for clear documentation.

- Tags: api-reference
- Published: 2026-06-25

### [What Is the `designmd` Alias for on Windows? CLI Compatibility Explained](/google-labs-code/design.md/what-is-the-designmd-alias-for-on-windows)

Learn what the designmd alias is on Windows. It's a dot-free CLI alternative that avoids file association issues with DESIGN.md, ensuring command execution.

- Tags: how-to-guide
- Published: 2026-06-25

### [How to Use the DESIGN.md Programmatic Linter API in TypeScript](/google-labs-code/design.md/how-to-use-the-design-md-programmatic-linter-api-in-typescript)

Learn to use the DESIGN.md programmatic linter API in TypeScript. Parse markdown, resolve tokens, and run custom lint rules within your code.

- Tags: how-to-guide
- Published: 2026-06-25

### [What the Orphaned-Tokens Linting Rule Checks For in Design.md](/google-labs-code/design.md/what-does-the-orphaned-tokens-linting-rule-check-for)

The orphaned-tokens linting rule in design.md flags unreferenced custom color tokens. Ensure your design tokens are used by components to maintain consistency and avoid unused code.

- Tags: deep-dive
- Published: 2026-06-25

### [How the contrast-ratio Linting Rule Works in Design.md](/google-labs-code/design.md/how-does-the-contrast-ratio-linting-rule-work)

Learn how the contrast-ratio linting rule enforces WCAG AA accessibility. It checks the luminance contrast between background and text colors in Design.md components, flagging low ratios.

- Tags: how-to-guide
- Published: 2026-06-25

### [What Is the `broken-ref` Linting Rule in Design-MD?](/google-labs-code/design.md/what-is-the-purpose-of-the-broken-ref-linting-rule)

Learn how the broken-ref linting rule in Design-MD finds unresolved token references and unrecognized component sub-tokens to ensure your specifications are valid.

- Tags: deep-dive
- Published: 2026-06-25

### [How to Export DESIGN.md Tokens to W3C DTCG Format](/google-labs-code/design.md/how-to-export-design-md-tokens-to-w3c-dtcg-format)

Easily export DESIGN.md tokens to W3C DTCG JSON using the CLI or programmatically. Learn the simple steps to convert your design tokens for broader compatibility.

- Tags: how-to-guide
- Published: 2026-06-25

### [How to Export DESIGN.md Tokens to Tailwind v4 CSS Format](/google-labs-code/design.md/how-to-export-design-md-tokens-to-tailwind-v4-css-format)

Easily export DESIGN.md tokens to Tailwind v4 CSS format using the CLI. Convert design system categories to CSS variables for seamless integration.

- Tags: how-to-guide
- Published: 2026-06-25

### [How to Export DESIGN.md Tokens to Tailwind v3 JSON Format: A Complete Guide](/google-labs-code/design.md/how-to-export-design-md-tokens-to-tailwind-v3-json-format)

Export DESIGN.md tokens to Tailwind v3 JSON format using the google-labs-code/design.md CLI. Learn how to easily integrate design tokens into your tailwind.config.js file.

- Tags: how-to-guide
- Published: 2026-06-25

### [How to Compare Two DESIGN.md Files: CLI and Programmatic Guide](/google-labs-code/design.md/how-to-compare-two-design-md-files)

Effortlessly compare two DESIGN.md files using CLI tools. Identify design token, component, and lint differences to prevent regressions with our comprehensive guide.

- Tags: how-to-guide
- Published: 2026-06-25

### [How to Lint a DESIGN.md File Using the CLI: Complete Validation Guide](/google-labs-code/design.md/how-to-lint-a-design-md-file-using-the-cli)

Lint DESIGN.md files with the CLI using npx @google-labs/design-cli lint. Validate structure, tokens, and Tailwind CSS for design system consistency. Ensure error-free development.

- Tags: how-to-guide
- Published: 2026-06-25

### [The Nine Validation Rules for the DESIGN.md Linter Explained](/google-labs-code/design.md/what-are-the-nine-validation-rules-for-the-design-md-linter)

Discover the nine validation rules for the DESIGN.md linter: broken-ref, missing-primary, contrast-ratio, orphaned-tokens, token-summary, missing-sections, missing-typography, section-order, and unknown-key. Learn how they catc...

- Tags: deep-dive
- Published: 2026-06-25

### [How the DESIGN.md Linter Validates Files: A Three-Stage Pipeline](/google-labs-code/design.md/how-does-the-design-md-linter-validate-files)

Learn how the DESIGN.md linter validates files using a three-stage pipeline: parsing, model building, and rule execution. Discover how it catches errors and warnings in your design system.

- Tags: how-to-guide
- Published: 2026-06-25

### [What Happens with Unknown Section Headings in DESIGN.md: Parser Behavior Explained](/google-labs-code/design.md/what-happens-with-unknown-section-headings-in-design-md)

Discover how unknown section headings in DESIGN.md are handled. Learn how custom sections like Iconography are preserved, not causing errors in your tooling. Explore parser behavior.

- Tags: internals
- Published: 2026-06-25

### [Canonical Order of Sections in a DESIGN.md File: The 7-Section Standard](/google-labs-code/design.md/what-is-the-canonical-order-of-sections-in-a-design-md-file)

Discover the canonical order of sections in a DESIGN.md file. Learn the 7-section standard for Brand & Style, Colors, Typography, Layout, Elevation, Shapes, and Components to improve your documentation.

- Tags: best-practices
- Published: 2026-06-25

### [How Are Spacing Units Handled in DESIGN.md?](/google-labs-code/design.md/how-are-spacing-units-handled-in-design-md)

Learn how DESIGN.md handles spacing units with semantic tokens like gutter or lg, anchored to a base 8px unit and resolved by the CLI.

- Tags: how-to-guide
- Published: 2026-06-25

### [How Colors Are Specified in DESIGN.md: CSS Design Tokens and Formats](/google-labs-code/design.md/how-are-colors-specified-in-design-md)

Learn how colors are specified in DESIGN.md using CSS design tokens in YAML. Discover support for hex, rgb, hsl, oklch, and color-mix functions for flexible styling.

- Tags: deep-dive
- Published: 2026-06-25

### [Supported Token Categories in DESIGN.md: The Complete Guide](/google-labs-code/design.md/what-are-the-supported-token-categories-in-design-md)

Explore supported token categories in DESIGN.md: colors, typography, rounded, spacing, and components. Learn how YAML front-matter and the linter validate these for your design system.

- Tags: deep-dive
- Published: 2026-06-25

### [How DESIGN.md Combines Design Tokens and Rationale: A Single-File Design System](/google-labs-code/design.md/how-design-md-combines-design-tokens-and-rationale)

DESIGN.md merges design tokens and rationale into one Markdown file. Get exact values and contextual intent from this unique single-file design system.

- Tags: deep-dive
- Published: 2026-06-25

### [DESIGN.md: A Machine-Readable Specification for Visual Design Systems](/google-labs-code/design.md/what-is-design-md)

Discover DESIGN.md, a machine-readable format combining YAML tokens and Markdown prose for verifiable visual identity. Keep documentation human-readable and code-ready.

- Tags: architecture
- Published: 2026-06-25