Design System: Alec Glisman, Ph.D.

Overview

Creative North Star: “The Research Notebook, Digitized”

A restrained corporate-academic system built on a two-color foundation: deep navy for authority and structure, a single cyan-teal accent used sparingly for interactivity and emphasis. The system reads as competent and credible rather than expressive — safe defaults (white cards, soft shadows, rounded corners, hover-lift micro-interactions) applied consistently across every collection (research, publications, experience, projects, skills). Faint decorative touches (a hexagon watermark, a wavy SVG section divider, translucent background icons) are the system’s only attempts at personality; they are subtle to the point of being nearly invisible (2–6% opacity).

The visual vocabulary is the Minimal Mistakes / Academic Pages theme (_sass/ cascading imports) with a navy/teal override layer in _custom.scss and _variables.scss. Nothing in the layout, grid, or interaction model departs from that theme’s defaults — this is a color-and-font reskin, not a from-scratch design.

Key Characteristics:

• Two-tone identity: Navy (#1B2A4A) authority + Teal (#0EA5C9) single accent, applied almost everywhere interactive elements need attention.
• Syne for all headings (bold, tight tracking); Outfit for all body/UI text — a safe, contemporary geometric-sans pairing.
• White rounded cards on a barely-blue-tinted page background (#F8FAFC), soft dual-layer shadows, consistent hover-lift (translateY + shadow deepen) on nearly every card type.
• Four semantic badge colors (AI=teal, Physics=navy, Drug Discovery=emerald, Simulation=violet) are the only real color expansion beyond the two-tone base.
• Decoration is whisper-quiet: hex-pattern watermark at 3.5% opacity, wavy divider at 20% opacity, hero background icons at 6% opacity.

Colors

The palette is two committed colors plus four muted semantic accents, over a near-white neutral scale. Nothing is saturated or attention-grabbing at rest.

Primary

• Deep Navy (#1B2A4A): headings, masthead/footer background, nav text-on-dark, primary text emphasis, outline-button border.

Secondary

• Signal Teal (#0EA5C9): the system’s only true accent — links, hover states, badges, CTA fill, card left-borders, timeline dots, divider gradients. Carries nearly all “this is interactive” signaling.

Tertiary (semantic badges only)

• Emerald (#10B981): “Drug Discovery” badge and national-lab timeline marker — the system’s only other saturated hue.
• Violet (#7C3AED): “Simulation” badge and one decorative hero icon — used nowhere else.

Neutral

• Page Background (#F8FAFC): body background, a hair off white.
• Card Surface (#FFFFFF): all card, panel, and dropdown backgrounds.
• Ink (#374151): body copy inside cards.
• Muted (#6B7280): captions, metadata, excerpts, secondary labels.
• Hairline Border (#E8EDF5): card borders, table rules, dividers.
• Link Blue (#0369A1): base (non-hover) link color and badge/tag text — distinct from the teal accent, which is reserved for hover/interactive emphasis.
• Deep Link Hover (#0B7C97): a darker teal used wherever text needs the accent’s identity but must sit on a light background at body-text contrast (e.g. a role/title line) — the raw accent teal fails 4.5:1 there.
• Muted-on-Dark (#A9BAD1): secondary/label text on navy surfaces (e.g. the home page proof strip) — the light-surface “Muted” gray fails contrast on navy, so dark surfaces use this lighter blue-gray instead.

Named Rules

The Single-Accent Rule. Teal is the only color permitted to signal interactivity (hover, focus, active states). Every hover transition in the system shifts toward teal or darkens the existing hue; no other hue is introduced on interaction.

Typography

Display Font: Syne (with sans-serif fallback) Body Font: Outfit (with Inter, then system sans-serif fallback)

Character: A bold, tightly-tracked geometric display face over a neutral, highly-legible grotesque body face — a common “modern startup” pairing, not a differentiated choice.

Hierarchy

• Display (700, 2em / ~32px, tight tracking -0.01em): page <h1> / .page__title, underlined with a short teal gradient bar.
• Headline (700, 1.35em): <h2> section headings, bottom hairline rule.
• Title (600–700, 1.05em): <h3> card/entry titles.
• Body (400, 1em base, line-height 1.65): paragraph copy, 0.82–0.96em inside dense cards.
• Label (500, 0.68–0.78em, uppercase, +0.05–0.08em tracking): badges, skill-group eyebrow headings, metadata lines.

Layout

Single-column theme-default layout (Minimal Mistakes single/archive templates) with author_profile: true producing a left author sidebar on wide viewports; no custom grid system beyond a two-column .skills-grid at ≥768px and a .pub-card-inner 1fr auto split for figure-bearing cards, both collapsing to one column ≤600px ($small: 600px, $medium: 768px). Container width is theme-default ($large: 925px content column). Spacing is ad hoc em-based padding per component (1.4–1.6em card padding, 1.75em vertical rhythm between cards) rather than a defined spacing scale.

Elevation & Depth

Flat-by-default cards lifted with soft dual-layer ambient shadows (0 1px 3px rgba(27,42,74,.05), 0 4px 14px rgba(27,42,74,.07)), deepening on hover (0 6px 20px / 0 8px 28px at higher opacity) alongside a 2–3px translateY lift. No true elevation tiers — one shadow recipe reused everywhere a card exists (research, project, skill-group, archive item).

Shadow Vocabulary

• Ambient rest (0 1px 3px rgba(27,42,74,0.05), 0 4px 14px rgba(27,42,74,0.07)): default state for all card types.
• Hover lift (0 6px 20px rgba(27,42,74,0.1–0.12), project cards up to 0 8px 28px rgba(14,165,201,0.12)): universal hover response, paired with 2–3px translateY.

Named Rules

The Lift-on-Hover Rule. Every card-like surface (research card, project card, skill group, archive item, publication figure) responds to hover with translateY + shadow deepen. No card is inert.

Shapes

Rounded corners throughout, no sharp edges: 4px on small elements (badges, table-adjacent chips), 6px on buttons and figures, 8–10px on cards, full pill (20px) on skill tags. Research and hero-intro blocks use an asymmetric “flag” shape — square left corners with a colored left border, rounded only on the right (border-radius: 0 10px 10px 0) — the system’s one recurring signature geometric move.

Components

Buttons

• Shape: 6px radius, 0.65em 1.5em padding, Outfit 600.
• Primary (.btn--primary-cta): teal fill, white text, soft teal shadow that deepens on hover; hover also darkens fill 8% and lifts 2px.
• Outline (.btn--outline-cta): transparent fill, 2px navy border, navy text; hover inverts to solid navy fill + white text, same 2px lift.

Badges & Tags

• Research badges (.research-badge--ai/--physics/--drug/--sim): uppercase, 0.68em, tinted background + matching border at ~10–28% opacity, semantic-colored text (teal/navy/emerald/violet families).
• Skill tags (.skill-tag): pill-shaped, teal-tinted outline at rest, solid teal fill + white text on hover, 1px lift.
• Achievement inline badge: small teal-tinted rounded-rectangle highlight for inline stat callouts (e.g. competition rank).

Cards / Containers

• Research card: white surface, thin teal-tinted border, 4px solid teal left border, “flag” corner radius (0 10px 10px 0), FA icon watermark top-right at 18% opacity (35% on hover).
• Project card: white surface, light gray border, full 10px radius, teal→navy gradient top-edge accent that fades in on hover, optional bleed-to-edge cover image.
• Skill group: white surface, light gray border, 10px radius, uppercase teal eyebrow <h3> with bottom hairline.
• Publication figure card: grid-paired body + 170px figure panel, figure on tinted background with 1px teal-tinted border; collapses to stacked on mobile.

Navigation

• Dark navy masthead with subtle diagonal gradient (135deg, #1B2A4A → #1E3057 → #243454); white nav text, teal on hover with an underline-grow animation; overflow (“greedy nav”) dropdown is a white card with the same hover-to-teal treatment inverted.

Experience Timeline

• Vertical rail (2px teal-tinted line) with circular dots color-coded by role type: navy dot for industry roles, emerald dot for national-lab roles; dot ring glows and darkens on hover; whole entry nudges 3px right on hover.

Scroll Reveal

• .reveal class + IntersectionObserver fades/slides content up (20px → 0, 0.55s) on scroll into view; graceful no-JS fallback shows content immediately.

Do’s and Don’ts

Do:

• Do keep teal as the only interactive-state color; every new hover/focus treatment should shift toward teal or darken the element’s own base color.
• Do reuse the ambient/hover shadow pair exactly as specified rather than inventing a new elevation value per component.
• Do set headings in Syne and body/UI text in Outfit; do not introduce a third typeface.
• Do apply the “flag” shape (0 10px 10px 0, colored left border) only to research-card and hero-intro style callouts — it is the system’s one signature geometric move, not a default card shape.

Don’t:

• Don’t introduce a new accent hue outside the existing four semantic badge colors (teal, navy, emerald, violet) without a documented reason.
• Don’t use drop shadows heavier than the documented ambient/hover pair; the system is intentionally soft and low-contrast in its depth cues.
• Don’t exceed 600px as the mobile breakpoint or 768px as the two-column breakpoint without checking every grid consumer (.pub-card-inner, .skills-grid, .hero-wrapper).