Pitvolt - design system export
Everything in one place.
Sixteen component previews, two CSS files of tokens, self-hosted webfonts. Open any file directly - no build step. The full landing pages now live on pitvolt.com.
Foundations
→
Colors - primary
Locked palette: bg, accent-primary, accent-secondary.
→Colors - text & borders
Text tokens on dark + on elevated, divider tokens.
→Type - display
Hero, H1–H3, lead, eyebrow, body ramps.
→Type - mono
Geist Mono usage: meta, code, eyebrows.
→Wordmark
Tight set + tracked PITVOLT treatments.
→Spacing
8-pt scale + section rhythm tokens.
→Radii
--r-xs through --r-pill.
→Atmospheric
Orbs, noise, glass-morphism panels.
Components
→
Buttons
Primary, ghost, on-elevated; inline link CTA.
→Header
Site nav with wordmark + CTA.
→FAQ block
Disclosure list, monospace question/answer rhythm.
→Tags / chips
Status pills, filter chips.
→Timeline
Vertical milestone rail used on /our-story.
→Image slot
Editorial photo placeholder + framing.
→Mailto block
Contact-as-CTA pattern used in footers.
Iconography
→
Icon system - full preview
Phosphor Light + Pitvolt twist (notch + spark). Anatomy, sizes, library, variants, in-context examples.
→icons.css
Wrapper styles + size presets + chip container + status tones.
→PvIcon.jsx
React component.
<PvIcon name="plug" /> - applies the twist automatically. Requires react-icons.Source files
→
colors_and_type.css
Tokens: colors, type ramp, spacing, radii, motion.
→atmospheric.css
Components: buttons, glass, orbs, noise, container.
→icons.css
Icon wrapper, size presets, chip container, tones.
→PvIcon.jsx
React component for icons.
→Original spec / README
Design system specification (markdown).
→Vite wiring guide
How to drop this into a Vite project.