AvilaDS

Token Reference

All design tokens exported from the Avila Design System — available as CSS custom properties prefixed with --avila-.

Design Tokens

Colors

Primitive tokens define raw values. Semantic tokens reference primitives and express intent — use semantic tokens in product code.

Primitive — Brand

Hot Pink
--avila-primitive-color-hot-pink#e8195a
--avila-primitive-color-hot-pink-hover#b8103f
--avila-primitive-color-hot-pink-active#8a0c2e
--avila-primitive-color-hot-pink-subtle#fce8ee
Marigold
--avila-primitive-color-marigold#f5a623
--avila-primitive-color-marigold-hover#c47d0a
--avila-primitive-color-marigold-subtle#fdf3e0
Cobalt
--avila-primitive-color-cobalt#1b4fd8
--avila-primitive-color-cobalt-hover#1440b0
--avila-primitive-color-cobalt-subtle#e8eefb
Teal
--avila-primitive-color-teal#00c9a7
--avila-primitive-color-teal-hover#009e84
--avila-primitive-color-teal-subtle#e5faf7

Primitive — Ink Scale

--avila-primitive-color-ink-100#1a1208
--avila-primitive-color-ink-90#2e2416
--avila-primitive-color-ink-80#3d3020
--avila-primitive-color-ink-70#4f3e2c
--avila-primitive-color-ink-60#6b5740
--avila-primitive-color-ink-50#7a6e65
--avila-primitive-color-ink-40#a09488
--avila-primitive-color-ink-30#c0b8ae
--avila-primitive-color-ink-20#d8d2ca
--avila-primitive-color-ink-10#ece8e2
--avila-primitive-color-ink-05#f5f2ee

Primitive — Neutral

--avila-primitive-color-parchment#f5f0e8
--avila-primitive-color-parchment-dark#e8e0d4
--avila-primitive-color-off-white#fdfaf6
--avila-primitive-color-white#ffffff

Primitive — Status

--avila-primitive-color-success-base#1a7a4a
--avila-primitive-color-success-subtle#e6f7ee
--avila-primitive-color-warning-base#b86a00
--avila-primitive-color-warning-subtle#fff3dc
--avila-primitive-color-error-base#c8282e
--avila-primitive-color-error-subtle#fdecea
--avila-primitive-color-info-base#1b4fd8
--avila-primitive-color-info-subtle#e8eefb

Semantic — Background

--avila-color-background-page#fdfaf6Main page background
--avila-color-background-surface#f5f0e8Card / panel surface
--avila-color-background-surface-raised#ffffffElevated modal / dropdown
--avila-color-background-surface-sunken#f5f2eeInset / input background
--avila-color-background-overlay#1a1208Modal scrim

Semantic — Text

--avila-color-text-primary#1a1208Primary body text
--avila-color-text-secondary#3d3020Secondary / caption text
--avila-color-text-muted#7a6e65Placeholder, disabled
--avila-color-text-inverse#f5f0e8Text on dark surfaces
--avila-color-text-accent#e8195aHighlighted / brand text
--avila-color-text-link#e8195aHyperlinks
--avila-color-text-link-hover#b8103fLink hover
--avila-color-text-on-accent#f5f0e8Text on accent bg

Semantic — Border

--avila-color-border-default#e8e0d4Default card / input border
--avila-color-border-strong#c0b8aeStrong border, separator
--avila-color-border-focus#e8195aFocus ring
--avila-color-border-accent#f5a623Accent / brand border

Semantic — Interactive

--avila-color-interactive-primary-bg#e8195aPrimary button bg
--avila-color-interactive-primary-bg-hover#b8103fPrimary button hover
--avila-color-interactive-primary-bg-active#8a0c2ePrimary button active
--avila-color-interactive-primary-text#f5f0e8Primary button label
--avila-color-interactive-secondary-bg#1a1208Secondary button bg
--avila-color-interactive-secondary-text#f5f0e8Secondary button label
--avila-color-interactive-ghost-text#e8195aGhost button label
--avila-color-interactive-ghost-border#e8195aGhost button border

