Colors
Paper
#F5F4F0
Canvas — warm off-white
Ink
#111111
Text — near-black
Brand Blue
#56C2FC
Accent — electric blue from the shader
Lavender
#E8DDF5
Hero gradient — atmospheric
Typography
Display — h1, h2, hero brand line
Effortless craft
Instrument Serif
Body — all readable text, UI, data
Every surface, animation, and line of code feels considered.
Geist
UI labels, data, code blocks
01 02 03 04 05 06 07
Geist Mono
Tags — uppercase tracking-widest labels
PROCESS WORK ABOUT BENCHMARK
Courier Prime
Logo
ICON1024 × 1024
WORDMARK150 × 29DARK ON LIGHT
LIGHT ON DARKICON MARK
2035 × 402CLEAR SPACE
Maintain padding equal to the height of the “B” counter on all sides. This ensures the mark breathes within any layout.
MINIMUM SIZE
Icon: 24px height minimum. Wordmark: 80px width minimum. Below these sizes, use the icon mark only.
Spacing
BASE UNIT — 4px
SECTION PADDING
CARD PADDING
GAP (GRID)
Motion
PRIMARY EASING
cubic-bezier(0.16, 1, 0.3, 1)
Sharp deceleration — enters fast, settles softly. Used on every scroll reveal, word entrance, and card stagger.
Hover
Button states, color transitions
Scroll
Section entrance, card reveal
Reveal
Word-by-word blur, stagger
Hero
Full hero orchestration
Components
BENTO CARD
Card title
With hover glow and border transition
TAG PILL
Courier Prime, uppercase, tracking-widest
BUTTONS
12px radius, 200ms transitions
LIQUID GLASS
SVG filter displacement with inset shadow depth
Iconography
PIXEL TAGS
SVG LINE ICONS
stroke-width: 1.5 · viewBox: 0 0 24 24 · currentColor
Built with
GSAP
Every scroll, every reveal, every stagger — choreographed with GSAP ScrollTrigger.
SCROLL · STAGGER · TIMELINE
Three.js
Atmospheric shader backgrounds — real-time GLSL on the hero and contact surfaces.
GLSL · SHADER · WEBGL
React
Component-driven architecture — every element is composable, testable, reusable.
COMPONENT · HOOK · STATE
Principles
Restrained color
Mono-chrome canvas + one electric accent. Color is rare and meaningful — it appears only at brand moments.
Intentional motion
Every animation choreographs attention, not distracts. Hero reveal, scroll entrance, hover glow — all earned.
Typography as voice
Instrument Serif for the thoughtful moments, Geist for the work. Two registers, one system.
Grid discipline
Bento cards everywhere a card IS the interaction. No decorative grids, no icon-in-circle feature rows.
Shader
HeroShader — ChromaFlow + FlutedGlass + FilmGrain
BrandShader — SineWave + Swirl + FilmGrain