02
Colors
Token name, value and usage. White & soft-gray foundation with a purple/indigo accent; green reserved for tags, red for errors.
Background
Color / Background / Page
#FFFFFF
Main page background
Color / Background / Soft
#F5F5F3
CTA sections & quiet page sections
Surface
Color / Surface / White
#FFFFFF
Cards, forms, content surfaces
Color / Surface / Soft
#F5F5F3
Soft media backgrounds & blocks
Text
Color / Text / Primary
#202124
Main headings & important text
Color / Text / Secondary
#6F7278
Paragraphs & secondary descriptions
Color / Text / Muted
#A0A3AA
Placeholders, helper text, meta labels
Border
Color / Border / Default
#E6E6E3
Cards, inputs, icon buttons, dividers
Color / Border / Strong
#CFCFCA
Stronger divider when needed
Accent
Color / Accent / Primary
#5B5CFF
Buttons, logo, active nav, links
Color / Accent / Hover
#4849E8
Hover states for accent elements
Color / Accent / Soft
#EEF0FF
Section badges & selected states
Success
Color / Success / Primary
#18A058
Project tag text
Color / Success / Soft
#EAF8F0
Project tag background
Error
Color / Error / Primary
#FF4D4F
404 / error text
Color / Error / Soft
#FFECEC
Error badge background
03
Typography
Manrope only. Framer-compatible style names only. Line-height 1.2em / 120%, letter-spacing 0em everywhere — only size and weight change.
Heading 1
Bold · 72px · 1.2em · 0em
Large page hero titles
Have a Project?
Heading 2
Bold · 48px · 1.2em · 0em
Major section titles
Let’s Connect!
Heading 3
Bold · 36px · 1.2em · 0em
Page & project titles
Selected Work
Heading 4
SemiBold · 28px · 1.2em · 0em
Subsection / case-study block headings
Research Process
Heading 5
SemiBold · 20px · 1.2em · 0em
Card & form-group titles
FlowPay Dashboard
Heading 6
SemiBold · 13px · 1.2em · 0em
Badges, tags, nav, meta & form labels
UX / UI DESIGN
Paragraph
Regular · 16px · 1.2em · 0em
Body text, descriptions, helper text
A minimal, portfolio-focused system built for clean, modern case studies.
Let’s Connect!
Lorem ipsum dolor sit amet consectetur. Et mi cursus volutpat enim morbi nulla.