Styleguide

Design system reference for this portfolio.

atom

Colors

Name	CSS Variable	Value	Usage
Background	--color-bg	#f4f4f0	Page background
White	--color-white	#ffffff	Cards, inputs
Coal	--color-coal	#0c0c0c	Primary text, headings, buttons
Foreground	--color-fg	#0c0c0c	Body text (alias of coal)
Muted	--color-muted	#6f6f6f	Secondary text, labels
Subtle	--color-subtle	#999999	Tertiary text, placeholders
Border	--color-border	#6f6f6f	Default borders
Border Subtle	--color-border-subtle	#e5e5e5	Light dividers
Green	--color-green	#8cee6f	Checkmarks, availability
Yellow	--color-yellow	#ffc609	Checkmarks, accents

atom

Typography

Name	Font	Mobile	Desktop	Weight	Line Height	Tracking	Sample
Display	Instrument Sans	36px	56px	500	1	-1.12px	Raygar He
Heading 1	Instrument Sans	36px	56px	500	1	-0.02em	Project Title
Heading 2	Instrument Sans	28px	36px	500	1.2	-0.02em	Section Heading
Heading 3	Instrument Sans	28px	28px	500	1.2	-0.48px	Subsection
Heading 4	Instrument Sans	20px	20px	500	1.2	-0.02em	Sub-subsection
Body	Instrument Sans	16px	16px	400	1.4	-0.32px	Body text for regular content and descriptions.
Lead	Instrument Sans	18px	18px	400	1.4	-0.36px	Lead paragraph text for introductions.
Small	Instrument Sans	12px	12px	400	1.4	-0.02em	Small text for footers and disclaimers.
Muted	Instrument Sans	16px	16px	400	1.4	-0.32px	Muted text for secondary info.
Tag / Label	Inconsolata	16px	16px	400	1	0.8px	UPPERCASE LABEL

Font Families

Name	Family	CSS Variable	Usage
Sans	Instrument Sans	--font-sans	Body text, headings, UI
Mono	Inconsolata	--font-mono	Labels, tags, company names

atom

Spacing

Token	Rem	Pixels
1	0.25rem	4px
2	0.5rem	8px
3	0.75rem	12px
4	1rem	16px
5	1.25rem	20px
6	1.5rem	24px
8	2rem	32px
10	2.5rem	40px
12	3rem	48px
16	4rem	64px

atom

Border Radius

Name	Value	Preview
sm	0.375rem (6px)
md	0.5rem (8px)
lg	0.75rem (12px)
xl	1rem (16px)
2xl	1.5rem (24px)
card-sm	36px
card	40px
full	9999px

atom

Shadows

Name	CSS Value	Preview
Nav pill	0 2px 8px 2px rgba(0,0,0,0.1), inset 2px 2px 0.5px -2px rgba(160,160,160,0.25)

atom

Transitions & Animations

Name	Duration	Easing
fast	150ms	ease
normal	200ms	ease
slow	300ms	ease
fade-in	600ms	cubic-bezier(0.16, 1, 0.3, 1)

Entrance animations use .fade-in-ready / .fade-in-visible classes via ScrollReveal and FadeIn components. Reduced motion is respected via prefers-reduced-motion.

molecule

Buttons

Variant	Size	Hover	Active
primary	small	Label	Label
primary	default	Label	Label
primary	large	Label	Label
secondary	small	Label	Label
secondary	default	Label	Label
secondary	large	Label	Label
ghost	small	Label	Label
ghost	default	Label	Label
ghost	large	Label	Label

Button Props

Prop	Type	Default	Description
variant	primary \| secondary \| ghost	primary	Visual style
size	small \| default \| large	default	Size preset
href	string	-	Renders as Link or anchor
external	boolean	false	Opens in new tab

molecule

Cards

Cards use an inline pattern. There is no Card component.

Pattern	Classes
Base card	bg-white border border-coal/40 rounded-card p-[40px]
Stat card	bg-white border border-coal/40 rounded-[40px] p-[40px] flex flex-col gap-6
Project card	bg-white border border-coal/40 rounded-[40px] p-[40px] h-[460px] flex gap-[60px] items-center

