Design System

The foundation of every design decision made on this site. A single source of truth for color, typography, components, and spacing built to ensure visual consistency across all pages.

Colors

Dark Mode

Background #1e1e1e
Surface Skill #0d1117
Card Surface #161b22
UI Element #21262d
Text Primary #ffffff
Text Secondary rgba(255,255,255,0.6)

Light Mode

Background #f7f7f7
Text Primary #1e1e1e
Text Secondary rgba(30,30,30,0.55)

Accent

Accent #4CAF50
Accent Hover #66bb6a
Accent Border rgba(76,175,80,0.5)
Accent Light #2e7d32

Typography

Liwei Ji
Display · Poppins 700 · clamp(2.5rem, 6vw, 4.5rem) · line-height 1.1 · Hero heading only
First Principles
H1 Page Title · Inter 800 · clamp(2.5rem, 5vw, 4rem) · line-height 1.1 · Skill & About page titles
Behind every complex challenge lies an opportunity to simplify and refine.
Body Large · Inter 400 · 1.2rem · line-height 1.7 · Homepage intro paragraphs
I design thoughtful digital experiences at the intersection of product, interaction, and intelligence. With a strong foundation in UI/UX, I turn complexity into clarity.
Body Base · Inter 400 · 1rem (base 18px) · line-height 1.6–1.75 · Main body content
Transforms product ideas into professional PRDs four output formats for different audiences.
Body Small · Inter 400 · 0.875rem · line-height 1.5 · Card descriptions, captions
What It Does
Label · Inter 700 · 0.78rem · letter-spacing 0.12em · UPPERCASE · Section labels, tags
// Mar 21, 2026     $ step_01     #4CAF50
Mono · JetBrains Mono 600 · 0.72rem · Dates, step numbers, hex values, code

Components

Buttons Homepage

Learn More Overview

Buttons Skill Pages

Get SkillPRD View SKILL.md

Navigation

Back button fixed top-right on all inner pages

Reading Progress Bar

Section Label Pattern

Skill Card

SkillPRD
Transforms product ideas into professional PRDs.

Project Card

cover image
DISE AI Agent
AI · Medical · UX

Tags

Claude Prompt Engineering AI UX

Layout & Spacing

Max-width
Homepage cards container 1400px
Project pages 800px
Skill pages 720px
About page 760px
Breakpoints
900px Navbar hidden on mobile
768px Cards reflow, hero text shrinks
600px Single column layout
Page padding
Top: 80–100px   Bottom: 120px
Horizontal: 24px mobile · 48px tablet+
Section spacing
Between sections: 48–80px
Section title margin-bottom: 20–36px
Border radius
Project / Related cards: 8–12px
Skill cards: 16px
Pill buttons: 50px
Rect buttons: 6px