# Triboo Design System

> High-contrast monochrome architecture punctuated by deep teal accents and sharp, zero-radius geometry.

**Source:** [https://triboo.com](https://triboo.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Triboo utilizes a high-contrast monochrome foundation where absolute black (#000000) and pure white (#ffffff) define the primary structural boundaries. The system is characterized by a "sharp" aesthetic, completely eschewing border radii (0px) for all containers, buttons, and interactive tiles. Typography is strictly Helvetica Neue, scaling up to a massive 96px for primary displays to create a brutalist, corporate-editorial feel. Saturated accents of Teal (#008ea7) are used sparingly for hover states and secondary background blocks, providing the only chromatic relief against the heavy achromatic base.

## Signature DNA
1. **Zero-Radius Brutalism** (All interactive elements, including buttons and feature tiles, utilize a strict 0px border radius, creating a rigid, architectural grid. Observed on all pages.)
2. **Achromatic Dominance** (The interface is built on a #000000 and #ffffff foundation, using high-contrast text-on-dark and dark-on-light reversals to separate content sections. Observed on Homepage and About.)
3. **Teal Voltage** (The color #008ea7 serves as the system's singular "voltage" point, used for text hover states and primary section backgrounds like 'Comunicati Stampa'. Observed on Homepage.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|-----------|---------------|----------------|----------|-----------|
| None | N/A | N/A | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--bg-dark` | `#000000` | Primary surface, text, button backgrounds | 25 | 1 | `css_variable` |
| `--bg-light` | `#ffffff` | Primary canvas, inverted text | 13 | 1 | `css_variable` |
| `--bg-fourth` | `#f7f7f7` | Subtle section background | 1 | 1 | `computed_style` |
| `--bg-third` | `#e7e7e7` | Tertiary surface | 1 | 0.9 | `declared_token` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--bg-first` | `#008ea7` | Teal accent: active sections, hover states | 7 | 1 | `css_variable` |
| `--bg-second` | `#204253` | Decorative only: deep navy surface | 1 | 1 | `decorative_only` |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Helvetica Neue | 400, 700 | Display, Heading, Body | Inter | Commercial |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `display-mega` | 96px | 96px | normal | 700 | Hero H1 | `h1` |
| `display-xl` | 80px | 82px | normal | 700 | Section H2 | `h2` |
| `display-lg` | 48px | 48px | normal | 700 | Subsection H2 | `h2` |
| `heading-md` | 24px | 36px | normal | 400 | Intro paragraphs | `p:nth-of-type(1)` |
| `heading-sm` | 22px | 30px | normal | 400 | Tile labels | `a.square-wrapper` |
| `body-bold` | 16px | 30px | normal | 700 | Buttons, UI labels | `div.btn` |
| `body-md` | 16px | normal | normal | 400 | Standard body | `div.square` |
| `caption` | 14px | normal | normal | 400 | Legal/Footer | `footer span` |

### Principles
1. **Bold Display Hierarchy:** Primary headings use weight 700 and sizes above 48px to dominate the layout.
2. **Tight Line Heights:** Large display type uses 1:1 line height (96px/96px) for a compact, stacked appearance.
3. **Achromatic Reversal:** Text color flips between #ffffff and #000000 based on the underlying section background without intermediate grays.

## Spacing
**Base unit:** custom
| Token | Value | Occurrences |
|-------|-------|-------------|
| `--space-xs` | 10px | 6 |
| `--space-sm` | 17px | 10 |
| `--space-md` | 24px | 14 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `sharp` | 0px | Universal: buttons, tiles, inputs, containers | 41 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All surfaces are flush with the canvas | Observed on all pages |

## Components
### Tier 1: Foundational
#### Primary Button (Inverted)
**Role:** Primary CTA within cookie banners and dark sections.
**Pages observed:** Homepage, About.
**Spec:** Background `#ffffff` / Text `#000000` / Border `1px solid #000000` / Radius `0px` / Typography `16px Bold`.
**States observed:** Default | Hover: Not captured.

#### Square Tile
**Role:** Grid-based navigation for services and sectors.
**Pages observed:** Homepage.
**Spec:** Background `#000000` or `#008ea7` / Text `#ffffff` / Radius `0px` / Padding `24px`.
**States observed:** Default | Hover: Background shifts to `#008ea7`.

### Tier 2: Patterns
#### Navigation Bar
**Role:** Global header.
**Pages observed:** Homepage, Pricing, About.
**Spec:** Background `#ffffff` / Text `#000000` / Height `custom` / Radius `0px`.
**States observed:** Default | Hover: Text color shifts to `#008ea7`.

#### Section Divider
**Role:** High-contrast horizontal bands.
**Pages observed:** Homepage.
**Spec:** Background flips between `#ffffff` and `#000000` with 0px margin between blocks.

### Tier 3: Surface-specific
#### Cookie Consent Banner
**Role:** Compliance overlay.
**Pages observed:** Homepage, About.
**Spec:** Background `#ffffff` / Text `#000000` / Border-top `1px solid #e7e7e7` / Radius `0px`.
**States observed:** Default.

#### Footer Block
**Role:** Corporate information and social links.
**Pages observed:** Homepage, About.
**Spec:** Background `#ffffff` / Text `#000000` / Typography `14px-16px`.

## Layout
| Property | Value |
|----------|-------|
| Max content width | 1440px |
| Grid type | 12-column fluid |
| Section Gap | 0px (Flush blocks) |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; display type scales to ~32px-48px. |
| Desktop | 1440px | Full horizontal menu; 96px display type active. |

## Imagery & decoration
Triboo uses high-contrast, desaturated photography (often architectural or abstract motion) as backgrounds for text overlays. Decoration is limited to 1px borders and solid color blocks. It avoids shadows, gradients, and rounded corners.

## Do's
- Use `#000000` for primary structural backgrounds.
- Maintain `0px` radius on every interactive element.
- Set H1 display text to `96px` for hero impact.
- Use `#008ea7` exclusively for hover states and specific "active" service tiles.
- Ensure high contrast (21:1) for all primary text.

## Don'ts
- **Wrong:** Using a 4px border radius on buttons. **Right:** Use 0px. **Reason:** The brand identity is strictly architectural and sharp.
- **Wrong:** Applying a drop shadow to cards. **Right:** Use 1px borders or flat color fills. **Reason:** Elevation is not part of the Triboo design language.
- **Wrong:** Using Teal (#008ea7) as the primary page background. **Right:** Use it only for accents or specific tiles. **Reason:** It is an accent color, not a foundational canvas color.

## Similar brands
- Massimo Vignelli (Design Philosophy)
- Pentagram (Corporate Identity)
- Balenciaga (Digital Presence)
- Huge Inc. (Legacy System)

## Quick start
```css
/* CSS Variables */
:root {
  --bg-dark: #000000;
  --bg-light: #ffffff;
  --bg-first: #008ea7;
  --bg-fourth: #f7f7f7;
  --font-main: 'Helvetica Neue', Arial, sans-serif;
  --radius-sharp: 0px;
}
```

## Agent prompt examples
- "Generate a hero section with a #000000 background, 96px Helvetica Neue Bold text in #ffffff, and a 0px radius button with a #ffffff background."
- "Create a 3-column grid of service tiles using #000000 backgrounds and #008ea7 hover states, all with 0px border radius."
- "Design a navigation bar with #000000 text that shifts to #008ea7 on hover, set against a #ffffff background."

## Known gaps
- Hover states for primary buttons were not explicitly captured in the computed styles.
- Success and Error semantic tokens were not present on the analyzed marketing pages.

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