Color / Light Mode
Primary
#3A5BFF
Primary / Hover
#2E4CE8
Primary-BG
#F5F7FF
Background
#FFFEFD
Surface
#FAFAFB
Text / Primary
#0A0A0A
Text / Secondary
#4B5563
Borders / Dividers
#E5E7EB
Accent/Success
#28A745
Accent/Success-BG
#D6F5DD
Accent/Error
#DC3545
Accent/Error-BG
#F7D4D7
Accent/Warning
#EA580C
Accent/Warning-BG
#FDDECE
Color / Dark Mode
Primary
#6488FF
Primary / Hover
#7FA0FF
Primary-BG
#F5F7FE
Background
#111827
Surface
#1C2434
Text / Primary
#FFFFFF
Text / Secondary
#D1D5DB
Borders / Dividers
#2A3445
Accent/Success
#63FF87
Accent/Success-BG
#CCFFD8
Accent/Error
#F53B4D
Accent/Error-BG
#FCCFD3
Accent/Warning
#FDBA74
Accent/Warning-BG
#FEE6CD
Typography
A
A
a
a
Typeface
Plus Jakarta Sans
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Display / Hero
Display
Aa
Font: Plus Jakarta Sans | Size: 48px | Weight: Bold | Line Height: 110% | Letter Spacing: 0%
Usage: Page hero headline. Tight vertical rhythm for impact.
Headings
Heading1
Aa
Font: Plus Jakarta Sans | Size: 32px | Weight: SemiBold | Line Height: 120% | Letter Spacing: -0.5%
Usage: For Section headings (e.g., "About", "Project")
Heading2
Aa
Font: Plus Jakarta Sans | Size: 24px | Weight: SemiBold | Line Height: 120% | Letter Spacing: -0.25%
Usage: For card/project titles, modal headings.
Heading3
Aa
Font: Plus Jakarta Sans | Size: 20px | Weight: Medium | Line Height: 140% | Letter Spacing: -0.25%
Usage: For card/project titles, modal headings.
Body Copy
Body (Large)
Aa
Font: Plus Jakarta Sans | Size: 18px | Weight: Regular | Line Height: 140% | Letter Spacing: 0%
Usage: For main paragraph text, descriptions, content blocks
Body (Base)
Aa
Font: Plus Jakarta Sans | Size: 16px | Weight: Regular | Line Height: 140% | Letter Spacing: 0%
Usage: For main paragraph text, descriptions, content blocks
Body (Small)
Aa
Font: Plus Jakarta Sans | Size: 14px | Weight: Regular | Line Height: 140% | Letter Spacing: 0%
Usage: For main paragraph text, descriptions, content blocks
Buttons
Button (Large)
Aa
Font: Plus Jakarta Sans | Size: 16px | Weight: SemiBold | Line Height: 120% | Letter Spacing: +0.5%
Usage: For CTAs
Button (Small)
Aa
Font: Plus Jakarta Sans | Size: 14px | Weight: Medium | Line Height: 120% | Letter Spacing: +0.5%
Usage: For medium-size button copy and actionable text
UI Elements
Caption / Helper
Aa
Font: Plus Jakarta Sans | Size: 14px | Weight: Regular | Line Height: 140% | Letter Spacing: +0.25
Usage: For metadata (dates, tags, labels, input hints, error messages)
Navigation / Menu
Aa
Font: Plus Jakarta Sans | Size: 14px | Weight: Medium | Line Height: 140% | Letter Spacing: +0.25
Usage: For top navigation items or in-page anchor links.
Overline / Label / Micro (Tiny UI)
Aa
Font: Plus Jakarta Sans | Size: 12px | Weight: Medium | Line Height: 150% | Letter Spacing: +1%
Usage: For category tags, badges, mini headers above cards
Blockquote / Testimonial
Aa
Font: Plus Jakarta Sans | Size: 18px | Weight: Medium | Line Height: 150% | Letter Spacing: +1%
Usage: For quote text inside testimonial cards.
Shadows
Components
NavItem
NavItem
NavItem
Button
Button
Button
Button
Button
Button
Label
Label
Label
Label
Label
Label
Label
Label
Header Text Here
Body copy here
Label
Label
Label
Button
Header Text Here
Body copy here
Name Here
Profession here
Testimonial statement here
Name Here
Profession here
Testimonial statement here