skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-hashicorp

Apply HashiCorp's design system tokens, typography, and components when generating UI.

Updated Feb 23, 2026
Search Tags:#typography#design system#brand guidelines#design tokens#hashicorp#ui design#dark mode
One-click install
npx skills add https://github.com/deepparser/skills --skill design-hashicorp-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-hashicorp
Source: https://github.com/deepparser/skills/tree/main/design-hashicorp
Command: npx skills add https://github.com/deepparser/skills --skill design-hashicorp-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Recreating HashiCorp's enterprise visual identity in UI work requires exact design tokens — colors, typography scales, shadows, and component specs — that are tedious to reverse-engineer and easy to get wrong. ## Core Features & Use Cases - Complete Design Token Reference: Provides exact hex values, font stacks, spacing scales, border radii, and shadow definitions from HashiCorp's design system, including the multi-product color system (Terraform purple, Vault yellow, Waypoint teal, Vagrant blue). - Component Specifications: Details buttons, badges, inputs, cards, links, and navigation with precise padding, radius, and focus-ring rules, plus do's and don'ts for brand fidelity. - Light and Dark Previews: Bundled HTML preview files show the full system implemented in both light and dark themes for visual verification. - Use Case: When asked to build a landing page or dashboard styled like HashiCorp, the agent applies the 82px hero headline, uppercase 13px section labels, whisper-level shadows, and product-specific button colors automatically. ## Quick Start Build a landing page for an infrastructure tool using the HashiCorp design system with a dark hero section and product-colored CTA buttons.

Frequently Asked Questions about design-hashicorp

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a website look like HashiCorp's design?▼

Use HashiCorp Sans (or DM Sans as a stand-in) for headings at 600-700 weight with tight 1.17-1.21 line-heights, system-ui for body text, and a black-and-white base palette with blue accents. Keep shadows at 0.05 opacity and border radii between 2px and 8px.

What colors does the HashiCorp design system use?▼

The parent brand uses black (#000000), dark charcoal (#15181e), and near-black (#0d0e12) with blue link colors (#2264d6, #1060ff). Each product has its own color: Terraform purple (#7b42bc), Vault yellow (#ffcf25), Waypoint teal (#14c6cb), and Vagrant blue (#1868f2).

Does this skill support dark mode UI design?▼

Yes, the skill covers both light and dark modes and bundles preview.html and preview-dark.html reference files. Dark mode uses #15181e and #0d0e12 backgrounds with #efeff1 text, and the skill specifies which sections should be dark versus light.

Can I use Terraform purple for any button in the design?▼

No, product brand colors are restricted to their own product context. Terraform purple only appears on Terraform-related elements, Vault yellow on Vault, and so on. Generic actions use the dark charcoal or white button styles instead.

What typography rules matter most for HashiCorp-style headings?▼

Headings use HashiCorp Sans at 600-700 weight with tight line-heights of 1.17-1.21 and the OpenType kern feature enabled. Section labels use 13px uppercase text with 1.3px letter-spacing, while body text switches to system-ui with relaxed 1.50-1.69 line-heights.

Related Skills

Explore More Design & Creative Skills→
pikkujspikkujs

copywriting

Generate conversion-focused marketing copy for web pages.

Official
Intermediate
Norfolk-GroupNorfolk-Group

component-library

Provides a UI component library with usage rules for the Hospitality portal.

Official
Intermediate
HDeiblerHDeibler
6

color-accessibility-and-mode

Validate UI color choices for WCAG contrast and light/dark mode support.

Community
Intermediate
Asymmetric-alAsymmetric-al
417

design-system-patterns

Implement design tokens, theming infrastructure, and component architecture patterns.

Official
Advanced