mirror of
https://github.com/VoltAgent/awesome-design-md.git
synced 2026-05-14 13:06:57 +08:00
27 KiB
27 KiB
| version | name | description | colors | typography | rounded | spacing | components | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| alpha | HashiCorp | An enterprise-infrastructure marketing canvas built around a near-black ground (#000000) and a system of per-product accent colors — Terraform purple, Vault yellow, Consul pink, Waypoint cyan, Vagrant blue — that act as identity tokens rather than decorative palette. Display type is hashicorpSans set in 600/700 with tight 1.17–1.21 line-heights; body type runs the same family at 500 weight with relaxed 1.50–1.71 line-heights. Cards live as charcoal surfaces with 1px translucent gray borders; product showcase cards lift into per-product chromatic gradients. The system reads as confident, technical, and intentionally multi-product — every section quietly signals which HashiCorp tool it represents. |
|
|
|
|
|
Overview
HashiCorp's marketing canvas is a near-black ground that serves a multi-product portfolio without ever feeling generic. The dominant surface is {colors.canvas} (pure black) layered with {colors.surface-1} charcoal cards and 1px translucent gray hairlines. The chrome is monochrome — white pill-rounded buttons ({components.button-primary}), white type, gray secondary type — but the system is held together by a palette of per-product accent colors that signal which HashiCorp tool a given section belongs to: Terraform purple, Vault yellow, Consul red, Waypoint cyan, Vagrant blue, Nomad green, Boundary coral.
Display type is hashicorpSans at weights 600/700 with tight line-heights (1.17–1.21); body type is the same family at 500 weight with deliberately relaxed line-heights (1.50–1.71) — the contrast feels editorial, not enterprise-templated. CTAs use small {rounded.md} 8px corners rather than pills, which keeps the system reading as developer-facing rather than consumer-y.
The signature device is the product-card family — each HashiCorp product gets its own colored card variant on the home and infrastructure pages, lifting Terraform into a violet ground, Vault into yellow, Waypoint into cyan. These aren't decorative gradients — they're identity surfaces. A reader scrolling the page can tell which product a section is about from the corner of their eye.
Key Characteristics:
- Black-canvas marketing system:
{colors.canvas}is the surface for hero, body, pricing, comparison tables, and footer alike. - Per-product color identity: Terraform
{colors.product-terraform}, Vault{colors.product-vault}, Waypoint{colors.product-waypoint}, Vagrant{colors.product-vagrant}, Consul{colors.product-consul}, Nomad{colors.product-nomad}, Boundary{colors.product-boundary}— each with its own button + card variant. - Display headlines run hashicorpSans 600/700 with line-height 1.17–1.21 (tight); body runs the same family at 500 with 1.50–1.71 (relaxed) — the proportional gap is the brand's voice.
- CTA shape is
{rounded.md}8px — not a pill — keeping the system reading as developer-tool rather than consumer-app. - Charcoal surface lift (canvas → surface-1 → surface-2) instead of shadow-driven elevation.
- 1px translucent gray hairlines (
rgba(178,182,189,0.1)) define cards and dividers — the borders are felt more than seen. - Eyebrow typography (12–13px, 600 weight, 0.6px positive tracking, uppercase) marks every section as a category label.
Colors
Source pages: hashicorp.com/en (home), /en/infrastructure-cloud, /en/products/terraform, /en/pricing, /en/resources?contentType=PDF.
Brand & Accent
- Black ({colors.primary}): The system primary surface. Canvas, footer, comparison tables, hero — all black.
- White ({colors.on-primary}): Inverse text on black; canvas of
button-primary. - Accent Blue ({colors.accent-blue}): Hyperlinks across the marketing surface.
- Visited Purple ({colors.semantic-visited}): Visited-link state.
Surface
- Canvas ({colors.canvas}): Default page background.
- Surface 1 ({colors.surface-1}): Charcoal one step above canvas — feature cards, pricing cards, resource tiles.
- Surface 2 ({colors.surface-2}): Two steps above — featured pricing card, secondary buttons, hovered product chrome.
- Surface 3 ({colors.surface-3}): Three steps above — small chips, badges, sub-nav backgrounds.
- Hairline ({colors.hairline}): 1px borders on cards and dividers.
- Hairline Soft ({colors.hairline-soft}): Subtler dividers — comparison-table rows.
- Inverse Canvas ({colors.inverse-canvas}): Pure white — used as the surface of
button-primaryonly.
Text
- Ink ({colors.ink}): All headline and emphasized body type — pure white.
- Ink Muted ({colors.ink-muted}): Secondary type at #b2b6bd — meta info, footer columns.
- Ink Subtle ({colors.ink-subtle}): Tertiary type at #656a76 — form helper text, timestamps, footnotes.
Per-Product Identity (signature)
HashiCorp's marketing isn't held together by a single accent color — it's held together by a system of product-specific accents, each used to mark which tool a section represents.
- Terraform Purple ({colors.product-terraform}): Terraform sections, terraform CTAs, the violet 3D cube on the home hero.
- Terraform Bright ({colors.product-terraform-bright}): Saturated highlight — link emphasis on Terraform pages.
- Vault Yellow ({colors.product-vault}): Vault sections and CTAs.
- Consul Red ({colors.product-consul}): Consul sections.
- Waypoint Cyan ({colors.product-waypoint}): Waypoint sections, deep variant
{colors.product-waypoint-deep}for hover/active. - Vagrant Blue ({colors.product-vagrant}): Vagrant sections.
- Nomad Green ({colors.product-nomad}): Nomad sections.
- Boundary Coral ({colors.product-boundary}): Boundary sections.
Semantic
- Success ({colors.semantic-success}): Positive states (also reused as Nomad green).
- Warning ({colors.semantic-warning}): Warning states (also Vault yellow).
- Error ({colors.semantic-error}): Error states (also Consul red).
- Amber 100 ({colors.amber-100}): Soft warm highlight — extracted but used sparingly.
- Amber 200 ({colors.amber-200}): Saturated amber for caution badges.
- Blue 7 ({colors.blue-7}): Deep navy used in unified-core gradients.
Typography
Font Family
- hashicorpSans — HashiCorp's proprietary marketing typeface. Geometric, clean, slightly humanist. Fallback stack
__hashicorpSans_Fallback_96f0ca(system font), then-apple-system, BlinkMacSystemFont, Segoe UI, helvetica, arial.
The same family carries display, body, button, and caption — no separate display + body pairing. Hierarchy is carried by weight (500 body / 600 emphasis / 700 display) and by a deliberate line-height contrast (tight on display, relaxed on body).
Hierarchy
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
{typography.display-xl} |
80px | 700 | 1.17 | -2.5px | Largest hero headline |
{typography.display-lg} |
56px | 700 | 1.18 | -1.6px | Section opener headlines |
{typography.display-md} |
40px | 600 | 1.19 | -1.0px | Sub-section headlines |
{typography.headline} |
28px | 600 | 1.21 | -0.6px | Pricing tier titles, CTA banner heading |
{typography.card-title} |
22px | 600 | 1.18 | -0.4px | Feature card title |
{typography.subhead} |
20px | 600 | 1.35 | -0.2px | Long-form intro paragraphs |
{typography.body-lg} |
18px | 500 | 1.69 | 0 | Hero subhead, lead body |
{typography.body} |
16px | 500 | 1.50 | 0 | Default body |
{typography.body-sm} |
14px | 500 | 1.71 | 0 | Card body, footer columns |
{typography.caption} |
13px | 500 | 1.38 | 0.2px | Meta, comparison cell labels |
{typography.button} |
14px | 600 | 1.29 | 0 | Pill / square CTA buttons |
{typography.eyebrow} |
12px | 600 | 1.23 | 0.6px | Uppercase section eyebrows |
Principles
- Tight on display, relaxed on body. Display sits at line-height 1.17–1.21; body lifts to 1.50–1.71. The size + line-height contrast carries hierarchy.
- Weight hierarchy is small. 500 body / 600 emphasis / 700 display. No light / black extremes — the brand reads as engineered.
- Eyebrow positive-tracked uppercase 12px is the section header. Every meaningful section has one above the headline.
- No mono. Despite being a developer-tools brand, the marketing surface uses no monospace face — code voice is reserved for in-product surfaces.
Note on Font Substitutes
If implementing without hashicorpSans, suitable open-source substitutes include Inter (closest geometric character set), Geist Sans, or IBM Plex Sans. Inter at weights 500 / 600 / 700 closely approximates hashicorpSans's proportions; expect to manually adjust line-heights down by ~0.02 to match.
Layout
Spacing System
- Base unit: 8px (the primary increments are 4 / 8 / 12 / 16 / 24 / 32 / 48).
- Tokens (front matter):
{spacing.hair}1px ·{spacing.xxs}4px ·{spacing.xs}8px ·{spacing.sm}12px ·{spacing.md}16px ·{spacing.lg}24px ·{spacing.xl}32px ·{spacing.xxl}48px ·{spacing.section}96px. - Card interior padding:
{spacing.lg}24px on product cards;{spacing.xl}32px on pricing cards;{spacing.xxl}48px on CTA banners. - Button padding: 10px vertical · 18px horizontal on
{components.button-primary}. - Universal rhythm constant:
{spacing.section}(96px) vertical gap between major sections.
Grid & Container
- Max content width sits around 1280px with side gutters scaling from
{spacing.xxl}on desktop down to{spacing.lg}on mobile. - Product card grids are 3-up on desktop, 2-up at tablet, 1-up on mobile.
- Pricing tier grid is 3-up across desktop; comparison table beneath uses fixed-width left column.
- Resource directory (PDF library) uses 4-up dense thumbnail grid.
Whitespace Philosophy
The dark canvas IS the whitespace. Sections separate by surface lift (canvas → surface-1) rather than by gaps in white. Within a section, generous {spacing.xl} 32px gaps separate cards; {spacing.lg} 24px separates rows.
Elevation & Depth
| Level | Treatment | Use |
|---|---|---|
| 0 (flat) | No shadow, no border | Canvas-mounted display type, hero, footer |
| 1 (charcoal lift) | {colors.surface-1} background + 1px rgba(178,182,189,0.1) border |
Default cards, resource tiles, pricing cards |
| 2 (surface-2 lift) | {colors.surface-2} background + 1px {colors.hairline} border |
Featured pricing card, hovered cards, sub-nav |
| 3 (product chromatic) | Per-product accent color background — Terraform purple, Vault yellow, Waypoint cyan | Product showcase cards |
The product chromatic level isn't a "modal lift" — it's an identity device. A Terraform card sits at the same z-plane as a feature-card; the difference is meaning, not depth.
Decorative Depth
- 3D product visuals — isometric purple cubes (Terraform), translucent yellow safes (Vault), and similar product-tinted illustrations sit in the right column of hero sections.
- 1px translucent gray hairlines are the dominant edge — borders are visible without competing.
- No drop shadows on dark. Cards lift via surface change, never shadow.
Shapes
Border Radius Scale
| Token | Value | Use |
|---|---|---|
{rounded.xs} |
4px | Small chips / badges |
{rounded.sm} |
6px | Inline tag |
{rounded.md} |
8px | All CTA buttons, form inputs, list items |
{rounded.lg} |
12px | Feature cards, product cards, pricing cards |
{rounded.xl} |
16px | Large illustrative tiles |
{rounded.xxl} |
24px | CTA banner panels |
{rounded.pill} |
9999px | Eyebrow-style product pills (small chips) |
{rounded.full} |
9999px | Avatar circles (rare on marketing) |
Photography & Illustration Geometry
- Product 3D illustrations use full-bleed within their container — no rounded inner mask.
- Logo chips in the customer marquee sit on
{rounded.sm}6px tiles with 1px hairline. - Resource thumbnails use
{rounded.lg}12px corners.
Components
Buttons
button-primary — White rounded-rect CTA. Used as primary CTA on all pages.
- Background
{colors.inverse-canvas}, text{colors.inverse-ink}, type{typography.button}, padding 10px 18px, rounded{rounded.md}. - Pressed state lives in
button-primary-pressed.
button-secondary — Charcoal rounded-rect. Secondary CTA, "Read docs" / "Talk to sales".
- Background
{colors.surface-2}, text{colors.ink}, type{typography.button}, rounded{rounded.md}, padding 10px 18px.
button-tertiary — Bare ghost button on canvas with text-only treatment.
- Background
{colors.canvas}, text{colors.ink}, type{typography.button}, rounded{rounded.md}, padding 10px 18px.
button-product-terraform — Terraform-tinted CTA on Terraform pages.
- Background
{colors.product-terraform}, text{colors.ink}, type{typography.button}, rounded{rounded.md}, padding 10px 18px.
button-product-vault — Vault-yellow CTA.
- Background
{colors.product-vault}, text{colors.inverse-ink}(yellow needs dark text), type{typography.button}, rounded{rounded.md}, padding 10px 18px.
button-product-waypoint — Waypoint-cyan CTA.
- Background
{colors.product-waypoint}, text{colors.inverse-ink}, type{typography.button}, rounded{rounded.md}, padding 10px 18px.
(Vagrant blue, Nomad green, Consul red, Boundary coral follow the same pattern with their respective {colors.product-*} token.)
Cards & Containers
product-card — Default product showcase card — surface-1 charcoal.
- Background
{colors.surface-1}, text{colors.ink}, type{typography.body}, rounded{rounded.lg}, padding 24px.
product-card-terraform — Product card with Terraform purple ground (used as identity surface, not modal elevation).
- Background
{colors.product-terraform}, text{colors.ink}, type{typography.body}, rounded{rounded.lg}, padding 24px.
product-card-vault — Vault-yellow ground.
- Background
{colors.product-vault}, text{colors.inverse-ink}, otherwise identical structure.
product-card-waypoint — Waypoint-cyan ground.
- Background
{colors.product-waypoint}, text{colors.inverse-ink}, otherwise identical structure.
(Other product variants follow the same shape with their respective product token.)
feature-card — Generic feature highlight on surface-1.
- Background
{colors.surface-1}, text{colors.ink}, type{typography.body}, rounded{rounded.lg}, padding 24px.
pricing-card — Pricing tier on /en/pricing.
- Background
{colors.surface-1}, text{colors.ink}, type{typography.body}, rounded{rounded.lg}, padding 32px.
pricing-card-featured — Recommended tier (visually emphasized via surface lift).
- Background
{colors.surface-2}, otherwise identical structure.
resource-card — PDF / whitepaper / guide tile in the resources directory.
- Background
{colors.surface-1}, text{colors.ink}, type{typography.body-sm}, rounded{rounded.lg}, padding 16px.
Inputs & Forms
text-input + text-input-focused — Form fields on pricing seat-count and contact forms.
- Background
{colors.surface-1}, text{colors.ink}, type{typography.body}, rounded{rounded.md}, padding 10px 14px. - Focused state retains the same surface; the focus ring is a 1px
{colors.accent-blue}outline.
Pills & Chips
product-pill — Small product-name chip used above hero headlines and on resource cards to label which product a piece of content belongs to.
- Background
{colors.surface-1}, text{colors.ink-muted}, type{typography.caption}, rounded{rounded.pill}, padding 4px 10px.
Comparison Table
comparison-row — Single row inside the pricing comparison table.
- Background
{colors.canvas}, text{colors.ink-muted}, type{typography.body-sm}. Row separator is{colors.hairline-soft}.
CTA Banner
cta-banner — Large rounded panel used at the bottom of long-form pages with a closing CTA.
- Background
{colors.surface-1}, text{colors.ink}, type{typography.subhead}, rounded{rounded.xxl}, padding 48px.
Navigation
top-nav — Sticky black bar with HashiCorp logomark left, primary nav links centered, and a button-primary ("Sign up") + button-secondary ("Sign in") pair right.
- Background
{colors.canvas}, text{colors.ink}, type{typography.body-sm}, height 64px. - Mobile: collapses primary links into a hamburger; the primary CTA remains visible.
Footer
footer — Dense link grid on {colors.canvas} with the wordmark at left and 5–6 columns of caption-sized links.
- Background
{colors.canvas}, text{colors.ink-muted}, type{typography.caption}, padding 64px 32px.
Do's and Don'ts
Do
- Reserve
{colors.canvas}(black) and{colors.surface-1}(charcoal) as the system's two anchor surfaces. Every band of the page is one or the other. - When introducing a section about a specific HashiCorp product, use that product's
{colors.product-*}token consistently — for the section pill, the CTA button, and (where appropriate) the showcase card background. - Use
{rounded.md}8px on CTA buttons; HashiCorp's brand reads as engineered, not consumer. - Pair tight display line-heights (1.17–1.21) with relaxed body line-heights (1.50–1.71). The contrast IS the brand voice.
- Use the eyebrow typography (
{typography.eyebrow}, uppercase, 0.6px tracking) above every meaningful section. - Use surface lift (canvas → surface-1 → surface-2) to express hierarchy on dark.
- Reserve product-chromatic cards for product identity; keep generic feature cards on
{colors.surface-1}.
Don't
- Don't ship a light-mode marketing page. HashiCorp's marketing brand IS dark.
- Don't introduce mid-tone gray text outside the documented
ink/ink-muted/ink-subtleset. - Don't square off CTA corners — use
{rounded.md}8px, not 0px. - Don't use a product accent color for a CTA on a page that isn't about that product. Terraform purple on the Vault page is a brand violation.
- Don't combine multiple product accents in the same viewport — the system says "this section is about THIS tool", and mixing accents breaks that signal.
- Don't add drop shadows on dark; surface lift carries elevation.
- Don't replace
hashicorpSanswith a display-only sans for headlines and a different family for body. The brand is held together by one family across the full hierarchy.
Responsive Behavior
Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Desktop-XL | 1440px | Default desktop layout |
| Desktop | 1280px | Pricing 3-up grid maintained |
| Tablet | 1024px | Product card grid 3-up → 2-up |
| Mobile-Lg | 768px | Pricing comparison becomes per-tier accordion; nav becomes hamburger |
| Mobile | 480px | Single-column everything; display-xl scales 80px → ~36px |
Touch Targets
- CTA buttons (
button-primary,button-secondary) maintain ≥40px tap height across viewports. - Product pills are 24px tall on desktop and grow to 28px on touch viewports.
- Form inputs hold ≥44px tap target on touch viewports.
Collapsing Strategy
- Nav: horizontal nav with right-anchored CTAs collapses to a hamburger overlay below 768px. The primary CTA stays visible on the bar.
- Product card grid: 3-up → 2-up at 1024px → 1-up below 768px.
- Pricing comparison table: collapses into per-tier accordions below 768px to avoid horizontal scroll.
- Display type:
{typography.display-xl}80px scales toward{typography.display-md}40px on mobile while preserving the negative-tracking percentage.
Image Behavior
- 3D product illustrations (cubes, safes, etc.) maintain aspect ratio and never crop; below 768px they shrink rather than reflow.
- Customer logo marquee scales horizontally and may wrap to a second row at narrow widths.
Iteration Guide
- Focus on ONE component at a time and reference it by its
components:token name. - When introducing a new section, decide first whether it's a generic feature (surface-1) or a product-identity section (product-* color).
- Default body to
{typography.body}at 500 weight; reach for{typography.subhead}only inside CTA banners and feature cards. - Run
npx @google/design.md lint DESIGN.mdafter edits. - Add new product variants as separate component entries (
product-card-nomad,button-product-consul, etc.). - Treat the per-product palette as identity tokens, not decoration. If you reach for a product color outside its product context, the brand is drifting.
- Eyebrow type is mandatory above every section — skipping it makes sections read as floating.
Known Gaps
- The exact product-color hex values come from the
--mds-color-*CSS variable set extracted directly; they are HashiCorp's canonical brand spec. - Shadow tokens are not extensively documented because the dark surface system uses surface lift instead of shadow elevation.
- Form-field error and validation styling is not visible on the inspected pages.
- Dark mode is the only marketing mode — light-mode adaptation is not documented.
- Product-card variants for Consul, Nomad, Vagrant, and Boundary follow the documented Terraform / Vault / Waypoint pattern but are referenced in prose only; if they need formal entries they can be added as
product-card-consul,product-card-nomad, etc.