# What Are the Five Dials of the Design Read System in web-design-engineer?

> Discover the five dials of the Design Read system: Variance, Motion, Density, Asset Dependence, and Brand Fidelity. Learn how to translate design briefs into actionable specifications.

- Repository: [ConardLi/garden-skills](https://github.com/ConardLi/garden-skills)
- Tags: deep-dive
- Published: 2026-09-02

---

**The Design Read system in ConardLi/garden-skills uses five calibrated dials—Variance, Motion, Density, Asset Dependence, and Brand Fidelity—to translate abstract design briefs into concrete, executable specifications.**

The **web-design-engineer** skill in the [ConardLi/garden-skills](https://github.com/ConardLi/garden-skills) repository introduces a structured methodology called the *Design Read* to bridge high-level creative direction and low-level implementation. This system compresses complex design requirements into five tunable parameters that drive consistent decision-making throughout the UI development workflow.

## What Is the Design Read System?

According to [`skills/web-design-engineer/README.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/README.md), a Design Read is a concise synthesis of a design brief expressed through five discrete "dials." Each dial maps an abstract aspect of the creative direction to a concrete, visible decision that shapes the final output. The specification is detailed in [`skills/web-design-engineer/references/design-calibration.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/references/design-calibration.md), which defines valid ranges and interaction rules for each parameter.

## The Five Dials Explained

### Variance

**Variance** controls visual composition and layout complexity. This dial determines structural variation—such as grid density, hierarchy depth, and layout patterns—to ensure the design matches audience expectations and content strategy. High variance might indicate complex, asymmetrical layouts, while low variance favors rigid, predictable structures.

### Motion

**Motion** governs animations, transitions, and interactive feedback. It converts brand tone and user flow requirements into specific motion cues, including timing functions (e.g., `ease-in-out`), easing curves, and micro-interaction patterns. The `duration_ms` and `transition` keys in the configuration object define these characteristics.

### Density

**Density** manages information density and spatial relationships. This dial maps content richness to UI spacing decisions, controlling whitespace ratios (`spacing: wide` vs. `compact`), element clustering, and cognitive load through padding strategies. It directly influences how crowded or airy the interface feels.

### Asset Dependence

**Asset Dependence** specifies the required graphic and media assets. This dial transforms brief requirements into concrete decisions about photography styles, illustration types, icon sets (`line-simple`, `filled`, etc.), and other visual media dependencies needed for execution. It answers *what* visual resources must be sourced or generated.

### Brand Fidelity

**Brand Fidelity** ensures adherence to brand guidelines. This dial guarantees that color palettes (`palette: green-primary`), typography systems (`typeface: sans-serif`), logo usage, and overall brand voice remain consistent with established identity standards. It operates as a compliance check against the brand's design system.

## Implementation and Code Structure

The five dials are implemented as structured data objects consumed by the skill pipeline. In [`skills/web-design-engineer/references/design-calibration.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/references/design-calibration.md), each dial is defined with specific JSON schemas that the engine validates at runtime.

### Python Configuration Example

```python
design_read = {
    "summary": "A modern, eco-friendly brand site for Gen-Z shoppers.",
    "dials": {
        "variance":   {"layout": "grid-3-col", "theme": "minimal"},
        "motion":     {"transition": "fade-up", "duration_ms": 250},
        "density":    {"spacing": "wide", "content_blocks": 5},
        "asset":      {"images": "stock-eco", "icons": "line-simple"},
        "brand_fidelity": {"palette": "green-primary", "typeface": "sans-serif"}
    }
}

```

### JSON Payload for Skill Invocation

When calling the skill via its API, the dials are passed as a nested JSON object:

```json
{
  "skill": "web-design-engineer",
  "action": "produce_design",
  "input": {
    "brief": "Create a landing page for a sustainable fashion brand targeting young adults.",
    "design_read": {
      "summary": "Eco-friendly Gen-Z fashion landing page",
      "dials": {
        "variance":   {"layout": "asymmetric-grid"},
        "motion":     {"transition": "slide-in", "duration_ms": 300},
        "density":    {"spacing": "balanced"},
        "asset":      {"images": "custom-photography", "icons": "outline"},
        "brand_fidelity": {"strictness": "high", "palette": "earth-tones"}
      }
    }
  }
}

```

The skill pipeline parses these values in [`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md) to generate corresponding CSS, animation keyframes, and asset manifests.

## Source File Reference

The five-dial architecture is documented across the following files in the repository:

- [`skills/web-design-engineer/README.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/README.md) – Overview of the Design Read concept and five-dial methodology.
- [`skills/web-design-engineer/references/design-calibration.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/references/design-calibration.md) – Detailed specifications for dial calibration ranges and valid values.
- [`skills/web-design-engineer/SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/SKILL.md) – Complete skill definition, including JSON schemas for the dials input.
- [`skills/web-design-engineer/README.zh-CN.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/README.zh-CN.md) – Chinese localization mirroring the five-dial explanation (labeled "五旋钮 Design Read").

## Summary

- The **Design Read** system compresses design briefs into five actionable parameters that drive consistent execution.
- **Variance** controls layout composition, grid complexity, and structural hierarchy.
- **Motion** defines animation timing, easing functions, and transition behaviors.
- **Density** regulates whitespace, element clustering, and information architecture spacing.
- **Asset Dependence** specifies required media types, illustration styles, and iconography.
- **Brand Fidelity** enforces compliance with color palettes, typography, and brand guidelines.
- Configuration examples are stored in [`design-calibration.md`](https://github.com/ConardLi/garden-skills/blob/main/design-calibration.md) and processed according to the schema defined in [`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md).

## Frequently Asked Questions

### What is the Design Read system in web-design-engineer?

The Design Read system is a synthesis framework defined in [`skills/web-design-engineer/README.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/README.md) that translates abstract creative briefs into five concrete dials. It provides a standardized vocabulary for converting high-level design direction into executable specifications that the skill processes into CSS, layouts, and asset lists.

### How do the five dials interact during execution?

Each dial operates independently but collectively determines the final output. For example, high **Density** settings may constrain **Variance** options to prevent visual clutter, while **Brand Fidelity** settings can override **Asset Dependence** choices when strict brand compliance requires specific image types. The interaction rules are defined in [`design-calibration.md`](https://github.com/ConardLi/garden-skills/blob/main/design-calibration.md).

### Where are the five dials defined in the source code?

The canonical definitions reside in [`skills/web-design-engineer/references/design-calibration.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/references/design-calibration.md), with architectural overviews in [`README.md`](https://github.com/ConardLi/garden-skills/blob/main/README.md) and input schemas in [`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md). These files specify valid values, defaults, and calibration ranges for Variance, Motion, Density, Asset Dependence, and Brand Fidelity.

### Can the dials be customized for specific projects?

While the five dials represent the core framework, the JSON schema in [`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md) allows nested configuration objects within each dial. Users can extend specific dials with custom key-value pairs (e.g., custom easing functions under **Motion**), provided they adhere to the structural schema expected by the web-design-engineer skill pipeline.