v1.6

Tokens CSS custom properties (variables) for reuse and simple theme-ability.

CSS Source
Sizes / Spacing
Category Token Info/Value
base
--prs-size
Value renders to: 4px
.25rem
scale
--prs-size-0
Value renders to: 0px
0px
 
--prs-size-0-5
Value renders to: 2px
calc(var(--prs-size) * 0.5)
 
--prs-size-1
Value renders to: 4px
var(--prs-size)
 
--prs-size-1-5
Value renders to: 6px
calc(var(--prs-size) * 1.5)
 
--prs-size-2
Value renders to: 8px
calc(var(--prs-size) * 2)
 
--prs-size-2-5
Value renders to: 10px
calc(var(--prs-size) * 2.5)
 
--prs-size-3
Value renders to: 12px
calc(var(--prs-size) * 3)
 
--prs-size-3-5
Value renders to: 14px
calc(var(--prs-size) * 3.5)
 
--prs-size-4
Value renders to: 16px
calc(var(--prs-size) * 4)
 
--prs-size-5
Value renders to: 20px
calc(var(--prs-size) * 5)
 
--prs-size-6
Value renders to: 24px
calc(var(--prs-size) * 6)
 
--prs-size-7
Value renders to: 28px
calc(var(--prs-size) * 7)
 
--prs-size-8
Value renders to: 32px
calc(var(--prs-size) * 8)
 
--prs-size-9
Value renders to: 36px
calc(var(--prs-size) * 9)
 
--prs-size-10
Value renders to: 40px
calc(var(--prs-size) * 10)
 
--prs-size-11
Value renders to: 44px
calc(var(--prs-size) * 11)
 
--prs-size-12
Value renders to: 48px
calc(var(--prs-size) * 12)
 
--prs-size-14
Value renders to: 56px
calc(var(--prs-size) * 14)
 
--prs-size-16
Value renders to: 64px
calc(var(--prs-size) * 16)
 
--prs-size-18
Value renders to: 72px
calc(var(--prs-size) * 18)
 
--prs-size-20
Value renders to: 80px
calc(var(--prs-size) * 20)
 
--prs-size-24
Value renders to: 96px
calc(var(--prs-size) * 24)
 
--prs-size-28
Value renders to: 112px
calc(var(--prs-size) * 28)
 
--prs-size-32
Value renders to: 128px
calc(var(--prs-size) * 32)
 
--prs-size-36
Value renders to: 144px
calc(var(--prs-size) * 36)
 
--prs-size-40
Value renders to: 160px
calc(var(--prs-size) * 40)
 
--prs-size-44
Value renders to: 176px
calc(var(--prs-size) * 44)
 
--prs-size-48
Value renders to: 192px
calc(var(--prs-size) * 48)
 
--prs-size-52
Value renders to: 208px
calc(var(--prs-size) * 52)
 
--prs-size-56
Value renders to: 224px
calc(var(--prs-size) * 56)
 
--prs-size-60
Value renders to: 240px
calc(var(--prs-size) * 60)
 
--prs-size-64
Value renders to: 256px
calc(var(--prs-size) * 64)
 
--prs-size-72
Value renders to: 288px
calc(var(--prs-size) * 72)
 
--prs-size-80
Value renders to: 320px
calc(var(--prs-size) * 80)
 
--prs-size-96
Value renders to: 384px
calc(var(--prs-size) * 96)
px
--prs-size-px-1
Static value
1px
 
--prs-size-px-2
Static value
2px
 
--prs-size-px-3
Static value
3px
 
--prs-size-px-4
Static value
4px
fluid
--prs-size-fluid-1
Value renders to: ~8px to 16px
clamp(calc(var(--prs-size) * 2), 1vw, calc(var(--prs-size) * 4))
 
--prs-size-fluid-2
Value renders to: ~16px to 24px
clamp(calc(var(--prs-size) * 4), 2vw, calc(var(--prs-size) * 6))
 
