12 definitions in this file:
Open map: keys are strings, values are any
References:
designValue
Padding and internal gaps within the component. Keys are named spatial relationships between anatomy parts or edges (e.g., 'container-horizontal', 'icon-to-label'). Values are token names or raw CSS values (e.g., 'space-4', '8px', '1rem').
Recommended margins and gaps between this component and siblings or container edges. Keys are named spatial relationships (e.g., 'button-to-button', 'button-group-gap', 'stack-gap'). Values are token names or raw CSS values. External spacing is a recommendation — the parent layout controls the space between components.
References:
designValue
Minimum width as a token name or raw value (e.g., 'size-button-min-width', '64px').
Maximum width as a token name or raw value (e.g., 'size-dialog-max-width', '600px', 'none').
Minimum height as a token name or raw value (e.g., 'size-button-min-height', '44px').
Maximum height as a token name or raw value.
Aspect ratio constraint as a ratio string (e.g., '16/9', '1/1', '4/3').
References:
designValue
Font family as a token name or raw value (e.g., 'font-family-body', 'Inter, sans-serif').
Font size as a token name or raw value (e.g., 'font-size-body', '14px', '0.875rem').
Font weight as a token name or raw value (e.g., 'font-weight-regular', '400', 'bold').
Line height as a token name or raw value (e.g., 'line-height-body', '1.5', '20px').
Letter spacing as a token name or raw value (e.g., 'letter-spacing-body', '0.01em').
Text transform value (e.g., 'uppercase', 'capitalize', 'none').
A composite typography token covering multiple typographic properties (e.g., '$body-compact-01', 'type-scale-body-sm'). When provided, individual properties (fontSize, fontWeight, etc.) document what the token resolves to.
References:
designValue
Open map: keys are strings, values are any
References:
typographyEntrySpec
The breakpoint name or value at which this behavior applies (e.g., 'small', 'medium', 'large', '768px', 'min-width: 1024px').
How the component's layout, sizing, or behavior changes at this breakpoint.
References:
richText
The variant name. Must match a value defined in the component's variants guideline (e.g., 'primary', 'secondary', 'ghost', 'danger').
How this variant's visual treatment differs.
Design properties for this variant. Keys are property names (e.g., 'background', 'text-color', 'border-color'). Values are token names or raw CSS values.
Spacing adjustments for this variant, if any.
Sizing adjustments for this variant, if any.
Typography adjustments for this variant, if any.
References:
richText, designProperties, spacingSpec, sizingSpec, typographySpec
The size name. Must match a value defined in the component's variants guideline (e.g., 'small', 'medium', 'large', 'sm', 'md', 'lg').
This size's intended use.
Design properties for this size. Keys are property names (e.g., 'min-height', 'font-size', 'icon-size', 'padding-horizontal'). Values are token names or raw CSS values.
Spacing for this size.
Dimension constraints for this size.
Typography settings for this size.
References:
richText, designProperties, spacingSpec, sizingSpec, typographySpec
The state name. Must match a value defined in the component's states guideline (e.g., 'hover', 'active', 'focus', 'disabled', 'loading').
How the component changes in this state.
Design properties for this state. Only properties that change from the default need to be listed. Keys are property names (e.g., 'background', 'opacity', 'focus-ring-color'). Values are token names or raw CSS values.
Spacing adjustments for this state, if any.
Sizing adjustments for this state, if any.
Typography adjustments for this state, if any.
References:
richText, designProperties, spacingSpec, sizingSpec, typographySpec
The variant name (e.g., 'primary', 'danger').
The state name (e.g., 'hover', 'active', 'focus').
How this variant behaves in this state.
Design properties for this variant–state combination.
References:
richText, designProperties
Identifies this guideline as a design specs document.
Base design properties for the default config. Keys are property names describing what each value controls (e.g., 'background', 'text-color', 'border-radius'). Values are design token names or raw CSS values.
Base spacing spec for the default config.
Base sizing spec for the default config.
Base typography spec for the default config.
Responsive behavior describing how the component adapts across breakpoints. Entries are ordered from smallest to largest breakpoint.
Design properties grouped by variant. Each entry is a full set of property-to-value mappings for one variant. Values are the variant's own tokens (e.g., 'button-primary-bg') or raw values — not overrides of base tokens.
Design properties grouped by size. Each entry defines the dimensions, spacing, typography, and other properties that change at each size step.
Design properties grouped by interactive state. Each entry defines properties that change when the component enters a given state. Only properties that differ from the default need to be listed.
Design properties for specific variant–state combinations where the state's visual treatment differs across variants. Only needed when a single state entry cannot describe the behavior across all variants.
Agent-optimized context for this document block. Provides structured information for AI/LLM consumption — constraints, disambiguation, anti-patterns, examples, and keywords.
Constraint: At least one of properties, spacing, sizing, typography, responsive, variants, sizes, states, variantStates must be present.
References:
designProperties, spacingSpec, sizingSpec, typographySpec, responsiveEntry, specVariant, specSize, specState, specVariantState, agents
Design System Documentation Standard (DSDS) 0.1 — Draft Specification
GitHub