---
title: "VALIENTE BRANDS design system"
variant: extended
source: https://valientebrands.com/
captured_at: 2026-10-12
theme: light
industry: agency
generator: Design DNA (https://four.wiralomi.com/style/valientebrands-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# VALIENTE BRANDS · Design System

> Warm stone, signal red, and fearless typography

**Theme:** light · **Industry:** agency · **Source:** https://valientebrands.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A purpose-led brand consultancy homepage built around a warm grey canvas, vivid red typography, and cinematic moving imagery. Oversized editorial lettering and generous negative space give the work and team a confident, unconventional presence.

## North star

Keep the warm stone field quiet so signal-red typography and cinematic imagery can carry the entire identity.

## Overview

The page is anchored by a warm stone canvas (#dddbd6) and a single vivid signal red (#ff1a00), used consistently for navigation, headlines, links, labels, and the oversized VALIENTE wordmark. There are no decorative colour systems competing with the content; darker and varied tones come primarily from photography and video. GT Pressura supplies the distinctive uppercase, tightly tracked display voice, while Monument Grotesk adds a restrained contrast for larger secondary headings. The composition alternates between sparse text-led areas and cinematic media, using deliberate asymmetry, overlaps, and unusually expansive negative space. Work samples sit within the same neutral field rather than framed cards. Repeated editorial labels, arrows, and compact navigation details create wayfinding without introducing button-heavy UI. The result feels like a printed creative manifesto translated into a long scrolling page: flat, bold, image-conscious, and paced by large changes in scale and whitespace.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Stone | `#dddbd6` | `--color-warm-stone` | brand | Page canvas across the long scroll; keeps text, navigation, and media on one continuous neutral field. |
| Signal Red | `#ff1a00` | `--color-signal-red` | accent | Navigation, headlines, links, small labels, arrows, and the oversized brand wordmark. |

### Semantic aliases

`--color-canvas` → `#dddbd6` (Warm Stone) · `--color-text` → `#ff1a00` (Signal Red) · `--color-accent` → `#ff1a00` (Signal Red)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ff1a00` | `#dddbd6` | 2.81:1 | fail |
| `#ff1a00` | `#dddbd6` | 2.81:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| GT Pressura | `--font-body` | webfont | 400 | Display, navigation, body copy, captions, and project links | Space Mono |
| Monument Grotesk | `--font-display` | webfont | 400 | Secondary large headings | DM Sans |

- **GT Pressura:** Regular weight; uppercase throughout, with tightly negative tracking and compact line-height on display and utility text.
- **Monument Grotesk:** Regular-weight sans-serif contrast; uppercase, tracked tightly, and used sparingly against the dominant GT Pressura voice.

### Type scale — Custom (ratio ≈ 1.756, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 190px | 400 | 0.65 | -0.04em | uppercase | GT Pressura | Oversized uppercase statements and the dramatic closing wordmark. |
| h1 | 95px | 400 | 0.65 | -0.04em | uppercase | GT Pressura | Large uppercase hero and major section statements. |
| h2 | 48px | 400 | 1 | -0.04em | uppercase | Monument Grotesk | Secondary prominent headings, set in a contrasting grotesk. |
| h3 | 24px | 400 | 0.82 | -0.025em | uppercase | GT Pressura | Compact uppercase project and service headings. |
| body | 20px | 400 | 1.2 | -0.03em | uppercase | GT Pressura | Uppercase introductory, explanatory, and team copy. |
| caption | 14px | 400 | 1 | -0.043em | uppercase | GT Pressura | Small uppercase project labels, metadata, and footer details. |
| nav | 14px | 400 | 1 | -0.043em | uppercase | GT Pressura | Small uppercase primary navigation and utility links. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 5, 20, 32, 60 px.
- Section rhythm 200px · element gap 20px · card padding — · max content width 1163px.

A long, spacious single-page composition, measured to a page max width of 1163px. Sections vary between a single-column canvas, two-column editorial text, three-column service content, and asymmetric image-led arrangements. The work gallery uses staggered, loosely distributed project images rather than uniform cards. Strong left alignment coexists with centered hero messaging and elements that intentionally extend across image edges. The measured section gap is 200px and element gap is 20px; preserve this spacious rhythm and avoid dense stacking.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `1s cubic-bezier(0.19, 1, 0.22, 1)` on interactive elements.

The page is predominantly flat: no measured shadows, gradients, or card surfaces define the interface. Keep project imagery flush against the canvas and use placement, scale, and overlap to create depth. Borders and radii are not part of the measured visual system; do not add card outlines or rounded containers. The play control is a simple red outlined circle over video.

## Imagery

Cinematic video is a defining counterpoint to the flat canvas: full-bleed or wide landscape scenes include people, nature, and dramatic light. Project work appears as a dispersed selection of product, portrait, and digital-interface imagery, without decorative frames. Team portraits are presented as straightforward photographs. Image colours may introduce dark greens, blues, skin tones, and product hues, but they remain content imagery rather than additions to the brand palette.

## Components

### Corner navigation

Small uppercase red text links clustered at the upper left, balanced by a vertical contact link and circular arrow affordance at the upper right.

### Hero statement

An open canvas with a centered red consultancy line and compact baseline labels for the practice, scroll cue, and year.

### Video panels

Wide or full-bleed cinematic footage, sometimes accompanied by a minimal red outlined circular play control.

### Project links

Uppercase red project names and service details arranged near staggered images; measured link typography is 20px GT Pressura.

### Editorial statements

Large, tightly tracked uppercase red phrases overlap or sit beside video and photographs, with smaller copy kept separate.

### Contact footer

A concise contact invitation and a row of red links lead into the oversized red VALIENTE wordmark and small location, copyright, and privacy details.

### Measured component styles

- **Link** (“(1) RIO LIFE IMPACT ON HEALTH → BRANDING”): transparent background · text #ff1a00 · radius 0px · padding 0px · 400 20px GT Pressura · uppercase
- **Navigation item** (“ABOUT”): transparent background · text #ff1a00 · radius 0px · padding 0px · 400 14px GT Pressura · uppercase

## Do

- Use #dddbd6 as the continuous page canvas.
- Reserve #ff1a00 for typography, links, and graphic accents.
- Set display and utility text in uppercase.
- Make large statements tightly tracked and visually assertive.
- Alternate text-led whitespace with cinematic media.
- Use asymmetry and overlap to compose editorial sections.

## Don't

- Do not add colours to the brand palette based on image content.
- Do not introduce shadows, gradients, or elevated card styling.
- Do not make every section a uniform grid of cards.
- Do not crowd the page with dense copy or controls.
- Do not soften the identity with rounded, decorative UI.
- Do not let project imagery replace the quiet neutral canvas.

## Agent prompt

Build a new page in the VALIENTE BRANDS visual language. Use Warm Stone (#dddbd6) as the continuous canvas and Signal Red (#ff1a00) for the navigation, headings, links, labels, arrows, and graphic marks. Use an uppercase, tightly tracked GT Pressura-like monospace for most text, with a restrained Monument Grotesk-like sans for occasional secondary headings. Keep the layout spacious and editorial: combine concise copy, large statements, asymmetric image placement, and wide cinematic video. Let imagery supply its own colours without extending the brand palette. Prefer flat surfaces, unframed media, and deliberate overlap over cards, borders, shadows, or gradients. Maintain clear navigation and contact links, and use generous whitespace to create pace across the page.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Open canvas with corner navigation, centered statement, and a baseline of utility labels. | primary navigation, scroll cue, contact shortcut | red uppercase text, centered hero line, minimal arrow icon |
| 2 | video | Full-bleed video spanning the content width. | play affordance, scroll-led storytelling | cinematic footage, red outlined play control |
| 3 | feature-split | Two-column editorial statement and supporting copy. | mission introduction, editorial reading flow | large uppercase heading, compact uppercase copy |
| 4 | feature-split | Oversized text crosses a wide video in an asymmetric composition. | manifesto storytelling, visual text-image connection | overlapping red typography, wide video |
| 5 | how-it-works | Three-column service area with a service title, list, and explanatory copy. | service discovery, carousel-style section indicator | numbered heading, arrow-led service list, small page controls |
| 6 | gallery | Staggered project images with nearby names and service links. | project browsing, project detail links | asymmetric image placements, uppercase captions |
| 7 | feature-split | Section heading beside a wide cinematic video. | brand values introduction, video storytelling | uppercase red heading, wide dark video |
| 8 | feature-grid | Five-column text-led arrangement with concise thematic statements. | principle scanning, manifesto reading | uppercase short statements, small supporting copy |
| 9 | video | Wide visual statement layered around a central image. | brand storytelling, scroll-led transition | oversized red typography, cinematic image |
| 10 | video | Large statement and video image on an open canvas. | emotional storytelling, scroll-led transition | red uppercase statement, dark video frame |
| 11 | other | Short oversized statement within the continuing editorial sequence. | manifesto emphasis | large red uppercase type |
| 12 | feature-split | Single-column editorial copy with wide surrounding whitespace. | team introduction, manifesto reading | small uppercase body copy |
| 13 | other | Standalone statement within the open canvas. | operating-principle emphasis | uppercase text statement |
| 14 | team | Four-column team area with portraits, names, roles, and profile links. | team profiles, profile links | portrait photography, red uppercase names, compact role labels |
| 15 | contact | Contact invitation and link row above an oversized closing wordmark. | contact conversion, social links, legal navigation | large red brand lettering, compact footer metadata |

## Source CSS custom properties (selected)

```css
--gap: 20rem;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/valientebrands-com