--prs-size-fluid-3
Value renders to: ~24px to 32px
clamp(calc(var(--prs-size) * 6), 3vw, calc(var(--prs-size) * 8))
 
--prs-size-fluid-4
Value renders to: ~32px to 48px
clamp(calc(var(--prs-size) * 8), 4vw, calc(var(--prs-size) * 12))
 
--prs-size-fluid-5
Value renders to: ~64px to 80px
clamp(calc(var(--prs-size) * 16), 5vw, calc(var(--prs-size) * 20))
 
--prs-size-fluid-6
Value renders to: ~80px to 120px
clamp(calc(var(--prs-size) * 20), 7vw, calc(var(--prs-size) * 30))
 
--prs-size-fluid-7
Value renders to: ~120px to 160px
clamp(calc(var(--prs-size) * 30), 10vw, calc(var(--prs-size) * 40))
 
--prs-size-fluid-8
Value renders to: ~160px to 240px
clamp(calc(var(--prs-size) * 40), 20vw, calc(var(--prs-size) * 60))
 
--prs-size-fluid-9
Value renders to: ~240px to 320px
clamp(calc(var(--prs-size) * 60), 30vw, calc(var(--prs-size) * 80))
 
--prs-size-fluid-10
Value renders to: ~320px to 480px
clamp(calc(var(--prs-size) * 80), 40vw, calc(var(--prs-size) * 120))
container
--prs-size-xxs
Static value
240px
 
--prs-size-xs
Static value
360px
 
--prs-size-sm
Static value
480px
 
--prs-size-md
Static value
768px
 
--prs-size-lg
Static value
1024px
 
--prs-size-xl
Static value
1440px
 
--prs-size-xxl
Static value
1920px
Colors
Category Token Info/Value
Neutral
--prs-c-black
#000000
 
--prs-c-white
#FFFFFF
primary
--prs-c-primary-50
#F6F0FC
 
--prs-c-primary-100
#EADFF7
 
--prs-c-primary-200
#CAB2ED
 
--prs-c-primary-300
#A387E0
 
--prs-c-primary-400
#573DCC
 
--prs-c-primary-500
#0600B4
 
--prs-c-primary
var(--prs-c-primary-500)
 
--prs-c-primary-600
#0500A3
 
--prs-c-primary-700
#050087
 
--prs-c-primary-800
#04006E
 
--prs-c-primary-900
#010052
 
--prs-c-primary-950
#010036
secondary
--prs-c-secondary-50
#FFF5FC
 
--prs-c-secondary-100
#FFEBF9
 
--prs-c-secondary-200
#FFC9EC
 
--prs-c-secondary-300
#FFA8DC
 
--prs-c-secondary-400
#FF69B6
 
--prs-c-secondary-500
#FF2986
 
--prs-c-secondary
var(--prs-c-secondary-500)
 
--prs-c-secondary-600
#E62072
 
--prs-c-secondary-700
#BF1757
 
--prs-c-secondary-800
#990F3F
 
--prs-c-secondary-900
#73082A
 
--prs-c-secondary-950
#4A0418
accent
--prs-c-accent-50
#FAEDF9
 
--prs-c-accent-100
#F5DCF2
 
--prs-c-accent-200
#E8AEE0
 
--prs-c-accent-300
#DB84D0
 
--prs-c-accent-400
#BF3BA9
 
--prs-c-accent-500
#A30283
 
--prs-c-accent
var(--prs-c-accent-500)
 
--prs-c-accent-600
#940172
 
--prs-c-accent-700
#7A0156
 
--prs-c-accent-800
#61013E
 
--prs-c-accent-900
#4A002B
 
--prs-c-accent-950
#300019
gray
--prs-c-gray-50
#FAFAFA
 
--prs-c-gray-100
#F1F0F1
 
--prs-c-gray-200
#E0DFE0
 
--prs-c-gray-300
#CBCACC
 
--prs-c-gray-400
#A5A4A7
 
--prs-c-gray-500
#807F82
 
--prs-c-gray
var(--prs-c-gray-500)
 