Live Preview

Card Title

Card description text goes here.

molecule

Badges & Tags

Variant	Preview
Filter tag (inactive)	Product Design
Filter tag (active)	Product Design
Availability badge	Available

molecule

Checkmarks

Variant	Color	Size	Usage
yellow	#ffc609	18x18px	Hero stat highlights
green	#8cee6f	18x18px	Hero stat highlights, availability indicator
outline	#0c0c0c (border)	16x16px	Project card highlights

molecule

Form Inputs

State	Preview
Default
Filled
Disabled
Textarea

Live Preview — Form Inputs

Default

Disabled

Textarea

molecule

Interaction States

Global Focus Ring

All interactive elements use outline: 2px solid coal with outline-offset: 2px on :focus-visible.

::selection

Text selection uses bg-coal text-white. Try selecting this text to see it.

Hover Effects System

Three reusable CSS classes define all hover interactions. Each uses cubic-bezier(0.16, 1, 0.3, 1) for a snappy, minimalist feel.

Class	Effect	Used On
hover-underline	Animated underline slides in from left (0.3s)	Text links, nav links, breadcrumbs, ghost buttons
hover-lift	translateY(-2px) + subtle shadow (0.3s)	Primary buttons, CTA buttons
hover-lift-card	translateY(-4px) + larger shadow (0.3s)	Article cards, interactive cards

Live Preview — Hover Effects

.hover-underlineText link example

.hover-lift

.hover-lift-card

Card hover

Hover to lift

Nav Link States

State	Styles	Preview
Default	text-muted, 14px, hover:text-coal hover:bg-white/70	Work
Active	text-coal bg-yellow border-yellow shadow-sm	Work

Live Preview — Nav Links

Active Hover me Default

Filter Tag States

State	Styles	Preview
Inactive	border-border, text-muted, hover:scale-105	Tag
Inactive + Hover	text-coal, bg-white, scale-105	Tag
Active	bg-coal, text-white	Tag

Live Preview — Filter (Industries + Platforms)

Live Preview — Buttons (all variants)

primary

secondary

ghost

Property	Value	Description
position	sticky top-0	Sticks to viewport top on scroll
z-index	50	Above all content
nav items	Home, Work, Articles, About, Contact	Glassmorphism pill with navigation
font size	14px	Nav link text size
active state	bg-yellow border-yellow	Yellow background for active page
scroll transition	IntersectionObserver, 80px sentinel, 500ms	Transparent → white/90 with border on scroll
mobile menu	bg-white/95 border shadow-sm	Hamburger with animated bars → X morph

Live Preview

HomeWorkArticlesAboutContact

Property	Value	Description
background	bg-coal rounded-[24px] / rounded-[40px]	Dark card with responsive border radius
layout	Brand info left + link columns right	Pages column + Contact column
display name	"Raygar"	Large gradient text (clamp 4rem–14rem), fading to transparent
links (Pages)	Home, Work, Articles, About, Styleguide	Internal page links
links (Contact)	Contact, LinkedIn, Mentorship	Contact anchor + external links with ↑ icon
back to top	w-10 h-10 rounded-full	Smooth-scroll button next to link columns
credit	Built with Claude Code	External link to anthropic.com/claude-code
copyright	Dynamic year	Auto-updates via Date()

Live Preview

Raygar He

Senior Product Designer (Web & Mobile Apps). Bridging design, tech & business — end-to-end delivery with AI fluency.

Pages

Home

Work

Articles

About

Styleguide

Contact

Mentorship

Built with Claude Code

organism

Hero Section

Element	Description
Avatar	120px mobile / 196px desktop, with star badge overlay
Name + Title	56px display for name, 24px medium for title
Stat Cards	3-column grid: "Lead 0→1" (1 col) + "Over 6 years" (2 cols) with logos
Highlights	Checkmark items with yellow/green variants
Animations	FadeIn + ScrollReveal with staggered delays

Live Preview

Raygar He

Senior Product Designer (Web & Mobile Apps). Bridging design, tech & business — end-to-end delivery with AI fluency

Lead 0 → 1

