Split Brain

Type Scale

Sizes follow a Major Third scale (each step is 1.25× the last), built on a 16px base. This keeps headings and body text in a consistent rhythm.

Corner Radius

A few rounding roles do most of the work: a gentle radius for small surfaces, a larger one for cards, a rounder still for large containers, and a full pill for badges and buttons. When one rounded element nests inside another, the inner corner steps down by 4px (inner = outer − 4) so the two curves stay concentric: a card at 12px holds an image at 8px.

Spacing Rhythm

Spacing is pragmatic rather than rigid, but it clusters around a few recurring steps that set the vertical and horizontal rhythm.

Project Card

The main building block of the homepage. The project's image or video fills the card, with the title and status below. Hover to see the category-colored prompt follow your cursor; click to reveal the description and a link. Category color, navy for technical, rust for advertising, is carried by the prompt and the button.

The Namesake

Summer 2026 Shipped

×

Yes, that is my real brain.

A neurology study left me with my own MRI files. I figured this would be a good place to hide an image.

;)

Buttons & CTAs

Rounded buttons in the two category colors, navy and rust, plus a version with an external-link arrow, a pulsing "Coming Soon" state, and a button that copies my email to your clipboard.

Every button shows a clear focus ring when tabbed to, so keyboard users always know where they are.

View Case Study Primary · Navy

View Presentation Primary · Rust

View Project External link

Coming Soon Coming Soon

Status Badges

Small pills that signal a project's stage. Each pairs a soft tinted background with a matching colored dot. The neutral date pill sits alongside them in the card's meta row.

Links

Text links come in a few flavors depending on where they live. Each fades to a related color when you hover over it.

View Project Button with external-link arrow

Nav link Header navigation

Open Source Licensing Footer / license link (muted)

Skip to main content Skip link — normally hidden until you tab to it, letting keyboard users jump straight to the content

Header & Footer

Every page is framed by the same navigation header and footer, injected from one source so they stay identical site-wide. You're looking at them at the top and bottom of this page right now. The header carries the brand name and section links; the footer is a small sitemap, brand and tagline, a Work column linking every project, site navigation, and contact, over live clocks and a legal line.

Tech Stack Marquee

A row of tool icons that scrolls on its own and loops forever. Hover the row to pause it.

Respects prefers-reduced-motion: the scroll stops for visitors who ask their system to reduce motion.

Live Clocks

Real-time clocks in the footer, showing my current location and Tokyo, each paired with a day/night visual (a sun by day, the live moon phase by night).

Day & Night

Beside each clock sits a sun by day or the moon's current phase by night. The phase is calculated live from the lunar cycle, so it always matches the real sky.

Sun (day)

New

Waxing Crescent

First Quarter

Waxing Gibbous

Full

Waning Gibbous

Last Quarter

Waning Crescent

Hover to Translate

Japanese words show their English meaning when you hover over them. A nod to my study abroad trip that doesn't alienate anyone who can't read it. Rendered in Noto Sans JP.

Copy Email Link

Click to copy my email to your clipboard, with a quick confirmation.

Icons

Small UI icons used throughout the site: carousel arrows, the info marker, the external-link arrow, and the two Split Brain logo halves. All are SVGs, so they stay crisp at any size and recolor to match their surroundings.

Back

Forward

Info

External link

Split Brain · Navy

Split Brain · Rust