--prs-c-gray-600
#69686F
 
--prs-c-gray-700
#494751
 
--prs-c-gray-800
#31303B
 
--prs-c-gray-900
#1D1B26
 
--prs-c-gray-950
#0E0D16
info
--prs-c-info-50
#F9FCFF
 
--prs-c-info-100
#E4F3FF
 
--prs-c-info-200
#C6E7FF
 
--prs-c-info-300
#A1D9FF
 
--prs-c-info-400
#72CBFF
 
--prs-c-info-500
#00BCFF
 
--prs-c-info
var(--prs-c-info-500)
 
--prs-c-info-600
#00A8E4
 
--prs-c-info-700
#0092C6
 
--prs-c-info-800
#0077A1
 
--prs-c-info-900
#005472
 
--prs-c-info-950
#002A39
warning
--prs-c-warning-50
#FEFFF9
 
--prs-c-warning-100
#F9FFE4
 
--prs-c-warning-200
#F3FFC6
 
--prs-c-warning-300
#EDFFA1
 
--prs-c-warning-400
#E7FF72
 
--prs-c-warning-500
#E1FF00
 
--prs-c-warning
var(--prs-c-warning-500)
 
--prs-c-warning-600
#C9E400
 
--prs-c-warning-700
#AEC600
 
--prs-c-warning-800
#8EA100
 
--prs-c-warning-900
#657200
 
--prs-c-warning-950
#323900
success
--prs-c-success-50
#F9FEFB
 
--prs-c-success-100
#E4FCF0
 
--prs-c-success-200
#C6F9E0
 
--prs-c-success-300
#A1F6CF
 
--prs-c-success-400
#72F3BD
 
--prs-c-success-500
#00F0A8
 
--prs-c-success
var(--prs-c-success-500)
 
--prs-c-success-600
#00D796
 
--prs-c-success-700
#00BA82
 
--prs-c-success-800
#00986A
 
--prs-c-success-900
#006B4B
 
--prs-c-success-950
#003626
danger
--prs-c-danger-50
#FEF9F9
 
--prs-c-danger-100
#F9E5E8
 
--prs-c-danger-200
#F3C7CE
 
--prs-c-danger-300
#EDA3B1
 
--prs-c-danger-400
#E7768D
 
--prs-c-danger-500
#E0205D
 
--prs-c-danger
var(--prs-c-danger-500)
 
--prs-c-danger-600
#C81D53
 
--prs-c-danger-700
#AE1948
 
--prs-c-danger-800
#8E143B
 
--prs-c-danger-900
#640E2A
 
--prs-c-danger-950
#320715
Typography
Category Token Info/Value
Font Family
--prs-ff-sans
'Figtree', ui-sans-serif, system-ui, -apple-system, 'system-ui', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
 
--prs-ff-serif
'Literata', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif
 
--prs-ff-mono
'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace
 
--prs-ff-websafe
Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
Base
--prs-fw-base
Font weight.
normal
 
--prs-fz-base
Font size.
16px
 
--prs-fl-base
Line-height (unitless).
1.5
Heading
--prs-fw-heading-xl
Font weight.
600
 
--prs-fz-heading-xl
Font size.
2rem
 
--prs-fl-heading-xl
Leading/line height.
1.5
 
--prs-fw-heading-lg
Font weight.
600
 
--prs-fz-heading-lg
Font size.
1.5rem
 
--prs-fl-heading-lg
Leading/line height.
1.33
 
--prs-fw-heading-md
Font weight.
600
 
--prs-fz-heading-md
Font size.
1.125rem
 
--prs-fl-heading-md
Leading/line height.
1.33
 
--prs-fw-heading-sm
Font weight.
600
 
--prs-fz-heading-sm
Font size.
1rem
 
--prs-fl-heading-sm
Leading/line height.
1.25
Content
--prs-fw-content
Font weight.
normal
 
--prs-fz-content
Font size.
1.0625rem
 
--prs-fl-content
Leading/line height.
1.59
 
