Portfolio — imseon_DS.v.1.0

The foundation
of every page.

All design decisions in one place — colors, type, spacing, effects, interactions, and components. Built for the responsive portfolio site.

01

Color Palette

Base

Background
#FAFAFA
Text 900
#0D0D0D
Text 600
#555555
Text 400
#999999
Text 200
#D4D4D4
Text 100
#F0F0F0

Brand

Blue Lime
#C8EAD8
Blue Lime 2
#D6F0E4
Baby Pink
#FFDCE8
Baby Pink 2
#FFE8F1

Semantic

Success
#3ECF8E
Success BG
#EDFAF4
Warning
#F5A623
Warning BG
#FFF8EC
Error
#EF4444
Error BG
#FEF2F2
Info
#6366F1
Info BG
#EEF2FF

Glass

Glass Default
rgba(255,255,255, 0.12)
Glass Hover
rgba(255,255,255, 0.52)
Glass Nav
rgba(255,255,255, 0.06)
02

Typeface

Display — Varent / Syne (800)

The interface
is the brand.
Used for: hero headlines, section titles / line-height 1.05 / tracking −1.5px

Body — Geist

64px / 800
line-height 1.05
tracking −2px
Display XL
48px / 800
line-height 1.08
tracking −1.5px
Display L
32px / 700
line-height 1.2
tracking −0.8px
Heading 1
24px / 700
line-height 1.3
tracking −0.5px
Heading 2
20px / 600
line-height 1.4
tracking −0.3px
Heading 3
16px / 400
line-height 1.7
tracking 0px
Body — UI-focused Product Designer. I build interfaces that are visually precise, systematically scalable, and AI-accelerated.
14px / 400
line-height 1.6
tracking 0px
Body Small — Supporting text and descriptions at a comfortable reading size.
12px / 600
line-height 1.5
tracking +1.5px
LABEL / EYEBROW
11px / 400
Geist Mono
tracking 0px
--clr-bg: #FAFAFA; /* code / token */
03

Spacing — ×4, even only

--sp-4
4px
--sp-8
8px
--sp-12
12px
--sp-16
16px
--sp-20
20px
--sp-24
24px
--sp-28
28px
--sp-32
32px
--sp-40
40px
--sp-48
48px
--sp-64
64px
--sp-80
80px
--sp-96
96px
--sp-128
128px
04

Shadow & Effects

Shadow Scale

xs
0 1px 3px rgba(0,0,0,0.06)
sm
0 2px 8px rgba(0,0,0,0.07)
md
0 4px 16px rgba(0,0,0,0.08)
lg
0 8px 32px rgba(0,0,0,0.10)
xl
0 16px 56px rgba(0,0,0,0.12)
Glass Default
inset 0 1px 0 rgba(255,255,255,0.55)
0 8px 20px rgba(51,51,51,0.08)
Glass Float
inset 0 1px 0 rgba(255,255,255,0.80)
0 24px 56px rgba(51,51,51,0.10)
0 6px 16px rgba(51,51,51,0.06)

Glass Effects

Glass None
bg: rgba(255,255,255, 0.12)
blur: 28px saturate(180%)
border: rgba(255,255,255,0.30)
shadow: glass default
Glass Float (Nav)
bg: rgba(255,255,255, 0.48)
blur: 28px saturate(200%)
border: rgba(255,255,255,0.60)
radius: 18px
Glass Card Hover
bg: rgba(255,255,255, 0.52)
blur: 28px saturate(180%)
border: rgba(255,255,255,0.68)
shadow: glass float

Border Radius

xs
4px
sm
8px
md
12px
lg
16px
xl
20px
2xl
24px
3xl
28px
full
99999px
05

Interactions

Standard — ease
dur: 150–300ms · ease
Used for: color, opacity, font-weight changes
Spring — cubic-bezier(0.34, 1.52, 0.64, 1)
dur: 500–600ms · slight overshoot
Used for: button lift, card transform
Water Drop — cubic-bezier(0.34, 1.45, 0.64, 1)
dur: 550ms · glass reveal on hover
Used for: work cards, floating nav
Hover card
Text Hover — color + weight
dur: 150ms ease + 100ms weight
Used for: nav links, ghost buttons
Work About Contact

Duration Scale

150ms
--dur-fast · micro interactions
300ms
--dur-base · standard transitions
500ms
--dur-slow · reveal animations
600ms
--dur-spring · spring / water-drop
06

Component Scale

Buttons

Badges & Tags

UXUI Graphics Mentoring Product Design Mobile App Success Warning Error Info

Status Indicators

Open to work Busy Not available

Navigation Bar

AboutWorkContact

Glass Card

Project Title

↗
Product Design Mobile App

Input