# Transvault Design System

> High-contrast enterprise slab-serif typography anchored by a vibrant neon-green signal color and deep plum-black foundations.

**Source:** https://transvault.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Transvault utilizes a high-impact "monochrome plus signal" system. The primary canvas is pure white (#ffffff), but the brand identity is defined by a deep plum-black (#291c2e) used for primary buttons and text, contrasted against a high-voltage neon green (#32f03c) used for accents and secondary surfaces. Typography is strictly slab-serif, employing MuseoSlab in two weights (300 and 700) to create a structured, "engineered" feel. Geometry is predominantly sharp (0px radius) for buttons and containers, with the only curves appearing in decorative background "pill" and "circle" motifs.

## Signature DNA
1. **The Signal Green Pop** (#32f03c) used as a high-contrast flood for banners and icon backgrounds, often paired with the deep plum-black (#291c2e) for maximum legibility and brand recognition (Homepage, About).
2. **Slab-Serif Authority** (MuseoSlab-700) at large scales (38px) with tight line heights, giving technical content a heavy, grounded presence (Hero sections).
3. **Sharp Edge Protocol** (0px radius) applied to all primary interactive elements, including buttons and content surfaces, reinforcing a precise, enterprise-grade aesthetic.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Page background, primary surface | 57 | 1 | Computed Style |
| `{color.ink}` | `#291c2e` | Primary text, button backgrounds, borders | 320 | 0.8 | Computed Style |
| `{color.neutral.soft}` | `#f3f3f3` | Secondary surface backgrounds | 5 | 0.6 | Computed Style |
| `{color.neutral.dark}` | `#000000` | Footer/Deep surface backgrounds | 2 | 1 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#32f03c` | Brand signal, accent surfaces, icons | 27 | 1 | Brand Page |
| `{color.accent.purple}` | `#6e4ff5` | Decorative text/surface highlights | 16 | 0.8 | Computed Style |
| `{color.accent.slate}` | `#54596b` | Secondary button backgrounds | 8 | 0.6 | Computed Style |
| `{color.accent.cyan}` | `#bfe3e8` | Decorative surface (decorative_only) | 6 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| MuseoSlab-700 | 400 (computed) | Headings, CTAs | Arvo (Bold) | Licensed |
| MuseoSlab-300 | 400 (computed) | Body, Subheadings | Arvo (Regular) | Licensed |
| Arial | 500 | Utility, Small labels | Sans-serif | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{text.h1}` | 38px | 48px | normal | 400 | Hero Headlines | `h1.megalo.title-pair__large` |
| `{text.h2}` | 26px | 38px | normal | 400 | Section Headers | `p.alpha.title-pair__large` |
| `{text.h3}` | 22px | 34px | normal | 400 | Component Titles | `h4.cms__title.cms__title--h2` |
| `{text.h4}` | 20px | 28px | normal | 400 | Item Titles | `h3.staggered-copy__item__title` |
| `{text.body.lg}` | 17px | 25px | normal | 400 | Feature Labels | `h3.icon-list__title` |
| `{text.body}` | 16px | 21px | normal | 400 | Default Body | `div.cky-overlay` |
| `{text.button}` | 14px | 20px | normal | 400 | CTA Labels | `a.button` |
| `{text.caption}` | 10px | 12px | 1px | 500 | Utility Links | `a.header__bar__link--seal` |

### Principles
1. **Slab-serif exclusivity** for all brand-critical copy; sans-serif is reserved for system-level utility links.
2. **Generous leading** on body text (1.3x+) to maintain legibility against high-contrast backgrounds.
3. **Uppercase utility** for small 10px labels with expanded letter-spacing (1px).

## Spacing
**Base unit:** 5px (derived from common multiples)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 5px | 12 |
| `{space.sm}` | 10px | 22 |
| `{space.md}` | 20px | 15 |
| `{space.lg}` | 40px | 25 |
| `{space.xl}` | 100px | 9 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Buttons, Cards, Inputs | 357 occurrences |
| `{radius.full}` | 100px | Decorative background motifs | 6 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.flat}` | none | All buttons and surfaces | 16 button instances |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main site actions (e.g., Book a demo)
**Pages observed:** Homepage, About
**Spec:** Background: `{color.ink}` (#291c2e) / Text: `{color.canvas}` (#ffffff) / Border: 2px solid `{color.ink}` / Radius: 0px / Padding: 9px 40px 7px / Typography: `{text.button}`
**States observed:** Default: Captured | Hover: Not captured

#### Secondary Button
**Role:** Alternative actions
**Pages observed:** Homepage, About
**Spec:** Background: `{color.accent.slate}` (#54596b) / Text: `{color.canvas}` (#ffffff) / Radius: 0px / Padding: 10px 0px / Typography: `{text.caption}`

### Tier 2: Patterns

#### Signal Banner
**Role:** Section emphasis
**Pages observed:** About
**Spec:** Background: `{color.primary}` (#32f03c) / Text: `{color.ink}` (#291c2e) / Radius: 0px / Padding: 160px 0px 0px / Typography: `{text.h1}`

#### Content Surface (Neutral)
**Role:** Section alternating
**Pages observed:** Homepage, About
**Spec:** Background: `{color.neutral.soft}` (#f3f3f3) / Text: `{color.ink}` (#291c2e) / Radius: 0px / Border: 0px

### Tier 3: Surface-specific

#### Utility Header Bar
**Role:** Top-level navigation utility
**Pages observed:** Homepage, About
**Spec:** Background: `{color.accent.slate}` (#54596b) / Text: `{color.canvas}` (#ffffff) / Typography: `{text.caption}` (10px)

#### Decorative Circle
**Role:** Background brand motif
**Pages observed:** Homepage, About
**Spec:** Background: `{color.primary}` (#32f03c) / Radius: 100% / Padding: 160px-301px (aspect-ratio 1:1)

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | ~1200px |
| Section Padding (Vertical) | 100px - 160px |
| Component Gap | 30px - 40px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to bottom-fixed bar with icons; Hero padding reduces to 40px. |
| Desktop | 1440px | Side-rail navigation (left-aligned) or standard top-header. |

## Imagery & decoration
Transvault uses large-scale geometric "blobs" and circles in `#32f03c` and `#bfe3e8` as background layers. Photography features professional "office-tech" imagery, often partially obscured by these geometric brand shapes.

## Do's
- Use `#291c2e` for all primary button backgrounds to ensure brand consistency.
- Apply `MuseoSlab-700` for all headings above 20px.
- Maintain a `0px` border radius on all interactive UI components.
- Use `#32f03c` as a background flood to highlight key "About" or "Hero" sections.
- Ensure 10px utility text has `1px` letter spacing for legibility.

## Don'ts
- **Wrong:** Using `#00d084` (Vivid Green Cyan) as the primary brand accent. **Right:** Use `#32f03c`. **Reason:** `#32f03c` is the validated brand signal color; preset tokens are for legacy support only.
- Do not use rounded corners on buttons; the brand identity is strictly "sharp."
- Do not use `#32f03c` for body text; it lacks sufficient contrast against white (1.5:1).
- Do not mix sans-serif fonts into headings.

## Similar brands
- Cisco (Enterprise tech grounding)
- MongoDB (Green/Dark contrast)
- Hewlett Packard Enterprise (Slab-serif/Technical feel)

## Quick start

### CSS Custom Properties
```css
:root {
  --tv-color-primary: #32f03c;
  --tv-color-ink: #291c2e;
  --tv-color-canvas: #ffffff;
  --tv-color-neutral-soft: #f3f3f3;
  --tv-font-heading: 'MuseoSlab-700', serif;
  --tv-font-body: 'MuseoSlab-300', serif;
  --tv-radius-none: 0px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #32f03c;
  --color-ink: #291c2e;
  --font-heading: "MuseoSlab-700";
  --font-body: "MuseoSlab-300";
  --radius-none: 0px;
}
```

## Agent prompt examples
- "Generate a hero section with a `#32f03c` background, a `#291c2e` sharp-edged button, and a `38px` MuseoSlab-700 headline."
- "Create a feature grid using `#f3f3f3` cards with `0px` border radius and `17px` slab-serif subheadings."
- "Design a footer using a `#000000` background with `10px` Arial utility links at `1px` letter spacing."

## Known gaps
- Hover and Active states for buttons were not captured in the source.
- Mobile-specific typography scale for H1 was not explicitly declared in the evidence.
- Shadow tokens were not present in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://transvault.com | 1440px / 390px | 2026-06-06 |
| About | https://transvault.com/about | 1440px | 2026-06-06 |