urbanflow components
Tokens from @urbanflow/theme, icons from @urbanflow/icons.
Colours
neutral
neutral-0#ffffff
neutral-1#fdfdfd
neutral-2#fafafa
neutral-3#f7f7f7
neutral-10#e3e3e3
neutral-20#cccccc
neutral-30#b5b5b5
neutral-80#616161
neutral-90#4a4a4a
neutral-100#303030
neutral-120#1a1a1a
info
info-xxxlight#fcfdff
info-xxlight#e2e7ff
info-xlight#d5dcff
info-light#c5d0ff
info-primary#005bd3
info-heavy#004299
info-xheavy#002e6a
success
success-xxxlight#f8fffb
success-xxlight#cdfee1
success-light#29845a
success-primary#136f45
success-heavy#0c5132
success-xxheavy#092a1b
caution
caution-xxlight#fff1e3
caution-light#ffbd14
caution-primary#e6aa12
caution-heavy#332e00
caution-xheavy#1f1c00
critical
critical-xxxlight#fffbfb
critical-light#fee9e8
critical-primary#e51c00
critical-heavy#8e1f0b
critical-xxheavy#5f1507
critical-xxxheavy#2f0a04
magic
magic-xxxlight#fdfdff
magic-primary#7126ff
magic-heavy#5700d1
misc
misc-red#ff383c
misc-orange#ff8d28
misc-yellow#ffcc00
misc-green#34c759
misc-cyan#00c0e8
misc-indigo#cb30e0
misc-pink#ff2d55
misc-brown#ac7f5e
content
content-primary#1a1a1a
content-secondary#4a4a4a
content-tertiary#b5b5b5
content-placeholder#cccccc
content-disabled#cccccc
content-inverse-primary#ffffff
content-inverse-secondary#f7f7f7
content-inverse-disabled#ffffff
content-link-primary#005bd3
content-link-secondary#004299
content-success-primary#29845a
content-caution-primary#ffbd14
content-caution-secondary#e6aa12
content-critical-primary#8e1f0b
content-critical-secondary#5f1507
surface
surface-default#ffffff
surface-light#f7f7f7
surface-medium#efefef
surface-inverse#1a1a1a
surface-overlay#00000066
surface-info#e2e7ff
surface-critical#fee9e8
surface-success#cdfee1
surface-caution#fff1e3
stroke
stroke-xlight#f7f7f7
stroke-light#e3e3e3
stroke-medium#b5b5b5
stroke-info#005bd3
stroke-critical#8e1f0b
stroke-subtle#ecece6
stroke-default#e3e3dc
stroke-strong#d1d1ca
stroke-selected#202020cc
shadcn
backgroundvar(--background)
foregroundvar(--foreground)
cardvar(--card)
card-foregroundvar(--card-foreground)
popovervar(--popover)
popover-foregroundvar(--popover-foreground)
primaryvar(--primary)
primary-foregroundvar(--primary-foreground)
secondaryvar(--secondary)
secondary-foregroundvar(--secondary-foreground)
mutedvar(--muted)
muted-foregroundvar(--muted-foreground)
accentvar(--accent)
accent-foregroundvar(--accent-foreground)
destructivevar(--destructive)
bordervar(--border)
inputvar(--input)
ringvar(--ring)
chart-1var(--chart-1)
chart-2var(--chart-2)
chart-3var(--chart-3)
chart-4var(--chart-4)
chart-5var(--chart-5)
sidebarvar(--sidebar)
sidebar-foregroundvar(--sidebar-foreground)
sidebar-primaryvar(--sidebar-primary)
sidebar-primary-foregroundvar(--sidebar-primary-foreground)
sidebar-accentvar(--sidebar-accent)
sidebar-accent-foregroundvar(--sidebar-accent-foreground)
sidebar-bordervar(--sidebar-border)
sidebar-ringvar(--sidebar-ring)
Typography
text-header-xxlarge · 2remUrban flow across the city
text-header-xlarge · 1.75remUrban flow across the city
text-header-large · 1.5remUrban flow across the city
text-header-medium · 1.25remUrban flow across the city
text-header-small · 1remUrban flow across the city
text-header-xsmall · 0.875remUrban flow across the city
text-header-xxsmall · 0.75remUrban flow across the city
text-paragraph-large · 1.125remUrban flow across the city
text-paragraph-medium · 1remUrban flow across the city
text-paragraph-small · 0.875remUrban flow across the city
text-paragraph-xsmall · 0.75remUrban flow across the city
text-label-large · 1.125remUrban flow across the city
text-label-medium · 1remUrban flow across the city
text-label-xsmall · 0.75remUrban flow across the city
text-metric-large · 1.75rem1,284.50
text-metric-medium · 1.5rem1,284.50
text-metric-small · 1.125rem1,284.50
text-metric-xsmall · 1rem1,284.50
Shadows & radius
shadow-xs
shadow-sm
shadow-md
rounded-sm
rounded-md
rounded-lg
rounded-xl
Icons (6)
Ai
AlertTriangle
Analytics
ArrowDown
ArrowLeft
ArrowRight