Semantic — Accent

--avila-color-accent-hot-pink#e8195aHot Pink accent
--avila-color-accent-hot-pink-subtle#fce8eeHot Pink tint bg
--avila-color-accent-marigold#f5a623Marigold accent
--avila-color-accent-marigold-subtle#fdf3e0Marigold tint bg
--avila-color-accent-cobalt#1b4fd8Cobalt accent
--avila-color-accent-cobalt-subtle#e8eefbCobalt tint bg
--avila-color-accent-teal#00c9a7Teal accent
--avila-color-accent-teal-subtle#e5faf7Teal tint bg

Semantic — Feedback

--avila-color-feedback-success-bg#e6f7eeSuccess background
--avila-color-feedback-success-text#1a7a4aSuccess text / icon
--avila-color-feedback-warning-bg#fff3dcWarning background
--avila-color-feedback-warning-text#b86a00Warning text / icon
--avila-color-feedback-error-bg#fdeceaError background
--avila-color-feedback-error-text#c8282eError text / icon
--avila-color-feedback-info-bg#e8eefbInfo background
--avila-color-feedback-info-text#1b4fd8Info text / icon

Semantic — Navigation

--avila-color-nav-bg#1a1208Nav background
--avila-color-nav-text#f5f0e8Nav link text
--avila-color-nav-text-muted#7a6e65Inactive nav links
--avila-color-nav-border#2e2416Nav bottom border
--avila-color-nav-cta-bg#e8195aNav CTA button
--avila-color-nav-cta-text#f5f0e8Nav CTA label

Semantic — Card & Component

--avila-color-card-bg-light#ffffffDefault card background
--avila-color-card-bg-dark#1a1208Dark card variant
--avila-color-card-border#e8e0d4Card border
--avila-color-metric-value#f5a623Metric / KPI number
--avila-color-chip-text#1a1208Chip / tag text
--avila-color-rainbow-hot-pink#e8195aRainbow Hot Pink
--avila-color-rainbow-marigold#f5a623Rainbow Marigold
--avila-color-rainbow-cobalt#1b4fd8Rainbow Cobalt
--avila-color-rainbow-teal#00c9a7Rainbow Teal

Design Tokens

Spacing

A proportional spacing scale from 0 to 320px. Bar width is proportional to token value relative to the maximum (320px).

--avila-space-0
0px
--avila-space-1px
1px
--avila-space-0-5
2px
--avila-space-1
4px
--avila-space-1-5
6px
--avila-space-2
8px
--avila-space-2-5
10px
--avila-space-3
12px
--avila-space-3-5
14px
--avila-space-4
16px
--avila-space-5
20px
--avila-space-6
24px
--avila-space-7
28px
--avila-space-8
32px
--avila-space-9
36px
--avila-space-10
40px
--avila-space-11
44px
--avila-space-12
48px
--avila-space-14
56px
--avila-space-16
64px
--avila-space-20
80px
--avila-space-24
96px
--avila-space-28
112px
--avila-space-32
128px
--avila-space-36
144px
--avila-space-40
160px
--avila-space-48
192px
--avila-space-56
224px
--avila-space-64
256px
--avila-space-80
320px

Design Tokens

Border Radius

Nine steps from square to pill. The preview box shows the corner rounding at actual scale.

none--avila-radius-none0px
xs--avila-radius-xs2px
sm--avila-radius-sm4px
md--avila-radius-md6px
lg--avila-radius-lg8px
xl--avila-radius-xl12px
2xl--avila-radius-2xl16px
3xl--avila-radius-3xl24px
full--avila-radius-full9999px

Design Tokens

Typography

Font sizes, line heights, letter spacing, font weights, paragraph spacing, and semantic role sizes — all driven by Oswald.

