INDEX / 01

Foundations

Tier-1 primitives, resolved through tier-2 theme aliases. Every value below is read at build time from the published token layer — all 608 of them.

BRAND — SOUTHLEFT126 PROPERTIES REDECLARED

Everything below is the base token bundle. This system's own stylesheet, project/southleft.css, gives these 126 properties a different value; every other token is shared.

PROPERTYTHIS BRANDBASE

--al-box-shadow-160px 16px 16px 0px rgba(226, 224, 218, 0.3), 0px 8px 8px 0px rgba(226, 224, 218, 0.3), 0px 4px 4px 0px rgba(226, 224, 218, 0.3), 0px 2px 2px 0px rgba(226, 224, 218, 0.3)0px 16px 16px 0px rgba(19, 19, 17, 0.6), 0px 8px 8px 0px rgba(19, 19, 17, 0.6), 0px 4px 4px 0px rgba(19, 19, 17, 0.6), 0px 2px 2px 0px rgba(19, 19, 17, 0.6)

--al-box-shadow-20px 2px 2px 0px rgba(226, 224, 218, 0.3)0px 2px 2px 0px rgba(19, 19, 17, 0.6)

--al-box-shadow-320px 32px 32px 0px rgba(226, 224, 218, 0.3), 0px 16px 16px 0px rgba(226, 224, 218, 0.3), 0px 8px 8px 0px rgba(226, 224, 218, 0.3), 0px 4px 4px 0px rgba(226, 224, 218, 0.3), 0px 2px 2px 0px rgba(226, 224, 218, 0.3)0px 32px 32px 0px rgba(19, 19, 17, 0.6), 0px 16px 16px 0px rgba(19, 19, 17, 0.6), 0px 8px 8px 0px rgba(19, 19, 17, 0.6), 0px 4px 4px 0px rgba(19, 19, 17, 0.6), 0px 2px 2px 0px rgba(19, 19, 17, 0.6)

--al-box-shadow-40px 4px 4px 0px rgba(226, 224, 218, 0.3), 0px 2px 2px 0px rgba(226, 224, 218, 0.3)0px 4px 4px 0px rgba(19, 19, 17, 0.6), 0px 2px 2px 0px rgba(19, 19, 17, 0.6)

--al-box-shadow-480px 48px 48px 0px rgba(226, 224, 218, 0.3), 0px 32px 32px 0px rgba(226, 224, 218, 0.3), 0px 16px 16px 0px rgba(226, 224, 218, 0.3), 0px 8px 8px 0px rgba(226, 224, 218, 0.3), 0px 4px 4px 0px rgba(226, 224, 218, 0.3), 0px 2px 2px 0px rgba(226, 224, 218, 0.3)0px 48px 48px 0px rgba(19, 19, 17, 0.6), 0px 32px 32px 0px rgba(19, 19, 17, 0.6), 0px 16px 16px 0px rgba(19, 19, 17, 0.6), 0px 8px 8px 0px rgba(19, 19, 17, 0.6), 0px 4px 4px 0px rgba(19, 19, 17, 0.6), 0px 2px 2px 0px rgba(19, 19, 17, 0.6)

--al-box-shadow-80px 8px 8px 0px rgba(226, 224, 218, 0.3), 0px 4px 4px 0px rgba(226, 224, 218, 0.3), 0px 2px 2px 0px rgba(226, 224, 218, 0.3)0px 8px 8px 0px rgba(19, 19, 17, 0.6), 0px 4px 4px 0px rgba(19, 19, 17, 0.6), 0px 2px 2px 0px rgba(19, 19, 17, 0.6)

--al-box-shadow-hard-22px 2px 0px 0px #f057352px 2px 0px 0px #8ea6ff

--al-box-shadow-hard-44px 4px 0px 0px #f057354px 4px 0px 0px #8ea6ff

--al-box-shadow-overlay0px 8px 24px 0px rgba(226, 224, 218, 0.3)0px 8px 24px 0px rgba(19, 19, 17, 0.6)

--al-box-shadow-overlay-lg0px 12px 32px -8px rgba(226, 224, 218, 0.3)0px 12px 32px -8px rgba(19, 19, 17, 0.6)

