[ TYPOGRAPHY_SYSTEM ]

> Brutalist text styles with monospace fonts and terminal aesthetics

01. HEADINGS

[ H1_HEADING ]

> H2_HEADING

// H3_HEADING

$ H4_HEADING

* H5_HEADING

# H6_HEADING

<h1 className="text-3xl md:text-6xl font-mono font-bold uppercase text-white border-2 border-white inline-block px-4 py-2">
  [ H1_HEADING ]
</h1>

<h2 className="text-2xl md:text-4xl font-mono font-bold uppercase text-white">
  {'>'} H2_HEADING
</h2>

<h3 className="text-xl md:text-3xl font-mono font-bold uppercase text-white border-b-2 border-white/20 pb-2">
  {'// H3_HEADING'}
</h3>

<h4 className="text-lg md:text-2xl font-mono font-bold uppercase text-brutalist-cyan">
  $ H4_HEADING
</h4>

02. BODY_TEXT

Standard body text using monospace font. Clear and readable for longer content.

Secondary text in zinc-400 for less important content or supporting information.

Small text for captions, metadata, or footer content.

Large bold text for emphasis or important callouts.

<p className="font-mono text-base text-white">
  Standard body text
</p>

<p className="font-mono text-base text-zinc-400">
  Secondary text
</p>

<p className="font-mono text-sm text-zinc-500">
  Small text
</p>

03. TERMINAL_PROMPTS

>Arrow prompt for navigation items

$Dollar sign for command prompts

//Double slash for comments or sections

*Asterisk for list items or bullets

[STATUS]Bracketed status indicators

<div className="font-mono text-sm">
  <span className="text-brutalist-cyan">{'>'}</span>
  <span className="text-white ml-2">Arrow prompt</span>
</div>

<div className="font-mono text-sm">
  <span className="text-white">{'['}</span>
  <span className="text-brutalist-cyan">STATUS</span>
  <span className="text-white">{']'}</span>
</div>

04. CODE_BLOCKS

TYPESCRIPT

function greet(name: string): void {
  console.log(`> Hello, ${name}!`);
}

greet('WORLD');

npm install @brutalist/ui

<div className="bg-zinc-900 border-2 border-white p-4 relative">
  <div className="absolute top-0 right-0 bg-brutalist-yellow text-black px-2 py-1 text-xs font-mono font-bold">
    TYPESCRIPT
  </div>
  <pre className="font-mono text-sm text-brutalist-green">
    {codeContent}
  </pre>
</div>

<code className="font-mono text-xs text-brutalist-cyan">
  npm install @brutalist/ui
</code>

05. LINKS

> STANDARD_LINK

[ BUTTON_LINK ]

>ARROW_LINK→

<Link 
  href="#" 
  className="font-mono text-base text-brutalist-cyan hover:text-brutalist-pink border-b-2 border-brutalist-cyan hover:border-brutalist-pink transition-colors"
>
  {'>'} STANDARD_LINK
</Link>

<Link 
  href="#" 
  className="font-mono text-sm font-bold text-white bg-brutalist-cyan px-4 py-2 border-2 border-white hover:bg-brutalist-pink transition-colors"
>
  [ BUTTON_LINK ]
</Link>

06. TAGS_AND_BADGES

TAG_NAMEFEATUREDNEW[ACTIVE]DRAFT

<span className="bg-brutalist-yellow text-black font-mono text-xs font-bold px-3 py-1 border-2 border-white uppercase">
  TAG_NAME
</span>

<span className="bg-black text-brutalist-green font-mono text-xs font-bold px-3 py-1 border-2 border-brutalist-green uppercase">
  [ACTIVE]
</span>

[ TYPOGRAPHY_RULES ]

>Font: Always use monospace (font-mono)
>Headings: Always uppercase, bold, with terminal prefixes
>Code: Neon green (#39ff14) on black background
>Links: Cyan default, pink on hover, with border-bottom
*No rounded corners (border-radius: 0px)
*Hard borders (2px for emphasis, 1px for subtle)
*Terminal prefixes: > $ // * [ ]