Style Guide

Brand Identity

The publication name is always written as Your Publication Name — capitalised, no abbreviation. The icon is a serif "F" on a dark square. The pansy flower — a historical symbol of freethought (from the French pensée, meaning "thought") — is the publication's mascot and will replace the favicon in a future update.

Tagline: Your publication tagline goes here.

Typography

Four font families, each with a specific role. All loaded from Bunny Fonts (privacy-friendly, no tracking).

Role	Font	Sample
Masthead	Playfair Display	Your Publication Name
Headlines	Lora	Reason Against Orthodoxy
Body text	Source Serif 4	The examined life is the only one worth living.
UI / Labels	DM Sans	ANALYSIS · 8 MIN READ

Type scale

Major Third ratio (1.25). Base size is 16px (1rem).

Colour Palette

Core colours

Section colours

Dark mode

UI Patterns

Buttons

Square corners. DM Sans. Uppercase is optional. Border on default, filled on hover.

Cards

Content cards use background: var(--color-bg-alt) with a 1px solid var(--color-rule) border. Article-style cards get a left accent border (3px). Hover lifts with shadow.

Section badges

Spacing

All spacing uses a consistent scale from --space-1 (0.25rem) to --space-20 (5rem). No magic numbers.

Border radius

Default to square corners (border-radius: 0) for a professional, authoritative feel. Rounded corners used only where softness is intentional (pills, toggles).

Interactive Elements

Glossary tooltips

Glossary terms detected in article and library text receive a dotted underline. Hover or focus shows the definition. Powered by Tippy.js.

Highlight colours

Six highlight colours for reader annotations. Opacity adapts per theme (light, dark, sepia, cream).

Timeline cards

Timeline events use alternating left/right cards with a central vertical line, accent-coloured dots, and horizontal connectors. Cards have a left (or right) accent border, var(--color-bg-alt) background, and hover lift.

Showcase pages

Full-screen screensaver-style displays for quotes, timeline events, trials, glossary terms, bookshelf, and thought experiments. Dark background uses var(--color-bg) and var(--color-ink) to respect theme. Auto-advance with progress bar, keyboard navigation, pause/play.

Page Layouts

Standard page

Container with padding-top: var(--space-10), padding-bottom: var(--space-20). Header uses font-masthead h1 with clamp(1.8rem, 5vw, 3.815rem), italic subtitle, and border-bottom: 3px solid var(--color-ink).

Hub page

Card grid with grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)). Cards link to sub-pages with title, description, and optional arrow indicator.

Article page

Single-column centred layout. Action button bar below the article header. Reader panel on the right (icon-only tabs). Annotation toolbar fixed at the bottom.

Site Structure

The footer and site map organise the site into these sections:

• Sections — 8 editorial sections (News, Opinion, Analysis, Arts & Culture, Science & Tech, History, Letters, Reviews)
• Freethought Projects — Library, Quotes, Videos, Timeline, Glossary, Recommended Reading, Thought Experiments, Trials of Thought, Freethought Music, Photo Gallery, Resources
• Freethought Community — Community Directory, Events Calendar, Community Guidelines, Newsletter, RSS Reader, Suggest a Group
• Contribute to Our Projects — submission forms for quotes, timeline entries, books, library texts, glossary terms, trials, thought experiments, events, photos, songs
• Contribute — Write for Us, Submit an Article, Write a Letter, Support Us
• Contact — Contact Us, Send Feedback, Tip Line, Report a Correction
• Reader Tools — Search, Start Here, Notes & Highlights, Reading List, Archives, Editions, Your Data, RSS Feed
• About — About Us, Masthead, Contributors, Editorial Ethics, Editorial Handbook, Editorial Dashboard
• Transparency — Features, How It's Built, Changelog, Open Source, Style Guide, Public Analytics
• Legal — Privacy Policy, Terms of Use, Cookies Policy, Accessibility, Site Map

Naming

• Publication name: Your Publication Name (always full, always capitalised)
• Never abbreviated to "TFT" in reader-facing copy
• The bookshelf project is called Recommended Freethought Reading (or Recommended Reading in compact contexts)
• The music feature is called Freethought Music (not "Music Player")
• Prefix for localStorage keys: tft
• CSS class convention: BEM-style (.block__element--modifier)
• Design tokens live in tokens.css — edit once, retheme everywhere
• JS files: one per feature, deferred, no bundler
• Layouts: src/_includes/layouts/ — base, article, library-chapter, library-short, glossary-entry, etc.

Accessibility Standards

• WCAG 2.2 Level AA minimum
• 4.5:1 contrast for normal text, 3:1 for large text
• 44 × 44px minimum touch targets
• Skip-to-main link on every page
• Visible focus rings on all interactive elements
• ARIA labels on all icon-only buttons
• prefers-reduced-motion respected globally