--al-box-shadow-overlay-xl0px 24px 48px -12px rgba(226, 224, 218, 0.3)0px 24px 48px -12px rgba(19, 19, 17, 0.6)

--al-box-shadow-raised0px 1px 2px 0px rgba(226, 224, 218, 0.3)0px 1px 2px 0px rgba(19, 19, 17, 0.6)

--al-color-neutral-100#fdfcfa#ffffff

--al-color-neutral-200#f3f1eb#f1f0ea

--al-color-neutral-300#e2e0da#d5d3cc

--al-color-neutral-400#cfc9bc#a5a399

--al-color-neutral-500#a49981#7c7a70

--al-color-neutral-600#5f5747#6f6b61

--al-color-neutral-700#4a453a#3c3c35

--al-color-neutral-800#322e26#1d1d1a

--al-color-neutral-850#232019#181816

--al-color-neutral-900#181714#131311

--al-color-neutral-alpha-100-10rgba(253, 252, 250, 0.1)rgba(255, 255, 255, 0.1)

--al-color-neutral-alpha-100-30rgba(253, 252, 250, 0.3)rgba(255, 255, 255, 0.3)

--al-color-neutral-alpha-100-60rgba(253, 252, 250, 0.6)rgba(255, 255, 255, 0.6)

--al-color-neutral-alpha-100-80rgba(253, 252, 250, 0.8)rgba(255, 255, 255, 0.8)

--al-color-neutral-alpha-300-10rgba(226, 224, 218, 0.1)rgba(231, 229, 222, 0.1)

--al-color-neutral-alpha-300-30rgba(226, 224, 218, 0.3)rgba(231, 229, 222, 0.3)

--al-color-neutral-alpha-300-60rgba(226, 224, 218, 0.6)rgba(231, 229, 222, 0.6)

--al-color-neutral-alpha-300-80rgba(226, 224, 218, 0.8)rgba(231, 229, 222, 0.8)

--al-color-neutral-alpha-500-10rgba(164, 153, 129, 0.1)rgba(124, 122, 112, 0.1)

--al-color-neutral-alpha-500-30rgba(164, 153, 129, 0.3)rgba(124, 122, 112, 0.3)

--al-color-neutral-alpha-500-60rgba(164, 153, 129, 0.6)rgba(124, 122, 112, 0.6)

--al-color-neutral-alpha-500-80rgba(164, 153, 129, 0.8)rgba(124, 122, 112, 0.8)

--al-color-neutral-alpha-900-10rgba(24, 23, 20, 0.1)rgba(19, 19, 17, 0.1)

--al-color-neutral-alpha-900-30rgba(24, 23, 20, 0.3)rgba(19, 19, 17, 0.3)

--al-color-neutral-alpha-900-60rgba(24, 23, 20, 0.6)rgba(19, 19, 17, 0.6)

--al-color-neutral-alpha-900-80rgba(24, 23, 20, 0.8)rgba(19, 19, 17, 0.8)

--al-color-primary-100#ffded6#e9eefc

--al-color-primary-200#ffb8a8#d4dff8

--al-color-primary-300#ff9780#a3b5ff

--al-color-primary-400#ff7152#8ea6ff

--al-color-primary-500#f05735#2e5ce6

--al-color-primary-600#eb2b00#2450cc

--al-color-primary-700#b32100#303d66

--al-color-primary-800#751600#2b3a63

--al-color-primary-900#1f0600#0e1834

--al-color-primary-alpha-100-10rgba(255, 222, 214, 0.1)rgba(233, 238, 252, 0.1)

--al-color-primary-alpha-100-30rgba(255, 222, 214, 0.3)rgba(233, 238, 252, 0.3)

--al-color-primary-alpha-100-60rgba(255, 222, 214, 0.6)rgba(233, 238, 252, 0.6)

--al-color-primary-alpha-100-80rgba(255, 222, 214, 0.8)rgba(233, 238, 252, 0.8)

--al-color-primary-alpha-500-10rgba(240, 87, 53, 0.1)rgba(46, 92, 230, 0.1)

--al-color-primary-alpha-500-30rgba(240, 87, 53, 0.3)rgba(46, 92, 230, 0.3)

--al-color-primary-alpha-500-60rgba(240, 87, 53, 0.6)rgba(46, 92, 230, 0.6)

