lightbulb
Border radius
| Token | Value |
|---|---|
--spk-radius-edge | 4px |
--spk-radius-soft | 8px |
--spk-radius-round | 12px |
--spk-radius-pill | 999px |
--spk-radius-circle | 50% |
Token
--spk-radius-edgeValue
4pxToken
--spk-radius-softValue
8pxToken
--spk-radius-roundValue
12pxToken
--spk-radius-pillValue
999pxToken
--spk-radius-circleValue
50%Z-index
| Token | Value |
|---|---|
--spk-z-behind | -1 |
--spk-z-floating | 100 |
--spk-z-sticky | 200 |
--spk-z-panel | 300 |
--spk-z-dialog | 400 |
--spk-z-notification | 1000 |
Token
--spk-z-behindValue
-1Token
--spk-z-floatingValue
100Token
--spk-z-stickyValue
200Token
--spk-z-panelValue
300Token
--spk-z-dialogValue
400Token
--spk-z-notificationValue
1000Motion
| Token | Value |
|---|---|
--spk-duration-quick | 0.15s |
--spk-duration-base | 0.2s |
--spk-duration-slow | 0.3s |
--spk-ease-out | ease-out |
--spk-ease-glide | cubic-bezier(0.4, 0, 0.2, 1) |
Token
--spk-duration-quickValue
0.15sToken
--spk-duration-baseValue
0.2sToken
--spk-duration-slowValue
0.3sToken
--spk-ease-outValue
ease-outToken
--spk-ease-glideValue
cubic-bezier(0.4, 0, 0.2, 1)Elevation
| Token | Value |
|---|---|
--spk-elevation-subtle | 0 4px 12px |
--spk-elevation-hard | 0.3rem 0.3rem |
Token
--spk-elevation-subtleValue
0 4px 12pxToken
--spk-elevation-hardValue
0.3rem 0.3remBorder width
| Token | Value |
|---|---|
--spk-border | 2px |
--spk-border-thin | 1px |
--spk-border-accent | 4px |
Token
--spk-borderValue
2pxToken
--spk-border-thinValue
1pxToken
--spk-border-accentValue
4pxOpacity
| Token | Value |
|---|---|
--spk-opacity-disabled | 0.5 |
--spk-opacity-faded | 0.6 |
--spk-opacity-muted | 0.7 |
--spk-opacity-overlay | 0.85 |
Token
--spk-opacity-disabledValue
0.5Token
--spk-opacity-fadedValue
0.6Token
--spk-opacity-mutedValue
0.7Token
--spk-opacity-overlayValue
0.85Focus ring
| Token | Value |
|---|---|
--spk-focus-ring | var(--spk-text) |
--spk-focus-ring-width | 2px |
--spk-focus-ring-offset | 2px |
Token
--spk-focus-ringValue
var(--spk-text)Token
--spk-focus-ring-widthValue
2pxToken
--spk-focus-ring-offsetValue
2pxTypography
| Token | Value |
|---|---|
--spk-font-body | 'Inter', sans-serif |
--spk-font-heading | 'Space Grotesk', sans-serif |
Token
--spk-font-bodyValue
'Inter', sans-serifToken
--spk-font-headingValue
'Space Grotesk', sans-serifShadow
| Token | Value |
|---|---|
--spk-shadow-subtle | rgba(0, 0, 0, 0.2) |
Token
--spk-shadow-subtleValue
rgba(0, 0, 0, 0.2)Tone surface
| Token | Light | Dark |
|---|---|---|
--spk-tone-bg | #e8e4d8 | #1a1a1a |
--spk-tone | #d0c9b8 | #282828 |
--spk-tone-hover | #b9b49d | #393a39 |
--spk-tone-muted | #4c4839 | #9e9e9d |
--spk-tone-ghost | rgba(28, 25, 23, 0.08) | rgba(255, 255, 255, 0.08) |
--spk-tone-ghost-hover | rgba(28, 25, 23, 0.15) | rgba(255, 255, 255, 0.15) |
Token
--spk-tone-bgLight
#e8e4d8Dark
#1a1a1aToken
--spk-toneLight
#d0c9b8Dark
#282828Token
--spk-tone-hoverLight
#b9b49dDark
#393a39Token
--spk-tone-mutedLight
#4c4839Dark
#9e9e9dToken
--spk-tone-ghostLight
rgba(28, 25, 23, 0.08)Dark
rgba(255, 255, 255, 0.08)Token
--spk-tone-ghost-hoverLight
rgba(28, 25, 23, 0.15)Dark
rgba(255, 255, 255, 0.15)Accent
| Token | Light | Dark |
|---|---|---|
--spk-accent | #366336 | #366336 |
--spk-accent-hover | #215016 | #48783e |
--spk-accent-bg | #aab9a7 | #374334 |
--spk-accent-ghost-hover | rgba(54, 99, 54, 0.1) | rgba(54, 99, 54, 0.1) |
--spk-accent-muted | #15380d | #81a978 |
--spk-text-accent | #ffffff | #ffffff |
Token
--spk-accentLight
#366336Dark
#366336Token
--spk-accent-hoverLight
#215016Dark
#48783eToken
--spk-accent-bgLight
#aab9a7Dark
#374334Token
--spk-accent-ghost-hoverLight
rgba(54, 99, 54, 0.1)Dark
rgba(54, 99, 54, 0.1)Token
--spk-accent-mutedLight
#15380dDark
#81a978Token
--spk-text-accentLight
#ffffffDark
#ffffffError
| Token | Light | Dark |
|---|---|---|
--spk-error | #f26a84 | #f26a84 |
--spk-error-hover | #d95370 | #ff8a9e |
--spk-error-bg | #d2a7ac | #563439 |
--spk-error-ghost-hover | rgba(242, 106, 132, 0.1) | rgba(242, 106, 132, 0.1) |
--spk-error-muted | #86223c | #ffb6c0 |
--spk-text-error | #1c1917 | #1c1917 |
Token
--spk-errorLight
#f26a84Dark
#f26a84Token
--spk-error-hoverLight
#d95370Dark
#ff8a9eToken
--spk-error-bgLight
#d2a7acDark
#563439Token
--spk-error-ghost-hoverLight
rgba(242, 106, 132, 0.1)Dark
rgba(242, 106, 132, 0.1)Token
--spk-error-mutedLight
#86223cDark
#ffb6c0Token
--spk-text-errorLight
#1c1917Dark
#1c1917Warning
| Token | Light | Dark |
|---|---|---|
--spk-warning | #ca8a04 | #ca8a04 |
--spk-warning-hover | #a97a00 | #dea300 |
--spk-warning-bg | #c3b191 | #4c3d20 |
--spk-warning-ghost-hover | rgba(202, 138, 4, 0.1) | rgba(202, 138, 4, 0.1) |
--spk-warning-muted | #604300 | #f1bf5c |
--spk-text-warning | #1c1917 | #1c1917 |
Token
--spk-warningLight
#ca8a04Dark
#ca8a04Token
--spk-warning-hoverLight
#a97a00Dark
#dea300Token
--spk-warning-bgLight
#c3b191Dark
#4c3d20Token
--spk-warning-ghost-hoverLight
rgba(202, 138, 4, 0.1)Dark
rgba(202, 138, 4, 0.1)Token
--spk-warning-mutedLight
#604300Dark
#f1bf5cToken
--spk-text-warningLight
#1c1917Dark
#1c1917Success
| Token | Light | Dark |
|---|---|---|
--spk-success | #2da796 | #2da796 |
--spk-success-hover | #00927c | #48bea7 |
--spk-success-bg | #9ebbb3 | #2b453f |
--spk-success-ghost-hover | rgba(45, 167, 150, 0.1) | rgba(45, 167, 150, 0.1) |
--spk-success-muted | #005245 | #7ed4c0 |
--spk-text-success | #1c1917 | #1c1917 |
Token
--spk-successLight
#2da796Dark
#2da796Token
--spk-success-hoverLight
#00927cDark
#48bea7Token
--spk-success-bgLight
#9ebbb3Dark
#2b453fToken
--spk-success-ghost-hoverLight
rgba(45, 167, 150, 0.1)Dark
rgba(45, 167, 150, 0.1)Token
--spk-success-mutedLight
#005245Dark
#7ed4c0Token
--spk-text-successLight
#1c1917Dark
#1c1917Info
| Token | Light | Dark |
|---|---|---|
--spk-info | #379de7 | #379de7 |
--spk-info-hover | #1e86d4 | #59b2ff |
--spk-info-bg | #9eb7cf | #2c4156 |
--spk-info-ghost-hover | rgba(55, 157, 231, 0.1) | rgba(55, 157, 231, 0.1) |
--spk-info-muted | #004b7f | #93cbff |
--spk-text-info | #1c1917 | #1c1917 |
Token
--spk-infoLight
#379de7Dark
#379de7Token
--spk-info-hoverLight
#1e86d4Dark
#59b2ffToken
--spk-info-bgLight
#9eb7cfDark
#2c4156Token
--spk-info-ghost-hoverLight
rgba(55, 157, 231, 0.1)Dark
rgba(55, 157, 231, 0.1)Token
--spk-info-mutedLight
#004b7fDark
#93cbffToken
--spk-text-infoLight
#1c1917Dark
#1c1917Neutral
| Token | Light | Dark |
|---|---|---|
--spk-neutral | #8a99ae | #8a99ae |
--spk-neutral-hover | #758498 | #9fafc4 |
--spk-neutral-bg | #b0b4bb | #3c3f45 |
--spk-neutral-ghost-hover | rgba(138, 153, 174, 0.1) | rgba(138, 153, 174, 0.1) |
--spk-neutral-muted | #3f4958 | #bbc8da |
--spk-text-neutral | #1c1917 | #1c1917 |
Token
--spk-neutralLight
#8a99aeDark
#8a99aeToken
--spk-neutral-hoverLight
#758498Dark
#9fafc4Token
--spk-neutral-bgLight
#b0b4bbDark
#3c3f45Token
--spk-neutral-ghost-hoverLight
rgba(138, 153, 174, 0.1)Dark
rgba(138, 153, 174, 0.1)Token
--spk-neutral-mutedLight
#3f4958Dark
#bbc8daToken
--spk-text-neutralLight
#1c1917Dark
#1c1917Text
| Token | Light | Dark |
|---|---|---|
--spk-text | #1c1917 | #ffffff |
--spk-text-light | #ffffff | #ffffff |
--spk-text-dark | #1c1917 | #1c1917 |
--spk-text-muted | #484848 | #9e9e9e |
Token
--spk-textLight
#1c1917Dark
#ffffffToken
--spk-text-lightLight
#ffffffDark
#ffffffToken
--spk-text-darkLight
#1c1917Dark
#1c1917Token
--spk-text-mutedLight
#484848Dark
#9e9e9eShadow (themed)
| Token | Light | Dark |
|---|---|---|
--spk-shadow-hard | #989685 | #090908 |
--spk-muted-shadow | rgba(72, 72, 72, 0.3) | rgba(158, 158, 158, 0.3) |
Token
--spk-shadow-hardLight
#989685Dark
#090908Token
--spk-muted-shadowLight
rgba(72, 72, 72, 0.3)Dark
rgba(158, 158, 158, 0.3)