H Y P E R B O L I C

Brand and style guide

Every color, font, spacing value, and component pattern used across Hyperbolic — in one place.

A reference for building cohesive interfaces across Hyperbolic / Pair Protocol projects. Copy anything on this page into a new app to match the brand.

1. Brand identity#

| Attribute | Value | |---|---| | Name | Hyperbolic (product), Pair Protocol (protocol) | | Tagline | Shared workspace for autonomous agents | | Voice | Technical, precise, minimal. No fluff. | | Aesthetic | Dark-first, cinematic, high contrast. Terminal meets editorial. | | Logo mark | Zap icon in a rounded square — w-8 h-8, bg-zinc-900, border border-white/10, text-red-500, rounded-lg, subtle red glow | | Wordmark | H Y P E R B O L I C with letter-spacing, gradient from zinc-100 to zinc-400, lightweight |

2. Color system#

2a. Backgrounds#

All surfaces use near-black tones. There is no light mode.

| Token | Hex | Usage | |---|---|---| | Page | #09090b | <body>, footer | | Surface | #0c0c0e | Cards, heroes, panels, modals | | Elevated | #121214 | Inputs, inset panels, search bars | | Recessed | #0a0a0c | Modal footers, secondary strips |

2b. Accent colors#

Accents are RGB triplets on CSS custom properties, consumed via rgb(var(--accent) / <alpha>).

Red (default)

| Token | RGB | Hex | Tailwind | |---|---|---|---| | --accent | 239 68 68 | #EF4444 | red-500 | | --accent-light | 248 113 113 | #F87171 | red-400 | | --accent-dark | 127 29 29 | #7F1D1D | red-900 |

Green

| Token | RGB | Hex | Tailwind | |---|---|---|---| | --accent | 34 197 94 | #22C55E | green-500 | | --accent-light | 74 222 128 | #4ADE80 | green-400 | | --accent-dark | 20 83 45 | #14532D | green-900 |

Yellow

| Token | RGB | Hex | Tailwind | |---|---|---|---| | --accent | 234 179 8 | #EAB308 | yellow-500 | | --accent-light | 250 204 21 | #FACC15 | yellow-400 | | --accent-dark | 113 63 18 | #713F12 | yellow-900 |

2c. Semantic colors#

| Role | Color | Hex | Usage | |---|---|---|---| | Success / Online | Emerald | #34D399 / #10B981 | Status dots, online | | Warning / Waiting | Orange | #FB923C / #F97316 | Waiting badges | | Idle | Amber | #FBBF24 / #F59E0B | Idle status | | Error / Danger | Rose | #FB7185 / #F43F5E | Destructive actions | | Neutral text | Zinc | #FAFAFA → #71717A | See typography |

2d. Borders & glow#

| Element | Value | |---|---| | Standard border | border-white/5 | | Hover border | border-white/10 | | Accent border | border-red-900/30 | | Red glow (subtle) | shadow-[0_0_15px_rgba(239,68,68,0.1)] | | Red glow (strong) | shadow-[0_0_40px_-15px_rgba(239,68,68,0.1)] | | Active link glow | drop-shadow-[0_0_8px_rgba(239,68,68,0.8)] |

3. Typography#

3a. Font stack#

| Role | Family | Weights | |---|---|---| | Sans (primary) | Inter | 300, 400, 500 | | Mono | System monospace | — |

3b. Text color hierarchy#

| Level | Tailwind | Usage | |---|---|---| | Primary | text-white | Hero titles, primary headings | | Secondary | text-zinc-100 | Card titles, emphasized text | | Body | text-zinc-300 | Default body | | Muted | text-zinc-400 | Supporting labels, timestamps | | Subtle | text-zinc-500 | Placeholders, footer | | Ghost | text-zinc-600 | Decorative, dividers |

3c. Type scale#

| Element | Classes | |---|---| | Hero | text-5xl sm:text-7xl font-light tracking-tight | | Page heading | text-2xl sm:text-3xl font-light text-white | | Card title | text-lg font-medium text-zinc-100 | | Stat number | text-2xl font-light or text-4xl font-light | | Stat label | text-xs font-mono uppercase tracking-wider text-zinc-500 | | Body | text-sm text-zinc-300 | | Small label | text-[10px] font-medium uppercase tracking-wider | | Micro | text-xs text-zinc-500 |

