# Tenna Design System

> High-visibility industrial safety orange anchored by heavy Helvetica typography on a high-contrast monochrome foundation.

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

## TL;DR
Tenna utilizes a high-contrast industrial aesthetic dominated by Tenna Orange `#fd4f00`. The system is built on a foundation of pure white `#ffffff` and deep charcoal `#222222`, mirroring the visibility requirements of construction environments. Typography is strictly Helvetica-based, utilizing heavy weights (700) for headings and buttons to convey durability and authority. UI components favor large touch targets, generous internal padding (up to 35px), and a mix of sharp 0px corners for primary actions and soft 16-20px radii for content cards.

## Signature DNA
1. **Industrial High-Vis Orange** (Tenna Orange `#fd4f00` is used as the primary action signal for CTAs and critical brand markers across all pages).
2. **Heavy Helvetica Hierarchy** (The use of Helvetica at weight 700 for headings and buttons creates a "no-nonsense" tool-like feel, evidenced by `h2.elementor-cta__title`).
3. **Hybrid Geometry** (A deliberate contrast between sharp 0px radius buttons and 16-20px radius content cards, separating "actions" from "information").

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, primary surface, button text | 78 | 1.0 | `--wp--preset--color--white` |
| `{color.charcoal}` | `#222222` | Primary text, dark section backgrounds, button backgrounds | 170 | 0.8 | Computed Style |
| `{color.black}` | `#000000` | Deep shadows, footer backgrounds | 8 | 1.0 | `--wp--preset--color--black` |
| `{color.smoke}` | `#f5f5f5` | Secondary section backgrounds, neutral surfaces | 43 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#fd4f00` | Primary CTA background, active borders, brand text | 10 | 0.6 | Computed Style |
| `{color.accent-blue}` | `#00b2d3` | Secondary text links, icon accents | 30 | 0.8 | Computed Style |
| `{color.vivid-orange}` | `#ff6a00` | Decorative highlights only | 1 | 1.0 | `decorative_only` |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Helvetica | 300, 400, 600, 700 | Display, Headings, UI | Inter | System |
| Arial | 400 | Secondary Body | Arimo | System |
| Helvetica Neue | 700 | Emphasis Body | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.h2}` | 26px | 36.4px | normal | 700 | Section Headings | `h2.elementor-cta__title` |
| `{type.h3}` | 24px | 28.8px | normal | 700 | Feature Titles | `h3.elementor-image-box-title` |
| `{type.tab-active}` | 21px | 31.2px | 2.56px | 300 | Tab Navigation | `span.e-n-tab-title-text` |
| `{type.button-lg}` | 20px | 20px | normal | 700 | Primary Hero CTA | `a.elementor-button` |
| `{type.body-lg}` | 18px | 27px | normal | 400 | Lead Paragraphs | `p` |
| `{type.body}` | 17px | 25.5px | normal | 400 | Standard Body | `div.elementor-element` |
| `{type.button-md}` | 16px | 16px | 0.5px | 700 | Card Actions | `span.elementor-cta__button` |
| `{type.body-sm}` | 15px | 20.8px | normal | 700 | Labels/Captions | `span.image-choices-choice-text` |

### Principles
1. **Heavy Weight for Action:** All primary buttons and section headers must use weight 700.
2. **Wide Tracking for Navigation:** Tab titles and navigation elements utilize expanded letter spacing (2.2px to 2.56px).
3. **Helvetica Dominance:** Arial is reserved strictly for technical form steps or legacy body text; all brand-facing copy is Helvetica.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 22 |
| `{space.sm}` | 10px | 35 |
| `{space.md}` | 16px | 34 |
| `{space.lg}` | 20px | 28 |
| `{space.xl}` | 40px | 8 |
| `{space.section}` | 80px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Primary Buttons, Input fields | 195 occurrences |
| `{radius.card}` | 16px | Product/Feature Cards | `radius: 16px` |
| `{radius.card-lg}` | 20px | Testimonial/Case Study Cards | `radius: 20px` |
| `{radius.pill}` | 100px | Navigation Badges, Floating UI | `radius: 100px` |

## Elevation
Table: | Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All cards and buttons | `shadow: none` observed across all components |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main site actions (Get a Demo, Sign Up)
**Pages observed:** https://tenna.com, https://tenna.com/pricing
**Spec:** Background `{color.primary}` (#fd4f00) | Text `{color.white}` (#ffffff) | Radius `{radius.none}` (0px) | Padding 15px 35px | Typography `{type.button-lg}`
**States observed:** Default | Hover: captured | Active: captured

#### Secondary Button
**Role:** Alternative actions (Request Pricing)
**Pages observed:** https://tenna.com
**Spec:** Background transparent | Text `{color.white}` (#ffffff) | Border 1px `{color.white}` | Radius `{radius.none}` (0px) | Padding 15px 35px
**States observed:** Default | Hover: captured

### Tier 2: Patterns
#### Feature Card
**Role:** Displaying product modules or hardware
**Pages observed:** https://tenna.com
**Spec:** Background `{color.white}` (#ffffff) | Text `{color.charcoal}` (#222222) | Radius `{radius.card}` (16px) | Padding 10px
**States observed:** Default | Hover: not captured

#### Testimonial Card
**Role:** Customer success stories
**Pages observed:** https://tenna.com
**Spec:** Background `{color.smoke}` (#f6f6f6) | Text `{color.charcoal}` (#222222) | Radius `{radius.card-lg}` (20px) | Padding 10px
**States observed:** Default

### Tier 3: Surface-specific
#### Pricing Tier Surface
**Role:** Pricing plan containers
**Pages observed:** https://tenna.com/pricing
**Spec:** Background transparent | Border 1px `{color.smoke}` | Radius 6px | Padding 20px 20px 80px
**States observed:** Default

#### Global Navigation Bar
**Role:** Header navigation
**Pages observed:** https://tenna.com, https://tenna.com/pricing
**Spec:** Background `{color.black}` (#000000) | Text `{color.white}` (#ffffff) | Height 80px (approx)
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Padding | 80px (Vertical) |
| Grid Gutter | 20px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Hero CTAs stack vertically. |
| Desktop | 1440px | Multi-column card grids (3-up or 4-up). |

## Imagery & decoration
Tenna uses high-resolution job site photography with dark overlays to maintain text legibility. Decorative elements include the "Tenna Live" badge with a `{radius.pill}` and orange accents. Avoids soft gradients or rounded buttons for primary actions.

## Do's
- Use `#fd4f00` for all primary conversion points.
- Maintain 0px border radius on all interactive buttons.
- Use Helvetica 700 for all headings to ensure industrial authority.
- Ensure high contrast (White text on Charcoal backgrounds).
- Use generous vertical section spacing of at least 80px.

## Don'ts
- **Wrong:** Using rounded corners on primary buttons. **Right:** Keep radius at 0px. **Reason:** Maintains industrial brand alignment.
- **Wrong:** Using `#00b2d3` for primary CTAs. **Right:** Use `#fd4f00`. **Reason:** Blue is a secondary accent, not an action color.
- **Wrong:** Applying drop shadows to cards. **Right:** Use flat borders or background shifts. **Reason:** System is designed as a flat, high-contrast UI.

## Quick start
```css
/* CSS Custom Properties */
:root {
  --tenna-orange: #fd4f00;
  --tenna-charcoal: #222222;
  --tenna-white: #ffffff;
  --tenna-smoke: #f5f5f5;
  --font-primary: "Helvetica", sans-serif;
}
```

## Known gaps
- Success and Error semantic states were not captured in the marketing site flow.
- Hover state hex values for buttons were not explicitly declared as tokens.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://tenna.com | 1440px | 2026-06-06 |
| Pricing | https://tenna.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://tenna.com | 390px | 2026-06-06 |