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.