Typography

Heading / var(--font-heading)

Websites that start with a question.

Hero and interface headings use the site heading family with strong weight and tight display rhythm.

Body / var(--font-body)

Clear, useful copy should feel calm, readable, and direct. Body text supports the hierarchy without competing with the main idea.

Small label / uppercase tracking

AVAILABLE FOR FREELANCE & FULL-TIME

H1 / display statement

I build digital experiences that make businesses easier to choose.

H2 / section statement

Websites designed around how people decide.

H3 / supporting heading

A faster, clearer way to move from interest to action.

H4 / card heading

Clear structure creates better decisions.

H5 / compact heading

Built for clarity, speed, and growth.

H6 / micro heading

Details that keep the experience considered.

Current responsive type scale

H1clamp(2.8rem, 3.8vw, 6rem)Desktop 6rem · Tablet 3.8vw · Mobile 2.8rem

H2clamp(2.2rem, 3.2vw, 4.8rem)Desktop 4.8rem · Tablet 3.2vw · Mobile 2.2rem

H3clamp(1.5rem, 2.4vw, 3.2rem)Desktop 3.2rem · Tablet 2.4vw · Mobile 1.5rem

H4clamp(1.2rem, 1.8vw, 2.2rem)Desktop 2.2rem · Tablet 1.8vw · Mobile 1.2rem

H5clamp(1.05rem, 1.3vw, 1.5rem)Desktop 1.5rem · Tablet 1.3vw · Mobile 1.05rem

H6clamp(0.9rem, 1vw, 1.125rem)Desktop 1.125rem · Tablet 1vw · Mobile 0.9rem

Paragraph1.05rem / 1.65Base size on desktop, tablet, and mobile; component-specific copy may use a responsive clamp

SpaninheritInherits its parent size; labels add their own tracking and weight

DivinheritInherits its parent size; layout wrappers do not set a competing type size

02

Color

#02A855Primary emerald

#0F3B22Primary text

#F5FAF7Surface

#FFFFFFCanvas

03

Buttons & states

Primary action Secondary action Outline action

Buttons use compact dimensions, clear hierarchy, rounded geometry, and a restrained lift or color change on hover.

04

Cards & spacing

Card / project

Project showcase

Cards use a clean white surface, subtle emerald border, and enough breathing room for scanning.

↗

Spacing / section

80px rhythm

Standard sections use 80px top and bottom spacing, with smaller internal gaps for related content.

↗

Motion / hover

Purposeful movement

Hover states lift cards slightly, reveal emerald emphasis, and keep the interaction quiet.

↗

05

Layout rules

ContainerCentered max-width layout with responsive horizontal padding.

AlignmentEditorial sections use clear left labels and a wider content column.

ResponsiveDesktop grids collapse into readable single-column flows below tablet widths.

AccessibilityInteractive controls retain visible labels, focusable targets, and meaningful image alt text.

Praise Techy design system.