/brand

// design system & identity

/colors

// click any swatch to copy

Core Palette

#00ff41 --color-primary Primary / Green
#00ffff --color-secondary Secondary / Cyan
#ff0080 --color-accent Accent / Pink
#ffaa00 --color-warning Warning / Amber

Pillar Colors

#00ff41 --pillar-privacy Privacy
#00ffff --pillar-ai AI
#ff0080 --pillar-blockchain Blockchain
#a855f7 --pillar-zk ZK Proofs

Backgrounds

#0a0a0a --bg-primary Page Background
#111111 --bg-secondary Secondary BG
#1a1a1a --bg-card Card Background
#222222 --bg-card-hover Card Hover

Text

#ffffff --color-text-bright Headings
#e0e0e0 --color-text Body Text
#888888 --color-text-dim Muted / Captions
#333333 --border-color Borders

/typography

// two faces, one system

JetBrains Mono

Monospace / Primary

Headings, code, labels, navigation, terminal UI, buttons

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()_+-=
Regular 400 Medium 500 SemiBold 600 Bold 700

Inter

Sans-serif / Secondary

Body text, descriptions, long-form content

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()_+-=
Regular 400 Medium 500 SemiBold 600 Bold 700

Type Scale

--text-xs 0.75rem / 12px The quick brown fox
--text-sm 0.875rem / 14px The quick brown fox
--text-base 1rem / 16px The quick brown fox
--text-lg 1.125rem / 18px The quick brown fox
--text-xl 1.25rem / 20px The quick brown fox
--text-2xl 1.5rem / 24px The quick brown fox
--text-3xl 2rem / 32px The quick brown fox
--text-4xl 2.5rem / 40px The quick brown fox

/spacing

// consistent rhythm

--space-xs 0.25rem / 4px
--space-sm 0.5rem / 8px
--space-md 1rem / 16px
--space-lg 1.5rem / 24px
--space-xl 2rem / 32px
--space-2xl 3rem / 48px
--space-3xl 4rem / 64px
--space-4xl 6rem / 96px

/components

// live rendered demos

Buttons

> Execute > View Source
<a class="btn btn-primary">> Execute</a> <a class="btn btn-ghost">> View Source</a>

Status Tags

[LIVE] [BUILDING] [CONCEPT]
<span class="status-tag status-live">[LIVE]</span> <span class="status-tag status-building">[BUILDING]</span> <span class="status-tag status-concept">[CONCEPT]</span>

Pillar Badges

privacy ai blockchain zk
<span class="pillar-badge" data-pillar="privacy">privacy</span>

Terminal Prompt

nullshift@labs$ cat identity.txt
> privacy-first builder labs
nullshift@labs$ command

Hacker Card

Whisper Protocol

End-to-end encrypted messaging with zero metadata leakage.

privacy [LIVE]

/tone

// how we write

> Prefix for actions

All button text and list items use the > prefix. It signals executability and terminal heritage.

> Execute > View Source > Deploy to mainnet

// Subtitles & comments

Section subtitles use // comment syntax. Reinforces the code-first identity.

// engineering across four pillars // prove everything, reveal nothing

[STATUS] brackets

Status indicators always use square brackets. Bold, scannable, unambiguous.

[LIVE] [BUILDING] [CONCEPT]

Terminal metaphors

UI elements reference terminal/hacker culture. File paths for navigation, commands for actions.

/services nullshift@labs$ cat about.txt

Copy Rules

  • > Technical, direct, aggressive. No fluff, no filler.
  • > Write like you're composing a README, not a marketing brochure.
  • > Prefer short sentences. Active voice. Cut every unnecessary word.
  • > Never say "leverage" or "synergy." Say "use" and "combine."
  • > Dark mode only. No sunshine metaphors. Think midnight, not midday.
  • > When in doubt, ask: "Would a cypherpunk say this?"

/rules

// design system constraints

DO

Use CSS custom properties from variables.css for all visual values

DO

Load data from JSON files under data/ and render client-side

DO

Use inline SVGs for icons. Never icon fonts.

DO

Respect prefers-reduced-motion for all animations

DON'T

Add frameworks, build tools, or CSS preprocessors

DON'T

Use light mode, light backgrounds, or light color themes

DON'T

Hardcode colors, fonts, or spacing. Use CSS variables.

DON'T

Add tracking, analytics cookies, or third-party scripts