DSDS Anatomy Guideline

2 definitions in this file:

anatomyEntry
anatomy

Machine-readable identifier for the part (e.g., 'container', 'label', 'icon', 'focus-ring').

What this part is, what it does, and any constraints on its content or appearance.

Whether this part is always present in the rendered output. Defaults to false. When false, the part is conditionally rendered based on props or content.
Default: false

Human-readable name (e.g., 'Container', 'Label', 'Leading Icon').

Design tokens applied to this part. Keys are token-purpose names describing what visual attribute the token controls (e.g., 'background', 'border-radius', 'padding-horizontal', 'text-color'). Values are the token identifiers that provide the value (e.g., 'color-action-primary', 'radius-md', 'space-4').

Links to resources for this anatomy part — design tool nodes, source code blocks, documentation sections, or other addressable references.

References: richText, link

[ { "identifier": "container", "name": "Container", "description": "The outer wrapper element that defines the button's clickable area and visual boundary.", "required": true, "tokens": { "background": "button-background", "border-color": "button-border-color", "border-radius": "button-border-radius", "padding-horizontal": "button-padding-horizontal", "padding-vertical": "button-padding-vertical" }, "links": [ { "kind": "source", "url": "https://code.acme.com/design-system/src/components/button/button.tsx#L42-L58", "label": "Source — container element" }, { "kind": "design", "url": "https://design-tool.acme.com/file/abc123?node-id=1234:5678", "label": "Design node — container" } ] }, { "identifier": "label", "name": "Label", "description": "The text content of the button. Communicates the action that will occur when activated.", "required": true, "tokens": { "text-color": "button-text-color", "font-size": "button-font-size", "font-weight": "button-font-weight", "line-height": "button-line-height" } }, { "identifier": "icon", "name": "Icon", "description": "An optional icon displayed before (leading) or after (trailing) the label. Reinforces the label's meaning visually.", "required": false, "tokens": { "size": "button-icon-size", "color": "button-icon-color", "gap": "button-icon-gap" } }, { "identifier": "focus-ring", "name": "Focus Ring", "description": "A visible outline that appears when the button receives keyboard focus. Must be visible in all color modes.", "required": false, "tokens": { "color": "button-focus-ring-color", "width": "button-focus-ring-width", "offset": "button-focus-ring-offset" } } ]

Identifies this guideline as an anatomy spec.

The named sub-elements of the artifact, in visual order (typically outside-in or top-to-bottom). Each part documents an element that can be styled, tested, or referenced independently.
Min items: 1

Prose overview of the artifact's visual structure — how the parts relate and any notable structural constraints.

Visual previews of the anatomy — typically annotated diagrams with numbered callouts mapping to the parts array. Multiple previews allow different views (e.g., expanded vs. collapsed, with icon vs. without).

AI-ready context for this document block. Provides structured info for AI/LLM use: constraints, disambiguation, anti-patterns, examples, and keywords.

References: richText, anatomyEntry, example, agents

{ "description": "The Button is composed of a container, a text label, and an optional leading or trailing icon. A focus ring appears on keyboard focus.", "parts": [ { "identifier": "container", "name": "Container", "description": "The outer wrapper element that defines the button's clickable area and visual boundary.", "required": true, "tokens": { "background": "button-background", "border-color": "button-border-color", "border-radius": "button-border-radius" } }, { "identifier": "label", "name": "Label", "description": "The text content of the button.", "required": true, "tokens": { "text-color": "button-text-color", "font-size": "button-font-size" } }, { "identifier": "icon", "name": "Icon", "description": "An optional icon displayed before or after the label.", "required": false, "tokens": { "size": "button-icon-size", "color": "button-icon-color" } }, { "identifier": "focus-ring", "name": "Focus Ring", "description": "A visible outline that appears when the button receives keyboard focus.", "required": false, "tokens": { "color": "button-focus-ring-color", "width": "button-focus-ring-width" } } ], "kind": "anatomy" }