# Tenda.digital Design System

> High-contrast digital canvas pairing deep electric purples with vibrant mint accents and bold, geometric typography.

**Source:** https://tenda.digital | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Tenda.digital utilizes a high-energy "monochrome" system that leans heavily into a primary electric purple (#595beb) and a signature mint green (#5ee0d0). The interface is characterized by sharp geometry (0px default radii) and bold, heavy-weight display type (jxfv at weight 700 and 900). White (#ffffff) and near-black (#282828) provide the structural foundation, while teal and blue tones create depth in background surfaces. Interactive elements are distinct, using either the primary mint (#40c9b8) or a deep blue (#595beb) for button backgrounds, often paired with sharp 2px or 4px corners for a technical, precise feel.

## Signature DNA
1. **The Mint Punctuation** (The use of #5ee0d0 as a terminal punctuation mark in headlines and as a high-contrast highlight for keywords like "tecnologia" against dark backgrounds).
2. **Heavyweight Geometric Display** (The reliance on the 'jxfv' font family at 70px and 44px sizes with weights of 700+, creating a massive visual hierarchy that dominates the hero sections).
3. **Chromatic Depth Layering** (Stacking saturated surfaces like #595beb and #5ee0d0 against neutral #ffffff or #eaf2f1 to define distinct content zones).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Primary page background, button text, borders | 144 | 1.0 | brand_page |
| `{color.ink}` | `#282828` | Primary body text | 276 | 0.8 | computed_style |
| `{color.void}` | `#000000` | Surface backgrounds, high-contrast text | 30 | 0.8 | computed_style |
| `{color.neutral.soft}` | `#eaf2f1` | Subtle section backgrounds | 3 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.mint}` | `#5ee0d0` | Brand accent, keyword highlight, decorative dots | 36 | 1.0 | brand_page |
| `{color.electric-purple}` | `#595beb` | Primary surface background, button background | 12 | 0.8 | computed_style |
| `{color.mint.deep}` | `#40c9b8` | Primary CTA background | 12 | 0.8 | computed_style |
| `{color.link}` | `#0000ee` | Text links, button text | 27 | 0.8 | computed_style |
| `{color.teal.dark}` | `#1e3838` | Secondary display text | 15 | 0.8 | computed_style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| `jxfv` | 400, 500, 600, 700, 900 | Display, Headings, Buttons | Montserrat | Custom/Proprietary |
| `Source Sans Pro` | 300, 400, 500, 700 | Sub-headings, UI labels | Source Sans 3 | Open Font License |
| `-apple-system` | 400 | Body copy | Inter | System |
| `Roboto` | 400 | Form inputs | Roboto | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display.xl}` | 70px | 66px | normal | 700 | Hero H1 | `span` |
| `{text.display.lg}` | 50px | 47px | normal | 700 | Section Hero | `span` |
| `{text.display.md}` | 44px | 41px | normal | 700 | Section Headings | `span` |
| `{text.heading.lg}` | 33px | 36px | normal | 500 | Sub-section heads | `span:nth-of-type(2)` |
| `{text.heading.md}` | 28px | 26px | normal | 900 | Product titles | `span` |
| `{text.heading.sm}` | 20px | 26px | normal | 400 | Feature titles | `p.view-mode.unstyled` |
| `{text.body.lg}` | 18px | 28px | normal | 400 | Intro text | `span` |
| `{text.body.md}` | 16px | 26px | normal | 400 | Default body | `p.view-mode.align-left` |
| `{text.caption}` | 11px | 12px | 0.8px | 400 | Overlines, small labels | `span` |

### Principles
1. **Terminal Mint:** Headlines often end with a period colored in `{color.mint}` (#5ee0d0).
2. **Tight Display:** Large display type uses line-heights slightly smaller than the font size (e.g., 66px LH for 70px size) for a compact, impactful look.
3. **Weight Contrast:** Heavy 700/900 weights are reserved for brand-level messaging, while 400 weight Source Sans Pro handles functional information.

## Spacing
**Base unit:** 4px (Inferred)
Table: | Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 1px | 21 |
| `{space.md}` | 10px | 12 |
| `{space.lg}` | 20px | 15 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Default surfaces, sections | 474 occurrences |
| `{radius.sm}` | 2px | Primary buttons | Rounded Button component |
| `{radius.md}` | 4px | Cards, Input fields | Card component |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.none}` | none | Default state for all cards/buttons | Component evidence |
| `{shadow.inset}` | `rgb(0, 0, 0) 0px 0px 0px 0px inset` | Structural alignment | 12 occurrences |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** All
**Spec:** Background: `{color.mint.deep}` (#40c9b8) / Text: `{color.canvas}` (#ffffff) / Radius: 2px / Typography: `{text.body-sm}` (15px)
**States observed:** Default: Captured | Hover: Not captured | Active: Not captured

#### Surface
**Role:** Section containers and content blocks
**Pages observed:** All
**Spec:** Background: `{color.canvas}` (#ffffff) or `{color.electric-purple}` (#595beb) / Radius: 0px
**States observed:** Default: Captured

### Tier 2: Patterns
#### Card
**Role:** Feature highlights and pricing tiers
**Pages observed:** All
**Spec:** Background: `rgba(0, 0, 0, 0.67)` or `{color.mint}` (#94e0d0) / Radius: 4px / Border: `{color.canvas}` (#ffffff)
**States observed:** Default: Captured

#### Navigation Link
**Role:** Header menu items
**Pages observed:** All
**Spec:** Text: `{color.canvas}` (#ffffff) / Typography: `{text.caption}` (11px) / Letter-spacing: 0.8px
**States observed:** Default: Captured

### Tier 3: Surface-specific
#### Contact Button (Header)
**Role:** Persistent CTA in navigation
**Pages observed:** All
**Spec:** Background: transparent / Border: 1px `{color.canvas}` (#ffffff) / Text: `{color.canvas}` (#ffffff) / Radius: 2px / Typography: 11px
**States observed:** Default: Captured

#### Keyword Highlight
**Role:** Emphasizing brand pillars within prose
**Pages observed:** Homepage
**Spec:** Text: `{color.mint}` (#5ee0d0) / Weight: 400 / Family: Source Sans Pro
**States observed:** Default: Captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (Inferred from center-page class) |
| Section Alignment | Center-aligned content blocks |
| Grid Type | Flex-based 2 and 3 column grids |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Typography scales down; navigation collapses to menu |
| Desktop | 1440px | Full horizontal navigation; multi-column cards |

## Imagery & decoration
- **Geometric Illustrations:** Uses simple vector shapes (triangles/mountains) in monochromatic purple shades to create landscape depth.
- **Noise/Texture:** Backgrounds often feature a subtle grain or noise texture to soften the high-saturation purples.
- **Avoidance:** Avoids soft shadows, rounded corners > 4px, and photographic backgrounds.

## Do's
- Use `{color.mint}` (#5ee0d0) for terminal punctuation in display headers.
- Set display headers in `jxfv` at weight 700 or higher.
- Maintain sharp 0px corners for all major section transitions.
- Use `{color.electric-purple}` (#595beb) for full-width immersive background sections.
- Ensure all text on dark backgrounds uses `{color.canvas}` (#ffffff).

## Don'ts
- **Wrong:** Using a generic blue for primary buttons. **Right:** Use `{color.mint.deep}` (#40c9b8). **Reason:** Brand identity relies on the specific teal/mint spectrum.
- **Wrong:** Applying large border-radii (>4px) to cards. **Right:** Keep corners sharp or at 4px. **Reason:** The brand DNA is technical and geometric.
- **Wrong:** Using `{color.ink}` (#282828) on a purple background. **Right:** Use white. **Reason:** Contrast ratio is insufficient for legibility.

## Similar brands
- Stripe (for saturated color blocking)
- Vercel (for geometric precision)
- Linear (for high-contrast dark mode elements)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --tenda-mint: #5ee0d0;
  --tenda-purple: #595beb;
  --tenda-mint-deep: #40c9b8;
  --tenda-ink: #282828;
  --tenda-canvas: #ffffff;
  --font-display: 'jxfv', sans-serif;
  --font-body: '-apple-system', sans-serif;
}
```

## Agent prompt examples
- "Create a hero section with a background of #595beb, featuring a 70px H1 in jxfv Bold, with the last word followed by a #5ee0d0 period."
- "Generate a grid of three cards with #ffffff backgrounds, 4px border-radius, and no box-shadow."
- "Design a primary button using #40c9b8 background, white text, and a 2px border-radius."

## Known gaps
- Hover and active states for buttons were not explicitly captured in the computed style evidence.
- Error and success semantic colors were not present on the analyzed marketing pages.
- Exact mobile breakpoint values were inferred from standard viewport captures.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://tenda.digital | 1440x900 | 2026-06-06 |
| Pricing | https://tenda.digital/pricing | 1440x900 | 2026-06-06 |
| About | https://tenda.digital/about | 390x844 | 2026-06-06 |