Brand Cobalt
#2264d6Primary brand color — active nav items, links, icon fills, tab indicators, the dominant chromatic signal
HashiCorp
hashicorp.comWebsite preview
The design language
HashiCorp operates a midnight control-room aesthetic: near-black canvases swallow the page, letting a single electric violet-blue brand signal carry every interactive moment. Headlines use a custom geometric sans at heavy weights with tight negative tracking, giving typography a compressed, confident posture rather than airy elegance. The 3D hexagonal cube render — glowing violet and indigo — is the signature visual, appearing wherever the brand needs to feel tangible. Surfaces stay nearly flat with hairline borders and almost imperceptible shadows; the depth comes from gradient washes, not elevation. Body copy is achromatic, generously sized, and unornamented, letting the brand blue do the work of guiding attention through links, active states, and tab indicators.
Color palette
brand
Signal Blue
#2b89ffBlue supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Hyperlink Violet
#1060ffViolet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
accent
Plum Glass
#42225bBadge background fill, decorative deep-violet surface for category tags
Amethyst Edge
#b457ffBadge borders, violet accent strokes, decorative outline highlights
Violet Dawn
#6c81ffGradient origin — the cool blue-violet start of the hero and cube illumination
Iris Glow
#c08dffGradient terminus — warm violet end of the hero gradient, the lighter face of the 3D cube render
neutral
Void Canvas
#000000Primary page background, hero foundation, footer base — the near-black void that absorbs all other content
Onyx Surface
#0d0e12Elevated cards, panels, input fields, secondary surface layer above the void
Obsidian Plate
#15181eHighest elevation tier — modals, popovers, overlay containers
Ash Text
#656a76Muted body copy, helper text, metadata, placeholder content
Steel Secondary
#3b3d45Icon strokes, decorative line work, tertiary UI elements
Graphite Border
#b2b6bdBorders, dividers, inactive control outlines at mid-contrast
Fog Divider
#d5d7dbHigh-frequency dividers, light borders, subtle separators, partner logo treatment
Bone
#e0e2e5Button borders on filled controls, hairline outlines
Chalk
#efeff1Primary text on dark surfaces, headings, body copy at highest contrast
Pure White
#ffffffMaximum-contrast text, filled button text, the brightest surface accent
Typography
Type scale
Minor Third (1.2) · 14px basedisplay
82px · 600 · 1.17 · -0.01px trackingThe quick brown fox jumps
text-52
52px · 600 · 1.19The quick brown fox jumps
heading-lg
42px · 700 · 1.18 · -0.01px trackingThe quick brown fox jumps
heading
34px · 600 · 1.19 · -0.01px trackingThe quick brown fox jumps
heading-sm
26px · 700 · 1.21 · -0.01px trackingThe quick brown fox jumps
subheading
19px · 700 · 1.35 · -0.01px trackingThe quick brown fox jumps
text-17
17px · 400 · 1.35The quick brown fox jumps
body
16px · 400 · 1.69The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
system-ui
- Weights
- 400, 500, 600
- Sizes
- 13, 14, 15, 16, 17px
- Line height
- 1.5–1.71 for body, 1.2 for compact UI text
- Fallback
- -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue
Body copy, navigation links, button labels, form inputs, badges — the workhorse text stack. System UI at 15–16px with 1.6–1.71 line-height creates generous, readable body text. Weight 500 for nav emphasis, 600 for button labels. No custom tracking, relying on the platform's default kerning.
Additional typeface
Hashicorp Sans
- Weights
- 600, 700
- Sizes
- 13, 17, 19, 26, 34, 42, 52, 82px
- Line height
- 1.17–1.21 for display, 1.35 for subheadings, 1.69 for body-sized usages
- Letter spacing
- -0.01em on display sizes, +0.1em on uppercase eyebrow labels
- Fallback
- Inter, Space Grotesk, or General Sans
- Features
- "kern"
All headings and display text — a custom geometric sans with tight negative tracking (-0.01em) that compresses the headline posture. Weight 700 at 82px anchors the hero; weight 600 carries section headings. The +0.1em positive tracking appears on uppercase eyebrow labels, creating a wide-spaced technical caption register. 'kern' feature enabled for tight headline kerning.
Additional typeface
Arial
- Weights
- 400
- Sizes
- 16px
- Line height
- 1.2
Arial — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 64px
- Card padding
- 24px
- Element gap
- 16px
Border radius
nav
4pxcards
8pxbadges
4pxinputs
4pxbuttons
4pxSpacing scale
3px4px6px7px8px9px11px12px15px16px19px20px24px32px40px48px57px64px88px96px128pxGuidelines
Do
- Use #000000 as the primary page background and layer surfaces in the order #000000 → #0d0e12 → #15181 for incremental elevation
- Apply #2264d6 exclusively for active states, active nav items, and tab indicators — never as a decorative fill
- Set all heading text in Hashicorp Sans weight 600–700 with -0.01em letter-spacing for the compressed, confident posture
- Use the +0.1em tracking on Hashicorp Sans weight 600 at 13px for uppercase eyebrow labels (section headers, 'TRUSTED BY' bands)
- Maintain 4px radius on all interactive controls (buttons, inputs, badges, nav items) and reserve 8px for content cards
- Keep shadows at rgba(97,104,117,0.05) opacity — depth should be felt, not seen
- Use the violet-to-blue gradient (#6c81ff → #c08dff) as a directional light source on hero sections and the 3D cube render
Don’t
- Do not introduce additional chromatic colors — the brand signal is singular and frequency matters
- Do not use rounded radii above 8px; this system is geometric and precise, not friendly or soft
- Do not use drop shadows darker than 10% opacity — heavy shadows break the void-canvas illusion
- Do not use #2264d6 or #2b89ff as a background fill for buttons; the filled primary button is the only exception and uses #2b89ff sparingly
- Do not mix positive and negative letter-spacing within the same heading; pick one tracking register per block
- Do not let body text drop below 14px or above 17px — the 15–16px sweet spot is the readable standard
- Do not use full-color partner logos in the trust bar; all logos must be rendered in #d5d7db to maintain the monochrome band
Components
Hero Gradient Banner
Full-bleed dark hero with diagonal violet-blue gradient sweepBackground #000000 base with linear-gradient(-45deg, #6c81ff → #c08dff) sweeping from upper-right toward lower-left, creating a luminous angled band. Headline at 82px Hashicorp Sans weight 700 in #efeff1, tracking -0.82px. Subtext at 17px system-ui weight 400 in #b2b6bd. No card surface — text sits directly on the gradient void. Padding ~80px vertical, content centered or left-aligned within 1200px max-width.
Announcement Pill
Inline editorial announcement above the hero headlineCompact pill at ~4px radius containing a tag chip (e.g. 'Do Cloud Right, Explained') with #b457ff border on #42225b fill, followed by descriptive text at 13–14px in #d5d7db, and a 'Watch now →' link in #2b89ff. Horizontal flex layout with 8–12px gaps, vertical padding ~3–4px. Functions as a content teaser, not a primary action.
Outlined Ghost Button
Secondary CTA on dark surfacesTransparent fill with 1px solid #efeff1 border at 4px radius. Text in #efeff1 at 15px system-ui weight 500, padding 11px 19px. The standard 'Meet The Infrastructure Cloud' / 'Learn more' variant. Box-shadow: rgba(97,104,117,0.05) 0px 1px 1px, rgba(97,104,117,0.05) 0px 2px 2px — barely-there depth that whispers elevation rather than declaring it.
Filled Primary Button
Primary conversion actionSolid #2b89ff fill with white text at 15px system-ui weight 600, 4px radius, padding 11px 19px. The 'Get started' variant — the highest-saturation chromatic button in the system, used sparingly to mark the single most important action on a page.
Text Link Button
Tertiary navigation actionNo border, no fill. Text in #efeff1 at 15px system-ui weight 500, often paired with an icon (e.g. '→' for 'Try HCP'). Padding minimal. The 'Log in' / 'Contact us' style — relies on hover color shift to #2b89ff for affordance.
Top Navigation Bar
Primary site navigationTransparent over hero, then #0d0e12 on scroll. Logo (hexagonal H mark) at left, nav items at 15px system-ui weight 500 in #b2b6bd, with the active item underlined in #2264d6. Right-aligned action cluster: ghost login + outlined contact + filled get-started. Height ~64px, horizontal padding 24–48px. The nav maintains 4px radius on interactive items.
Partner Logo Bar
Social proof band beneath heroSection header 'TRUSTED BY LEADING ORGANIZATIONS' in uppercase Hashicorp Sans weight 600, tracked at +0.1em, size 13px, color #b2b6bd. Below: horizontal row of partner logos rendered in #d5d7db at uniform height ~24px, evenly spaced with 32–48px gaps. Logos are monochrome — no original brand color survives the dark-mode treatment.
Feature Split Section
Two-column editorial feature blockLeft column: eyebrow label (Hashicorp Sans 13px uppercase +0.1em in #b2b6bd) + headline (Hashicorp Sans 34–42px weight 700 in #efeff1) + body text (16px system-ui in #b2b6bd with inline links in #2b89ff) + action buttons. Right column: 3D render or product visual. Gap between columns ~64px. Section background #0d0e12 to differentiate from void canvas.
3D Hexagonal Cube Render
Signature brand visual elementA glowing isometric hexagonal prism rendered in 3D, with faces lit by the violet-to-blue gradient (#6c81ff → #c08dff) and a soft purple underglow on the surface below. The HashiCorp 'H' logo is debossed on the top face. Subtle line drawings of architectural/circuit elements extend from the base. This is the system's hero visual — the single piece of recognizable brand imagery.
Tab Navigation
Content section switching controlHorizontal tabs at top of a content section. Inactive tabs: 17px system-ui weight 500 in #656a76. Active tab: same size/weight in #efeff1 with a 2px underline in #2264d6. 4px radius on any background hover state. Tabs separated by 24–32px horizontal gap.
Resource Card
Editorial content card for resources/reportsBackground #0d0e12 with 1px #15181 border, 8px radius. Padding 24px. Contains a feature image (16:9 or similar), then a headline (Hashicorp Sans 19px weight 600 in #efeff1) and descriptive text (15px system-ui in #b2b6bd). No drop shadow — separation is purely from the border and surface contrast.
Featured Report Card
Hero-sized content card with gradient thumbnailLarger variant of the resource card. Thumbnail uses a full-bleed gradient (e.g. linear-gradient(-45deg, #ff8791, #f9b571) for warm accent) with an embedded chart/visual. Headline at 26px Hashicorp Sans weight 600, body at 15px. Occupies roughly 2/3 of the row width with companion text cards stacked on the right.
Badge / Category Tag
Compact metadata labelSmall pill at 4px radius with 1px border. Default variant: #b457ff border on transparent or #42225b fill, text in #efeff1 at 13px Hashicorp Sans weight 600 with +0.1em tracking. Used for content categorization (e.g. 'What's new', 'Webinars & events'). Padding ~3px 8px.
Input Field
Form input on dark surfaceBackground #0d0e12, 1px #3b3d45 border, 4px radius. Text in #efeff1 at 16px system-ui, placeholder in #656a76. Inset shadow: rgba(97,104,117,0.1) 0px 1px 2px 1px inset for subtle depression. Focus state: border shifts to #2b89ff. Padding 11px 16px.
Surfaces & elevation
Level 1
Void Canvas
#000000Primary page background — the base void against which all content floats
Level 2
Onyx Surface
#0d0e12Cards, input fields, content sections that need to separate from the void
Level 3
Obsidian Plate
#15181Modals, popovers, elevated overlays requiring maximum separation
Elevation is almost deliberately absent — the system relies on surface color contrast (void → onyx → obsidian) and 1px hairline borders to communicate layering. The only shadows that exist are at 5% opacity, creating a sense of weight without breaking the dark-canvas immersion.
Outlined Ghost Button
rgba(97, 104, 117, 0.05) 0px 1px 1px 0px, rgba(97, 104, 117, 0.05) 0px 2px 2px 0px
Top Navigation
rgba(101, 106, 118, 0.05) 0px 1px 1px 0px, rgba(101, 106, 118, 0.05) 0px 2px 2px 0px
Input Field
rgba(97, 104, 117, 0.1) 0px 1px 2px 1px inset
Layout & imagery
Layout
Full-bleed dark canvases with content constrained to a 1200px max-width centered column. The hero is a full-viewport dark gradient with centered (or slightly left-aligned) headline. Sections alternate between #000000 and #0d0e12 backgrounds to create visual rhythm without light/dark polarity. Content follows a repeating 2-column split pattern: text-left/visual-right, with generous 64px section gaps. Tab-driven resource sections use a 1-large-plus-2-small asymmetric grid. The nav is a fixed top bar that transitions from transparent (over hero) to solid #0d0e12 (on scroll). Overall density is spacious — one concept per section, with breathing room between blocks.
Imagery
The visual language is dominated by 3D renders rather than photography. The signature asset is an illuminated hexagonal prism (representing the HashiCorp 'H' logo in volumetric form) rendered in a violet-to-blue gradient with a soft underglow. Supporting visuals include abstract gradient washes, data charts, and subtle architectural/circuit line drawings. Photography is absent — this is a UI-first, object-first visual system. Partner logos are flattened to monochrome. The density is low: one hero image per section, with text occupying the majority of visual real estate.
Design notes
Agent Guide
## Quick Color Reference - text: #efeff1 - background: #000000 - surface: #0d0e12 - border: #3b3d45 - accent: #2264d6 (active states, links) - primary action: no distinct CTA color ## Example Component Prompts No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 2. **Feature Split Section**: Two-column layout, 64px gap. Left: eyebrow label in Hashicorp Sans 13px weight 600 uppercase, +1.3px tracking, color #b2b6bd. Headline in Hashicorp Sans 42px weight 700, #efeff1, -0.42px tracking. Body in system-ui 16px weight 400, #b2b6bd, with inline links in #2b89ff. Right: 3D hexagonal cube render with violet-blue gradient faces. 3. **Tab Navigation + Content**: Tabs row — inactive in system-ui 17px weight 500 #656a76, active in #efeff1 with 2px #2264d6 underline. Below: resource card on #0d0e12 surface, 1px #15181e border, 8px radius, 24px padding. Card headline in Hashicorp Sans 19px weight 600 #efeff1, body in system-ui 15px #b2b6bd. 4. **Partner Logo Bar**: Section header 'TRUSTED BY LEADING ORGANIZATIONS' in Hashicorp Sans 13px weight 600, tracking +1.3px, color #b2b6bd. Horizontal logo row, all logos rendered in monochrome #d5d7db, ~24px height, 32–48px gaps. 5. **Badge Component**: 4px radius pill, 1px #b457ff border, transparent fill, text in Hashicorp Sans 13px weight 600 uppercase with +1.3px tracking, color #efeff1. Padding 3px 8px.
Similar brands
Vercel
Same dark-void canvas with electric accent color and geometric sans display type, though Vercel uses a warmer accent and more gradient washes
Linear
Identical compressed headline tracking, dark near-black surface, and a single vivid chromatic accent (purple for Linear, blue-violet for HashiCorp) that marks every interactive moment
Stripe
Same gradient-from-edges hero treatment and 3D brand mark as the section anchor, though Stripe's canvas is lighter
PlanetScale
Matching dark enterprise aesthetic with restrained typography, a single saturated brand signal, and 3D geometric brand visuals
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
