funCenter
UserName
Colors
Figma Design System
Main
white
black
Gray (Figma scale)
gray-50
gray-100
gray-200
gray-500
gray-600
gray-700
gray-900
Brand
brand-200
brand-500
brand-700
brand-900
Accent
accent-200
accent-500
accent-700
accent-900
Danger
danger-200
danger-500
danger-700
Success
success-200
success-500
success-700
Warning
warning-100
warning-200
warning-500
warning-700
warning-900
Buttons
primary
primary-gradient
primary-disabled
secondary
secondary-border
secondary-hover
secondary-focus
tertiary
tertiary-gradient
link
link-hover
link-pressed
Legacy
Legacy aliases kept for SCSS back-compat. Prefer Figma tokens above in new code.
Semantic
error
disabled
valid
neutral
White
white-1
white-2
Dark
dark-1
dark-2
dark-3
dark-4
dark-5
dark-6
dark-7
Red
red-1
red-2
red-3
red-4
red-5
red-6
Purple
purple-1
purple-2
Blue
blue-1
blue-2
blue-3
blue-4
blue-5
Gray (legacy scale)
gray-1
gray-2
gray-3
gray-4
gray-5
gray-6
gray-7
gray-8
gray-9
gray-10
Green
green-1
green-2
green-3
green-4
green-5
green-6
green-7
Yellow
yellow-1
yellow-2
yellow-3
yellow-4
yellow-5
yellow-6
yellow-7
Orange
orange-1
orange-2
orange-3
orange-4
orange-5
Turquoise
turquoise-1
White-opacity
white-opacity-1
white-1-opacity-1
white-opacity-2
white-opacity-3
white-opacity-4
Black-opacity
black-opacity-1
black-opacity-2
black-opacity-3
black-opacity-4
black-opacity-5
black-opacity-6
black-opacity-7
Gray-opacity
gray-opacity-1
gray-opacity-2
gray-opacity-3
gray-opacity-4
gray-opacity-5
Secondary-opacity
secondary-opacity-1
Dark-opacity
dark-opacity-1
dark-opacity-2
Yellow-opacity
yellow-opacity-1
yellow-opacity-2
Buttons
Figma design system. Pair a style class (.btn-primary, .btn-secondary,.btn-tertiary, .btn-links) with a size class (.btn-size-4xs through .btn-size-3xl).
Styles x Sizes
Primary
Secondary
Tertiary
Links
States
Hover / press / tab-focus the buttons below to see each state.
Primary
Secondary
Tertiary
Links
Icon-only buttons
Button Width
Forms - work in progress
Primary (animated label)
Helper text
Helper text
Primary (no label animation)
Password (show/hide)
show
show
show
Helper text
show
Other
+40
+40
Invalid phone number
+40
+40
+40
Select
Option 1
Option 1
Selectează o perioadă validă
Astăzi
Phone or Email
Typography - work in progress
Section title
Modals - work in progress
Modals
Accordion - work in progress
Accordion
Cards - work in progress
Cards