Signal Orange
#ff6314Orange action color for filled buttons, selected navigation states, and focused conversion moments.
Axelar
axelar.networkWebsite preview
The design language
Axelar's interface reads as infrastructure-grade crypto plumbing rendered in a dark command-center aesthetic. The canvas sits at near-black abyss (#04070a), with a deliberate surface hierarchy stepping up through progressively lighter grays for cards, nav, and elevated panels — depth without brightness. A single vivid orange (#ff6314) is the chromatic authority: every primary action, every product surface, every active state draws from it. Supporting accent hues (electric green, violet, magenta, cyan) appear only as tiny category dots and badges, functioning as node indicators in a network topology rather than decorative variety. Clashgrotesk carries the angular, geometric voice at 500/600 weights; Inter provides the readable body; DM Mono stamps technical labels and metadata. The hero's diamond-lattice pattern with scattered colored dots establishes a network/graph metaphor that recurs in the partner-section category indicators.
Color palette
brand
accent
Node Green
#33ffacCategory dot indicators, success-tinted badges — functions as a network-node status light, never as a full surface
Node Violet
#5b76ffCategory dot indicators and info-adjacent badges — part of the node-light spectrum for category encoding
Node Magenta
#ff2ad4Category dot indicators and accent badges — part of the node-light spectrum for category encoding
Node Cyan
#16c4ffCategory dot indicators and accent badges — part of the node-light spectrum for category encoding
neutral
Abyss
#04070aPage canvas background, hero background, primary dark surface
Void
#000000Deepest layer beneath the canvas, SVG icon fills in nav and decorative contexts
Obsidian
#0f1214Navigation bar background, link/button hover backgrounds — one step above the canvas
Charcoal
#1a1d1fCard border lines, elevated surface borders, mid-tier separators on dark backgrounds
Carbon
#090c0fCard surface fill — sits between canvas and nav, gives cards a subtle lift without changing brightness dramatically
Steel
#676f7aMuted helper text, secondary borders, nav dividers, badge outlines on dark backgrounds
Cloud
#c6ced7Card border accent on light sections, subtle elevated borders
Mist
#e1e6ebLight-section dividers, input inset borders, faint borders on light surfaces
Snow
#f0f5faSecondary text, nav text, light body copy on dark surfaces — slightly cool-tinted near-white
White
#ffffffPrimary headings, primary body text, high-contrast labels, icon strokes on dark surfaces
Typography
Type scale
Minor Third (1.2) · 14px basedisplay
74px · 600 · 1 · 2.44px trackingThe quick brown fox jumps
text-70
70px · 600 · 1The quick brown fox jumps
heading-lg
56px · 500 · 1.15 · 1.85px trackingThe quick brown fox jumps
heading
37px · 500 · 1.25 · 1.22px trackingThe quick brown fox jumps
heading-sm
28px · 500 · 1.25 · 0.92px trackingThe quick brown fox jumps
subheading
21px · 500 · 1.25 · 0.69px trackingThe quick brown fox jumps
body-lg
19px · 400 · 1.5 · 0.63px trackingThe quick brown fox jumps
body
16px · 400 · 1.5 · 0.53px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Clashgrotesk
- Weights
- 500, 600
- Sizes
- 14, 16, 19, 21, 28, 37, 56, 70, 74px
- Line height
- 1.00–1.50
- Letter spacing
- 0.033em across all sizes (≈0.46px at 14px up to ≈2.44px at 74px)
- Fallback
- Space Grotesk, Geist, or Satoshi
Display and heading font — used for all headings, navigation, buttons, and links. The geometric, angular character of Clashgrotesk gives the interface an engineering/infrastructure feel; medium weight (500) carries most headings while 600 anchors the largest display sizes. Tight tracking at 0.033em tightens the geometric forms into a confident block.
Additional typeface
Inter
- Weights
- 400, 600
- Sizes
- 16, 19, 21px
- Line height
- 1.25
- Letter spacing
- normal
- Fallback
- system-ui, -apple-system, or IBM Plex Sans
Body and hero paragraph text — used for descriptive copy, card body content, footer text. Inter's neutral clarity provides a calm counterpoint to Clashgrotesk's angular voice; 400 for body, 600 for emphasis within body contexts.
Additional typeface
DM Mono
- Weights
- 400, 500
- Sizes
- 12, 14, 16, 19px
- Line height
- 1.00–1.33
- Letter spacing
- normal
- Fallback
- JetBrains Mono, IBM Plex Mono, or Geist Mono
Monospaced technical labels, metadata, category tags, badge text, and inline code-like elements — stamps a developer/infrastructure credibility onto the interface. Used in nav badges, card category headers, and small status indicators.
Additional typeface
F77 Minecraft
- Weights
- 400
- Sizes
- 16px
- Line height
- 1.25
- Letter spacing
- 0.246
F77 Minecraft — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 6px
- Max width
- 1280px
- Section gap
- 64px
- Card padding
- 24px
- Element gap
- 24px
Border radius
cards
8pxsmall
4pxbadges
100pxinputs
24pxbuttons
24pxSpacing scale
4px5px7px9px12px14px16px19px20px24px28px32px42px43px48px56px64px65px86px109px143px186pxGuidelines
Do
- Use Signal Orange (#ff6314) exclusively for primary actions, product surfaces, and active states — it is the only chromatic authority in the interface.
- Apply the surface stack in order: #04070a canvas → #090c0f cards → #0f1214 nav → #1a1d1f borders. Depth comes from tonal stepping, never from shadows or brightness jumps.
- Use Clashgrotesk 500/600 for all headings, navigation, and interactive elements; pair with Inter 400/600 for body and DM Mono 400/500 for technical labels and metadata.
- Encode categories using the node accent spectrum (Node Green, Violet, Magenta, Cyan) only as small dot indicators (8–10px) — never as full card or surface backgrounds.
- Use 24px pill radius for all buttons and inputs, 8px radius for cards, and 100px for pill badges. The pill button is a defining shape choice.
- Maintain 64px section gaps and 24px element gaps for comfortable density. Let dark sections breathe — avoid stacking more than 3 elements vertically without generous spacing.
- On light sections, flip the surface stack: white canvas, #f0f5fa secondary text, #e1e6eb borders, #04070a headings. Orange product cards remain as the color punctuation.
Don’t
- Don't use Signal Orange for anything that isn't a primary action or key product surface — it loses its authority when diluted across secondary elements.
- Don't apply shadows for elevation — the system uses tonal stepping through the neutral surface stack. Shadows break the flat engineering aesthetic.
- Don't use node accent colors (green, violet, magenta, cyan) as large fills, gradients, or backgrounds. They are signal dots, not surface treatments.
- Don't use Clashgrotesk for body paragraphs or long-form text — its angular geometry strains readability below 19px. Use Inter for anything over two lines of body copy.
- Don't mix radii arbitrarily — the system is specific: 24px for buttons/inputs, 8px for cards, 100px for pill badges, 4px for small inline elements.
- Don't use pure black (#000000) as a page background — the canvas must be #04070a to maintain the near-black surface hierarchy. Pure black is reserved for SVG icon fills and the deepest layer.
- Don't add decorative gradients to cards or panels — the only gradient in the system is the orange linear-gradient on the hero lattice glow. Color stays flat.
Components
Signal Orange CTA Button
Primary action triggerPill-shaped (24px radius) filled button. Background: #ff6314. Text: #ffffff, Clashgrotesk 500, 14–16px, letter-spacing 0.033em, uppercase. Padding: 12px 24px. No border, no shadow — the vivid orange against the dark canvas is its own elevation. This is the sole chromatic CTA in the system.
Ghost Outlined Button
Secondary action triggerPill-shaped (24px radius) outlined button. Background: transparent. Border: 1px solid #ffffff. Text: #ffffff, Clashgrotesk 500, 14–16px, letter-spacing 0.033em, uppercase. Padding: 12px 24px. Used for lower-priority actions like 'ECOSYSTEM'.
Category Dot Badge
Category or status indicatorSmall filled circle in one of the node accent colors (Node Green, Node Violet, Node Magenta, Node Cyan). Diameter: 8–10px. Always paired with a DM Mono category label. Functions as a network-node status light — the color spectrum encodes categories across the partner ecosystem.
Pill Badge
Compact label or tagFully rounded (100px radius) pill shape. Background: #1a1d1f or accent color. Text: DM Mono 400, 12–14px. Border: 1px solid #676f7a for neutral variants. Padding: 4px 12px. Used for metadata labels and inline status indicators.
Dark Partner Card
Logo grid card with category headerRectangular card on dark canvas. Background: #090c0f. Border: 1px solid #1a1d1f. Radius: 8px. Padding: 24px. Contains a category dot badge + DM Mono category label at top, then a 2-column grid of partner logos with 1px borders on #1a1d1f separating each cell. Inner cells: #090c0f background with white logos.
Orange Product Card
Feature or product showcase cardRectangular card with vivid orange (#ff6314) background. Radius: 8px. Padding: 24px. Contains a numbered step indicator (1, 2, 3 in a white circle), a white dotted-pattern icon/illustration, a category tag in DM Mono (e.g. 'INTERCHAIN TOKEN SERVICE (ITS)'), a heading in Clashgrotesk 500 white, and body copy in Inter 400 white at reduced opacity.
Announcement Bar
Top-of-page promotional stripFull-width bar at the very top. Background: #33ffac (Node Green). Text: Clashgrotesk 500, 14px, uppercase, #04070a. Height: ~40px. Contains dismissable text. The green-on-dark contrast makes it the highest-attention element on the page.
Navigation Bar
Primary site navigationHorizontal bar below the announcement strip. Background: #0f1214. Height: ~60px. Left: Axelar wordmark logo. Center: nav links (Products, Solutions, Resources, About) in Clashgrotesk 500, 14px, #f0f5fa. Right: social icons + Signal Orange CTA 'EXPLORE ECOSYSTEM' pill button. Fixed/sticky positioning.
Hero Diamond-Lattice Visual
Decorative hero illustrationFull-height geometric pattern on the hero right side. Composed of repeating diamond/rhombus shapes in #1a1d1f outlines on the #04070a canvas. Small colored dots (Node Green, Node Violet, Signal Orange) scattered across the lattice at intersection points — functioning as network nodes. One diamond at bottom-center has a pink/magenta glow gradient.
Hero Headline Block
Primary hero text contentLeft-aligned text block. Headline: Clashgrotesk 600, 56–74px, #ffffff, letter-spacing ≈0.033em. Subhead: Clashgrotesk 500, 21–28px, #f0f5fa. Body: Inter 400, 19px, #f0f5fa at reduced opacity. CTA pair: Signal Orange filled + Ghost outlined pill buttons below the copy.
Input Field
Text input or form fieldRounded (24px radius) input. Background: transparent or #0f1214. Border: 1px inset #e1e6eb. Text: Inter 400, 16px, #f0f5fa. Placeholder: #676f7a. Padding: 12px 24px. The inset border shadow gives a subtle pressed-in feel.
Trust Indicator Strip
Security/credibility footer in heroHorizontal row at the bottom of the hero. Three items separated by spacing, each with a small icon and DM Mono 400, 12px label in #676f7a. Items: institutional-grade security, 75+ validators, zero exploits. Minimal visual weight — the icons do the talking.
Surfaces & elevation
Level 0
Abyss
#04070aPage canvas, hero background, primary dark surface
Level 1
Carbon
#090c0fCard surface — one tonal step above the canvas for subtle card lift
Level 2
Obsidian
#0f1214Navigation bar, link hover backgrounds — mid-tier surface for interactive elements
Level 3
Charcoal
#1a1d1fBorders and dividers on dark surfaces, elevated card outlines
Layout & imagery
Layout
Full-bleed sections with a max-width content container at ~1280px centered. The hero is a split layout: text block left-aligned at ~50% width, diamond-lattice visual occupying the right half. Nav is a horizontal fixed bar with logo left, links center, social icons + CTA right. Below the hero, the partner showcase uses a 2×2 card grid on the dark canvas. The product features section flips to a light background with a 3-column equal-width card grid, each card fully orange. Section rhythm alternates dark → dark → light, with generous 64px vertical gaps between sections. Content within cards is left-aligned. No sidebar navigation, no mega-menus visible — navigation is horizontal and minimal.
Imagery
Imagery is minimal and structural rather than photographic. The hero features a custom geometric diamond-lattice illustration — repeating rhombus outlines in #1a1d1f on the dark canvas with small colored node-dots scattered at intersections, one diamond glowing with a pink-magenta gradient. Product cards use white dotted-pattern icons rendered as pixel-grid halftones. The partner section uses partner brand logos in white monochrome on dark card cells. No lifestyle photography, no 3D renders, no product screenshots — the geometric lattice and logo grids are the visual identity.
Design notes
Agent Guide
**Quick Color Reference** - text: #ffffff (primary) / #f0f5fa (secondary) / #676f7a (muted) - background: #04070a (canvas) / #090c0f (card) / #0f1214 (nav) - border: #1a1d1f (dark surfaces) / #e1e6eb (light surfaces) - accent: #ff6314 (Signal Orange — brand authority) - node indicators: #33ffac, #5b76ff, #ff2ad4, #16c4ff - primary action: #ff6314 (filled action) **Example Component Prompts** 1. *Create a primary CTA button*: Pill shape, 24px radius, background #ff6314, text 'GET STARTED' in Clashgrotesk 500, 14px, #ffffff, letter-spacing 0.033em, uppercase, padding 12px 24px, no border, no shadow. 2. *Create a dark partner card*: Background #090c0f, border 1px solid #1a1d1f, radius 8px, padding 24px. Header: Node Green dot (10px) + 'ENTERPRISE' in DM Mono 400, 12px, #f0f5fa. Body: 2×2 grid of logo cells, each cell #090c0f with 1px #1a1d1f borders, white logos centered. 3. *Create a product feature card*: Background #ff6314, radius 8px, padding 24px. Step number '1' in a white circle top-left. Dotted-pattern icon centered in white. Category tag 'ITS' in DM Mono 400, 12px, #ffffff at 70% opacity. Heading in Clashgrotesk 500, 28px, #ffffff. Body in Inter 400, 16px, #ffffff at 80% opacity. 4. *Create the hero text block*: Left-aligned, max-width ~600px. Headline 'THE GATEWAY TO ONCHAIN FINANCE' in Clashgrotesk 600, 74px, #ffffff, letter-spacing ≈2.44px. Subhead in Clashgrotesk 500, 28px, #f0f5fa. Body paragraph in Inter 400, 19px, #f0f5fa. Below: Signal Orange filled pill + ghost outlined pill button side by side. 5. *Create the announcement bar*: Full-width, background #33ffac, text centered, Clashgrotesk 500, 14px, uppercase, #04070a, height 40px, with a dismiss × icon on the right.
Surface Hierarchy Philosophy
The dark interface achieves depth exclusively through a five-step tonal surface stack (#000000 → #04070a → #090c0f → #0f1214 → #1a1d1f), never through shadows, glows, or lightness jumps. Each step is separated by only a few hex values, creating a 'almost imperceptible lift' that feels engineered rather than designed. Cards on the canvas are +5 lightness steps. The nav bar is +9 steps. Borders are +15 steps. This near-invisible differentiation is what makes the interface feel like a command center: nothing shouts, but everything has a place.
Node-Light Color System
The accent colors (#33ffac, #5b76ff, #ff2ad4, #16c4ff) exist exclusively as 8–10px dot indicators and small badge fills. They encode categories and statuses across the interface — like status lights on a network rack. Never apply them as large fills, gradients, or surface treatments. The single exception is the pink-magenta gradient glow on the hero lattice, which is the system's one decorative gradient moment and should not be replicated elsewhere.
Similar brands
Chainlink
Dark canvas with a single vivid blue primary action color, geometric/technical iconography, and a 'infrastructure-grade' visual language targeting developer audiences
Polygon Labs
Dark-first design with purple/vivid accent CTAs, angular geometric typography, and a flat surface treatment with minimal shadows
Celestia
Near-black canvas with a single saturated accent color, monospaced technical labels for metadata, and a dark lattice/geometric hero illustration
LayerZero
Dark command-center aesthetic with vivid orange/red primary CTAs, pill-shaped buttons, and a network-topology visual metaphor
Arbitrum
Dark background with vivid blue/cyan accents, geometric sans-serif headings, and a flat tonal surface stack for cards without shadow-based elevation
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
