← BACK TO SITE

BRAND GUIDELINES

Everything you need to know about Echo Chamber's visual identity, voice, and design principles. Our brand is intentionally abrasive, unapologetically digital, and proudly anti-refined.

1. BRAND IDENTITY

Name

Echo Chamber

Pronounced: /ˈɛk.oʊ ˈtʃɛm.bər/
Like "echo" and "chamber," but ironically.

Tagline

Finally, an algorithm that gets you.

(Too well.)

BrandVoice

SARCASTIC

Everything is a joke. We're not serious. (Or are we?) Meta-irony is our love language.

HARSH

Brutalist design meets Y2K aesthetic. No soft gradients, no rounded corners, no mindfulness.

SELF-AWARE

We know we're part of the problem. That's the punchline. You're in on the joke.

2. COLOR PALETTE

Primary Colors

ACCENT PINK

#FF00FF

For primary buttons, highlights, "danger" elements, and general digital aggression.

ACCENT CYAN

#00FFFF

Secondary buttons, decorative elements, secondary text, and glitch effects.

ACCENT YELLOW

#FFFF00

Warnings, alerts, urgent CTAs (ironic), and adding "acid" to compositions.

Neutrals

PRIMARY BLACK

#000000

Backgrounds. Always. There is no light. Only screen.

PRIMARY WHITE

#FFFFFF

Text, borders, outlines, and brutalist hard edges.

ACCESSIBILITY CHECK

Our high-contrast palette (black/white + acidic colors) exceeds WCAG AA standards for text contrast. However, the visual assault may trigger seizures, migraines, or existential dread. Viewer discretion is advised.

3. TYPOGRAPHY

Heading Font: VT323

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

Google Fonts Import:

import { VT323 } from 'next/font/google'

Usage:

className="font-heading"

Body Font: Space Mono

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. Typography should be technical, cold, and slightly inhuman. This is not a warm, friendly brand.

Google Fonts Import:

import { Space_Mono } from 'next/font/google'

Usage:

className="font-space-mono"

Type Scale

HEROECHO CHAMBER
H1CHOOSE YOUR REALITY
H2Section Headings
H3Card Headings
BODYRegular paragraph text, buttons, UI elements. Crisp, technical, cold.
CAPTIONLegal disclaimers, fine print,技术支持

4. DESIGN ELEMENTS

Brutalist Borders

PRIMARY BUTTON STYLE

4px border with offset box-shadow in accent color

OUTLINE BUTTON STYLE

White on black, black on white

NESTED BORDERS create overwhelming visual noise. We love it.

Glitch Effects

GLITCH TEXT

Apply .glitch-text class with data-text attribute.
Uses CSS clip-path animation for chromatic aberration.

Animation Properties

  • • Primary glitch: 3s infinite loop
  • • Pseudo-element clones: 2-3s alternate
  • • Colors: accent-pink / accent-cyan offset
  • • Best displayed at 640x480 resolution

Marquees

THIS IS A MARQUEE. ANNOYING? YES. ON-BRAND? ABSOLUTELY. They scroll infinitely. Information overload is a feature, not a bug. The internet never stops, and neither does our content delivery system of despair_

5. COMPONENT USAGE

Buttons

Always use brutal-border class. Never use rounded corners. Keep text uppercase and aggressive.

Cards

WHITE CARD

For testimonials on dark backgrounds.

BLACK CARD

For features on light backgrounds.

Cards always use brutal-container class with nested border via ::before pseudo-element.

Badges

NEWBETAALPHA

Default badge component with outline variant. No backgrounds, just borders screaming attention.

6. DO'S AND DON'TS

✓ DO

✓Use brutal borders with offset shadows

✓Embrace visual chaos and information overload

✓Mix all three accent colors in every design

✓Maintain 4px minimum border widths

✓Use monospace fonts for everything

✓Create intentionally jarring color combinations

✓Let the glitch effects be "too much"

✓Treat whitespace as the enemy

✗ DON'T

✗Use rounded corners (border-radius: 0 only)

✗Apply subtle gradients or soft shadows

✗Use more than 2-3 fonts per page

✗Create "clean" or "minimal" designs

✗Adopt a polite, professional tone

✗Respect traditional design hierarchy

✗Worry about color harmony

✗Show empathy for users with visual sensitivities

7. FILE STRUCTURE

src/
├── app/
│   ├── layout.tsx          # Root layout with font imports
│   ├── page.tsx            # Landing page
│   ├── brand-guidelines/
│   │   └── page.tsx       # This page
│   └── globals.css         # Tailwind config + custom styles
├── components/
│   ├── ui/                 # shadcn/ui components (customized)
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   └── badge.tsx
│   └── sections/           # Custom section components (optional)
└── lib/
    └── utils.ts            # Utility functions (cn helper)

8. RESOURCES

Fonts

  • • VT323 (Google Fonts)
  • • Space Mono (Google Fonts)

Import via next/font/google for optimal performance and subset loading.

Design Inspiration

  • • Brutalist Web Design movement
  • • Y2K / Neo-Brutalism aesthetics
  • • Glitch art & databending
  • • Retro terminal interfaces

Color References

  • • Acid Colors palette
  • • High contrast web standards
  • • CRT monitor phosphors
  • • Early web ‘safe colors‘

Technical Stack

  • • Next.js 16 (App Router)
  • • Tailwind CSS v4
  • • shadcn/ui (heavily customized)
  • • TypeScript (strict mode)