Joshua Grams Work Process Hire Email
Reference · Design system · 2026

One system behind the portfolio, the storefronts, and the product panels.

The tokens and components used across joshuagrams.com, the Levels theme, the KING50 panel, and the product page prototype. Dark by default with a light storefront variant. Everything on this page is rendered live from the same CSS the sites use, not pictured.

Type
Archivo for everything, Anton for display numbers. Mono-style labels are Archivo at small size with wide tracking.
Shape
Pills for navigation and actions, 12–20px radius on cards, glass surfaces over dark backgrounds
Color logic
Neutral surfaces. Color means something: green is go or success, amber caution, red risk, blue info.
Motion
One easing curve, 200–500ms, reveal on scroll. Fully disabled under prefers-reduced-motion.
01 · Color

Click any swatch to copy its value.

Background#05070c
Surface#0b0e14
Ink#f3f5f8
Mutedrgba(255,255,255,.62)
Linergba(255,255,255,.10)
Green · success / primary signal#37d39a
Amber · caution#f4b740
Red · risk / error#ff6b6b
Blue · info#7fb2ff
Store accent (Levels)#1c8a2e
Store light surface#f7f7f5
Store ink#141414
02 · Type

A short scale that stays legible at panel sizes.

Display · Anton
$1.4M+  86  284
H1 · 800 · −.02em
Things I've shipped.
H2 · 700 · −.015em
Reorder the panel around the decision.
Body · 400 · 16/1.75
The storefront only converts if the product ships on time and arrives as described, so operations were part of the e-commerce job.
Small · 400 · 13.5/1.6
Secondary copy in cards, captions, and helper text.
Label · 600 · .16–.22em
Executive overview · Case study
03 · Space and shape

A 4px base. Radii that match the element's size.

16
24
32
48
64
6 · tags
10 · inputs
12 · buttons
16 · cards
pill · nav
04 · Components

Rendered live.

Buttonsprimary · secondary · ghost · accent · disabled
Navigationglass pill
Joshua GramsWorkProcessHireEmail
Chips and badgesfilter · tag · status
AllE-commerceProduct designAIIn stockLow stockRiskBeta
Form fieldsdefault · focus · error
We'll send the receipt here.
That code has expired.
Product card and priceregular · sale · sold out
New
Ceramic Pour-Over Dripper
$48
Sale
Ceramic Pour-Over Dripper · 4 cup
$49 $58
Sold out
Moss glaze
$48
Stat tilesdisplay number · label · delta
3.1%
Conversion
▲ 0.4 pt vs last month
$62
Avg order
▲ $4
86
Confidence
normalized
665s
Data age
▼ stale
Toastconfirmation
Added to cart · 2 cup · Stone
05 · Light storefront variant

Same shapes, inverted surfaces.

Retail customers expect light product photography on light backgrounds. The Levels theme and the PDP prototype flip the surfaces and keep the radii, type scale, and spacing identical, so a component designed in dark can be dropped into the store without redesign.

Dark · product and tools
RigsQuartz
Light · storefront
RigsQuartz
06 · Tokens

The CSS the pages actually load.

:root {
  --bg: #05070c;        --bg2: #0b0e14;
  --ink: #f3f5f8;       --mut: rgba(255,255,255,.62);
  --line: rgba(255,255,255,.10);  --line2: rgba(255,255,255,.18);
  --green: #37d39a;     --amber: #f4b740;   --red: #ff6b6b;   --blue: #7fb2ff;
  --ease: cubic-bezier(.4,0,.2,1);
  --sans: 'Archivo', system-ui, sans-serif;   --disp: 'Anton', sans-serif;
  --r: 16px;
}
Copied