FAN YE / PORTFOLIO

Design System

A working reference for the portfolio's visual language: the foundations we share, the components we reuse, and the differences we keep on purpose.

TypographyFigtree8 responsive type roles

Palette20 named neutralsNeutral UI; a natural jade identity

ApproachContent comes firstQuiet UI, expressive project imagery

A personal mark in jade

The supplied pale green jade image is the personal identity mark. Its natural color stays in the artwork; the interface keeps the neutral palette. The header uses a 48px square, without cropping or an added frame.

public/assets/fan-jade-logo-transparent.png

Token values below are read from the site's CSS at the current viewport. Components are rendered from the same source used in the portfolio.

Typography

One self-hosted variable family. Regular for reading, medium for hierarchy. No negative letter spacing or viewport-scaled type.

Family --font-sansBody 400 / headings 500Mobile breakpoint 767px

Specimen text

Display--type-display / --leading-display · 500--type-display

Making complex things clear.

Homepage positioning and project headlines

Page title--type-page-title / --leading-page-title · 500--type-page-title

Making complex things clear.

About and reference-page titles

Section title--type-section-title / --leading-section-title · 500--type-section-title

Making complex things clear.

Featured cases, work categories and experience

Card title--type-card-title / --leading-card-title · 500--type-card-title

Making complex things clear.

Featured, Work and Fun project cards

Item title--type-item-title / --leading-item-title · 500--type-item-title

Making complex things clear.

Related projects and smaller headings

Body--type-body / --leading-body · 400--type-body

Making complex things clear.

Introductions, case studies and descriptions

Metadata--type-meta / --leading-meta · 500--type-meta

Making complex things clear.

Clients, roles and compact navigation

Caption--type-caption / --leading-caption · 500--type-caption

Making complex things clear.

Eyebrows, tags and supporting labels

Values above are live size / line height in px. Display, page, section and card titles step down below 768px; smaller roles stay stable.

Source app/globals.css

Color & surfaces

Twenty neutrals, from plain white to deep black. These reference colors feed the site's semantic roles. The jade identity mark keeps its natural color; it is not a green UI accent.

White & gray

Black & gray

Plain White

HEX: --
RGB: --

Deep Black

HEX: --
RGB: --

Snow White

HEX: --
RGB: --

Lacquer Black

HEX: --
RGB: --

Moon White

HEX: --
RGB: --

Ink Black

HEX: --
RGB: --

Silver White

HEX: --
RGB: --

Dark Charcoal

HEX: --
RGB: --

Lead White

HEX: --
RGB: --

Graphite Black

HEX: --
RGB: --

Frost White

HEX: --
RGB: --

Ash Black

HEX: --
RGB: --

Gray White

HEX: --
RGB: --

Tile Black

HEX: --
RGB: --

Smoke White

HEX: --
RGB: --

Raven Gray

HEX: --
RGB: --

Mist White

HEX: --
RGB: --

Iron Gray

HEX: --
RGB: --

Cloud White

HEX: --
RGB: --

Carbon Gray

HEX: --
RGB: --

HEX and RGB are the web color specifications. Swatch labels switch between dark and white text to preserve contrast. Project imagery and original brand colors are not recolored.

How the palette is applied

Primary text--text-primary

Deep Black · Headings and high-emphasis text

--text-primary

Secondary text--text-secondary

Graphite Black · Reading text and secondary content

--text-secondary

Muted text--text-muted

Descriptions and supporting content

--text-muted

On dark--text-on-dark

Snow White · Labels on dark actions

--text-on-dark

Primary action--action-primary

Lacquer Black · Contact, send and primary buttons

--action-primary

Action hover--action-hover

Ink Black · Primary button hover

--action-hover

Surface--surface

Cards and white surfaces

--surface

Soft controls--surface-muted

Moon White · Neutral controls and inset surfaces

--surface-muted

Control hover--surface-hover

Silver White · Subtle interaction feedback

--surface-hover

Disabled surface--surface-disabled

Lead White · Inactive control fill

--surface-disabled

Disabled text--text-disabled

Raven Gray · Inactive labels, never reading text

--text-disabled

Default canvas--background

Plain White · Fun and case-study pages

--background

Work canvas--background-work

Work index only

--background-work

Home canvas--background-home

White background behind the logo strip

--background-home

About canvas--background-about

About only; independently scoped

--background-about

Soft surface--surface-soft

Translucent featured cards

--surface-soft

Navigation surface--nav-surface

Floating navigation

--nav-surface

Subtle border--border-subtle

1px project-card outlines

--border-subtle

Control border--border-strong

Frost White · Inputs and stronger separators

--border-strong

Depth without decoration

Navigation uses a soft shadow; project cards use silver-white outlines. Transparency and shadows derive from the palette's deep black and snow white. Stronger shadows are reserved for overlays.

--nav-shadow

Source app/globals.css · page-scoped CSS Modules

Layout, spacing & shape

Shared rhythm, contextual containers. Not every page has the same content density or image geometry.