--al-color-primary-alpha-500-80rgba(240, 87, 53, 0.8)rgba(46, 92, 230, 0.8)

--al-color-primary-alpha-900-10rgba(31, 6, 0, 0.1)rgba(14, 24, 52, 0.1)

--al-color-primary-alpha-900-30rgba(31, 6, 0, 0.3)rgba(14, 24, 52, 0.3)

--al-color-primary-alpha-900-60rgba(31, 6, 0, 0.6)rgba(14, 24, 52, 0.6)

--al-color-primary-alpha-900-80rgba(31, 6, 0, 0.8)rgba(14, 24, 52, 0.8)

--al-theme-border-radius2pxvar(--al-border-radius-6)

--al-theme-border-radius-lg4pxvar(--al-border-radius-12)

--al-theme-border-radius-md4pxvar(--al-border-radius-8)

--al-theme-border-radius-role-action999px—

--al-theme-border-radius-role-surface4px—

--al-theme-border-radius-xs2pxvar(--al-border-radius-4)

--al-theme-border-width-md4pxvar(--al-border-width-2)

--al-theme-box-shadow0px 0px 0px 0px rgba(0, 0, 0, 0)var(--al-box-shadow-raised)

--al-theme-box-shadow-lg0px 16px 16px 0px rgba(19, 19, 17, 0.6), 0px 8px 8px 0px rgba(19, 19, 17, 0.6), 0px 4px 4px 0px rgba(19, 19, 17, 0.6), 0px 2px 2px 0px rgba(19, 19, 17, 0.6)var(--al-box-shadow-overlay-lg)

--al-theme-box-shadow-md0px 4px 4px 0px rgba(19, 19, 17, 0.6), 0px 2px 2px 0px rgba(19, 19, 17, 0.6)var(--al-box-shadow-overlay)

--al-theme-box-shadow-sm0px 0px 0px 0px rgba(0, 0, 0, 0)var(--al-box-shadow-raised)

--al-theme-box-shadow-xs0px 0px 0px 0px rgba(0, 0, 0, 0)var(--al-box-shadow-raised)

--al-theme-color-background-neutral-bold#3c3c35var(--al-color-neutral-600)

--al-theme-color-background-neutral-default#181816var(--al-color-neutral-800)

--al-theme-color-background-neutral-strong#1d1d1avar(--al-color-neutral-700)

--al-theme-color-background-primary-default#2e5ce6var(--al-color-primary-400)

--al-theme-color-background-primary-strong#8ea6ffvar(--al-color-primary-400)

--al-theme-color-border-neutral-default#a5a399var(--al-color-neutral-700)

--al-theme-color-border-neutral-strong#3c3c35var(--al-color-neutral-500)

--al-theme-color-border-neutral-weak#a5a399var(--al-color-neutral-700)

--al-theme-color-border-primary-default#2e5ce6var(--al-color-primary-400)

--al-theme-color-content-neutral-default#ffffffvar(--al-color-neutral-200)

--al-theme-color-content-neutral-weak#7c7a70var(--al-color-neutral-400)

--al-theme-color-content-primary-default#2e5ce6var(--al-color-primary-300)

--al-theme-color-content-primary-strong#8ea6ffvar(--al-color-primary-400)

--al-theme-color-content-primary-weak#0e1834var(--al-color-primary-900)

--al-theme-color-shadow-defaultrgba(231, 229, 222, 0.3)var(--al-theme-color-shadow-dark)

--al-typography-preset-body-lg400 1.5rem/1.75rem IBM Plex Sans, sans-serif400 1.25rem/1.75rem Public Sans, sans-serif

--al-typography-preset-body-lg-bold700 1.5rem/1.75rem IBM Plex Sans, sans-serif700 1.25rem/1.75rem Public Sans, sans-serif

--al-typography-preset-body-lg-medium500 1.5rem/1.75rem IBM Plex Sans, sans-serif500 1.25rem/1.75rem Public Sans, sans-serif

--al-typography-preset-body-lg-semibold600 1.5rem/1.75rem IBM Plex Sans, sans-serif600 1.25rem/1.75rem Public Sans, sans-serif

--al-typography-preset-body-md400 1rem/1.25rem IBM Plex Sans, sans-serif400 1rem/1.5rem Public Sans, sans-serif

