Brand Identity Guide
See the connections. Make the call.
See the connections. Make the call.
An executive intelligence platform. A knowledge graph that makes complex business relationships visible and actionable. The control room for strategic decisions.
Four traits define us: Precise and purposeful. Authoritative and data-dense. Kinetic and alive. Approachable despite complexity. We live at the intersection of power and clarity.
| Trait | We Are | Not This |
|---|---|---|
| Precise | Every element earns its place | Decorative, ornamental |
| Authoritative | Dark, confident, data-dense | Aggressive, cold |
| Kinetic | Force simulation, real-time connections | Flashy, animated for effect |
| Approachable | Progressive disclosure, natural feel | Dumbed-down, toy-like |
Direct. Confident. Never verbose. Action-oriented labels. Verb + Object. “Add to Graph” not “Would you like to add this to your graph?”
Add to Graph
Run Assessment
Authentication required. Connect your Claude account.
No nodes match this filter. Clear filters to see all.
Would you like to add this to your graph?
Click here to start an assessment
Oops! Something went wrong with authentication.
We couldn’t find anything. Try again later!
The brand identity flows through a tri-color gradient—Blue, Amber, Purple—derived from the K mark. Depth via luminance. All colors are CSS custom properties. Never use raw hex in components.
Node colors are sacred. They are the graph’s visual language and must remain distinct.
Display and body share Inter’s geometric precision. Mono provides the evidence layer—scores, metadata, technical labels. Weight and tracking do the differentiation.
| Token | Size | Px | Usage |
|---|---|---|---|
| --text-2xs | 0.625rem | 10 | Metadata, timestamps |
| --text-xs | 0.75rem | 12 | Secondary labels, node badges |
| --text-sm | 0.875rem | 14 | Body text, chat messages |
| --text-base | 1rem | 16 | Primary UI text |
| --text-lg | 1.125rem | 18 | Section headers |
| --text-xl | 1.5rem | 24 | Panel titles, modal headers |
Inter 600–700 for headings, 400 for body.
JetBrains Mono uppercase with tracked spacing for labels.
Minimum 14px for interactive text.
Use serif typefaces anywhere.
Go smaller than 10px for any readable content.
Mix font weights arbitrarily.
Consistent spacing creates visual rhythm. Every measurement derives from the 8px base unit.
| Element | Value |
|---|---|
| Side panel | 320px desktop, full-width mobile |
| Toolbar | 48px height |
| Touch targets | min 44×44px |
| Graph canvas | fills remaining viewport |
Every button is forged with depth. Primary CTAs use a 7-stop blue gradient with inset highlights and inner frame borders. Ghost buttons carry a subtle fill. Hero CTAs are the brightest—radial underlayer, triple-frame shadow, blue-to-purple surge.
| Tier | Gradient | Frame | Shadow Layers |
|---|---|---|---|
| Hero | 10-stop blue→purple + radial | Inner + triple outer | 5 (highlight, edge, ring, gap, glow) |
| Primary | 7-stop blue depth | Inner frame | 3 (highlight, edge, ring) |
| Secondary | 2-stop subtle blue | Inner frame | 1 (inset ring) |
| Action | Radial + 2-stop | Corner marks ×4 | 2 (inset ring, highlight) |
Micro-components that carry data density. Node badges identify graph categories with corner marks. Filter chips toggle visibility. Score badges display confidence with gradient text. Verdict badges signal assessment outcomes.
| Component | Font | Frame | Indicator |
|---|---|---|---|
| Node Badge | Mono 0.58rem / 0.25em | Corner marks ×4 | Color dot |
| Filter Chip | Mono 0.55rem / 0.12em | Inset ring | Active glow |
| Score Badge | Mono 0.62rem | Corner marks ×4 | Gradient text |
| Verdict | Mono 0.55rem / 0.2em | Inset ring | Semantic color |
Containers are built on the luminance depth scale. Panels sit at surface level. Cards float at elevated. Featured cards get a brand gradient accent bar and corner glow. Feed cards carry a bottom gradient line. No drop shadows—depth comes from brightness.
| Component | Background | Accent |
|---|---|---|
| Featured Card | --bg-surface | Left gradient bar + corner glow |
| Feed Card | --bg-surface | Bottom gradient line (40%) |
| Panel | --bg-surface | --border-subtle |
| Card | --bg-elevated | Left gradient bar |
| User bubble | --accent-muted | none |
| AI bubble | --bg-elevated | none |
Transitions are fast. Loading states are honest. No spinners longer than 3 seconds without explanation. Hover surfaces respond in 120ms. Page transitions never exceed 400ms.
Background lightens one step in the depth scale. Border brightens to --border-default. Transition: --transition-fast.
Loader: 12–16px • animate-spin • --text-muted
| Element | Behavior |
|---|---|
| Node hover | scale(1.15) / 120ms |
| Edge hover | opacity 1.0 + stroke increase |
| Physics | D3 force simulation |
“See the connections. Make the call.” Short declarative sentences. Active voice. Action-oriented labels. Past tense for confirmations: “Added”, “Connected”, “Saved”.
Add to Graph
Run Assessment
Start Interview
Confirmation: “Added”, “Connected”
Click here to add this to your graph
Start running an assessment now
Submit
Confirmation: “Successfully added!”
Every design decision passes through these principles. When in doubt, consult the list.