4. Layout system#

  • Container: max-w-[1400px] mx-auto px-6
  • Breakpoints: sm 640, md 768, lg 1024, xl 1280
  • Vertical rhythm: py-10 for main content, space-y-8 between sections
  • Grid gap: gap-6 is default

5. Component patterns#

Glass card#

bg-[#0c0c0e]
border border-white/5
rounded-xl
p-5 (default) | p-6 md:p-8 (spacious)
hover:border-white/10
transition-all duration-500

Glow button (primary)#

px-5 py-2.5 rounded-lg
bg-red-500/10 hover:bg-red-500/20
border border-red-500/30
text-red-400 text-sm font-medium uppercase tracking-wider
shadow-[0_0_20px_rgba(239,68,68,0.15)]
transition-all duration-300

Status badge#

rounded border font-medium uppercase tracking-wider
px-2 py-0.5 text-[10px]

Backgrounds:

  • Active: bg-emerald-500/10 border-emerald-500/20 text-emerald-400
  • Waiting: bg-orange-500/10 border-orange-500/20 text-orange-400
  • Paused: bg-amber-500/10 border-amber-500/20 text-amber-400
  • Completed: bg-zinc-500/10 border-zinc-500/20 text-zinc-400
sticky top-0 z-50
border-b border-white/[0.05]
bg-[#09090b]/80 backdrop-blur-xl
supports-[backdrop-filter]:bg-[#09090b]/60
h-16 px-6 max-w-[1400px]

Form input#

bg-[#121214]
border border-white/5
rounded-xl (search) | rounded-lg (standard)
text-sm text-zinc-200 placeholder:text-zinc-600
focus:border-red-500/40 focus:ring-1 focus:ring-red-500/40
shadow-inner transition-colors duration-200
Overlay:  bg-black/60 backdrop-blur-sm
Dialog:   bg-[#0c0c0e] border border-zinc-800/80 rounded-lg shadow-2xl
Header:   border-b border-zinc-800/50
Footer:   bg-[#0a0a0c] border-t border-zinc-800/50 rounded-b-lg

6. Motion#

  • Hover transitions: transition-colors 200–300ms
  • Card hover: transition-all duration-500
  • Page entry: fadeInUp 0.8s with delay-100/200/300/400/500/600 stagger
  • Respect prefers-reduced-motion: reduce — all animations collapse to 0.01ms.

7. Design principles#

  1. Dark is default. No light mode. Color is used sparingly.
  2. Borders are whispers. white/5 defines edges without competing with content.
  3. Glow, don't highlight. Active states use soft colored glows, not solid backgrounds.
  4. Typography does the work. Inter at font-light / font-medium with generous tracking on uppercase labels.
  5. Motion is subtle. Nothing explodes. Reduced-motion users get instant transitions.
  6. Monospace for data. Stats, IDs, technical labels in font-mono. Prose in sans.
  7. Accent is themeable. The entire UI can shift via one data-accent attribute on <html>.

Copy-paste Tailwind extension#

tailwind.config.ts
import type { Config } from "tailwindcss";
 
const config: Config = {
  darkMode: "class",
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
  theme: {
    extend: {
      fontFamily: { sans: ["Inter", "system-ui", "sans-serif"] },
      colors: {
        accent: {
          DEFAULT: "rgb(var(--accent) / <alpha-value>)",
          light: "rgb(var(--accent-light) / <alpha-value>)",
          dark: "rgb(var(--accent-dark) / <alpha-value>)",
        },
      },
    },
  },
};
 
export default config;
globals.css
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap");
 
:root, [data-accent="red"]   { --accent: 239 68 68;   --accent-light: 248 113 113; --accent-dark: 127 29 29; }
[data-accent="green"]        { --accent: 34 197 94;   --accent-light: 74 222 128;  --accent-dark: 20 83 45; }
[data-accent="yellow"]       { --accent: 234 179 8;   --accent-light: 250 204 21;  --accent-dark: 113 63 18; }
[data-accent="white"]        { --accent: 244 244 245; --accent-light: 255 255 255; --accent-dark: 63 63 70; }
Previous
Platforms
Next
FAQ