Style Guide

Logotype

The Umami Post

Tagline

Mascot

The pansy flower, a historical symbol of Food (from the French pensée, meaning "thought"), is the publication's mascot.

Surfaces, light mode

Text

Accents & UI

Section colors

Dark mode surfaces

Families

Dates

Every human-readable date sitewide renders in Month DD, YYYY format — for example, "April 18, 2026". Server-side this is the readableDate and shortDate Eleventy filters (Luxon LLLL d, yyyy); client-side date renderers use toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' }). Abbreviated months ("Apr 18") and ISO ordering ("2026-04-18") are reserved for machine-readable contexts only — the htmlDateString filter and the datetime attribute on <time> elements.

Variants

<a class="btn">Default</a>
<a class="btn btn--accent">Accent</a>

On dark backgrounds

Variants

tip-badge--pub value uses background: #1E3A5F; color: #F4F1EB, deep navy, hardcoded. 10.2:1 contrast. Visually distinct from both light card bg and dark page bg (#141414). Do not change to use accent tokens.

<a class="tip-badge" href="...">
  <span class="tip-badge__label">support</span>
  <span class="tip-badge__value">Author Name</span>
</a>

With Tippy tooltip

data-tippy-content="..."
data-tippy-theme="badge"
data-tippy-placement="top"

Metadata, always shown on every card

Large, size="lg"

Homepage lead story, section lead. Used with showImage=true.

  
  

  
  

    
    
    
      Invalid DateTime
    
  

  
  
    
  

  
  

  
  

    
    
  

priority = true sets fetchpriority="high" and loading="eager" on the image. Use only for the single above-fold hero card to improve LCP.

Medium, size="md"

Standard feed card. Default size.

  
  

  
  

    
    
    
      Invalid DateTime
    
  

  
  
    
  

  
  

  
  

    
    
  

Small, size="sm"

Sidebar, related posts, article lists.

  
  

  
  

    
    
    
      Invalid DateTime
    
  

  
  
    
  

  
  

  
  

    
    
  

Extra-small, size="xs"

Compact lists. Description suppressed.

  
  

  
  

    
    
    
      Invalid DateTime
    
  

  
  
    
  

  
  

  
  

    
    
  

Horizontal, with thumbnail

Used where a compact image + text side-by-side layout is needed. Add class article-card--horizontal.

Analysis March 15, 2026

Federal Regulators Quietly Shelved Three Major Investigations

By Jon Ajinga 8 min read · 1,847 words

<article class="article-card article-card--horizontal">
  <img class="article-card__image" src="..." ...>
  <div>...eyebrow, headline, byline...</div>
</article>

Usage guide

Avatar stacking pattern

<div class="author-card__avatar">
  <div class="author-card__initials" aria-hidden="true">JA</div>
  <img src="photo.jpg" class="author-card__photo"
       onerror="this.style.opacity=0">
</div>

Initials always render. Photo is position: absolute on top. onerror hides the photo if it fails to load, revealing initials underneath.

Skip link

Press Tab on any page. The first focusable element is a "Skip to content" link that jumps past navigation to #main.

Focus ring

Every interactive element shows a 2px vermillion outline with 3px offset on keyboard focus.

Screen-reader-only content

Use .sr-only to hide content visually while keeping it accessible to assistive technology.

<span class="sr-only">Opens in new tab</span>

Reduced motion

All animations and scroll behavior honor prefers-reduced-motion: reduce. Duration drops to near-zero; auto-advance stops.

ARIA landmarks & labels

• role="banner" on site header, role="contentinfo" on footer
• aria-label on every icon-only button and every navigation region
• aria-current="page" on the active nav link
• aria-hidden="true" on all decorative SVGs and avatar initials
• <main id="main"> as the skip-link target

Repeated link text

When multiple links share the same visible text but go to different destinations, e.g. "View All →" buttons in section strips, add aria-label to give each a distinct accessible name:

<a href="//" class="btn"
   aria-label="View all  articles">
  View All →
</a>

This satisfies Lighthouse's "Links do not have descriptive text" audit and WCAG 2.4.6. The visible text stays short; the accessible name is descriptive.

Touch targets

Every interactive element is a minimum of 44×44 CSS pixels, buttons, nav links, form inputs, theme toggle, hamburger, back-to-top, tip badges.

Glossary tooltips

Glossary terms detected in article text receive a dotted underline. Powered by Tippy.js. Keyboard accessible.

Publication name

• Always written as The Umami Post, full, capitalised
• Never abbreviated to "TFT" in reader-facing copy
• Short context only: "The Times" is acceptable in conversational UI

CSS class convention

BEM-style: .block__element--modifier. No utility classes except where explicitly defined in utilities.css.

.article-card__byline          /* element */
.article-card__headline--lg    /* element + modifier */
.section-badge--news           /* block + modifier */

JavaScript

• One file per feature, deferred, no bundler
• LocalStorage key prefix: tft- (e.g. tft-theme, tft-reading-list)
• No inline event listeners on elements with custom display CSS, tinyHTML can mangle them. Use onclick="" as a fallback alongside deferred listeners.

Design tokens

All tokens live in src/assets/css/tokens.css. Never use raw hex values or pixel sizes in templates or component CSS, always reference a token. Dark mode overrides are declared in the same file under [data-theme="dark"].

Content naming

• The bookshelf project: Recommended Food Reading (compact: Recommended Reading)
• The music feature: Food Music (never "Music Player")
• Layouts directory: src/_includes/layouts/
• Partials directory: src/_includes/partials/