Visual Language Guide
Design decisions.
Every visual choice in the BeatConnect redesign traces back to an audience insight.
This document maps those connections. Typography, colors, spatial rules, motion.
Each decision is linked to the brand pillar it serves.
01 Typography
One typeface. Every weight earns its place.
A single font used across every surface. No mixing, no display fallbacks.
The constraint is the identity.
The constraint is the identity.
Typeface
JetBrains Mono
Monospace signals code. Our audience lives in terminals and IDEs. A proportional typeface would position us as a consumer brand. JetBrains Mono specifically because it was designed for extended reading in code editors. Increased x-height, distinct letterforms (1, l, I, 0, O) that reduce misreading at small sizes, and ligature support. It's the typeface they already read 8 hours a day.
It says "this is your environment" before a single word of copy is read.
It says "this is your environment" before a single word of copy is read.
Clarity
Build once. Ship everywhere.
Hero, page titles
Commerce infrastructure for audio
Section headers
Professional build infrastructure for JUCE developers. Your code becomes a signed, sellable product in minutes.
Paragraphs
BeatConnect SDK
Section tags
macOS & Windows · Code signed · Sell instantly
Meta, footnotes
api.beatconnect.com/v1/activate
Endpoints, inline
Rule: No font mixing. No display typefaces. No serif fallbacks. One typeface, expressed through weight and scale, keeps every surface speaking the same language.
02 Color
A dark canvas.
Color is information, not decoration. The dark spectrum creates hierarchy. The accent creates action.
Canvas
#050505 base, layered dark spectrum
Dark backgrounds are the native environment of our audience. IDEs, terminals, CLIs. A light interface would feel like switching contexts. Depth is created through a spectrum of near-blacks (#050505, #0a0a0a, #111111, #1a1a1a) to build hierarchy.
Clarity
Accent
#E8943A Amber
Amber reads as operational status: signal, alert, action. Not decorative. On dark backgrounds it carries the weight of a system indicator.
It says "this matters, act here." Used sparingly: primary CTAs, active states, labels that need to pull focus from the gray spectrum.
It says "this matters, act here." Used sparingly: primary CTAs, active states, labels that need to pull focus from the gray spectrum.
Acceleration
Reference
#5EC4D4 Cyan
Cyan is for references: documentation links, JSON keys in API responses, parameter names, and cross-references to other endpoints. Use it whenever an element says "follow this" or "look this up." If the element triggers an action, it's amber. If it conveys status, it's green or red. If it's something the developer can read or navigate to, it's cyan.
Clarity
Black
#050505
Page canvas
Deep
#0a0a0a
Cards, panels
Surface
#111111
Code blocks, inputs
Border
#1a1a1a
Dividers, edges
Muted
#5E5E5E
Disabled states
Dim
#888888
Labels, meta
Text
#BAB4B4
Body copy
Light
#bbbbbb
Emphasis text
White
#e8e8e8
Headings
Accent
#E8943A
CTAs, active
Accent Dim
25% opacity
Borders, tags
Success
#4AFA89
It worked
Error
#F05252
It didn't
Reference
#5EC4D4
Links, docs refs
White
Build once. Ship everywhere.
#e8e8e8
Light
Professional build infrastructure
#bbbbbb
Text
Your code becomes a signed product
#BAB4B4
Dim
macOS & Windows · Code signed
#888888
Muted
Disabled element text
#5E5E5E
Accent
Get Developer Access
#E8943A
Reference
See API documentation →
#5EC4D4
Accent appears
Primary CTA buttons
Active navigation state
Section labels and tags
Inline code and API endpoints
Status indicators (active, success)
Bracket hover interactions
Accent does not appear
Body text or paragraphs
Backgrounds or large fills
Decorative elements
Borders (use gray spectrum)
Icons in default state
Max 3 accent elements visible at once
Rule: Four semantic colors, four jobs. Amber: act here. Green: it worked. Red: it didn't. Cyan: read this / follow this. If a color doesn't map to one of these, it doesn't belong.
03 Spatial System
Terminal density. Information first.
Layout borrowed from the environments our audience works in.
Dense, structured, zero decoration.
Dense, structured, zero decoration.
Density model
Information-first, no decorative imagery
Audio developers scan for data. They're used to terminals and documentation, not hero illustrations. Every pixel of layout space either communicates information or provides breathing room for legibility.
No stock photography. No abstract illustrations. No ornamental gradients.
No stock photography. No abstract illustrations. No ornamental gradients.
Clarity
Grid system
Content-driven columns, 1px borders as structure
Rather than a rigid 12-column grid, layout is determined by content density.
1px borders replace whitespace as the primary separator. This mirrors how data is structured in dashboards and API references, not marketing sites.
1px borders replace whitespace as the primary separator. This mirrors how data is structured in dashboards and API references, not marketing sites.
Dependability
XS
4px
Inline gaps
SM
8px
Tight groups
MD
16px
Card padding
LG
24px
Section gap
XL
40px
Major breaks
2XL
64px
Page sections
Rule: When in doubt, use a 1px border instead of more whitespace. Density communicates competence to this audience. Empty space reads as missing content.
04 Motion
Functional, not ornamental.
Animation serves two purposes: confirming interaction and guiding attention.
Nothing else moves.
Nothing else moves.
Philosophy
If it doesn't confirm or guide, it doesn't animate
Audio developers build tools with precise I/O feedback. They expect the same from the tools they evaluate. Motion must feel like a response, not a performance.
Every animation answers "what just happened?" or "where should I look?"
Every animation answers "what just happened?" or "where should I look?"
Dependability
01 Bracket system
Targeting reticle
Corner brackets animate inward on hover, framing the interactive target. The metaphor: "you're locked on." Borrowed from HUD targeting systems. Communicates precision and intentionality.
Duration:
350ms · Easing: cubic-bezier(0.16, 1, 0.3, 1) · Trigger: hover02 State transitions
Color shifts only
Background fills, border color changes, text color updates. No scale, no rotation, no bounce. State changes are instant reads, not moments of delight.
Duration:
200-300ms · Easing: ease · Trigger: hover, focus, active03 Page load
Staggered reveal
Content fades in with slight upward translation. Staggered by section, not by element. The page assembles itself like a terminal loading data.
Duration:
400ms · Delay: 100ms per section · Easing: ease-out04 Code sandbox
Type-on effect
API responses render line by line, simulating terminal output. The user sees the system "working." Reinforces the live, operational feel of the platform.
Duration:
30ms per char · Stagger: 80ms per line · Trigger: on visible
Rule: No easing that overshoots. No animation longer than 500ms. No animation that blocks interaction. If a user on a slow connection would find it annoying, remove it.
05 Component Language
The bracket system scales across all tiers.
One interaction metaphor, four expressions. Hover the buttons below.
Primary
Secondary
Ghost
Nav CTA
Why brackets
Targeting, not decorating
The bracket is a universal framing device in technical interfaces: code editors use them for scope, terminals for output, HUDs for targeting. Applied to interactive elements, they signal "this is actionable" in a language the audience already reads fluently. The bracket replaces the border-radius and drop-shadow vocabulary of consumer UI.
Freedom
06 Derivation
Every decision traces to a pillar. Every pillar traces to the audience.
ICP insights generate brand pillars. Pillars generate visual decisions.
ICP Insight
They ship commercial products on top of your infrastructure. If you go down, their customers lose access.
→
Dependability
Solid infrastructure. Predictable behavior. Every time.
ICP Insight
They know DSP, not distribution. They pay to skip the parts they shouldn't have to build.
→
Acceleration
Remove the non-code friction. Licensing, storefronts, payments.
ICP Insight
They found us on their own. They don't want a walled garden. They want tools they control.
→
Freedom
You own your storefront, your pricing, your customers.
ICP Insight
They evaluate trust through documentation quality and technical precision. Ambiguity is a red flag.
→
Clarity
Say what it does. Show how it works. No fluff.