Overview

BullshitBuster is a multilingual (English/French) Jekyll-based fact-checking and media-literacy site. The visual theme is Fallout/retro-apocalyptic: Vault Boy blue and Pip-Boy yellow against warm cream and dark green tones. The aesthetic is bold and confrontational — it exists to call out misinformation — while remaining readable and authoritative.

Colors

The palette is derived from the Fallout video game series’ iconic color scheme, adapted for readability on a web publication.

• Primary (#2B5F9E): Fallout blue. Used for links, nav backgrounds, primary buttons, and all interactive chrome.
• Secondary (#FDB91A): Fallout yellow/amber. Used for hover states, highlights, call-to-action accents, and tag badges. The single most attention-grabbing color on the page.
• Tertiary (#4A7BA7): Lighter vault-boy blue. Used for secondary interactive elements and muted highlights.
• Neutral (#F5EDD8): Warm beige/cream. The page’s alt-background and card surfaces — softer than pure white, gives a worn-paper quality.
• Text (#3D5247): Dark green derived from the logo background. Used for all body text — not pure black, keeping the retro warmth.
• Text-light (#4A695A): Medium green for metadata, captions, secondary text.
• Border (#C9B899): Tan accent for dividers and card borders.
• Background (#FFFFFF): Primary page background — pure white to maximize contrast with the warm accents.

Typography

Two families: Roboto (sans-serif) for UI, headings, and navigation; Merriweather (serif) for long-form prose and book content. This pairing gives the site both modern clarity and literary authority.

• Headings are always Roboto bold with tight line-height (1.2).
• Body text in article/book/quote content uses Merriweather for readability.
• UI labels, metadata, tags, and nav use Roboto.
• Monospace (Courier New) is used sparingly for code or quote attribution in retro style.

Spacing & Layout

• Single spacing unit: 1rem. All spacing is derived from multiples of this.
• Container max-width: 1200px with 20px side padding.
• Border radius is consistently 4px (small, boxy — consistent with the retro military aesthetic).
• Box shadows are subtle: 0 2px 4px rgba(0,0,0,0.1), lifting to 0 4px 8px on hover.

Component Guidance

• Buttons/CTAs: Primary blue (#2B5F9E) background, white text. On hover, shift to yellow (#FDB91A) with dark text.
• Tags: Small pill badges using the secondary yellow with dark text, or blue with white text depending on context.
• Cards: White background, 4px radius, tan border, subtle shadow. Alt-background cards use the warm beige.
• Nav: Primary blue background with yellow hover/active states.
• Quotes: Use Merriweather italic; attribute in small Roboto caps.
• Author/book headers: Bold Roboto headings, metadata in text-light green.

Tone

Confrontational but credible. The retro aesthetic signals “this is not a corporate PR machine.” Typography choices reinforce that this is a serious reading site, not clickbait. Avoid visual clutter — let the content dominate.