--al-typography-preset-body-md-bold700 1rem/1.25rem IBM Plex Sans, sans-serif700 1rem/1.5rem Public Sans, sans-serif

--al-typography-preset-body-md-medium500 1rem/1.25rem IBM Plex Sans, sans-serif500 1rem/1.5rem Public Sans, sans-serif

--al-typography-preset-body-md-semibold600 1rem/1.25rem IBM Plex Sans, sans-serif600 1rem/1.5rem Public Sans, sans-serif

--al-typography-preset-body-sm400 0.875rem/1.25rem IBM Plex Sans, sans-serif400 0.875rem/1.25rem Public Sans, sans-serif

--al-typography-preset-body-sm-bold700 0.875rem/1.25rem IBM Plex Sans, sans-serif700 0.875rem/1.25rem Public Sans, sans-serif

--al-typography-preset-body-sm-medium500 0.875rem/1.25rem IBM Plex Sans, sans-serif500 0.875rem/1.25rem Public Sans, sans-serif

--al-typography-preset-body-sm-semibold600 0.875rem/1.25rem IBM Plex Sans, sans-serif600 0.875rem/1.25rem Public Sans, sans-serif

--al-typography-preset-body-xs400 0.75rem/1rem IBM Plex Sans, sans-serif400 0.75rem/1.25rem Public Sans, sans-serif

--al-typography-preset-body-xs-bold700 0.75rem/1rem IBM Plex Sans, sans-serif700 0.75rem/1.25rem Public Sans, sans-serif

--al-typography-preset-body-xs-medium500 0.75rem/1rem IBM Plex Sans, sans-serif500 0.75rem/1.25rem Public Sans, sans-serif

--al-typography-preset-body-xs-semibold600 0.75rem/1rem IBM Plex Sans, sans-serif600 0.75rem/1.25rem Public Sans, sans-serif

--al-typography-preset-display-lg400 7rem/6.875rem Agrandir, sans-serif400 3rem/3.25rem Public Sans, sans-serif

--al-typography-preset-display-lg-bold700 7rem/6.875rem Agrandir, sans-serif700 3rem/3.25rem Public Sans, sans-serif

--al-typography-preset-display-lg-medium500 7rem/6.875rem Agrandir, sans-serif500 3rem/3.25rem Public Sans, sans-serif

--al-typography-preset-display-lg-semibold600 7rem/6.875rem Agrandir, sans-serif600 3rem/3.25rem Public Sans, sans-serif

--al-typography-preset-display-md400 4.5rem/4.5rem Agrandir, sans-serif400 2.25rem/2.75rem Public Sans, sans-serif

--al-typography-preset-display-md-bold700 4.5rem/4.5rem Agrandir, sans-serif700 2.25rem/2.75rem Public Sans, sans-serif

--al-typography-preset-display-md-medium500 4.5rem/4.5rem Agrandir, sans-serif500 2.25rem/2.75rem Public Sans, sans-serif

--al-typography-preset-display-md-semibold600 4.5rem/4.5rem Agrandir, sans-serif600 2.25rem/2.75rem Public Sans, sans-serif

--al-typography-preset-display-sm400 3.5rem/3.75rem Agrandir, sans-serif400 2rem/2.5rem Public Sans, sans-serif

--al-typography-preset-display-sm-bold700 3.5rem/3.75rem Agrandir, sans-serif700 2rem/2.5rem Public Sans, sans-serif

--al-typography-preset-display-sm-medium500 3.5rem/3.75rem Agrandir, sans-serif500 2rem/2.5rem Public Sans, sans-serif

--al-typography-preset-display-sm-semibold600 3.5rem/3.75rem Agrandir, sans-serif600 2rem/2.5rem Public Sans, sans-serif

--al-typography-preset-heading-lg400 3rem/3.25rem Agrandir, sans-serif400 1.75rem/2.25rem Public Sans, sans-serif

--al-typography-preset-heading-lg-bold700 3rem/3.25rem Agrandir, sans-serif700 1.75rem/2.25rem Public Sans, sans-serif

--al-typography-preset-heading-lg-medium500 3rem/3.25rem Agrandir, sans-serif500 1.75rem/2.25rem Public Sans, sans-serif

