mémoire
42 tokens 18 components 6 layouts
Primitives / Gray
gray-50
#fafaf9
gray-100
#f5f5f4
gray-200
#e7e5e4
gray-300
#d6d3d1
gray-400
#a8a29e
gray-500
#78716c
gray-600
#57534e
gray-700
#44403c
gray-800
#292524
gray-900
#1c1917
Primitives / Blue
blue-50
#eff6ff
blue-100
#dbeafe
blue-300
#93c5fd
blue-500
#3b82f6
blue-600
#2563eb
blue-700
#1d4ed8
Primitives / Green
green-50
#f0fdf4
green-200
#bbf7d0
green-400
#4ade80
green-600
#16a34a
green-700
#15803d
Primitives / Amber
amber-50
#fffbeb
amber-200
#fde68a
amber-500
#f59e0b
amber-600
#ca8a04
Primitives / Red
red-50
#fef2f2
red-200
#fecaca
red-400
#f87171
red-600
#dc2626
Font Families
font-mono'JetBrains Mono', 'SF Mono', monospace
font-serif'Cormorant Garamond', Georgia, serif
font-sans-apple-system, BlinkMacSystemFont, system-ui
Font Sizes
text-xs10px / 0.625rem
text-sm11px / 0.6875rem
text-base12px / 0.75rem
text-md13px / 0.8125rem
text-lg16px / 1rem
text-xl18px / 1.125rem
text-2xl24px / 1.5rem
text-3xl28px / 1.75rem
Font Weights
weight-light300
weight-regular400
weight-medium500
weight-semibold600
Spacing Scale
space-12px
space-24px
space-38px
space-412px
space-516px
space-620px
space-724px
space-832px
space-940px
space-1048px
Border Radius
radius-none0px
radius-sm2px
radius-md4px
radius-lg8px
radius-full9999px
Box Shadows
shadow-sm0 1px 2px rgba(0,0,0,0.04)
shadow-md0 2px 8px rgba(0,0,0,0.06)
shadow-lg0 4px 16px rgba(0,0,0,0.08)
Surface Tokens
surface-default#fafaf9
surface-cardrgba(255,255,255,0.65)
surface-hoverrgba(0,0,0,0.03)
surface-activergba(0,0,0,0.05)
surface-mutedrgba(0,0,0,0.02)
Interactive States
foreground#0a0a0a
foreground-muted#8a8a8a
foreground-dim#b0b0b0
border-defaultrgba(0,0,0,0.08)
border-hoverrgba(0,0,0,0.15)
focus-ring0 0 0 2px #2563eb
Feedback Colors
success
#16a34a
warning
#ca8a04
error
#dc2626
info
#2563eb
Feedback Backgrounds
success-bg
rgba(22,163,74,0.08)
warning-bg
rgba(202,138,4,0.08)
error-bg
rgba(220,38,38,0.08)
info-bg
rgba(37,99,235,0.08)
Buttons
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales felis at sem gravida.
Submit Cancel
Button
Lorem ipsum dolor sit amet, adipiscing elit. Praesent vel augue non libero.
atom4 variants
Small Default Large
ButtonGroup
Donec dignissim nulla vel lorem iaculis, nec tristique velit vulputate.
molecule3 sizes
Create
IconButton
Pellentesque habitant morbi tristique senectus et netus et malesuada.
atom2 variants
Inputs
Fusce vehicula sapien at nisi aliquam, vitae finibus orci tincidunt placerat.
Label
TextInput
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.
atom3 states
Lorem ipsum...
SearchBar
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit.
molecule2 variants
Select
Lorem ipsum
Select
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis.
atom2 states
Lorem ipsum
Toggle
Temporibus autem quibusdam et aut officiis debitis rerum necessitatibus.
atom2 states
Data Display
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam.
Lorem Ipsum Dolor
Badge
Itaque earum rerum hic tenetur a sapiente delectus ut aut reiciendis.
atom6 variants
Lorem ipsum68%
ProgressBar
Excepturi sint occaecati cupiditate non provident similique sunt in culpa.
atom3 variants
Lorem
2,847
+12.4%
StatCard
Nam libero tempore cum soluta nobis est eligendi optio cumque nihil.
molecule2 variants
NameStatus
Lorem ipsumActive
Dolor sit ametDraft
DataTable
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis.
organismsortable
Lorem Ipsum
Dolor sit amet
AvatarRow
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
molecule2 sizes
Lorem ipsum
Consectetur adipiscing elit sed do eiusmod tempor.
CalloutBanner
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
molecule4 variants
Page Structures
SidebarLayout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
StackLayout
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.
GridDashboard
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
SplitPanel
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe.
Card Patterns
CardGrid
Itaque earum rerum hic tenetur a sapiente delectus ut aut reiciendis voluptatibus.
ListLayout
Nam libero tempore cum soluta nobis est eligendi optio cumque nihil impedit.