Portfolio 3.0 · interface specification

The system behind the surface.

A living reference for the typography, color, layout, components, and rules that keep this portfolio coherent. Inspect it, copy it, or use the raw DESIGN.md with an engineering agent.

Open raw file ↗

15.5remStudio rail

74rem editorial canvasProduct release narrative

01 · Foundations

Neutral by default. Blue only when it means something.

The palette stays out of the product's way. Each semantic token has a tuned dark counterpart rather than a mechanically inverted value.

Canvas--canvas

Primary page background

Surface--surface

Quiet media and data stages

Strong surface--surface-strong

Raised tonal separation

Ink--ink

Primary text and controls

Muted ink--muted

Supporting copy

Faint ink--faint

AA-compliant metadata and tertiary labels

Border--border

Structural hairlines

Signal--signal

Links, focus, and active state

Signal soft--signal-soft

Selected-state background

Signal inverse--signal-inverse

Small accent text on inverted ink surfaces

Spacing rhythm

Small steps tighten interface details; fluid section space carries the editorial rhythm.

012XS4px
02XS8px
03SM12px
04MD16px
05LG24px
06XL40px
072XL64px
08Sectionclamp(6rem, 10vw, 9rem)

02 · Typography

Two voices, each with a specific job.

Geist handles editorial clarity. Geist Mono carries identity, technical metadata, and measured data. Decorative code and terminal styling are excluded.

Display / Geistclamp(3.4rem, 7vw, 6.3rem)

Ideas become reliable products.

Identity / Geist Mono520 · −0.065em

Van AJ Vanguardia

Body / Geist1rem / 1.65 · 42rem max

Build the smallest coherent system that solves the user's problem, then validate the details that make it dependable in production.

Metadata / Geist Mono.62–.72rem

TYPESCRIPT · ASP.NET CORE · CEB 10.3157° N

03 · Components

Reusable behavior without a component showroom aesthetic.

Components exist to preserve meaning, state, and accessibility. Most editorial content remains unboxed and gains structure from alignment.

Live controls

See implementation ↓Open DESIGN.md Signal link →

State language

Available for work03 · EXPERIENCE⌘ 3

01Studio rail
Persistent identity, section state, utilities, and direct contact.
02Page back link
A consistent return path on every focused route.
03Editorial heading
A restrained thesis with readable supporting context.
04Signal link
Text-first action reserved for meaningful navigation.
05Data ledger
Comparable facts separated by rules instead of floating cards.
06Media stage
A quiet product-first surface for authentic screenshots.
07Interface controls
Equal-size theme and sound controls with explicit labels.
08Focus ring
A three-pixel Signal Blue outline visible across themes.

04 · Structure

A page is a narrative, not a pile of cards.

Every route starts with orientation, develops one subject through evidence, and ends with a useful next step. These fragments are ready to copy.

CSSSemantic tokens

:root {
  --canvas: #fbfbfa;
  --surface: #f1f2f2;
  --surface-strong: #e7e9ea;
  --ink: #121416;
  --muted: #62686f;
  --faint: #686e75;
  --border: #dfe2e4;
  --signal: #155eef;
  --signal-soft: #e9efff;
  --signal-inverse: #77a6ff;
  --rail: 15.5rem;
  --max: 74rem;
  --text-max: 42rem;
  --section-space: clamp(6rem, 10vw, 9rem);
}

TSXEditorial section

<section className="section" aria-labelledby="section-title">
  <header className="section-heading">
    <span className="section-index">01</span>
    <h2 id="section-title">A clear product claim.</h2>
    <p>Evidence and context, kept within a readable measure.</p>
  </header>
  {/* Product evidence, not decorative cards */}
</section>

Desktop> 980px

Fixed studio rail, full editorial canvas, asymmetric product storytelling.

Tablet701–980px

Sticky top header, reduced columns, content order preserved.

Mobile≤ 700px

Single-column narrative, 44px targets, intentional data scrolling.

05 · Operating rules

Restraint is part of the implementation.

01Products and evidence lead; technology supports the story.
02Typography and spacing establish hierarchy before containers do.
03Signal Blue communicates state instead of decorating empty space.
04Flat structure, real screenshots, and hairlines create depth honestly.
05Every motion keeps a complete reduced-motion equivalent.
06Anything that does not improve comprehension is removed.