visualaesthetic
Contact

VisualAesthetic · v0.1

The system behind the site.

Tokens, type, and components rendered live from the same code the pages use. Flip the theme switch in the footer and everything on this page re-resolves; components read semantic tokens only, never hex.

Color

Semantic tokens
  • bg
  • surface
  • surface-2
  • line
  • line-strong
  • text
  • text-2
  • text-3
  • accent
  • accent-ink
  • on-accent
  • focus

Three theme states: bare root is light, the OS media query applies dark when nothing is stamped, and the visitor's choice wins via a data attribute. Accent as a fill always pairs with on-accent text; accent as text only ever renders through accent-ink.

Type

Newsreader · Geist · Geist Mono
Display / 1Play, watch, pay
Display / 2Selected work
TitleShow the decision, not just the screen
LedeOne sentence that frames the study.
Body / SerifCase study prose reads in Newsreader at a comfortable measure.
BodyInterface copy reads in Geist at 15 over 1.55.
CaptionFig. 1 Captions are serif italic and quiet.
LabelMono label · 12 · 0.08em

Space

4 to 120
4
8
12
16
24
32
48
72
120

Components

Rendered live

Button

Read the workRead itDownload resume

Primary pill, quiet pill, underline. Hit targets never drop below 44px.

Tag

Design leadershipLive productMobile F2P

MetaList

Role
VP Experience Design
Company
Third Time
Years
2021 to 2023

One rule language: strong opener, quiet separators.

Figure

Specimen well
Fig. 1A media well with the glow reserved for lead figures.

Wells hold every image; captions are serif italic and numbered because the text references them.

Ticker

Now
BuildingThis site, in the openSept 2026FlyingTwo DarkStar22 cinewhoopsSept 2026StudyingFAA Part 107ongoing

Pauses on hover and focus; reduced motion renders a static list.

FieldNote

An aside in the rail column, never inside the prose.

BeforeAfter

Before
After
BeforeAfter
Fig. 2The reveal slider, wired to the compare_drag event.

A native range input over the frame: drag, swipe, arrow keys (shift for 10), and screen readers all work for free.

Hotspots

Annotated screen
Fig. 3Numbered callouts over a recreated screen.

Markers are buttons with aria-expanded; the active callout reads through an aria-live panel below the frame. The first marker opens on entry, never under reduced motion.

FlowStepper

Screen · lobby
1 of 3
BrowseThe lobby leads with what is happening now, not with navigation.
Step 1 of 3: Browse
Fig. 4A three-step flow with the step position announced.

Screen above, controls below; swipe changes step on touch. Content swaps with a cross-fade and a 12px rise on the base duration.