Back/Design System/v0.2

Portfolio

Design System

A living reference for the portfolio's visual language — colors, type, spacing, and interactive components. All built on CSS custom properties.

Colors

CSS variable tokens. All components consume these — never hardcoded values.

Gray Scale

Surface

--surface

Background

--bg

BG Subtle

--bg-subtle

BG Muted

--bg-muted

Fills & Lines

Component Fill

--component-fill

Card Footer

--card-footer

Border

--border

Border Strong

--border-strong

Foreground

Primary

--fg

Secondary

--fg-secondary

Muted

--fg-muted

Disabled

--fg-disabled

Accent

Blue

--accent

Blue Muted

--accent-muted

Teal

--teal

Teal Muted

--teal-muted

Semantic

Success

--success

Warning

--warning

Danger

--danger

Typography

Geist Sans for UI text. Geist Mono for code and data. Font smoothing globally.

displayDesign Engineer
h1Making interfaces feel better
h2Component Architecture
bodyA portfolio where work is presented as working, interactive components — not static screenshots.
captionMarch 2026 · Los Angeles, CA
mono99.7% · 1,024ms · 0x3F

-webkit-font-smoothing: antialiased applied globally. tabular-nums on all dynamic numbers.

Spacing

4pt base grid. Only use these values for margin, padding, and gap.

1
4px
2
8px
3
12px
4
16px
6
24px
8
32px
12
48px
16
64px
24
96px

Tailwind: 1 = 4px · 2 = 8px · 4 = 16px · 6 = 24px · 8 = 32px

Border Radius

Concentric rule: outer radius = inner radius + padding. Live demo below.

xs

4px

sm

6px

md

10px

lg

12px

xl

16px

2xl

24px

full

∞

Formula: outer = inner + padding

Live: Concentric Radius

padding: 12pxouter: 20px

Inner radius is fixed at 8px. Outer = 8 + padding = 20px

Shadows

Multi-layer transparent shadows adapt to any background. Cards use borders instead.

shadow-sm

shadow-md

shadow-lg

Transparent layers adapt to dark/light. Solid border doesn't.

Border vs Shadow demo

Shadow only

Border only

Toggle dark mode to see the difference

Buttons

Framer Motion tap feedback. AnimatePresence for loading state. Optical icon padding.

Variants

CTA — Skeuomorphic

Orange base · white top-fade gloss · 1.5px white border · 0.5px inset shadow · same in light & dark

Sizes

With Icons

Loading state · disabled

Badges

Semantic status indicators. Use dot variant for live/active states.

DefaultAccentTealSuccessWarningDangerOutline
ActivePassingReviewCriticalIn Progress

Add dot prop for live status indicators.

Tags & Icons

Neutral monospace pills for tech skills and tools. Rounded-square icon badges for roles and categories.

Skill Tags

ReactTypeScriptNode.jsNext.jsTailwind CSSPostgreSQLDockerFigmaUI/UX DesignStorybookGraphQLAWS
Express.jsMongoDBFirebaseSocket.IOLaravelPHPMySQLNGINXReduxSketchAdobe Photoshop

Monospace · full-pill radius · subtle border · adapts to light & dark.

Icon Badges

sm / md / lg

With role entry

Full-stack Developer

Full-time|2022–Present
ReactNode.jsPostgreSQLDocker

UI/UX Designer

Full-time|2020–2022
FigmaSketchUI/UX Design

Computer Science — BSc

University|2016–2020
AlgorithmsSystems DesignJavaPython

Neutral gray stroke icons — no color accent. Works in both themes.

Cards

White content area + gray footer strip. The jakub.kr pattern.

SOC 2

Passing

94%

Dec 2025

HIPAA

Review

78%

Mar 2026

ISO 27001

Critical

61%

Jan 2026

Recent Activity

12 events
KO

SOC 2 — Access Control review

Resolved2m ago
MJ

HIPAA — Encryption at rest

Review14m ago
AL

ISO 27001 — Risk assessment

Open1h ago

Showing 3 of 12

Starfire — GRC Dashboard

Preview

Controls

247

+12

Findings

34

−5

Critical

3

+1

Coverage

89%

+2%

Meridian Health Systems · Fictional GRC tool

First project

Code Block

Monospace inline code with animated copy icon swap using AnimatePresence.

