DESIGN SYSTEM

Tokens, type & components

A dark-first system on the shadcn/ui CSS-variable contract, with a cyan accent and one gradient moment reserved for the primary CTA. Built for Next.js + Tailwind + shadcn/ui.

01 · COLOR TOKENS

--background

#0a0e13

--card

#11161d

--muted

#1a222c

--primary

#22d3ee

--accent

#22d3ee

--foreground

#e7edf3

--success

#34d399

--warning

#fbbf24

--destructive

#f87171

--chart-3

#60a5fa

--chart-4

#a78bfa

--border

rgba .09

02 · TYPOGRAPHY · Geist / Geist Mono

Display · 76

Build in public

Heading · 32

The product and the build log

Body · 16

Each exhibit is real, deployed, and backed by GitHub activity, with the agent-driven process shown in full.

Mono · 13

TECH-358 · +312 −44 · main@a1f9c2

03 · SPACING · RADIUS · ELEVATION · MOTION

Spacing

4
8
12
16
24
32

Radius

sm · 6
md · 12
lg · 16

Elevation

flat
elevated

Motion

  • fast120ms
  • base200ms
  • slow320ms
  • ease(.2,.7,.2,1)

04 · COMPONENT GALLERY

Buttons

Badges & tags

DefaultSecondaryOutlineREALNOWTARGETTECHPLACEHOLDER

KPI stat

Lighthouse95+
TARGET

Tabs

The shipped product, the problem, the stack.

Timeline

  1. deployJun 22, 2026

    Deployed to production · vercel · main

  2. prJun 22, 2026

    Merged PR #42: landing hero · jiramos87/portfolio

  3. commitJun 22, 2026

    feat: terminal panel · 8 files · +312 −44

Code block

→ implement landing.tsx · +312 −44

Donut · language mix

  • TypeScript56%
  • C#16%
  • JavaScript12%
  • CSS9%
  • Other7%

Primary stacks

the languages & frameworks I build in

  • TypeScript
  • JavaScript
  • C#
  • Python
  • SQL