'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Foundations
Design tokens
Every token, read from the sources: its name, the CSS variable with a copy button, the value in each theme and density, and a live sample. Filter by name or value, or by family.
312 tokens
Color primitives
The raw scales and a few single colors. Theme colors are aliases of these, so changing a scale changes every theme that uses it. Use them for illustrations and charts; in the interface use theme colors.
| Token | CSS variable | Value | Current | Sample |
|---|---|---|---|---|
color.purple.50 | --alea-purple-50 | #faf2ff | Loading | |
color.purple.100 | --alea-purple-100 | #f5e2ff | Loading | |
color.purple.200 | --alea-purple-200 | #edcaff | Loading | |
color.purple.300 | --alea-purple-300 | #e1a4ff | Loading | |
color.purple.400 | --alea-purple-400 | #cd57ff | Loading | |
color.purple.500 | --alea-purple-500 | #c144f4 | Loading | |
color.purple.600 | --alea-purple-600 | #ae2ae0 | Loading | |
color.purple.650 | --alea-purple-650 | #8b2fd6 | Loading | |
color.purple.700 | --alea-purple-700 | #940dc2 | Loading | |
color.purple.800 | --alea-purple-800 | #7d01a5 | Loading | |
color.purple.900 | --alea-purple-900 | #6a068b | Loading | |
color.purple.950 | --alea-purple-950 | #2f183b | Loading | |
color.yellow.50 | --alea-yellow-50 | #fff5d9 | Loading | |
color.yellow.100 | --alea-yellow-100 | #ffe8a9 | Loading | |
color.yellow.200 | --alea-yellow-200 | #ffce1f | Loading | |
color.yellow.300 | --alea-yellow-300 | #e9ba00 | Loading | |
color.yellow.400 | --alea-yellow-400 | #c29b00 | Loading | |
color.yellow.500 | --alea-yellow-500 | #a98700 | Loading | |
color.yellow.600 | --alea-yellow-600 | #947600 | Loading | |
color.yellow.700 | --alea-yellow-700 | #7b6100 | Loading | |
color.yellow.800 | --alea-yellow-800 | #675100 | Loading | |
color.yellow.900 | --alea-yellow-900 | #574400 | Loading | |
color.yellow.950 | --alea-yellow-950 | #2d2200 | Loading | |
color.violet.50 | --alea-violet-50 | #f5f4ff | Loading | |
color.violet.100 | --alea-violet-100 | #e9e7ff | Loading | |
color.violet.200 | --alea-violet-200 | #d8d3ff | Loading | |
color.violet.300 | --alea-violet-300 | #c0b5ff | Loading | |
color.violet.400 | --alea-violet-400 | #a189ff | Loading | |
color.violet.500 | --alea-violet-500 | #8b6cf0 | Loading | |
color.violet.600 | --alea-violet-600 | #7d5cdf | Loading | |
color.violet.700 | --alea-violet-700 | #6848c2 | Loading | |
color.violet.800 | --alea-violet-800 | #573ba4 | Loading | |
color.violet.900 | --alea-violet-900 | #49328b | Loading | |
color.violet.950 | --alea-violet-950 | #241f3a | Loading | |
color.neutral.50 | --alea-neutral-50 | #f6f5f4 | Loading | |
color.neutral.100 | --alea-neutral-100 | #ebe9e7 | Loading | |
color.neutral.200 | --alea-neutral-200 | #dbd9d5 | Loading | |
color.neutral.300 | --alea-neutral-300 | #c3c0ba | Loading | |
color.neutral.400 | --alea-neutral-400 | #a49f98 | Loading | |
color.neutral.500 | --alea-neutral-500 | #8c8780 | Loading | |
color.neutral.600 | --alea-neutral-600 | #7e7972 | Loading | |
color.neutral.700 | --alea-neutral-700 | #68645e | Loading | |
color.neutral.800 | --alea-neutral-800 | #57534d | Loading | |
color.neutral.900 | --alea-neutral-900 | #494641 | Loading | |
color.neutral.950 | --alea-neutral-950 | #242322 | Loading | |
color.green.50 | --alea-green-50 | #e5fcec | Loading | |
color.green.100 | --alea-green-100 | #c7f8d5 | Loading | |
color.green.200 | --alea-green-200 | #9af0b6 | Loading | |
color.green.300 | --alea-green-300 | #3ddc84 | Loading | |
color.green.400 | --alea-green-400 | #00be6a | Loading | |
color.green.500 | --alea-green-500 | #00a65c | Loading | |
color.green.600 | --alea-green-600 | #00914f | Loading | |
color.green.700 | --alea-green-700 | #007941 | Loading | |
color.green.800 | --alea-green-800 | #006535 | Loading | |
color.green.900 | --alea-green-900 | #00552c | Loading | |
color.green.950 | --alea-green-950 | #022c15 | Loading | |
color.red.50 | --alea-red-50 | #fff2f1 | Loading | |
color.red.100 | --alea-red-100 | #ffe2e0 | Loading | |
color.red.200 | --alea-red-200 | #ffcac7 | Loading | |
color.red.300 | --alea-red-300 | #ffa49f | Loading | |
color.red.400 | --alea-red-400 | #fc6968 | Loading | |
color.red.500 | --alea-red-500 | #e5484d | Loading | |
color.red.600 | --alea-red-600 | #d4363f | Loading | |
color.red.650 | --alea-red-650 | #c62828 | Loading | |
color.red.700 | --alea-red-700 | #b6212e | Loading | |
color.red.800 | --alea-red-800 | #9a1624 | Loading | |
color.red.900 | --alea-red-900 | #83151e | Loading | |
color.red.950 | --alea-red-950 | #391817 | Loading | |
color.amber.50 | --alea-amber-50 | #fff4e6 | Loading | |
color.amber.100 | --alea-amber-100 | #ffe5c6 | Loading | |
color.amber.200 | --alea-amber-200 | #ffd095 | Loading | |
color.amber.300 | --alea-amber-300 | #f5a524 | Loading | |
color.amber.400 | --alea-amber-400 | #d88e00 | Loading | |
color.amber.500 | --alea-amber-500 | #bd7b00 | Loading | |
color.amber.600 | --alea-amber-600 | #a56b00 | Loading | |
color.amber.700 | --alea-amber-700 | #8a5900 | Loading | |
color.amber.800 | --alea-amber-800 | #734900 | Loading | |
color.amber.900 | --alea-amber-900 | #623e00 | Loading | |
color.amber.950 | --alea-amber-950 | #331f01 | Loading | |
color.blue.50 | --alea-blue-50 | #f0f6ff | Loading | |
color.blue.100 | --alea-blue-100 | #deebff | Loading | |
color.blue.200 | --alea-blue-200 | #c4dbff | Loading | |
color.blue.300 | --alea-blue-300 | #9cc2ff | Loading | |
color.blue.400 | --alea-blue-400 | #639eff | Loading | |
color.blue.500 | --alea-blue-500 | #3b82f6 | Loading | |
color.blue.600 | --alea-blue-600 | #2c73e6 | Loading | |
color.blue.700 | --alea-blue-700 | #1b5ec8 | Loading | |
color.blue.800 | --alea-blue-800 | #124daa | Loading | |
color.blue.900 | --alea-blue-900 | #104290 | Loading | |
color.blue.950 | --alea-blue-950 | #14233c | Loading | |
color.white | --alea-white | #ffffff | Loading | |
color.black | --alea-black | #111011 | Loading | |
color.blue-gray.550 | --alea-blue-gray-550 | #33363f | Loading | |
color.gray.50 | --alea-gray-50 | #f9f8f5 | Loading | |
color.gray.100 | --alea-gray-100 | #f7f7f7 | Loading | |
color.gray.300 | --alea-gray-300 | #f7f4f2 | Loading | |
color.gray.400 | --alea-gray-400 | #dbdbdb | Loading | |
color.gray.700 | --alea-gray-700 | #1d1c1b | Loading | |
color.gray.800 | --alea-gray-800 | #121212 | Loading | |
color.gray.950 | --alea-gray-950 | #020202 | Loading | |
color.gray.1000 | --alea-gray-1000 | #000000 | Loading | |
color.transparent | --alea-transparent | #00000000 | Loading | |
color.warm-gray.350 | --alea-warm-gray-350 | #3c2814 | Loading |
Theme colors
The colors components use. Each has a dark and a light value; high contrast replaces the ones that need more (default look: each look can tune its own). The current column is read from this page, so it follows the look, the theme and high contrast you picked in the header.
| Token | CSS variable | Dark | Light | High contrast | Current | Sample |
|---|---|---|---|---|---|---|
bg.default | --alea-bg | #272625 | #f7f4f2 | Dark #000000Light #ffffff | Loading | |
bg.deep | --alea-bg-deep | #1f1e1d | #efebe7 | Unchanged | Loading | |
surface.default | --alea-surface | #1d1c1b | #ffffff | Unchanged | Loading | |
surface.deep | --alea-surface-deep | #121212 | #f3f0ec | Unchanged | Loading | |
surface.raised | --alea-surface-raised | #262829 | #ebe7e2 | Unchanged | Loading | |
surface.hover | --alea-surface-hover | #242322 | #faf8f6 | Unchanged | Loading | |
surface.overlay | --alea-surface-overlay | #000000b8 | #1110115c | Unchanged | Loading | |
border.default | --alea-border | #ffffff14 | #11101117 | Dark #ffffff5cLight #11101166 | Loading | |
border.strong | --alea-border-strong | #ffffff2e | #11101133 | Dark #ffffff8cLight #11101199 | Loading | |
border.control | --alea-border-control | #ffffff5c | #11101180 | Dark #ffffffccLight #111011e6 | Loading | |
text.default | --alea-text | #f7f7f7 | #111011 | Dark #ffffffLight #000000 | Loading | Aa |
text.soft | --alea-text-soft | #f9f8f5 | #1d1c1b | Unchanged | Loading | Aa |
text.muted | --alea-text-muted | #dbdbdbd1 | #111011bd | Dark #f0f0f0Light #111011 | Loading | Aa |
text.faint | --alea-text-faint | #dbdbdb99 | #1110119e | Dark #e0e0e0Light #2a292a | Loading | Aa |
accent.default | --alea-accent | #cd57ff | #c144f4 | Unchanged | Loading | |
accent.strong | --alea-accent-strong | #e1a4ff | #940dc2 | Dark #edcaffLight #6a068b | Loading | |
accent.second | --alea-accent-second | #ffce1f | #ffce1f | Unchanged | Loading | |
accent.third | --alea-accent-third | #8b6cf0 | #8b6cf0 | Unchanged | Loading | |
accent.subtle | --alea-accent-subtle | #cd57ff24 | #cd57ff1f | Unchanged | Loading | |
accent.on | --alea-accent-on | #111011 | #111011 | Light #ffffff | Loading | Aa |
accent.solid | --alea-accent-solid | #cd57ff | #cd57ff | Dark #e1a4ffLight #6a068b | Loading | |
focus.default | --alea-focus | #cd57ff | #8b2fd6 | Unchanged | Loading | |
focus.halo | --alea-focus-halo | #cd57ff33 | #8b2fd62e | Unchanged | Loading | |
chip.bg | --alea-chip-bg | #ffffff | #111011 | Unchanged | Loading | |
chip.text | --alea-chip-text | #111011 | #f9f8f5 | Unchanged | Loading | Aa |
button.ring | --alea-button-ring | #242628 | #e3dfda | Unchanged | Loading | |
button.top | --alea-button-top | #33363f | #33363f | Unchanged | Loading | |
button.bottom | --alea-button-bottom | #020202 | #020202 | Unchanged | Loading | |
button.text | --alea-button-text | #f7f7f7 | #f7f7f7 | Unchanged | Loading | Aa |
field.bg | --alea-field-bg | #121212 | #f7f4f2 | Unchanged | Loading | |
status.success | --alea-status-success | #3ddc84 | #006535 | Dark #9af0b6Light color-mix(in oklab, #00552c 80%, #000) | Loading | |
status.success-bg | --alea-status-success-bg | #3ddc841f | #11804a1a | Unchanged | Loading | |
status.danger | --alea-status-danger | #ff9595 | #a22020 | Dark #ffcac7Light #83151e | Loading | |
status.danger-bg | --alea-status-danger-bg | #ff7a7a1f | #c6282814 | Unchanged | Loading | |
status.warning | --alea-status-warning | #f5a524 | #7a4e00 | Dark #ffd095Light #623e00 | Loading | |
status.warning-bg | --alea-status-warning-bg | #f5a5241f | #f5a5241f | Unchanged | Loading | |
status.info | --alea-status-info | #9cc2ff | #1752b0 | Dark #c4dbffLight #104290 | Loading | |
status.info-bg | --alea-status-info-bg | #3b82f61f | #3b82f61a | Unchanged | Loading | |
status.on | --alea-status-on | #111011 | #ffffff | Unchanged | Loading | Aa |
status.success-solid | --alea-status-success-solid | #3ddc84 | #3ddc84 | Unchanged | Loading | |
status.success-on-solid | --alea-status-success-on-solid | #111011 | #111011 | Unchanged | Loading | Aa |
status.warning-solid | --alea-status-warning-solid | #f5a524 | #f5a524 | Unchanged | Loading | |
status.warning-on-solid | --alea-status-warning-on-solid | #111011 | #111011 | Unchanged | Loading | Aa |
status.danger-solid | --alea-status-danger-solid | #e5484d | #d4363f | Dark #ffa49fLight #9a1624 | Loading | |
status.danger-solid-hover | --alea-status-danger-solid-hover | #fc6968 | #b6212e | Dark #fc6968Light #83151e | Loading | |
status.danger-on-solid | --alea-status-danger-on-solid | #111011 | #ffffff | Dark #111011 | Loading | Aa |
status.info-solid | --alea-status-info-solid | #1b5ec8 | #1b5ec8 | Dark #124daaLight #124daa | Loading | |
status.info-on-solid | --alea-status-info-on-solid | #ffffff | #ffffff | Unchanged | Loading | Aa |
presence.online | --alea-presence-online | #3ddc84 | #00914f | Unchanged | Loading | |
presence.away | --alea-presence-away | #f5a524 | #bd7b00 | Unchanged | Loading | |
presence.busy | --alea-presence-busy | #e5484d | #d4363f | Unchanged | Loading | |
presence.offline | --alea-presence-offline | #8c8780 | #8c8780 | Unchanged | Loading | |
rating.fill | --alea-rating-fill | #ffce1f | #bd7b00 | Unchanged | Loading | |
control.thumb | --alea-control-thumb | #ffffff | #ffffff | Unchanged | Loading | |
on-media | --alea-on-media | #ffffff | #ffffff | Unchanged | Loading | |
media-backdrop | --alea-media-backdrop | #000000 | #000000 | Unchanged | Loading | |
media-scrim | --alea-media-scrim | #000000bf | #000000bf | Unchanged | Loading | |
chart.2 | --alea-chart-2 | #ffce1f | #bd7b00 | Unchanged | Loading | |
chart.3 | --alea-chart-3 | #8b6cf0 | #7d5cdf | Unchanged | Loading | |
chart.4 | --alea-chart-4 | #3ddc84 | #00914f | Unchanged | Loading | |
chart.5 | --alea-chart-5 | #639eff | #2c73e6 | Unchanged | Loading | |
chart.6 | --alea-chart-6 | #fc6968 | #d4363f | Unchanged | Loading | |
chart.7 | --alea-chart-7 | #f5a524 | #8a5900 | Unchanged | Loading | |
chart.8 | --alea-chart-8 | #8c8780 | #7e7972 | Unchanged | Loading | |
reaction.like | --alea-reaction-like | #f43f5e | #e11d48 | Unchanged | Loading |
Icon colors
One token per context an icon sits in. Each is an alias of the text, accent or status token of that context, so looks, brands and high contrast follow.
| Token | CSS variable | Dark | Light | Current | Sample |
|---|---|---|---|---|---|
icon.default | --alea-icon | #f7f7f7 | #111011 | Loading | Aa |
icon.muted | --alea-icon-muted | #dbdbdbd1 | #111011bd | Loading | |
icon.soft | --alea-icon-soft | #f9f8f5 | #1d1c1b | Loading | |
icon.faint | --alea-icon-faint | #dbdbdb99 | #1110119e | Loading | |
icon.accent | --alea-icon-accent | #e1a4ff | #940dc2 | Loading | |
icon.brand | --alea-icon-brand | #cd57ff | #c144f4 | Loading | |
icon.on-accent | --alea-icon-on-accent | #111011 | #111011 | Loading | |
icon.button | --alea-icon-button | #f7f7f7 | #f7f7f7 | Loading | |
icon.chip | --alea-icon-chip | #111011 | #f9f8f5 | Loading | |
icon.danger | --alea-icon-danger | #ff9595 | #a22020 | Loading | |
icon.success | --alea-icon-success | #3ddc84 | #006535 | Loading | |
icon.warning | --alea-icon-warning | #f5a524 | #7a4e00 | Loading | |
icon.info | --alea-icon-info | #9cc2ff | #1752b0 | Loading | |
icon.on-danger | --alea-icon-on-danger | #111011 | #ffffff | Loading | |
icon.on-success | --alea-icon-on-success | #111011 | #111011 | Loading | |
icon.on-warning | --alea-icon-on-warning | #111011 | #111011 | Loading | |
icon.on-info | --alea-icon-on-info | #ffffff | #ffffff | Loading | |
icon.on-status | --alea-icon-on-status | #111011 | #ffffff | Loading | |
icon.rating | --alea-icon-rating | #ffce1f | #bd7b00 | Loading | |
icon.control | --alea-icon-control | #ffffff5c | #11101180 | Loading | |
icon.like | --alea-icon-like | #f43f5e | #e11d48 | Loading |
Spacing
The space scale, in rem (1rem = 16 px). Comfy is the default; Compact (data-density="compact") halves the base. The half steps are literal values for dense UI, and 0-25 is the 1 px hairline.
| Token | CSS variable | Comfy | Compact | Current | Sample |
|---|---|---|---|---|---|
spacing.base | --alea-spacing-base | 0.25rem · 4 px | 0.125rem · 2 px | Loading | |
space.0 | --alea-space-0 | 0rem · 0 px | 0rem · 0 px | Loading | |
space.1 | --alea-space-1 | 0.25rem · 4 px | 0.125rem · 2 px | Loading | |
space.2 | --alea-space-2 | 0.5rem · 8 px | 0.25rem · 4 px | Loading | |
space.3 | --alea-space-3 | 0.75rem · 12 px | 0.375rem · 6 px | Loading | |
space.4 | --alea-space-4 | 1rem · 16 px | 0.5rem · 8 px | Loading | |
space.5 | --alea-space-5 | 1.25rem · 20 px | 0.625rem · 10 px | Loading | |
space.6 | --alea-space-6 | 1.5rem · 24 px | 0.75rem · 12 px | Loading | |
space.7 | --alea-space-7 | 1.75rem · 28 px | 0.875rem · 14 px | Loading | |
space.8 | --alea-space-8 | 2rem · 32 px | 1rem · 16 px | Loading | |
space.10 | --alea-space-10 | 2.5rem · 40 px | 1.25rem · 20 px | Loading | |
space.12 | --alea-space-12 | 3rem · 48 px | 1.5rem · 24 px | Loading | |
space.16 | --alea-space-16 | 4rem · 64 px | 2rem · 32 px | Loading | |
space.20 | --alea-space-20 | 5rem · 80 px | 2.5rem · 40 px | Loading | |
space.22 | --alea-space-22 | 5.5rem · 88 px | 2.75rem · 44 px | Loading | |
space.24 | --alea-space-24 | 6rem · 96 px | 3rem · 48 px | Loading | |
space.0-25 | --alea-space-0-25 | 0.0625rem · 1 px | 0.0625rem · 1 px | Loading | |
space.0-5 | --alea-space-0-5 | 0.125rem · 2 px | 0.0625rem · 1 px | Loading | |
space.1-5 | --alea-space-1-5 | 0.375rem · 6 px | 0.1875rem · 3 px | Loading | |
space.2-5 | --alea-space-2-5 | 0.625rem · 10 px | 0.3125rem · 5 px | Loading | |
space.3-5 | --alea-space-3-5 | 0.875rem · 14 px | 0.4375rem · 7 px | Loading | |
control-pad.x-2 | --alea-control-pad-x-2 | 0.5rem · 8 px | 0.5rem · 8 px | Loading | |
control-pad.x-3 | --alea-control-pad-x-3 | 0.75rem · 12 px | 0.75rem · 12 px | Loading | |
control-pad.x-4 | --alea-control-pad-x-4 | 1rem · 16 px | 1rem · 16 px | Loading | |
control-pad.x-5 | --alea-control-pad-x-5 | 1.25rem · 20 px | 1rem · 16 px | Loading | |
control-pad.x-6 | --alea-control-pad-x-6 | 1.5rem · 24 px | 1.25rem · 20 px | Loading | |
control-pad.x-7 | --alea-control-pad-x-7 | 1.75rem · 28 px | 1.5rem · 24 px | Loading | |
control-pad.x-8 | --alea-control-pad-x-8 | 2rem · 32 px | 1.5rem · 24 px | Loading | |
control-pad.x-10 | --alea-control-pad-x-10 | 2.5rem · 40 px | 2rem · 32 px | Loading |
Radius
The corner ladder, from a 1 px hairline corner to the pill. The Glass look doubles it from xs up. Radius has no density modes.
| Token | CSS variable | Value | Current | Sample |
|---|---|---|---|---|
radius.3xs | --alea-radius-3xs | 0.0625rem · 1 px | Loading | |
radius.2xs | --alea-radius-2xs | 0.125rem · 2 px | Loading | |
radius.xs | --alea-radius-xs | 4px | Loading | |
radius.sm | --alea-radius-sm | 6px | Loading | |
radius.field | --alea-radius-field | 8px | Loading | |
radius.md | --alea-radius-md | 10px | Loading | |
radius.lg | --alea-radius-lg | 12px | Loading | |
radius.xl | --alea-radius-xl | 16px | Loading | |
radius.2xl | --alea-radius-2xl | 1.25rem · 20 px | Loading | |
radius.3xl | --alea-radius-3xl | 1.5rem · 24 px | Loading | |
radius.4xl | --alea-radius-4xl | 2rem · 32 px | Loading | |
radius.full | --alea-radius-full | 9999px | Loading |
Shadows and effects
The shadows of cards and popovers, the shared highlights and glows, and the gradients. They change with the theme, and the glows follow the accent of the look.
| Token | CSS variable | Dark | Light | Current | Sample |
|---|---|---|---|---|---|
effect.top-light | --alea-effect-top-light | #ffffff2e | #ffffff2e | Loading | |
effect.glow | --alea-effect-glow | #cd57ff8c | #c144f48c | Loading | |
effect.glow-soft | --alea-effect-glow-soft | #cd57ffb3 | #c144f4b3 | Loading | |
shadow.card | --alea-shadow-card | inset 0px 0.5px 0px 1px #c6c6c62e, 0px 18px 40px -18px #00000040 | inset 0px 0px 0px 1px #1110110f, 0px 18px 40px -20px #3c281414 | Loading | |
shadow.pop | --alea-shadow-pop | 0px 24px 60px -24px #000000b3 | 0px 24px 60px -24px #3c281440 | Loading | |
shadow.glow | --alea-shadow-glow | Unchanged | Unchanged | Loading | |
gradient.accent | --alea-gradient-accent | Unchanged | Unchanged | Loading | |
gradient.accent-linear | --alea-gradient-accent-linear | Unchanged | Unchanged | Loading | |
gradient.text | --alea-gradient-text | radial-gradient(100% 100% at 25% 100%, #cd57ff 0%, #ffce1f 100%) | radial-gradient(100% 100% at 25% 100%, #b83fe6 0%, #b45309 100%) | Loading | |
gradient.text-linear | --alea-gradient-text-linear | linear-gradient(120deg, #cd57ff 0%, #ffce1f 100%) | linear-gradient(120deg, #b83fe6 0%, #b45309 100%) | Loading | |
gradient.button | --alea-gradient-button | Unchanged | Unchanged | Loading |
Typography
Three families, one size scale, weights, line heights and tracking.
| Token | CSS variable | Value | Current | Sample |
|---|---|---|---|---|
font.family.display | --alea-font-family-display | 'Crimson Pro', Georgia, 'Times New Roman', serif | Loading | Aa |
font.family.body | --alea-font-family-body | Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif | Loading | Aa |
font.family.mono | --alea-font-family-mono | 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace | Loading | Aa |
font.size.2xs | --alea-font-size-2xs | 0.6875rem · 11 px | Loading | Aa |
font.size.xs | --alea-font-size-xs | 0.75rem · 12 px | Loading | Aa |
font.size.sm | --alea-font-size-sm | 0.8125rem · 13 px | Loading | Aa |
font.size.md | --alea-font-size-md | 0.875rem · 14 px | Loading | Aa |
font.size.base | --alea-font-size-base | 1rem · 16 px | Loading | Aa |
font.size.lg | --alea-font-size-lg | 1.125rem · 18 px | Loading | Aa |
font.size.xl | --alea-font-size-xl | 1.25rem · 20 px | Loading | Aa |
font.size.2xl | --alea-font-size-2xl | 1.5rem · 24 px | Loading | Aa |
font.size.3xl | --alea-font-size-3xl | 1.75rem · 28 px | Loading | Aa |
font.size.4xl | --alea-font-size-4xl | 2.25rem · 36 px | Loading | Aa |
font.size.5xl | --alea-font-size-5xl | 3rem · 48 px | Loading | Aa |
font.size.6xl | --alea-font-size-6xl | 4rem · 64 px | Loading | Aa |
font.size.7xl | --alea-font-size-7xl | 5rem · 80 px | Loading | Aa |
font.weight.light | --alea-font-weight-light | 300 | Loading | Aa |
font.weight.regular | --alea-font-weight-regular | 400 | Loading | Aa |
font.weight.medium | --alea-font-weight-medium | 500 | Loading | Aa |
font.weight.semibold | --alea-font-weight-semibold | 600 | Loading | Aa |
font.leading.tight | --alea-font-leading-tight | 1.1 | Loading | Aa Aa |
font.leading.snug | --alea-font-leading-snug | 1.3 | Loading | Aa Aa |
font.leading.normal | --alea-font-leading-normal | 1.5 | Loading | Aa Aa |
font.leading.relaxed | --alea-font-leading-relaxed | 1.6 | Loading | Aa Aa |
font.tracking.display | --alea-font-tracking-display | -0.02em | Loading | Aleatory |
font.tracking.tight | --alea-font-tracking-tight | -0.01em | Loading | Aleatory |
font.tracking.normal | --alea-font-tracking-normal | 0em | Loading | Aleatory |
font.tracking.eyebrow | --alea-font-tracking-eyebrow | 0.08em | Loading | Aleatory |
Motion
Durations, easings (including the real spring), distances, scales and blur. Every animation in Alea is built from these, and reduced motion zeroes the distances and scales. The samples play in a loop.
| Token | CSS variable | Value | Current | Sample |
|---|---|---|---|---|
motion.ease.out | --alea-motion-ease-out | cubic-bezier(0.16, 1, 0.3, 1) | Loading | |
motion.ease.in-out | --alea-motion-ease-in-out | cubic-bezier(0.65, 0, 0.35, 1) | Loading | |
motion.ease.standard | --alea-motion-ease-standard | cubic-bezier(0.2, 0, 0, 1) | Loading | |
motion.ease.emphasized | --alea-motion-ease-emphasized | cubic-bezier(0.22, 1.2, 0.36, 1) | Loading | |
motion.ease.spring | --alea-motion-ease-spring | cubic-bezier(0.22, 1.2, 0.36, 1) | Loading | |
motion.ease.in | --alea-motion-ease-in | cubic-bezier(0.4, 0, 1, 1) | Loading | |
motion.duration.instant | --alea-motion-duration-instant | 120ms | Loading | |
motion.duration.fast | --alea-motion-duration-fast | 200ms | Loading | |
motion.duration.base | --alea-motion-duration-base | 320ms | Loading | |
motion.duration.slow | --alea-motion-duration-slow | 480ms | Loading | |
motion.duration.slower | --alea-motion-duration-slower | 720ms | Loading | |
motion.distance.sm | --alea-motion-distance-sm | 8px | Loading | |
motion.distance.md | --alea-motion-distance-md | 12px | Loading | |
motion.distance.lg | --alea-motion-distance-lg | 24px | Loading | |
motion.scale.from | --alea-motion-scale-from | 0.92 | Loading | |
motion.scale.press | --alea-motion-scale-press | 0.96 | Loading | |
motion.stagger | --alea-motion-stagger | 40ms | Loading | |
motion.lift | --alea-motion-lift | -4px | Loading | |
motion.spring | --alea-motion-spring | linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1) | Loading | |
motion.blur.sm | --alea-motion-blur-sm | 4px | Loading | Aa |
motion.blur.md | --alea-motion-blur-md | 8px | Loading | Aa |
motion.blur.lg | --alea-motion-blur-lg | 16px | Loading | Aa |
Sizes
Control heights and icon sizes. Controls keep their own scale in both densities.
| Token | CSS variable | Value | Current | Sample |
|---|---|---|---|---|
size.control-sm | --alea-size-control-sm | 2rem · 32 px | Loading | |
size.control-md | --alea-size-control-md | 2.5rem · 40 px | Loading | |
size.control-lg | --alea-size-control-lg | 3rem · 48 px | Loading | |
size.field | --alea-size-field | 2.75rem · 44 px | Loading | |
size.badge-sm | --alea-size-badge-sm | 1.25rem · 20 px | Loading | |
size.badge-md | --alea-size-badge-md | 1.5rem · 24 px | Loading | |
size.badge-lg | --alea-size-badge-lg | 1.75rem · 28 px | Loading | |
size.icon-sm | --alea-size-icon-sm | 1rem · 16 px | Loading | |
size.icon-md | --alea-size-icon-md | 1.25rem · 20 px | Loading | |
size.icon-lg | --alea-size-icon-lg | 1.5rem · 24 px | Loading |
Layers and breakpoints
The stacking order of floating layers, and the widths where layouts change.
| Token | CSS variable | Value | Current | Sample |
|---|---|---|---|---|
z.dropdown | --alea-z-dropdown | 1000 | Loading | 1000 |
z.sticky | --alea-z-sticky | 1100 | Loading | 1100 |
z.overlay | --alea-z-overlay | 1200 | Loading | 1200 |
z.modal | --alea-z-modal | 1300 | Loading | 1300 |
z.toast | --alea-z-toast | 1400 | Loading | 1400 |
z.tooltip | --alea-z-tooltip | 1500 | Loading | 1500 |
breakpoint.xs | --alea-breakpoint-xs | 480px | Loading | |
breakpoint.sm | --alea-breakpoint-sm | 640px | Loading | |
breakpoint.md | --alea-breakpoint-md | 768px | Loading | |
breakpoint.lg | --alea-breakpoint-lg | 1024px | Loading | |
breakpoint.xl | --alea-breakpoint-xl | 1280px | Loading |