Font Size

fs-2xs--avila-fs-2xs
Avila
10px
fs-xs--avila-fs-xs
Avila
11px
fs-sm--avila-fs-sm
Avila
12px
fs-base--avila-fs-base
Avila
14px
fs-md--avila-fs-md
Avila
16px
fs-lg--avila-fs-lg
Avila
18px
fs-xl--avila-fs-xl
Avila
20px
fs-2xl--avila-fs-2xl
Avila
24px
fs-3xl--avila-fs-3xl
Avila
28px
fs-4xl--avila-fs-4xl
Avila
32px
fs-5xl--avila-fs-5xl
Avila
40px
fs-6xl--avila-fs-6xl
Avila
48px
fs-7xl--avila-fs-7xl
Avila
56px
fs-8xl--avila-fs-8xl
Avila
72px
fs-9xl--avila-fs-9xl
Avila
96px
fs-10xl--avila-fs-10xl
Avila
112px

Role Sizes

Display Hero--avila-role-display-hero
Avila
112px
Display XL--avila-role-display-xl
Avila
96px
Display LG--avila-role-display-lg
Avila
72px
Display MD--avila-role-display-md
Avila
56px
Display SM--avila-role-display-sm
Avila
40px
Heading H1--avila-role-heading-h1
Avila
32px
Heading H2--avila-role-heading-h2
Avila
28px
Heading H3--avila-role-heading-h3
Avila
24px
Heading H4--avila-role-heading-h4
Avila
20px
Heading H5--avila-role-heading-h5
Avila
18px
Metric XL--avila-role-metric-xl
Avila
72px
Metric LG--avila-role-metric-lg
Avila
56px
Metric MD--avila-role-metric-md
Avila
40px
Metric SM--avila-role-metric-sm
Avila
32px
Body XL--avila-role-body-xl
Avila
20px
Body LG--avila-role-body-lg
Avila
18px
Body MD--avila-role-body-md
Avila
16px
Body SM--avila-role-body-sm
Avila
14px
Body XS--avila-role-body-xs
Avila
12px
Label LG--avila-role-label-lg
Avila
16px
Label MD--avila-role-label-md
Avila
14px
Label SM--avila-role-label-sm
Avila
12px
Label XS--avila-role-label-xs
Avila
10px
Overline LG--avila-role-overline-lg
Avila
13px
Overline MD--avila-role-overline-md
Avila
11px
Overline SM--avila-role-overline-sm
Avila
9px
Sublabel MD--avila-role-sublabel-md
Avila
12px
Sublabel SM--avila-role-sublabel-sm
Avila
11px

Line Height

VariableValueDescription
--avila-lh-none11:1 — display, all-caps labels
--avila-lh-tight1.1Tight — large display headings
--avila-lh-snug1.25Snug — subheadings
--avila-lh-normal1.5Normal — body copy default
--avila-lh-relaxed1.625Relaxed — long-form paragraphs
--avila-lh-loose2Loose — editorial / airy layouts

Letter Spacing

VariableValueDescription
--avila-ls-tighter-1.5pxVery tight — large display only
--avila-ls-tight-0.5pxTight — hero headlines
--avila-ls-snug-0.25pxSlightly tight — subheadings
--avila-ls-normal0pxNormal — body copy
--avila-ls-wide0.3pxWide — Oswald body / UI
--avila-ls-wider1pxWider — labels, small caps
--avila-ls-widest1.5pxWidest — Bebas Neue overlines
--avila-ls-ultra2pxUltra wide — Bebas Neue display
--avila-ls-tracking3pxTracking — section eyebrow

Font Weight

VariableValueDescription
--avila-fw-thin100Thin
--avila-fw-extralight200Extra Light
--avila-fw-light300Light
--avila-fw-regular400Regular — Oswald body
--avila-fw-medium500Medium
--avila-fw-semibold600SemiBold
--avila-fw-bold700Bold
--avila-fw-extrabold800Extra Bold
--avila-fw-black900Black / Heavy

