JKC / Style Guide Essentials / v1.1 Issued 2026-05-13

§ Visual Identity — Essentials

Style Guide

The three things that need to stay consistent across any future page, sub-page, email signature, slide deck, or marketing material: color, typography, and buttons.

§01

Color

Six tokens, one accent
System

Five warm neutrals plus one saturated accent. Ember is the only saturated color in the system — reserved for link underlines, accent text on dates and eyebrows, and the left rule of the featured callout.

The theme-color meta tag is set to Paper so the browser chrome on mobile picks up the page background. Goal: Ember should never carry more than ~4% of any given view.

01 / Background
Paper
#F4F0E6
RGB 244 240 230
Default page background. The signature surface.
02 / Surface
Bone
#E8E2D2
RGB 232 226 210
Featured callout background, card fills, code blocks.
03 / Primary
Ink
#14130E
RGB 20 19 14
All body and heading text. Primary button fills. Warm near-black; never pure #000.
04 / Secondary
Mid
#6F6A5C
RGB 111 106 92
Metadata, captions, role places. Readable but recessed.
05 / Hairline
Soft
#A8A294
RGB 168 162 148
Internal dividers between rows, list separators.
06 / Accent
Ember
#BF4A1E
RGB 191 74 30
Eyebrows, dates, link underline, callout rule. ≤4% of view.
Hairline

A seventh value, Hairline (#2C2A22), exists for outer borders and the strongest dividers (section headers, surrounding boxes). It's nearly-but-not-quite Ink — slightly softer so adjacent elements don't fight for visual weight. Not exposed as a palette swatch because it's structural, not a brand color.

§02

Typography

JetBrains Mono, single face
Face

JetBrains Mono across the entire site. Self-hosted (no Google CDN call). Weights in active use: 400 regular, 500 medium, 700 bold, with occasional 400 italic.

The discipline of a single mono face is the visual analogue of the brand stance. There is no secondary serif, no display face, no exceptions. Future pages and assets must hold this rule.

— Type scale

H1 — Hero

Measurable, falsifiable outputs in domains that look intuitive from outside.

~44 / 500
LH 1.15
H2 — Section

Materials science instincts, applied where they aren't obvious.

~40 / 500
LH 1.15
H3 — Role title

Head of R&D — Aepnus Technologies

16 / 700
LS 0.02
H4 — Subsection

> METHODOLOGY

14 / 500
UC LS 0.1
H6 — Eyebrow
// About
11 / 500
UC LS 0.15
Body

I'm a materials scientist and R&D leader. For more than fifteen years I've worked at the intersection of chemistry, physics, and clean energy.

15 / 400
LH 1.7
Meta — UC caps

FEB 2025 — PRESENT

11 / 500
UC LS 0.1

— Body specimen

I'm a materials scientist and R&D leader. For more than fifteen years I've worked at the intersection of chemistry, physics, and clean energy. That has meant solar-to-fuels research at Lawrence Berkeley National Laboratory, industrial CO2 electroreduction at Twelve Benefit Corp, and next-generation electrolyzer development at Aepnus Technologies.

The instinct that came out of all of that is to want measurable, falsifiable outputs in domains that look intuitive from outside. Compute first against the source data. Verify the values. Then narrate what the values do and don't show.

Prefix conventions

Two prefix conventions established by the build, to be reused on any new page:

// Section — H6 eyebrow above every major section, Ember caps. Reads like a code comment. Title-cased after the slashes.

> SUBSECTION — H4 sub-heading inside a section body, Ink caps. Reads like a terminal prompt. Always fully uppercase.

§03

Buttons

Two variants, two sizes
Variants

Primary — Ink fill, Paper text. The default. Used for the main CTA in any block ("Get In Touch," "Connect With Me," "View on ORCID," "Become a Beta Tester").

Outline — transparent fill, Ink border, Ink text. Used as the secondary choice when two CTAs sit together. On hover, the outline inverts to match the primary's resting state.

Small variant — reduced padding and type size. Used for DOI / venue links in the publications list and other inline reference contexts.

No border-radius. Never. Buttons are rectangular by design.

FIG. 01 / Primary — default & hover

Get In Touch Get In Touch ↑ default · hover ↑

FIG. 02 / Outline — default & hover

Currently Building Currently Building ↑ default · hover ↑

FIG. 03 / Pair — primary + outline

Currently Building Get In Touch

Standard hero pair. Primary leads, outline follows. Two buttons is the maximum per CTA cluster — never three.

FIG. 04 / Small variant — DOI / venue links

Chem. of Materials → ACS Appl. Energy Mater. → Adv. Functional Mater. →

Always include the trailing arrow glyph (→) when the link leaves the site or jumps to an external resource (DOI, ORCID, LinkedIn, Nucora).

— Specification

Property Primary & Outline Small variant
Padding 14px 28px 8px 14px
Font size 11px 10px
Letter-spacing 0.15em 0.1em
Text transform uppercase uppercase
Font weight 500 500
Border 1px solid Ink 1px solid Ink
Border radius 0 0
Transition background 0.15s ease, border-color 0.15s ease same
Primary — default bg Ink · text Paper same
Primary — hover bg Ember · text Paper same
Outline — default bg transparent · text Ink · border Ink same
Outline — hover bg Ink · text Paper · border Ink same
DocumentJKC Style Guide — Essentials
ScopeColor · Typography · Buttons
Issued2026-05-13 — v1.1