The following page documents visual specifications such as color, typography,
structure, and sizes.
| State | Element | Property | Color token |
|---|
| Enabled | Label | text color | $text-primary |
| Button | border | $border-inverse |
| | background | transparent |
| Hover | Label | text color | $text-inverse |
| Button | border | $border-inverse |
| | background | $background-inverse |
| Focus | Button | border | $focus |
| State | Element | Property | Color token |
|---|
| Enabled | Label | text color | $text-primary |
| Dot | fill | $icon-primary |
| Button | background | transparent |
| Hover | Label | text color | $text-secondary |
| Button | border | $border-inverse |
| | background | transparent |
| Focus | Button | border | $focus |
| Element | Property | Color token |
|---|
| Popover background | background | $ai-popover-background |
| linear-gradient: start | $ai-aura-start |
| linear-gradient: end | $ai-aura-end |
| Popover border | linear-gradient: start | $ai-border-start |
| linear-gradient: end | $ai-border-end |
| Element | Font-size (px/rem) | Font-weight | Type token |
|---|
| Label text (xl) | 20 / 1.25 | SemiBold / 600 | $heading-03 |
| Label text (sm–lg) | 16 / 1 | SemiBold / 600 | $heading-02 |
| Label text (2xs–xs) | 12 / 0.75 | SemiBold / 600 | – |
| Label text (mini) | 9 / 0.5625 | SemiBold / 600 | – |
| Element | Font-size (px/rem) | Font-weight | Type token |
|---|
| Label text (lg) | 16 / 1 | SemiBold / 600 | $heading-02 |
| Label text (md) | 14 / 0.875 | SemiBold / 600 | $heading-01 |
| Label text (sm) | 12 / 0.75 | SemiBold / 600 | – |
| Element | Font-size (px/rem) | Font-weight | Type token |
|---|
| Label | 14 / 0.875 | Regular / 400 | $label-02 |
| Title | 28 / 1.75 | Regular / 400 | $heading-04 |
| Body | 14 / 0.875 | Regular / 400 | $body-01 |
| Element | Property | Value | Spacing token |
|---|
| Button | border | 1px | – |
| Text label | padding | centered | – |
| Element | Property | px/rem | Spacing token |
|---|
| Text label | padding-left | 4px | $spacing-02 |
| Button | border | 1px | – |
| padding-left, padding-right | 4px | $spacing-02 |
| Button (sm) | height | 16px | – |
| dot | 4px | – |
| Button (md) | height | 18px | – |
| dot | 4px | – |
| Button (lg) | height | 22px | – |
| dot | 8px | – |
| Element | Property | px/rem | Spacing token |
|---|
| Container | padding | 24px | $spacing-06 |
| Footer | height | 48px | – |
Structure measurements for default accordion alignment. | px / rem
Default | Default size | Height (px/rem) |
|---|
| Mini | 16 / 1 |
| 2x small (2xs) | 20 / 1.25 |
| Extra small (xs) | 24 / 1.5 |
| Small (sm) | 32 / 2 |
| Medium (md) | 40 / 2.5 |
| Large (lg) | 48 / 3 |
| Extra large (xl) | 64 / 4 |
| Inline size | Height (px/rem) |
|---|
| Small (sm) | 12 / 0.75 |
| Medium (md) | 14 / 0.875 |
| Large (lg) | 16 / 1 |