Product Design

Simplifying complex problems

Driving measurable impact

Growth, scaling, retention strategy

Over 6 years

experiences in multiple industries

From startups to enterprises

Experiences in banking, finance, gambling, e-commerce, and e-learning.

ANZ

Suncorp Bank

Suncorp

Jumbo

Oz Lotteries

Optimise

QUT

Adelaide

Savvy

organism

Project Card

Accepts a Project object with the following key properties:

Prop	Type	Description
company	string	Company name (Inconsolata, uppercase, 14px)
title	string	Project title (h3, 24–28px medium)
description	string	Optional subtitle below title (15–16px, muted)
cover	string	Cover image with gradient background
ctaLabel	string	Button text, defaults to “Learn more”
password	string	If set, shows lock icon next to CTA

Live Preview

Attendy

Attendance tracker

A solo vibe-coding project, helping hybrid workers track office attendance

Learn more →

organism

Contact Page

Element	Description
Heading	36–56px “Get in touch” with subtitle
Layout	Two-column flex row on desktop (form left, photo right); image hidden on mobile
Contact form	Card with ContactFormSection (name, email, message fields)
Photo	Candid photo with rounded-card corners, object-cover, hidden on mobile (md:block)
Links	LinkedIn + Mentorship external links below form

Live Preview

Get in touch

Have a project in mind or just want to chat? I'd love to hear from you.

Name

Your name

you@example.com

Message

Your message

Send message →

Photo placeholder

LinkedInMentorship

organism

Section

Property	Value	Description
max-width	max-w-content (1152px)	Content constraint within max-w-layout (1280px)
padding	px-4 md:px-16	Responsive horizontal padding
section title	font-mono uppercase tracking-[0.8px]	Mono label above sections

organism

CTA Section (ContactSection)

Property	Value	Description
heading	36px / 56px	Matches H1 scale (responsive)
background	RetroGrid	Animated grid background pattern
button	MagneticButton + Button (large)	Magnetic hover effect on primary CTA
animation	ScrollReveal	Scroll-triggered entrance animation
visibility	Hidden on /contact	Conditionally hidden on the contact page

organism

Quick Nav

Sticky sidebar navigation used on About, Work detail, Article detail, and Styleguide pages. Highlights the active section as the user scrolls.

Property	Value	Description
position	sticky top-24	Fixed in viewport while scrolling
active indicator	border-l-2 border-coal	Left border highlights the active section
guide line	border-l border-border-subtle	Subtle vertical line connecting all items
heading	11px / uppercase / tracking-widest	Section group label
item text	13px	Navigation link text size
left spacing	ml-8	Gap between content and nav
scroll offset	scroll-margin-top: 100px	Prevents sticky header from covering section headings
visibility	hidden xl:block	Only visible on extra-large screens

Preview

Home Page Layout

Layout Diagram

Header (sticky, glassmorphism)

Hero Section (FadeIn)

Stats Section (ScrollReveal)

Recent Work (WorkCard[])

CTA Section (ContactSection + RetroGrid)

Footer (dark card, link columns, gradient name)

template

Work Listing Layout

Layout Diagram

Header

Page Title + Description

Filters (All | Industries | Platforms)

WorkCard

Footer

template

Project Detail Layout

Project detail pages are rendered from Notion. Each page has properties (Title, Slug, Description, Excerpt, Company, Team, Timeline, Industries, Platforms, Focus, Status, Featured) and block content converted to MDX.

Layout Diagram

Header

Back Link + Meta (company, team, timeline)

Project Title

Cover Image

MDX Content (prose)

Footer

Styleguide

Colors

Typography

Font Families

Spacing

Border Radius

Shadows

Transitions & Animations

Buttons

Button Props

Cards

Badges & Tags

Checkmarks

Form Inputs

Interaction States

Global Focus Ring

::selection

Hover Effects System

Nav Link States

Filter Tag States

Header

Footer

Hero Section

Raygar He

Project Card

Attendance tracker

Contact Page

Get in touch

Section

CTA Section (ContactSection)

Quick Nav

On this page

Home Page Layout

Work Listing Layout

Project Detail Layout