Flat, bordered, quietly elevated.
Border substitutes for shadow by default. Shadow is reserved for surfaces that need
to read as genuinely elevated — not applied just because something is a card. Three
roles, shipped as .surface-card, .surface-card-raised and
.surface-floating in src/index.css.
Level 0 — .surface-card
1px border, Medium radius, no shadow. The default for content cards — tech-approach cards, capability cards, case-study gallery visuals.
Level 1 — .surface-card-raised
1px border, Medium radius, a very subtle shadow. Portfolio/project media cards and
the shadcn Card primitive (blog listing) use this — enough lift to
separate from the page, nothing heavier.
Level 2 — .surface-floating
No border, Large radius, a real shadow. Reserved for surfaces that are genuinely elevated — the homepage's glassmorphism service cards, modals/popovers.
Fixed during Phase 3
- Homepage service cards and Portfolio project cards used to render the same visual role with different shadows (none vs.
shadow-lg) depending on which page they were on — both now use the same Level 1 treatment. - Three different sidebar-card treatments on
/contact(bordered vs. two different borderless variants) are now one consistent Level-0-style panel. - A handful of stray
rounded-lgsurfaces (the contact status region, a blog hero image, the project-dialog image, the shadcnCardprimitive) were promoted to the Medium/Large radius roles below —rounded-lgno longer appears as a card radius anywhere on the public site.
Radius scale
XS → compact product chrome: sidebar/nav items, small tags and fields, the sidebar's inset selection marker. Small → buttons, filter chips, form controls (the Signature CTA keeps its own finalized geometry). Medium → standard content cards (Level 0/1 above). Large → feature-weight surfaces: project/portfolio imagery, hero photography, the homepage's glassmorphism cards. Pill → badges, tags, the active filter chip.
Shadow scale (kept subtle)
Subtle background section
Canvas card on Subtle Background
Used to separate a section from the page without adding a hard border or color block.
Surface hierarchy across themes
The same four-step ladder — Canvas → Subtle → Surface → Elevated — exists in both themes. In light mode, elevation is expressed almost entirely through the shadow scale above, since white has nowhere lighter to go; in dark mode it's expressed through both a lightness step and a shadow. See the Tokens section for the dark version of this ladder.