Consistency checkpoints
Whether presets that mean the same thing look the same across components: the same intent, state, size label or typography level should use the same values.
Each checkpoint reports pass, warning, fail or skipped. A finding for a checkpoint links its section on this page.
Intent tokens
Same intent, same values
consistency.intent_tokens.same_values
For each intent used by more than one component, such as destructive on a button and a badge, whether every property those presets set has the same value across components. It passes when there is nothing to compare.
| Result | When |
|---|---|
| Pass | At least 80% of compared properties match. |
| Warning | Between 50% and 80%. |
| Fail | Below 50%. |
| Skipped | No intent is used by more than one component. |
How to improve. Align each mismatched property to one token value.
Low variance within an intent
consistency.intent_tokens.low_variance
How far values spread within each intent across components. A property with one value across all components scores 100%; one with a different value on every component scores 0%. The result is the average across compared properties.
| Result | When |
|---|---|
| Pass | An average of 80% or more. |
| Warning | Between 50% and 80%. |
| Fail | Below 50%. |
| Skipped | No intent is used by more than one component. |
How to improve. Reduce the number of distinct values used for shared properties.
No color conflicts within an intent
consistency.intent_tokens.no_semantic_conflicts
For each intent used by more than one component, whether color properties (color, background, border color, fill, stroke) have the same value across components.
| Result | When |
|---|---|
| Pass | At least 90% match. |
| Warning | Between 60% and 90%. |
| Fail | Below 60%. |
| Skipped | No intent is used by more than one component. |
How to improve. Use one semantic color token per intent across components.
States
Consistent hover states
consistency.state.hover_consistency
For presets that define a hover state, whether each hover property has the same value across component types.
| Result | When |
|---|---|
| Pass | At least 80% of compared properties match. |
| Warning | Between 50% and 80%. |
| Fail | Below 50%. |
| Skipped | There is nothing to compare: fewer than two presets define a hover state, or none share a property. |
How to improve. Use the same hover treatment across components.
Consistent focus states
consistency.state.focus_consistency
For presets that define a focus state, whether each focus property has the same value across component types.
| Result | When |
|---|---|
| Pass | At least 80% of compared properties match. |
| Warning | Between 50% and 80%. |
| Fail | Below 50%. |
| Skipped | There is nothing to compare: fewer than two presets define a focus state, or none share a property. |
How to improve. Use the same focus treatment across components, including ring color, offset and width.
Consistent disabled states
consistency.state.disabled_consistency
For presets that define a disabled state, whether each disabled property has the same value across component types.
| Result | When |
|---|---|
| Pass | At least 80% of compared properties match. |
| Warning | Between 50% and 80%. |
| Fail | Below 50%. |
| Skipped | There is nothing to compare: fewer than two presets define a disabled state, or none share a property. |
How to improve. Use the same disabled treatment across components, including opacity, cursor and color.
Sizing
Size labels mean the same dimensions
consistency.sizing.dimension_consistency
For each size label, such as md, used by more than one component, whether height, min-height, width and min-width match across components. It passes when no size label is shared.
| Result | When |
|---|---|
| Pass | At least 80% of compared values match. |
| Warning | Between 50% and 80%. |
| Fail | Below 50%. |
| Skipped | No presets define a size label. |
How to improve. Make the same size label produce the same height and width on every component.
Size labels mean the same spacing
consistency.sizing.spacing_consistency
For each size label, such as md, used by more than one component, whether padding, padding-x, padding-y, gap and spacing match across components. It passes when no size label is shared.
| Result | When |
|---|---|
| Pass | At least 80% of compared values match. |
| Warning | Between 50% and 80%. |
| Fail | Below 50%. |
| Skipped | No presets define a size label. |
How to improve. Make the same size label use the same padding and gap on every component.
No sizing conflicts
consistency.sizing.no_conflicts
For each size label used by more than one component, every sizing property: any property whose name contains width, height, size, padding, margin, gap or spacing, except typography properties such as font-size, line-height and letter-spacing, which the typography checks cover. It passes when no size label is shared.
| Result | When |
|---|---|
| Pass | At least 90% of compared values match. |
| Warning | Between 60% and 90%. |
| Fail | Below 60%. |
| Skipped | No presets define a size label. |
How to improve. Resolve each conflict so a size label maps to one set of values.
Typography
Typography levels are consistent
consistency.typography.level_consistency
For each typography level, such as label, used by more than one component, whether font-size and font-family match across components. It passes when no level is shared.
| Result | When |
|---|---|
| Pass | At least 80% of compared values match. |
| Warning | Between 50% and 80%. |
| Fail | Below 50%. |
| Skipped | No presets define a typography level. |
How to improve. Use the same font size and family for a level on every component.
Consistent font weight per level
consistency.typography.weight_consistency
For each typography level, such as label, used by more than one component, whether font-weight match across components. It passes when no level is shared.
| Result | When |
|---|---|
| Pass | At least 80% of compared values match. |
| Warning | Between 50% and 80%. |
| Fail | Below 50%. |
| Skipped | No presets define a typography level. |
How to improve. Use the same font weight for a level on every component.
Consistent line height per level
consistency.typography.line_height_consistency
For each typography level, such as label, used by more than one component, whether line-height match across components. It passes when no level is shared.
| Result | When |
|---|---|
| Pass | At least 80% of compared values match. |
| Warning | Between 50% and 80%. |
| Fail | Below 50%. |
| Skipped | No presets define a typography level. |
How to improve. Use the same line height for a level on every component.