--al-typography-preset-heading-lg-semibold600 3rem/3.25rem Agrandir, sans-serif600 1.75rem/2.25rem Public Sans, sans-serif

--al-typography-preset-heading-md400 2rem/2.25rem Agrandir, sans-serif400 1.5rem/2rem Public Sans, sans-serif

--al-typography-preset-heading-md-bold700 2rem/2.25rem Agrandir, sans-serif700 1.5rem/2rem Public Sans, sans-serif

--al-typography-preset-heading-md-medium500 2rem/2.25rem Agrandir, sans-serif500 1.5rem/2rem Public Sans, sans-serif

--al-typography-preset-heading-md-semibold600 2rem/2.25rem Agrandir, sans-serif600 1.5rem/2rem Public Sans, sans-serif

--al-typography-preset-heading-sm400 1.5rem/1.75rem IBM Plex Sans, sans-serif400 1.25rem/1.75rem Public Sans, sans-serif

--al-typography-preset-heading-sm-bold700 1.5rem/1.75rem IBM Plex Sans, sans-serif700 1.25rem/1.75rem Public Sans, sans-serif

--al-typography-preset-heading-sm-medium500 1.5rem/1.75rem IBM Plex Sans, sans-serif500 1.25rem/1.75rem Public Sans, sans-serif

--al-typography-preset-heading-sm-semibold600 1.5rem/1.75rem IBM Plex Sans, sans-serif600 1.25rem/1.75rem Public Sans, sans-serif

COLOR — 11 RAMPSCLICK A SWATCH TO COPY ITS HEX

primary--al-color-primary-*

secondary--al-color-secondary-*

tertiary--al-color-tertiary-*

neutral--al-color-neutral-*

danger--al-color-danger-*

warning--al-color-warning-*

success--al-color-success-*

info--al-color-info-*

transparent--al-color-transparent-*

neutral dark--al-color-neutral-dark-*

neutral light--al-color-neutral-light-*

TYPOGRAPHY — 80 PRESETSIBM PLEX SANS

display-lg400 3rem/3.25rem Public SansDesign at southleft

display-lg-bold700 3rem/3.25rem Public SansDesign at southleft

display-lg-medium500 3rem/3.25rem Public SansDesign at southleft

display-lg-semibold600 3rem/3.25rem Public SansDesign at southleft

display-md400 2.25rem/2.75rem Public SansDesign at southleft

display-md-bold700 2.25rem/2.75rem Public SansDesign at southleft

display-md-medium500 2.25rem/2.75rem Public SansDesign at southleft

display-md-semibold600 2.25rem/2.75rem Public SansDesign at southleft

display-sm400 2rem/2.5rem Public SansDesign at southleft

display-sm-bold700 2rem/2.5rem Public SansDesign at southleft

display-sm-medium500 2rem/2.5rem Public SansDesign at southleft

display-sm-semibold600 2rem/2.5rem Public SansDesign at southleft

heading-lg400 1.75rem/2.25rem Public SansDesign at southleft

heading-lg-bold700 1.75rem/2.25rem Public SansDesign at southleft

heading-lg-medium500 1.75rem/2.25rem Public SansDesign at southleft

heading-lg-semibold600 1.75rem/2.25rem Public SansDesign at southleft

heading-md400 1.5rem/2rem Public SansDesign at southleft

heading-md-bold700 1.5rem/2rem Public SansDesign at southleft

heading-md-medium500 1.5rem/2rem Public SansDesign at southleft

heading-md-semibold600 1.5rem/2rem Public SansDesign at southleft

body-lg400 1.25rem/1.75rem Public SansDesign at southleft

body-lg-bold700 1.25rem/1.75rem Public SansDesign at southleft

body-lg-medium500 1.25rem/1.75rem Public SansDesign at southleft

body-lg-semibold600 1.25rem/1.75rem Public SansDesign at southleft

heading-sm400 1.25rem/1.75rem Public SansDesign at southleft

heading-sm-bold700 1.25rem/1.75rem Public SansDesign at southleft

heading-sm-medium500 1.25rem/1.75rem Public SansDesign at southleft

heading-sm-semibold600 1.25rem/1.75rem Public SansDesign at southleft

body-md400 1rem/1.5rem Public SansDesign at southleft

body-md-bold700 1rem/1.5rem Public SansDesign at southleft