Main reading width: --page-width-desktop Home / About
Tablet reading width: --page-width-tablet below 1200px
Mobile reference: --page-width-mobile at a 390px viewport; 24px side gutters
Contextual widths: Work 1280px · Fun 1168px · case-study shell 1108px
Project grids: Work 2 → 1 columns · Fun 3 → 2 → 1 · Featured 1
Page gutters: Desktop 40px · tablet 32px · mobile 24px

Spacing scale

--space-1--space-1

--space-2--space-2

--space-3--space-3

--space-4--space-4

--space-5--space-5

--space-6--space-6

--space-8--space-8

--space-10--space-10

--space-12--space-12

--space-16--space-16

--space-24--space-24

A 4px foundation for new work. Existing optical gaps and image crops are retained rather than rounded to fit the scale.

Corner radius

Controls--radius-control

Compact tool surfaces

Small--radius-small

Portrait and small overlays

Image--radius-image

Featured-card inset imagery

Card--radius-card

Work, related-project covers and Fun cards

Featured--radius-feature

Large homepage cards

Pill--radius-pill

Primary actions and compact inputs

Source app/globals.css · component CSS Modules

Components & states

The same components in different contexts. Links remain links; modal triggers remain buttons. Content, not a new visual theme, makes the distinction.

Project cards

Philips · Sleep & Respiratory Care

Connected CPAP Care Platform

UX Research · Clinical Workflows

Connected CPAP device data with patient-reported insights to support more informed decisions in remote care.

Live components: ProjectCard · WorkListCard · ProjectPreview · FunProjectCard

Actions & states

Primary / external contactCONTACT

Text action / hover & keyboard focusRead Case Studies

Lucide / 1.75px stroke

Icon-only controls have accessible names and visible focus.

Navigation: Work / About / Fun / Design System · current route stays dark
Primary action: Dark surface, white label; hover keeps its contrast
Text action: Muted → primary, 400 → 500; arrow moves 4px without shifting the label
Related work: Public cover + project name + description; geo filtering and password checks stay in place
Fan AI: Floating assistant, compact type, suggested questions, attachment and fit-result states. Its UI remains a purpose-specific variant.
Protected project: Neutral password form with error feedback. Authentication is separate from the visual system.

Source components/ · app/fun/

Motion & interaction

Motion supports the reading sequence. Scroll-linked transforms are reversible; interaction feedback stays restrained.

Transform progress50%

Uses the homepage card's actual responsive transform settings. On the homepage, scrolling controls progress; here, the slider isolates each state.

Featured cards: Desktop 40° / 0.55 / +20px → 0° / 1 / 0. Tablet 32° / 0.72 / +16px. Mobile 28° / 0.8 / +14px.
Scroll mapping: Each untransformed card slot has its own progress window; full size near 10% of viewport height. 60ms damping softens wheel steps.
About portrait: 0.93 / +24px → 1 / 0; opacity 0.35 → 1, 85ms damping. It settles near 35% of viewport height.
Micro feedback: --duration-fast text / --duration-standard related-cover zoom (1 → 1.025)
Fun cards: 680ms image / overlay reveal; image scale 1 → 1.06
Worked With: 24s linear logo strip; no movement with reduced motion
Reduced motion: No 3D card or portrait transforms. Smooth anchor scrolling is disabled. Decorative movement is removed or shortened.

Source components/useScrollPopUp.ts · components/Reveal.module.css · page-specific motion styles

Consistency review

A record of what is shared, what is deliberately different, and what still needs a contextual decision. Not an invented consistency score.

Aligned

One heading hierarchy

Work cards now use the card-title role rather than the section-title role. All three main card families share the same title scale.

Aligned

A shared neutral palette

Twenty named neutrals feed semantic roles. Home stays snow white, Work uses moon white, and About uses plain white. Page backgrounds remain independently scoped.

Aligned

Shared edges and keyboard states

Project-card outlines share one border token. Featured and Work cards have visible focus rings. The four-item navigation fits on a separate row on small screens.

Intentional

Different cards, different jobs

Featured cards are large and scroll-linked. Work cards are denser. Related projects are unframed links. Fun cards reveal an immersive overlay. Their geometry is not forced into one template.

Intentional

Compact UI and original imagery

Fan AI keeps its 11-16px compact scale and 22px shell, using the neutral UI palette. The jade identity mark, original illustrations and project images keep their natural colors. Fun overlays retain their image-legibility treatments.

Review

Legacy geometry stays local

Some layouts still use optical spacing and fixed image crops rather than the 4px spacing scale. Preserve those until a specific layout change is agreed; do not round them automatically.

Evolving this system

Change shared typography, colors, spacing and radii in app/globals.css. Keep usage notes in content/designSystem.ts. A page-specific change belongs in its CSS Module, not a global override.

The jade mark is a transparent PNG, shared through content/brand.ts and BrandMark. Preserve its proportions and natural color. Use the background-extracted asset without a white rectangle, added frame or color-blending effects. The original image is kept separately as a reference. Scroll geometry and other interaction settings stay with their components.

Documentation structure informed by Material Design 3. This portfolio keeps its own visual identity; no Material UI package or theme is used.