Paragraph Spacing

VariableValueDescription
--avila-para-none0pxNo paragraph spacing
--avila-para-xs4pxTight — dense UI lists
--avila-para-sm8pxSmall — compact body
--avila-para-md12pxMedium — default body
--avila-para-lg16pxLarge — editorial spacing
--avila-para-xl24pxXL — feature copy

Design Tokens

Sizing

Component heights, icon sizes, container widths, and the grid system.

Component Height

VariableValueDescription
--avila-height-xs28pxChip, badge, compact
--avila-height-sm36pxCompact input, tag
--avila-height-md44pxDefault input, button
--avila-height-lg52pxLarge CTA button
--avila-height-xl64pxXL component

Icon Size

VariableValueDescription
--avila-icon-xs12pxIcon XS
--avila-icon-sm16pxIcon SM
--avila-icon-md20pxIcon MD — default
--avila-icon-lg24pxIcon LG
--avila-icon-xl32pxIcon XL

Container Width

VariableValueDescription
--avila-container-sm640pxSmall container
--avila-container-md768pxMedium container
--avila-container-lg1024pxLarge container
--avila-container-xl1280pxXL — portfolio default
--avila-container-2xl1440pxFull bleed

Grid

VariableValueDescription
--avila-grid-columns1212-column grid
--avila-grid-gutter24pxColumn gutter
--avila-grid-margin80pxOuter margin

Design Tokens

Z-Index

A structured stacking scale that keeps layering predictable and conflict-free.

VariableValueDescription
--avila-z-hide-1Hidden layer
--avila-z-base0Default document flow
--avila-z-raised10Cards, hover elevation
--avila-z-dropdown100Dropdowns, selects
--avila-z-sticky200Sticky navigation
--avila-z-overlay300Overlays, backdrops
--avila-z-modal400Modal dialogs
--avila-z-toast500Toast notifications
--avila-z-tooltip600Tooltips

Design Tokens

Duration

Animation and transition durations calibrated to interaction complexity.

VariableValueDescription
--avila-duration-instant0msInstant — no transition
--avila-duration-fast75msFast — micro interactions
--avila-duration-snappy100msSnappy — button feedback
--avila-duration-base150msBase — default transition
--avila-duration-moderate200msModerate — panels, reveals
--avila-duration-slow300msSlow — page transitions
--avila-duration-slower400msSlower — complex animations
--avila-duration-sluggish500msSluggish — loading states

Design Tokens

Opacity

Opacity values from transparent to fully opaque, shown with a Hot Pink swatch.

0
0.05
0.1
0.15
0.2
0.3
0.4
0.5
0.6
0.7
0.8
0.9
1

Design Tokens

Shadow

Blur radius values for constructing box shadows. Combine with --avila-color-card-shadow for consistent elevation.

VariableValueDescription
--avila-shadow-none0pxFlat / no elevation
--avila-shadow-xs2pxXS blur radius
--avila-shadow-sm4pxSM blur radius
--avila-shadow-md8pxMD blur radius — cards
--avila-shadow-lg16pxLG blur radius — modals
--avila-shadow-xl24pxXL blur radius — drawers
--avila-shadow-2xl40px2XL blur radius — hero
--avila-shadow-3xl64px3XL blur radius — full-page

Design Tokens

Breakpoints

Seven responsive breakpoints from mobile (320px) to ultrawide (1920px).

VariableValueDescription
--avila-bp-xs320pxXS — smallest phones
--avila-bp-sm480pxSM — large phones
--avila-bp-md768pxMD — tablets
--avila-bp-lg1024pxLG — small laptops
--avila-bp-xl1280pxXL — desktops
--avila-bp-2xl1440px2XL — large monitors
--avila-bp-3xl1920px3XL — ultrawide