body-md-medium500 1rem/1.5rem Public SansDesign at southleft

body-md-semibold600 1rem/1.5rem Public SansDesign at southleft

body-sm400 0.875rem/1.25rem Public SansDesign at southleft

body-sm-bold700 0.875rem/1.25rem Public SansDesign at southleft

body-sm-medium500 0.875rem/1.25rem Public SansDesign at southleft

body-sm-semibold600 0.875rem/1.25rem Public SansDesign at southleft

body-xs400 0.75rem/1.25rem Public SansDesign at southleft

body-xs-bold700 0.75rem/1.25rem Public SansDesign at southleft

body-xs-medium500 0.75rem/1.25rem Public SansDesign at southleft

body-xs-semibold600 0.75rem/1.25rem Public SansDesign at southleft

body-lg-bold-letter-spacing0.01emDesign at southleft

body-lg-letter-spacingnormalDesign at southleft

body-lg-medium-letter-spacingnormalDesign at southleft

body-lg-semibold-letter-spacing0.01emDesign at southleft

body-md-bold-letter-spacing0.01emDesign at southleft

body-md-letter-spacingnormalDesign at southleft

body-md-medium-letter-spacingnormalDesign at southleft

body-md-semibold-letter-spacing0.01emDesign at southleft

body-sm-bold-letter-spacing0.01emDesign at southleft

body-sm-letter-spacingnormalDesign at southleft

body-sm-medium-letter-spacingnormalDesign at southleft

body-sm-semibold-letter-spacing0.01emDesign at southleft

body-xs-bold-letter-spacing0.01emDesign at southleft

body-xs-letter-spacingnormalDesign at southleft

body-xs-medium-letter-spacingnormalDesign at southleft

body-xs-semibold-letter-spacing0.01emDesign at southleft

display-lg-bold-letter-spacing0.01emDesign at southleft

display-lg-letter-spacingnormalDesign at southleft

display-lg-medium-letter-spacingnormalDesign at southleft

display-lg-semibold-letter-spacing0.01emDesign at southleft

display-md-bold-letter-spacing0.01emDesign at southleft

display-md-letter-spacingnormalDesign at southleft

display-md-medium-letter-spacingnormalDesign at southleft

display-md-semibold-letter-spacing0.01emDesign at southleft

display-sm-bold-letter-spacing0.01emDesign at southleft

display-sm-letter-spacingnormalDesign at southleft

display-sm-medium-letter-spacingnormalDesign at southleft

display-sm-semibold-letter-spacing0.01emDesign at southleft

heading-lg-bold-letter-spacing0.01emDesign at southleft

heading-lg-letter-spacingnormalDesign at southleft

heading-lg-medium-letter-spacingnormalDesign at southleft

heading-lg-semibold-letter-spacing0.01emDesign at southleft

heading-md-bold-letter-spacing0.01emDesign at southleft

heading-md-letter-spacingnormalDesign at southleft

heading-md-medium-letter-spacingnormalDesign at southleft

heading-md-semibold-letter-spacing0.01emDesign at southleft

heading-sm-bold-letter-spacing0.01emDesign at southleft

heading-sm-letter-spacingnormalDesign at southleft

heading-sm-medium-letter-spacingnormalDesign at southleft

heading-sm-semibold-letter-spacing0.01emDesign at southleft

SPACING — 11 STEPS8PX BASE

xxxs2px

xxs4px

xs8px

sm12px

(base)16px

md20px

lg24px

xl28px

xxl32px

xxxl36px

super64px

RADIUS10

0 · 0px

2 · 2px

4 · 4px

6 · 6px

8 · 8px

12 · 12px

16 · 16px

24 · 24px

pill · 999px

round · 50%

ELEVATION13

hard-2

hard-4

none

raised

overlay

overlay-lg

overlay-xl

BORDER WIDTH3

1 · 1px

2 · 2px

4 · 4px

OPACITY5

0 · 0

24 · 0.24

40 · 0.4

80 · 0.8

100 · 1

BREAKPOINTS6

STEPVALUE

xs320px

sm480px

md768px

lg1024px

xl1260px

xxl1440px

LAYOUT WIDTHS0

STEPVALUE

Z-INDEX8

STEPVALUE

bottom-100

100100

200200

300300

400400

500500

top99999