--prs-fw-content-footnote
Font weight.
normal
 
--prs-fz-content-footnote
Font size.
0.8125rem
 
--prs-fl-content-footnote
Leading/line height.
1.54
Ui
--prs-fw-ui-lg
Font weight.
normal
 
--prs-fz-ui-lg
Font size.
1.125rem
 
--prs-fl-ui-lg
Leading/line height.
1.33
 
--prs-fw-ui-md
Font weight.
normal
 
--prs-fz-ui-md
Font size.
1rem
 
--prs-fl-ui-md
Leading/line height.
1.5
 
--prs-fw-ui-sm
Font weight.
normal
 
--prs-fz-ui-sm
Font size.
0.875rem
 
--prs-fl-ui-sm
Leading/line height.
1.375
 
--prs-fw-ui-subtext
Font weight.
normal
 
--prs-fz-ui-subtext
Font size.
0.8125rem
 
--prs-fl-ui-subtext
Leading/line height.
1.38
Button
--prs-fw-button-lg
Font weight.
600
 
--prs-fz-button-lg
Font size.
1.125rem
 
--prs-fl-button-lg
Leading/line height.
1.3333333333
 
--prs-fw-button-md
Font weight.
600
 
--prs-fz-button-md
Font size.
1rem
 
--prs-fl-button-md
Leading/line height.
1.375
 
--prs-fw-button-sm
Font weight.
600
 
--prs-fz-button-sm
Font size.
0.75rem
 
--prs-fl-button-sm
Leading/line height.
1.5
Utilities
Category Token Info/Value
border
--prs-border-btn
Border width used for buttons and other interactive elements.
1px
input
--prs-input-size
Default internal spacing (padding) for input fields and form controls.
0.25rem
cal
--prs-cal-width
Width of the calendar popover/container.
15.875rem
 
--prs-cal-radius
Default border radius for the calendar container.
0.25rem
 
--prs-cal-day-radius
Border radius applied to individual day cells in the calendar.
0.3125rem
 
--prs-cal-day-selected
Background color used for the currently selected day.
var(--prs-c-primary)
dialog
--prs-dialog-backdrop
Backdrop overlay style applied behind modal dialogs (box-shadow).
0 0 0 / 0.5
radius
--prs-radius-alert
Border radius for alert and notification boxes.
0.25rem
 
--prs-radius-badge
Border radius for badge components (typically pill-shaped).
1.9rem
 
--prs-radius-box
Border radius for cards, containers, and larger boxes.
0.75rem
 
--prs-radius-btn
Border radius for buttons.
0.1875rem
 
--prs-radius-input
Border radius for input fields (sharp corners).
0
shadow
--prs-shadow-sm
Small shadow for subtle elevation (used on cards, buttons, etc.).
0 1px 2px 0 rgba(0, 0, 0, 0.05)
 
--prs-shadow-md
Medium shadow for standard card elevation.
0 1px 3px 0 rgba(0, 0, 0, 0.1),
0 1px 2px -1px rgba(0, 0, 0, 0.1)
 
--prs-shadow-lg
Large shadow for floating elements and modals.
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05)
 
--prs-shadow-xl
Extra large shadow for prominent overlays.
0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04)
 
--prs-shadow-2xl
Very large shadow for major modals and dropdowns.
0 25px 50px -12px rgba(0, 0, 0, 0.25),
0 15px 20px -5px rgba(0, 0, 0, 0.1)
transition
--prs-transition-property
CSS properties that should transition by default.
backdrop-filter, background-color, border-color, box-shadow, color, content-visibility, display, fill, filter, opacity, outline-color, overlay, pointer-events, rotate, scale, stroke, text-decoration-color, transform, translate, -webkit-backdrop-filter
 
--prs-transition-timing
Default easing curve for transitions (Tailwind-like).
cubic-bezier(0.4, 0, 0.2, 1)
 
--prs-transition-duration
Default transition duration for smooth interactive feedback.
150ms

No results...