Atoms
Fundamental design tokens and building blocks
Atoms are the fundamental building blocks of our design system. These include basic design tokens like colors, typography, spacing, and other foundational elements that form the basis of all components and layouts.
Color Palette
Primary Colors
CW Primary Blue
#005cf6
CW Dark Blue
#001240
Primary Light
#DDEAFF
CW Primary Yellow
#FFB400
CW Secondary Yellow
#FDF4D4
Neutral Colors
Black
#090607
Dark Gray
#808080
Gray
#BAB9B7
Light Gray
#CDCECE
Eggshell
#F6F6F6
White
#FFFFFF
Semantic Colors
Success
#10b981
Success states
Error
#ef4444
Error states
Warning
#eab308
Warning states
Info
#3b82f6
Info states
Typography
Font Families
Primary Font - Georgia
Georgia - Heading 1
Used for primary headings (H1)
Secondary Font - Poppins
Medium - Headings H2-H5
Regular - H5 variant
Used for section headings
Body Font - Inter
Regular - Body text
Used for body content and captions
Typography Scale
Heading 1 - 42px (Georgia)
class: cw-heading-1
Heading 2 - 32px (Poppins Medium)
class: cw-heading-2
Heading 3 - 24px (Poppins Medium)
class: cw-heading-3
Heading 4 - 20px (Poppins Medium)
class: cw-heading-4
Heading 5 - 18px (Poppins Regular)
class: cw-heading-5
Body Large - 16px (Inter Regular)
class: cw-body-large
Body Regular - 14px (Inter Regular)
class: cw-body-regular
Caption - 12px (Inter Regular)
class: cw-caption
Spacing System
Extra Small
Small
Medium
Large
Border Radius
None
0px - rounded-none
Small
2px - rounded-sm
Medium
6px - rounded-md
Large
8px - rounded-lg
Shadows
None
shadow-none
Small
shadow-sm
Medium
shadow-md
Large
shadow-lg
Buttons
Button Variants
Primary
bg-cw-primary-blue text-white
Secondary
bg-cw-secondary-yellow text-gray-900
Outline
border-cw-primary-blue text-cw-primary-blue
Button Sizes
px-3 py-2 text-sm
px-6 py-3 cw-body-regular
px-8 py-4 cw-body-large
Button States
Default state
Hover state
Disabled state
Input Boxes
Input Types
border border-gray-300 rounded-md
Input States
Default border-gray-300
focus:border-cw-primary-blue
border-red-500 for error state
bg-gray-100 cursor-not-allowed