Kyle A. HammondsPhD

Internal reference

Style guide

The design tokens, type scale, and component patterns that govern every page on this site. Edit the CSS variables in app/globals.css and the entire site updates.

Tokens

Color

Brand colors carry tone and emphasis. Surface and ink colors carry hierarchy. Use brand colors sparingly; let surface and ink do the structural work.

Brand

  • Forest

    #17261d

    --color-forest

    Primary. Ink, headers, primary buttons.

  • Forest Deep

    #0e1813

    --color-forest-deep

    Hover state for forest surfaces.

  • Forest Soft

    #2a3d33

    --color-forest-soft

    Hover for ink links.

  • Teal

    #3e8a89

    --color-teal

    Secondary. Accents, link underlines.

  • Teal Soft

    #6aa8a7

    --color-teal-soft

    Background washes, supporting marks.

  • Amber

    #fdad06

    --color-amber

    Accent. Focus rings, selection.

  • Amber Soft

    #ffc34d

    --color-amber-soft

    Highlight washes.

Surface

  • Paper

    #f6f3ec

    --color-paper

    Page background. Warm off-white.

  • Paper Warm

    #efe9dc

    --color-paper-warm

    Footer and quiet panel background.

  • Surface

    #ffffff

    --color-surface

    Elevated cards.

Ink

  • Ink

    #17261d

    --color-ink

    Primary text.

  • Ink Mute

    #4a574f

    --color-ink-mute

    Secondary text, supporting copy.

  • Ink Quiet

    #7a857d

    --color-ink-quiet

    Tertiary text, meta.

  • Rule

    #d9d3c4

    --color-rule

    Dividers and borders.

Tokens

Typography

Single family: Poppins, served via next/font. Hierarchy comes from weight, size, and letter-spacing — not from family changes. Light weights (300) for display, regular (400) for body, semibold (600) for emphasis and UI.

  • Display

    Reserved for Home page hero only.

    Communication, media, culture.

  • H1

    One per page. Page title.

    Reading comics with Ricoeur

  • H2

    Major section heads. Often phrased as questions.

    How does meaning travel through media?

  • H3

    Subsections within a page.

    Hermeneutics and the moving image

  • H4

    Card titles, publication entries.

    The magic of Mysterio

  • H5

    Inline group heads, sidebar labels.

    Selected publications

  • H6

    Inline labels, small headers.

    Filed under: media

  • Lede

    Page intro paragraph. Sets context.

    A study of how popular media texts move through fan communities and shape public discourse.

  • Body

    Default running paragraph. Max measure 38rem.

    Audiences do not consume media so much as remake it. A film, a panel, a podcast — each becomes raw material for a community to rework, reframe, and circulate. The work of communication research is to read those reworkings as carefully as the original text.

  • Body Small

    Captions, secondary blocks, footer.

    Originally presented at the National Communication Association annual conference, 2024.

  • Eyebrow

    Section labels above heads. Tracked uppercase.

    Field notes

  • Micro

    Legal, footer fine print, meta.

    Last updated April 2025

Tokens

Spacing

A 4px base scale. Use the same rhythm across margins, padding, and gaps. Section spacing is larger than block spacing; block spacing is larger than inline spacing.

  • space-1

    0.25rem · 4px

  • space-2

    0.5rem · 8px

  • space-3

    0.75rem · 12px

  • space-4

    1rem · 16px

  • space-6

    1.5rem · 24px

  • space-8

    2rem · 32px

  • space-12

    3rem · 48px

  • space-16

    4rem · 64px

  • space-24

    6rem · 96px

  • space-32

    8rem · 128px

Tokens

Radii

Minimal corner softening. Editorial restraint. Nothing pillowy.

  • xs

    2px

  • sm

    4px

  • default

    6px

  • md

    8px

  • lg

    12px

Components

Buttons

Three variants — primary, secondary, ghost. Three sizes. Primary for the single most important action on a surface; secondary for the second-most. Ghost for tertiary.

Variants

Sizes

Components

Forms

Inputs are quiet by default with strong focus states. Labels sit above inputs. Required fields are marked; errors carry both color and text.

Components

Links and inline elements

Inline links use a teal underline. Selection is amber on forest. Code uses paper-warm chips.

This paragraph contains an inline link and an active link. Drag-select any of it to see the amber selection treatment.

Inline code looks like --color-forest and reads quietly inside body copy.

Audiences do not consume media so much as remake it.

Motion

Duration and easing

Three durations, one editorial easing curve. Motion is used to confirm interaction, not to decorate. Reduced-motion preferences are respected globally.

  • --duration-quick

    180ms

    Hovers, focus states, small UI changes.

  • --duration-base

    280ms

    Reveals, transitions, panel opens.

  • --duration-slow

    520ms

    Page-load reveals, staggered intros.