# Deanta Design System

> High-contrast corporate publishing architecture defined by geometric Avant Garde headlines, deep navy foundations, and sharp zero-radius edges.

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

## TL;DR
Deanta employs a "monochrome-plus" system where a stark white canvas (#ffffff) is anchored by deep navy (#074973) and slate (#363e44) blocks. The typography is the primary brand carrier, utilizing **ITCAvantGarde** in heavy weights (700-900) for display and **Roboto** (300) for a light, technical body feel. The system is strictly geometric, featuring a universal border radius of 0px across all cards, buttons, and sections. Visual rhythm is driven by large-scale display type (54px) and a distinct "diagonal slash" decorative motif that intersects section headers.

## Signature DNA
1. **The Geometric Slash** (A 45-degree accent line that cuts through the initial letter of section headlines, observed on both Homepage and About pages).
2. **Sharp-Edge Architecture** (A total rejection of rounded corners; `{radii.sharp}` (0px) is applied to every container, button, and tab component).
3. **Weight Contrast** (The juxtaposition of heavy, geometric sans-serif headlines (700+) against ultra-light Roboto body text (300)).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{colors.white}` | `#ffffff` | Primary canvas, button text, footer headings | 32 | 1.0 | `--wp--preset--color--white` |
| `{colors.slate}` | `#363e44` | Primary text, secondary button text | 66 | 0.8 | Computed Style |
| `{colors.smoke}` | `#747474` | Body text, testimonial text | 16 | 1.0 | `--body_typography-color` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{colors.navy}` | `#074973` | Section backgrounds, primary brand signal | 13 | 0.8 | Computed Style |
| `{colors.ice}` | `#c1cad6` | Decorative text, subtle accents | 18 | 0.8 | Computed Style |
| `{colors.steel}` | `#778792` | Secondary decorative text | 5 | 0.6 | Computed Style |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `{colors.success}` | `#65bc7b` | Pricing boxes, active accordion states, form focus |
| `{colors.error}` | `#cf2e2e` | Validation (preset) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| ITCAvantGarde | 700, 900 | Display, Headings | Montserrat | Licensed |
| Roboto | 300 | Body, UI Labels | Roboto (Google) | Open Source |
| ITCAvantGarde-Bold | 400 | Emphasized Body | Montserrat Bold | Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 54px | 61.7px | -0.2px | 700 | Hero H2 | `h2` |
| `{type.h3}` | 32px | 36.8px | normal | 700 | Section Headings | `h3` |
| `{type.h3-bold}` | 32px | 36.8px | normal | 900 | Emphasis Headings | `b` |
| `{type.h4}` | 24px | 36px | normal | 700 | Tab Headings | `h4.fusion-tab-heading` |
| `{type.body-lg}` | 20px | 34px | normal | 300 | Lead Paragraphs | `section#content` |
| `{type.nav}` | 20px | normal | normal | 300 | Navigation Links | `a#fusion-tab-services` |
| `{type.body-sm}` | 18px | 27px | 1.8px | 700 | Labels/Caps | `span` |
| `{type.caption}` | 14px | 1.5 | normal | 300 | Footer/Legal | Computed |

### Principles
1. **Geometric Display:** Headings must use ITCAvantGarde with tight tracking (-0.2px) at large scales.
2. **Technical Body:** Running text is always Roboto 300; the light weight provides a "blueprint" aesthetic.
3. **All-Caps Labels:** Small labels (18px) use heavy weights (700) and wide tracking (1.8px).

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 5px | 8 |
| `{space.sm}` | 10px | 14 |
| `{space.md}` | 20px | 24 |
| `{space.lg}` | 30px | 14 |
| `{space.xl}` | 60px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | All buttons, cards, tabs, and images | 137 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action
**Pages observed:** Homepage, About
**Spec:** Background `{colors.navy}` (#074973) | Text `{colors.white}` (#ffffff) | Radius `{radius.sharp}` (0px) | Typography `{type.body-sm}`
**States observed:** Default | Hover: `{colors.success}` (#65bc7b)

#### Tab Navigation
**Role:** Content switching in feature sections
**Pages observed:** Homepage, About
**Spec:** Background `{colors.white}` (#ffffff) | Border-bottom 3px `{colors.navy}` (active) | Typography `{type.h4}` (24px/700)
**States observed:** Active: Navy underline | Inactive: `{colors.smoke}` (#747474) text

### Tier 2: Patterns

#### Section Header
**Role:** Introducing new content blocks
**Pages observed:** Homepage, About
**Spec:** Typography `{type.h3}` | Decoration: 45-degree slash in `{colors.navy}` intersecting the first character.

#### Feature Card
**Role:** Service and solution summaries
**Pages observed:** Homepage, About
**Spec:** Background `{colors.white}` (#ffffff) | Padding `{space.lg}` (30px) | Radius `{radius.sharp}` (0px) | Text `{colors.slate}` (#363e44)

### Tier 3: Surface-specific

#### Dark Hero Block
**Role:** High-impact landing sections
**Pages observed:** Homepage
**Spec:** Background `{colors.navy}` (#074973) | Text `{colors.white}` (#ffffff) | Typography `{type.display}` (54px)

#### Cookie Consent Bar
**Role:** Legal compliance
**Pages observed:** Homepage, About
**Spec:** Background `{colors.navy}` (#074973) | Text `{colors.white}` (#ffffff) | Radius `{radius.sharp}` (0px) | Padding `{space.md}` (20px)

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Padding | 60px (vertical) |
| Column Gap | 30px |

## Imagery & decoration
- **Diagonal Slash:** A recurring 45-degree vector used to "strike through" the start of headlines.
- **Technical Overlays:** Use of blueprint-style line art and circuit patterns in hero backgrounds.
- **Desaturated Photography:** Imagery often uses a cool, blue-tinted overlay to match `{colors.navy}`.

## Do's
- Use `{radius.sharp}` (0px) for every interactive element.
- Pair ITCAvantGarde (700) headlines with Roboto (300) body text.
- Use `{colors.navy}` (#074973) for primary section backgrounds to create high-contrast "bands."
- Apply the diagonal slash motif to the first letter of H3 section titles.
- Maintain a minimum of 60px vertical spacing between major content sections.

## Don'ts
- **No Rounded Corners:** Never use `border-radius` > 0px.
- **No Bold Body:** Avoid using Roboto 700 for long-form text; stick to weight 300.
- **Color Misuse:** Do not use the sub-brand green (#65bc7b) as a primary background; it is reserved for active states and semantic highlights.
- **Shadows:** Avoid drop shadows; the brand relies on flat color blocks for depth.

## Similar brands
- IBM (Technical, geometric, grid-heavy)
- SAP (Corporate, blue-anchored, high-contrast)
- Architectural Digest (Editorial, sharp edges, light typography)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --deanta-navy: #074973;
  --deanta-slate: #363e44;
  --deanta-smoke: #747474;
  --deanta-white: #ffffff;
  --deanta-font-display: 'ITCAvantGarde', sans-serif;
  --deanta-font-body: 'Roboto', sans-serif;
  --deanta-radius-sharp: 0px;
}
```

## Known gaps
- Hover states for secondary buttons were not explicitly captured in the source.
- Mobile-specific typography scale for H1 headers was not fully resolved in the evidence.

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