8 brands · 2 tones · 16 emits
Tokens
Every token in @avala/design-tokens, for the active (brand, tone). Switch the theme from the header to see all values resolve to a different palette in place.
343 / 343avala · g100
| | Name | Value |
|---|---|---|
| accent | #292c33 | |
| accent-foreground | #ffffff | |
| ai-aura-end | rgba(255, 92, 0, 0) | |
| ai-aura-hover-background | #222222 | |
| ai-aura-hover-end | rgba(255, 92, 0, 0) | |
| ai-aura-hover-start | rgba(255, 92, 0, 0.5) | |
| ai-aura-start | rgba(255, 92, 0, 0.4) | |
| ai-aura-start-sm | rgba(255, 92, 0, 0.16) | |
| ai-border-end | #ff5c00 | |
| ai-border-start | rgba(255, 92, 0, 0.36) | |
| ai-border-strong | #ff5c00 | |
| ai-drop-shadow | rgba(0, 0, 0, 0.28) | |
| ai-inner-shadow | rgba(255, 92, 0, 0.16) | |
| ai-overlay | rgba(15, 15, 30, 0.85) | |
| ai-popover-background | #1b1b2e | |
| ai-popover-caret-bottom | #ff5c00 | |
| ai-popover-caret-bottom-background | #2a1b1a | |
| ai-popover-caret-bottom-background-actions | #221413 | |
| ai-popover-caret-center | #b24e2d | |
| ai-popover-shadow-outer-01 | rgba(0, 0, 0, 0.12) | |
| ai-popover-shadow-outer-02 | rgba(0, 0, 0, 0.08) | |
| ai-skeleton-background | #1a1a1a | |
| ai-skeleton-element-background | #2a2a2a | |
| av-2xl | 2rem | |
| av-3xl | 3rem | |
| av-4xl | 5rem | |
| av-accent-100 | #ffece5 | |
| av-accent-200 | #ffb499 | |
| av-accent-300 | #ff5c00 | |
| av-accent-400 | #b24e2d | |
| av-accent-500 | #591d09 | |
| av-base | 0.25rem | |
| av-blue-100 | #cbe7ee | |
| av-blue-300 | #5ea4be | |
| av-blue-400 | #40a2c7 | |
| av-blue-500 | #1d6c89 | |
| av-card-gradient-end | #141414 | |
| av-card-gradient-start | #121212 | |
| av-danger-100 | #ffd9d9 | |
| av-danger-300 | #d93636 | |
| av-danger-400 | #bc2929 | |
| av-danger-500 | #540404 | |
| av-investor-100 | #d0e2ff | |
| av-investor-200 | #7cabff | |
| av-investor-300 | #0f62fe | |
| av-investor-400 | #0043ce | |
| av-investor-500 | #001d6c | |
| av-lg | 1rem | |
| av-locked-status-error | #d93636 | |
| av-locked-status-info | #6fc1e0 | |
| av-locked-status-success | #50cc3d | |
| av-locked-status-warning | #f7b100 | |
| av-md | 0.75rem | |
| av-neutral-100 | #f7f9fc | |
| av-neutral-1000 | #000000 | |
| av-neutral-125 | #f9f9f9 | |
| av-neutral-150 | #f0f2f7 | |
| av-neutral-200 | #e6e8ed | |
| av-neutral-250 | #e0e3e9 | |
| av-neutral-300 | #d2d4d9 | |
| av-neutral-400 | #b8babf | |
| av-neutral-50 | #ffffff | |
| av-neutral-500 | #9c9fa6 | |
| av-neutral-600 | #676b73 | |
| av-neutral-700 | #41454d | |
| av-neutral-800 | #292c33 | |
| av-neutral-850 | #1b1b1b | |
| av-neutral-900 | #141821 | |
| av-neutral-925 | #0e1116 | |
| av-neutral-950 | #101010 | |
| av-overlay-scrim | rgba(0, 0, 0, 0.85) | |
| av-primary-100 | #f7e5ff | |
| av-primary-200 | #d291f1 | |
| av-primary-300 | #a422e1 | |
| av-primary-400 | #6b238c | |
| av-primary-500 | #390f4c | |
| av-sm | 0.5rem | |
| av-status-overlooked | #6fc1e0 | |
| av-status-pending | #f7b100 | |
| av-success-100 | #d7f7d2 | |
| av-success-200 | #adf778 | |
| av-success-300 | #22a028 | |
| av-success-400 | #227016 | |
| av-success-500 | #1b4d12 | |
| av-warning-100 | #fff4d9 | |
| av-warning-300 | #d29600 | |
| av-warning-400 | #cb950d | |
| av-warning-500 | #705000 | |
| av-xl | 1.5rem | |
| av-xs | 0.25rem | |
| background | #121212 | |
| background-active | #41454d | |
| background-brand | #ff5c00 | |
| background-hover | #292c33 | |
| background-inverse | #ffffff | |
| background-inverse-hover | #f0f2f7 | |
| background-selected | #1b1b1b | |
| background-selected-hover | #292c33 | |
| border | #2a2a2a | |
| border-disabled | #3a3a3a | |
| border-interactive | #ff5c00 | |
| border-inverse | #ffffff | |
| border-strong-01 | #676b73 | |
| border-strong-02 | #9c9fa6 | |
| border-strong-03 | #b8babf | |
| border-subtle-00 | #2a2a2a | |
| border-subtle-01 | #333333 | |
| border-subtle-02 | #3a3a3a | |
| border-subtle-03 | #404040 | |
| border-subtle-selected-01 | #41454d | |
| border-subtle-selected-02 | #41454d | |
| border-subtle-selected-03 | #41454d | |
| border-tile-01 | #2a2a2a | |
| border-tile-02 | #333333 | |
| border-tile-03 | #3a3a3a | |
| brand-cyan | #5ea4be | |
| brand-green | #88fb75 | |
| brand-green-alt | #22a028 | |
| brand-green-dark | #1e5715 | |
| brand-orange | #ff5c00 | |
| brand-orange-dark | #b24e2d | |
| brand-purple | #a422e1 | |
| brand-purple-dark | #411854 | |
| btn-primary-bg | #ffffff | |
| btn-primary-bg-hover | #f0f0f0 | |
| btn-primary-border | rgba(255, 255, 255, 0.1) | |
| btn-primary-fg | #000000 | |
| button-danger-primary | #d93636 | |
| button-danger-secondary | #d93636 | |
| button-disabled | #3a3a3a | |
| button-primary | #ff5c00 | |
| button-secondary | #525252 | |
| button-separator | #161616 | |
| button-tertiary | #ffffff | |
| card | #1e1e1e | |
| card-foreground | #ffffff | |
| card-gradient-end | #141414 | |
| card-gradient-start | #121212 | |
| chart-1 | #ff5c00 | |
| chart-2 | #adf778 | |
| chart-3 | #5ea4be | |
| chart-4 | #d29600 | |
| chart-5 | #a422e1 | |
| color-1 | #ff5c00 | |
| color-2 | #adf778 | |
| color-3 | #5ea4be | |
| color-4 | #d29600 | |
| color-5 | #a422e1 | |
| destructive | #d93636 | |
| destructive-foreground | #ffffff | |
| duration-fast-01 | 70ms | |
| duration-fast-02 | 110ms | |
| duration-moderate-01 | 150ms | |
| duration-moderate-02 | 240ms | |
| duration-slow-01 | 400ms | |
| duration-slow-02 | 700ms | |
| easing-expressive-entrance | cubic-bezier(0, 0, 0.3, 1) | |
| easing-expressive-exit | cubic-bezier(0.4, 0.14, 1, 1) | |
| easing-expressive-standard | cubic-bezier(0.4, 0.14, 0.3, 1) | |
| easing-productive-entrance | cubic-bezier(0, 0, 0.38, 0.9) | |
| easing-productive-exit | cubic-bezier(0.2, 0, 1, 0.9) | |
| easing-productive-standard | cubic-bezier(0.2, 0, 0.38, 0.9) | |
| field-01 | #1e1e1e | |
| field-02 | #292c33 | |
| field-03 | #2a2a2a | |
| field-hover-01 | #222222 | |
| field-hover-02 | #262626 | |
| field-hover-03 | #2a2a2a | |
| focus | #ff5c00 | |
| focus-inset | #161616 | |
| focus-inverse | #ffffff | |
| font-mono | '"IBM Plex Mono"', monospace | |
| font-plex | '"IBM Plex Sans"', sans-serif | |
| font-sans | '"IBM Plex Sans"', sans-serif | |
| font-weight-light | 300 | |
| font-weight-regular | 400 | |
| font-weight-semibold | 600 | |
| foreground | #ffffff | |
| header-height | 3.5rem | |
| highlight | #ff7a33 | |
| icon-disabled | #525252 | |
| icon-interactive | #ff5c00 | |
| icon-inverse | #161616 | |
| icon-on-color | #ffffff | |
| icon-on-color-disabled | #8d8d8d | |
| icon-primary | #ffffff | |
| icon-secondary | #c6c6c6 | |
| input | #2a2a2a | |
| interactive | #ff5c00 | |
| layer-01 | #1a1a1a | |
| layer-02 | #1e1e1e | |
| layer-03 | #222222 | |
| layer-accent-01 | #1b1b1b | |
| layer-accent-02 | #292c33 | |
| layer-accent-03 | #41454d | |
| layer-accent-active-01 | #41454d | |
| layer-accent-active-02 | #676b73 | |
| layer-accent-active-03 | #9c9fa6 | |
| layer-accent-hover-01 | #292c33 | |
| layer-accent-hover-02 | #41454d | |
| layer-accent-hover-03 | #676b73 | |
| layer-active-01 | #2e2e2e | |
| layer-active-02 | #323232 | |
| layer-active-03 | #363636 | |
| layer-hover-01 | #222222 | |
| layer-hover-02 | #262626 | |
| layer-hover-03 | #2a2a2a | |
| layer-selected-01 | #1f1f1f | |
| layer-selected-02 | #232323 | |
| layer-selected-03 | #272727 | |
| layer-selected-disabled | #41454d | |
| layer-selected-hover-01 | #262626 | |
| layer-selected-hover-02 | #2a2a2a | |
| layer-selected-hover-03 | #2e2e2e | |
| layer-selected-inverse | #ffffff | |
| link-inverse | #0f62fe | |
| link-primary | #ff5c00 | |
| link-primary-hover | #ff7a33 | |
| link-secondary | #c6c6c6 | |
| link-visited | #a422e1 | |
| muted | #1b1b1b | |
| muted-foreground | #b8babf | |
| notification-action-hover | #222222 | |
| notification-background-error | #2d1414 | |
| notification-background-info | #142a2d | |
| notification-background-success | #142d14 | |
| notification-background-warning | #2d2614 | |
| overlay | rgba(0, 0, 0, 0.65) | |
| overlay-black-35 | rgba(0, 0, 0, 0.35) | |
| overlay-black-45 | rgba(0, 0, 0, 0.45) | |
| overlay-black-50 | rgba(0, 0, 0, 0.5) | |
| overlay-dim | rgba(0, 0, 0, 0.6) | |
| overlay-white-10 | rgba(255, 255, 255, 0.1) | |
| overlay-white-15 | rgba(255, 255, 255, 0.15) | |
| overlay-white-20 | rgba(255, 255, 255, 0.2) | |
| overlay-white-25 | rgba(255, 255, 255, 0.25) | |
| overlay-white-5 | rgba(255, 255, 255, 0.05) | |
| popover | #1a1a1a | |
| popover-foreground | #ffffff | |
| primary | #ff5c00 | |
| primary-foreground | #ffffff | |
| primary-rgb | 255, 92, 0 | |
| radius | 0.5rem | |
| radius-full | 9999px | |
| radius-lg | 0.75rem | |
| radius-md | 0.5rem | |
| radius-sm | 0.25rem | |
| ring | #ff5c00 | |
| secondary | #41454d | |
| secondary-foreground | #ffffff | |
| shadow-card | 0 20px 50px -25px rgba(0, 0, 0, 0.35) | |
| shadow-card-hover | 0 20px 60px -20px rgba(0, 0, 0, 0.5) | |
| shadow-glow-blue | 0 0 20px rgba(59, 130, 246, 0.2) | |
| shadow-glow-emerald | 0 0 20px rgba(16, 185, 129, 0.2) | |
| shadow-glow-primary | 0 0 20px rgba(255, 92, 0, 0.15) | |
| shadow-glow-purple | 0 0 20px rgba(139, 92, 246, 0.2) | |
| shadow-glow-red | 0 0 20px rgba(239, 68, 68, 0.2) | |
| shadow-hero | 0 28px 80px rgba(0, 0, 0, 0.45) | |
| shadow-stage | 0 16px 44px rgba(0, 0, 0, 0.1) | |
| sidebar | #101010 | |
| sidebar-accent | #1b1b1b | |
| sidebar-accent-foreground | #ffffff | |
| sidebar-border | #292c33 | |
| sidebar-foreground | #ffffff | |
| sidebar-primary | #ff5c00 | |
| sidebar-primary-foreground | #000000 | |
| sidebar-ring | #ff5c00 | |
| size-102 | 6.375rem | |
| size-12 | 0.75rem | |
| size-14 | 0.875rem | |
| size-16 | 1rem | |
| size-18 | 1.125rem | |
| size-20 | 1.25rem | |
| size-24 | 1.5rem | |
| size-28 | 1.75rem | |
| size-32 | 2rem | |
| size-36 | 2.25rem | |
| size-42 | 2.625rem | |
| size-48 | 3rem | |
| size-54 | 3.375rem | |
| size-60 | 3.75rem | |
| size-68 | 4.25rem | |
| size-76 | 4.75rem | |
| size-84 | 5.25rem | |
| size-92 | 5.75rem | |
| skeleton-background | #1a1a1a | |
| skeleton-element | #2a2a2a | |
| spacing-01 | 0.125rem | |
| spacing-02 | 0.25rem | |
| spacing-03 | 0.5rem | |
| spacing-04 | 0.75rem | |
| spacing-05 | 1rem | |
| spacing-06 | 1.5rem | |
| spacing-07 | 2rem | |
| spacing-08 | 2.5rem | |
| spacing-09 | 3rem | |
| spacing-10 | 4rem | |
| spacing-11 | 5rem | |
| spacing-12 | 6rem | |
| spacing-13 | 10rem | |
| status-blue | #5ea4be | |
| status-cyan | #5ea4be | |
| status-emerald | #227016 | |
| status-gray | #9c9fa6 | |
| status-green | #22a028 | |
| status-orange | #ff5c00 | |
| status-purple | #a422e1 | |
| status-red | #d93636 | |
| support-caution-major | #d29600 | |
| support-caution-minor | #fff4d9 | |
| support-caution-undefined | #a422e1 | |
| support-error | #d93636 | |
| support-error-inverse | #a82a2a | |
| support-info | #6fc1e0 | |
| support-info-inverse | #5ba8c2 | |
| support-success | #50cc3d | |
| support-success-inverse | #3da432 | |
| support-warning | #f7b100 | |
| support-warning-inverse | #c18d00 | |
| tag-background-blue | #0043ce | |
| tag-background-cool-gray | #41454d | |
| tag-background-cyan | #1d6c89 | |
| tag-background-gray | #41454d | |
| tag-background-green | #1b4d12 | |
| tag-background-magenta | #491d8b | |
| tag-background-purple | #390f4c | |
| tag-background-red | #540404 | |
| tag-background-teal | #005d5d | |
| tag-background-warm-gray | #41454d | |
| text-disabled | #525252 | |
| text-error | #fa4d56 | |
| text-helper | #a8a8a8 | |
| text-inverse | #161616 | |
| text-on-color | #ffffff | |
| text-on-color-disabled | #8d8d8d | |
| text-on-error | #ffffff | |
| text-on-info | #000000 | |
| text-on-success | #000000 | |
| text-on-warning | #000000 | |
| text-placeholder | #676b73 | |
| text-primary | #ffffff | |
| text-secondary | #c6c6c6 | |
| toggle-off | #676b73 |