High Agency

Overview

High Agency is a developer relations consultancy operating within the Web3 ecosystem, serving technology companies seeking authentic community engagement. The design system embodies **Architectural Minimalism**—a discipline rooted in precision, restraint, and intentional contrast. The aesthetic rejects ornamentation: a near-black canvas (#050505) serves as the foundational stage, while interactive elements and typography command attention through deliberate placement and tonal hierarchy. The emotional response is one of clarity and authority: users perceive a brand that understands complexity and distills it into actionable interfaces. The visual language evokes technical sophistication without coldness—every pixel serves a function.

High Agency's voice is direct, purposeful, and grounded in expertise. The tone avoids hype; instead, it speaks with the confidence of practitioners who have shipped products and built communities. Vocabulary favors precision over flourish: "bridge the gap," "empower developers," "build the future." The brand personality is consultative—a trusted advisor rather than a cheerleader. Example sentence in brand voice: "We connect your protocol to developers who ship."

Colors

The color system operates on a principle of **maximum contrast with minimal palette**. Primary (#050505) and Secondary (#f5f5f5) form an absolute monochromatic pair—near-black and near-white—creating the foundation for all UI surfaces and text. This extreme contrast ensures accessibility (WCAG AAA compliance at 21:1 ratio) while reinforcing the brand's architectural severity.

Color usage by role: **Primary (#050505)** is the page background and primary surface, establishing the dark canvas. **Secondary (#f5f5f5)** is the dominant text color and primary call-to-action button fill, ensuring maximum legibility and visual prominence. **Tertiary (#d8d8d8)** serves as a mid-tone accent for secondary interactive elements and hover states, bridging the extremes. **Outline (#636363)** and **Outlin

Typography

The type system pairs two distinct typefaces to create semantic clarity: **Instrument Serif** (400 weight, 72px–32px range) anchors headlines and display text, conveying editorial authority and timelessness. **Geist** (400–600 weight, 18px–16px range) handles body copy and interface labels, providing technical neutrality and legibility at small sizes. **departureMono** (500 weight, 16px–12px) is reserved exclusively for interactive labels (buttons, nav items, form inputs), signaling actionable elements through monospace convention.

Typographic hierarchy is enforced through size and weight, never color. Display text (72px, line-height 80px, letter-spacing -0.02em) commands the hero section; headline-md (32px, -0.01em) structures content sections. Body text maintains a consistent 16px basel

Layout

The layout operates on a **12-column fluid grid** with a maximum container width of 1280px, enabling responsive scaling from mobile (single column) to desktop (multi-column layouts). The page rhythm is governed by the spacing scale: **lg (40px)** separates major sections (hero, content blocks), **md (24px)** creates breathing room within components, and **sm (12px)** defines internal padding for buttons and inputs. The gutter width is 32px, applied symmetrically on left and right, ensuring consistent margins across all breakpoints.

Whitespace is treated as a design material, not a void. The hero section occupies the full viewport (h-svh), centering content vertically and horizontally with max-width: 1280px and padding: 32px. This creates a "breathing room" aesthetic where content feels in

Elevation & Depth

Depth in this system is achieved through **layered surfaces and precise shadows**, not through color gradients or transparency. The elevation model consists of three distinct levels:

**Level 1 (Base):** The primary surface (#050505) with no shadow, serving as the canvas. Animated noise texture (SVG filter with feTurbulence, opacity 0.15, mix-blend-mode: overlay) adds subtle grain without introducing visual noise.

**Level 2 (Raised Components):** Cards, buttons, and input fields sit at this level with a 1px border (color: {colors.outline-variant}, #505050) and box-shadow: 0 3px 8px rgba(0, 0,

Shapes

The shape philosophy is **Geometric Precision**—sharp, intentional corners that reinforce the architectural aesthetic. Border-radius values are minimal and purposeful:

**Buttons and interactive elements:** rounded-lg (1rem / 16px), providing just enough softness to signal interactivity without compromising the technical aesthetic. The primary CTA ("Book a Call") uses this radius with a 1px gradient border (linear-gradient from #fff to #979797), adding visual interest through border animation (--gradient-angle animates 183deg continuously).

**Cards and containers:** rounded-xl (1.5rem / 24px)

Components

Action Elements

**button-primary** is the dominant call-to-action, using backgroundColor: {colors.secondary} (#f5f5f5) with textColor: {colors.on-secondary} (#050505). Dimensions are 40px height with 8px vertical × 16px horizontal padding, rounded-lg (16px). A 1px border (color: {colors.outline-variant}, #505050) and inset shadow (box-shadow: 0 -3px 3px 0 inset rgba(0, 0, 0, 0.32)) create depth and tactile feedback. On hover, apply filter: brightness(0.9) for a 100ms transition (transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1)). The label uses departureMono at 16px, 500 weight, 0.01em letter-spacing.

**button-secondary** is a transparent variant with textColor: {colors.on-surface} (#f5f5f5) and a 1px border (color: {colors.outline}, #636363). On hover, backgroundColor transitions t

Do's and Don'ts

**Do**

• Do use {colors.secondary} (#f5f5f5) exclusively for primary CTAs and active states—it is the only color that should draw the eye on the dark canvas.
• Do maintain the 21:1 contrast ratio between #050505 and #f5f5f5 for all body text and interactive labels to ensure WCAG AAA compliance.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to raised components (cards, buttons) and reserve 0 16px 40px rgba(0, 0, 0, 0.25) for modals only.
• Do use Instrument Serif (400 weight) for all headlines and display text to reinforce editorial authority; never use sans-serif for headings.
• Do apply transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) to all interactive state changes (hover, focus, active) for consistent motion.
• Do use departureMono exclusively for button labels, form inputs, and navigation items to signal interactivity through monospace convention.

**Don't**

• Don't introduce colors outside the defined palette—no gradients, no accent colors beyond {colors.error} (#ff6b6b) for validation states.
• Don't apply rounded-full (9999px) to buttons or cards; reserve it for badges and secondary navigation only.
• Don't use Geist for headlines or Instrument Serif for body text—the typeface pairing is semantic and must not be reversed.
• Don't apply text-shadow or filters to body text; reserve text-shadow (0 2px 4px rgba(0, 0, 0, 0.15)) for serif headlines over textured backgrounds only.
• Don't exceed 1280px container max-width; enforce this constraint on all breakpoints to maintain line-length readability.
• Don't animate the background or introduce parallax effects—the fixed noise texture and header blur are the only animated elements; additional motion dilutes focus.