npx skills add jakubkrehel/make-interfaces-feel-better
bashnpm run dev
formulaouter_radius = inner_radius + padding
cssanimation-delay: calc(var(--stagger) * 60ms)

Form Fields

Label, hint, error, and icon support. Focus uses accent ring.

Helpful hint text.

This field is required.

Markdown supported.

Focus: --accent ring · Error: --danger ring

Controls

Spring-animated toggle. Avatar with initials fallback.

Toggle

Avatar

KO
KO
KO
KO
KO

Toggle: spring(700, 35) · Avatar falls back to initials when no src

Newsletter Card

Icon-area above, gray action strip below — the core jakub.kr card pattern.

Newsletter

Updates on projects, writing, and new components.

Bento Grid

chanhdai.com-style feature cards. Mix sizes to create visual hierarchy.

Design Engineer

Building interactive portfolios where work speaks through live components — not screenshots.

Open to work
Los Angeles, CA·UTC-8

Components

Reusable UI primitives built with accessibility and animation in mind.

12 components

Design Tokens

CSS custom properties for color, spacing, and radius — dark mode out of the box.

48 tokens

Stats

Large tabular numbers with labels. Use tabular-nums to prevent layout shift.

94%

SOC 2 Score

+3%

12

Components

↑ 4 new

1

Projects shipped

Starfire

48

Design tokens

All modes

Always use tabular-nums on stats that change.

Tech Stack

Icon badge grid. chanhdai.com-style tech display with hover states.

N

Next.js

R

React

TS

TypeScript

TW

Tailwind

FM

Framer

▲

Vercel

Fig

Figma

PG

Postgres

Node

Node.js

Git

Git

VS

VS Code

SB

Supabase

Hover to highlight · 12 technologies in the stack

Testimonial

Quote card with avatar and attribution. chanhdai.com-style.

“Kene has an exceptional eye for detail. The interactive demos in their portfolio don't just show the work — they let you feel it.”

AM

Alex Morgan

Design Lead @ Meridian

“Rarely do you find someone who bridges design and engineering so naturally. Every component is considered, every interaction intentional.”

SL

Sam Lee

Product Manager

Animation

Applied to every component. Rules from jakub.kr's make-interfaces-feel-better skill.

enteropacity 0→1 · translateY 8→0px · 500ms ease-out
exitopacity 1→0 · translateY 0→-12px · subtle, not dramatic
stagger60ms per child · title → description → actions
interactiveCSS transitions only — keyframes can't be interrupted
iconsAnimatePresence · opacity + scale · no blur
tapwhileTap scale(0.97) · 100ms spring
a11yprefers-reduced-motion: skip entrance, keep layout
npx skills add jakubkrehel/make-interfaces-feel-better

Patterns

CSS background patterns for page sections — dot grids, line grids, and framed content columns.

Dot Grid

Content sits above the pattern

radial-gradient · 24px grid · var(--fg-muted) 1px

Fine Dot Grid

Denser, subtler dots

radial-gradient · 16px grid · var(--border-strong) 1px

Line Grid

Grid lines

linear-gradient (H + V) · 32px grid · var(--border)

Diagonal Lines

45° hatching

repeating-linear-gradient · 45deg · 12px pitch

Framed Content Column

K

dot grid bg · vertical border lines frame the content column

CSS Snippets

cssbackground-image: radial-gradient(circle, var(--border-strong) 1px, transparent 1px); background-size: 20px 20px;
cssbackground-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 32px 32px;
cssbackground-image: repeating-linear-gradient(45deg, var(--border) 0px, var(--border) 1px, transparent 1px, transparent 12px);

Animated Signature

SVG stroke-drawing signature that replays when scrolled into view — anchors the footer.

Brand Logos

Inline SVG marks for the AI and creative tools in the workflow.

Cursor Avatar

Skeuomorphic cursor mark in a circular chip — the site's playful avatar treatment.

Phone Frame

Device mockup with an animated status bar and notch clip — frames the case-study previews.

07:20
screen

Project Preview

Self-contained animated vignettes (Varmply, ShipLock) used on the home page and project cards.

Read More

Progressive-disclosure toggle that reveals additional content inline.

The design system started as a handful of primitives and grew alongside the portfolio.

v0.2

NextPortfolio Home

“A portfolio should not be a scaffold for work. The work starts from the portfolio.”

— Overheard somewherea thought while you wait