# VALIENTE BRANDS

> # VALIENTE BRANDS — Style Reference

## Prompt Content

```
# VALIENTE BRANDS — Style Reference
> Tín hiệu khói trên nền đất sét phơi nắng. Một mảng đỏ cam khẩn cấp duy nhất gào lên giữa cánh đồng peach mờ ấm áp, được giữ chặt bởi một neo-grotesque nguyên khối và hầu như không có gì khác.

**Theme:** light

Valiente Brands là một broadcast brutalist — một tín hiệu chromatic đơn lẻ (đỏ cam rực rỡ) bắn ra trên nền canvas đất sét ấm nắng, hầu như không có bất kỳ xử lý bề mặt UI nào. Trang web là một scroll dọc với type cỡ lớn mang cảm giác monospace, navigation label neo ở góc, full-bleed cinematic video stills và portrait grid. Thẩm mỹ mượn từ biển báo khẩn cấp và tờ proof của thợ sắp chữ: mọi thứ đều in hoa, tracking âm mạnh ở kích thước display, và tước bỏ mọi trang trí. Không có card, không shadow, không gradient, không góc bo tròn — toàn bộ interface đọc như một tờ broadside in duy nhất, nơi một màu làm tất cả. White space và type scale đảm nhận hệ thống phân cấp, không phải container hay elevation.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|-------|
| Signal Flare | `#ff1a00` | `--color-signal-flare` | Màu chromatic duy nhất trong hệ thống — dùng cho logo, toàn bộ navigation, body text, heading, icon, border và video play affordance. Đồng thời đóng vai trò là brand mark và foreground text color |
| Sun-Baked Canvas | `#e7a196` | `--color-sun-baked-canvas` | Nền trang — một màu clay-peach ấm, dịu, làm mềm cường độ của đỏ và tạo cho toàn bộ site bầu không khí như sóng nhiệt. Mọi bề mặt mặc định đều nằm trên tông màu này |
| Midnight Frame | `#0a0a0a` | `--color-midnight-frame` | Chỉ dành riêng cho các section full-bleed video và photography — xuất hiện dưới dạng khung tối xung quanh media được nhúng, không bao giờ là bề mặt UI hay text color |

## Tokens — Typography

### GT Pressura — Typeface làm việc chính duy nhất — đảm nhận mọi thứ từ footer label 12px đến display headline 245px. Tính cách neo-grotesque với độ căng cơ học nhẹ khiến nó đọc gần như monospace ở kích thước nhỏ và gần như posterized ở kích thước display. Weight giữ ở 400 trên toàn bộ hệ thống; hệ thống phân cấp được xây dựng qua kích thước, không phải weight. · `--font-gt-pressura`
- **Thay thế:** Space Grotesk, IBM Plex Mono, JetBrains Mono
- **Weights:** 400
- **Kích thước:** 12, 14, 16, 18, 20, 24, 48, 95, 128, 190, 245
- **Line height:** 0.80, 0.82, 1.00, 1.20
- **Letter spacing:** Tracking thắt chặt đáng kể theo kích thước: -0.005em ở 12-18px (gần như khép), -0.025em ở 20-24px, -0.030em ở 48px, -0.037em ở 95px, -0.040em ở 128px, -0.043em ở 190px, và -0.050em ở 245px — kích thước display nén các chữ cái cho đến khi chúng gần như chạm nhau
- **OpenType features:** `"tnum" on, "ss01" on`
- **Vai trò:** Typeface làm việc chính duy nhất — đảm nhận mọi thứ từ footer label 12px đến display headline 245px. Tính cách neo-grotesque với độ căng cơ học nhẹ khiến nó đọc gần như monospace ở kích thước nhỏ và gần như posterized ở kích thước display. Weight giữ ở 400 trên toàn bộ hệ thống; hệ thống phân cấp được xây dựng qua kích thước, không phải weight.

### Monument Grotesk — Dành riêng cho một mục đích: statement headline chính 48px ("IMPACT-LED BRAND CONSULTANCY"). Một grotesque rộng hơn, mang tính humanist hơn, tương phản với chất cơ học của GT Pressura bằng tỷ lệ ấm áp hơn một chút. Chỉ xuất hiện một lần mỗi trang ở kích thước chính xác này. · `--font-monument-grotesk`
- **Thay thế:** Inter, Manrope, General Sans
- **Weights:** 400
- **Kích thước:** 48
- **Line height:** 1.00
- **Letter spacing:** -0.0400em
- **Vai trò:** Dành riêng cho một mục đích: statement headline chính 48px ("IMPACT-LED BRAND CONSULTANCY"). Một grotesque rộng hơn, mang tính humanist hơn, tương phản với chất cơ học của GT Pressura bằng tỷ lệ ấm áp hơn một chút. Chỉ xuất hiện một lần mỗi trang ở kích thước chính xác này.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.2 | -0.06px | `--text-caption` |
| body-sm | 14px | 1.2 | -0.07px | `--text-body-sm` |
| body | 16px | 1.2 | -0.08px | `--text-body` |
| subheading | 18px | 1.2 | -0.09px | `--text-subheading` |
| subheading-lg | 20px | 1.2 | -0.5px | `--text-subheading-lg` |
| heading | 48px | 1 | -1.44px | `--text-heading` |
| heading-lg | 95px | 0.82 | -3.52px | `--text-heading-lg` |
| display-sm | 128px | 0.82 | -5.12px | `--text-display-sm` |
| display | 190px | 0.8 | -8.17px | `--text-display` |
| display-xl | 245px | 0.8 | -12.25px | `--text-display-xl` |

## Tokens — Spacing & Shapes

**Đơn vị cơ bản:** 6px

**Mật độ:** compact

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 12 | 12px | `--spacing-12` |
| 24 | 24px | `--spacing-24` |
| 30 | 30px | `--spacing-30` |
| 60 | 60px | `--spacing-60` |
| 120 | 120px | `--spacing-120` |
| 138 | 138px | `--spacing-138` |
| 150 | 150px | `--spacing-150` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 0px |
| cards | 0px |
| media | 0px |
| inputs | 0px |
| buttons | 0px |

### Layout

- **Page max-width:** 1440px
- **Section gap:** 120-160px
- **Card padding:** 0px
- **Element gap:** 20px

## Components

### Corner Navigation
**Vai trò:** Site navigation chính

Chồng text dọc được ghim vào cạnh trên-bên trái của viewport. GT Pressura 12px, in hoa, màu #ff1a00, letter-spacing -0.005em. Các mục cách nhau 5px gap dọc. Không có background, không border, không hover indicator ngoài màu đỏ có sẵn — vị trí và màu sắc là toàn bộ affordance.

### Corner Badge (Top-Right)
**Vai trò:** Đánh dấu vị trí / thành lập

Hai dòng xếp chồng ở góc trên-bên phải: "EST. IN TN" ở 12px in hoa #ff1a00, kết hợp với icon hình tròn 40px có outline (cũng #ff1a00, stroke 1px) bên dưới. Đóng vai trò như chữ ký site cố định ở góc, đối xứng với khối nav ở phía đối diện.

### Centered Logo Lockup
**Vai trò:** Nhận diện thương hiệu ở đầu trang

Wordmark "VALIENTE" bằng Monument Grotesk hoặc GT Pressura ở ~48px, màu #ff1a00, căn giữa theo chiều ngang trong header. Chữ E cuối được thay bằng một geometric mark — một B-glyph đã được biến đổi, phá vỡ nhịp điệu của wordmark. Đứng một mình, không có tagline hay text hỗ trợ.

### Statement Headline
**Vai trò:** Hero-level messaging

48px GT Pressura (hoặc Monument Grotesk cho single hero statement), weight 400, màu #ff1a00, line-height 1.0, letter-spacing -1.92px (Monument) hoặc -1.44px (GT Pressura). Căn giữa theo chiều ngang, được kẹp bởi một em-dash dài ở bên trái để gợi ý sự tiếp nối hoặc tín hiệu broadcast.

### Display Type Block
**Vai trò:** Section marker và chuỗi chữ số cỡ lớn

GT Pressura ở 128-245px, weight 400, line-height 0.80-0.82, màu #ff1a00, in hoa, tracking gần như chạm nhau (-0.040em đến -0.050em). Dùng cho các chuỗi chữ số mang cảm giác monospace ("WFBCGLZU", "DJCTUVOCI...") hoạt động như kết cấu thị giác hơn là nội dung có thể đọc được. Tracking âm ở kích thước này là signature — các chữ cái nén lại cho đến khi gần như hợp nhất.

### Footer Bar
**Vai trò:** Dải metadata cuối trang

Hàng ba cột ở cuối màn hình đầu tiên: label trái (ví dụ "BRAVERY IN PRACTICE"), scroll prompt giữa ("SCROLL TO VIEW MORE ↓"), copyright phải ("©2026"). Tất cả GT Pressura 12px, in hoa, #ff1a00, cách nhau bằng toàn bộ chiều rộng viewport. Không background, không border — sự ấm áp của canvas giữ toàn bộ dải.

### Full-Bleed Video Frame
**Vai trò:** Các section media điện ảnh

Video hoặc ảnh tĩnh edge-to-edge lấp đầy toàn bộ chiều rộng viewport và ~40% chiều cao viewport. Play control là hình tròn 64px có outline #ff1a00 (stroke 1.5px) với glyph play hình tam giác ở giữa, đặt ở trung tâm của media. Không góc bo tròn, không overlay chrome.

### Section Label Pair
**Vai trò:** Metadata kẹp hai bên khối media

Hai label nhỏ GT Pressura 12px in hoa #ff1a00, ghim vào cạnh trái và phải của một dải mỏng ngay bên dưới section full-bleed media. Label trái mô tả phạm vi ("WORLDWIDE BASED"), label phải mô tả ngày tháng hoặc trạng thái ("EST (2025)"). Không divider, không background — màu canvas là separator duy nhất khỏi media phía trên.

### Portrait Grid
**Vai trò:** Trưng bày đội ngũ hoặc cộng tác viên

Grid ba cột gồm các bức ảnh chân dung vuông hoặc gần vuông, edge-to-edge, không gutter và không border. Ảnh chân dung full-bleed, không caption bên trong ảnh, không overlay. Grid nằm trực tiếp trên canvas ấm — các bức ảnh cung cấp độ tương phản tông màu duy nhất trong section.

### Scroll Prompt
**Vai trò:** Tín hiệu dẫn đường dọc

Một indicator text ngắn ("SCROLL TO VIEW MORE ↓") ở GT Pressura 12px in hoa, #ff1a00, với glyph mũi tên xuống. Căn giữa trong footer bar hoặc ngay bên dưới các khối nội dung. Mũi tên là iconography duy nhất trong hệ thống ngoài play control và corner badge circle.

## Do's and Don'ts

### Do
- Dùng GT Pressura ở weight 400 cho tất cả UI text — không bao giờ đưa vào bold hay light weight, hệ thống phân cấp đến từ kích thước đơn thuần
- Áp dụng #ff1a00 làm màu chromatic duy nhất cho mọi text, border và icon element; để canvas ấm #e7a196 mang bầu không khí
- Đẩy display headline lên 128px hoặc lớn hơn với letter-spacing từ -0.040em đến -0.050em — tracking gần chạm nhau là signature
- Ghim navigation và metadata vào bốn góc của viewport (link trên-trái, badge trên-phải, label dưới-trái, copyright dưới-phải) thay vì xây dựng thanh header truyền thống
- Dùng full-bleed edge-to-edge media (video, photography) không bo tròn và không overlay chrome — để canvas là khung duy nhất
- Duy trì line-height ở 0.80-0.82 cho kích thước display và 1.0-1.2 cho body text — không bao giờ đặt line-height lỏng hơn 1.2
- Giữ tất cả text in hoa; hệ thống không có mixed-case hay sentence-case type

### Don't
- Không đưa vào shadow, gradient, border có radius, hay bất kỳ container-based elevation nào — trang là print phẳng, không phải các bề mặt xếp chồng
- Không dùng màu fill cho CTA button; hệ thống không có filled button, chỉ có text link và outlined play control
- Không thêm secondary hay tertiary text color — #ff1a00 trên #e7a196 là cặp tương phản duy nhất trong hệ thống
- Không dùng card padding, gutter hay rounded corner trên bất kỳ media hay content block nào
- Không trộn nhiều type family; GT Pressura xử lý mọi thứ ngoại trừ single Monument Grotesk hero headline
- Không dùng weight 600 hay 700 để tạo emphasis — tăng kích thước thay vào đó
- Không đặt display letter-spacing lỏng hơn -0.025em; tracking nén là thứ làm cho type có cảm giác broadcast-loud

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 1 | Sun-Baked Canvas | `#e7a196` | Nền trang mặc định — mọi text section, navigation layer và content block đều nằm trên cánh đồng clay-peach ấm áp này |
| 2 | Midnight Frame | `#0a0a0a` | Chỉ dành cho section full-bleed video và photography — điểm khác biệt duy nhất khỏi canvas ấm, dùng để đóng khung media được nhúng |

## Elevation

Không shadow, không elevation system, không z-depth. Hệ thống phân cấp được xây dựng hoàn toàn qua type scale, color contrast và whitespace. Các element nằm phẳng trên canvas như in trên giấy — trang hoạt động như một bề mặt duy nhất scroll dọc thay vì một chồng card.

## Imagery

Photography và video mang toàn bộ trọng lượng cảm xúc — không có illustration, không product mockup, không abstract graphic, và hầu như không có iconography. Hình ảnh mang tính điện ảnh và tối tăm: video still full-bleed đầy tâm trạng (một võ sĩ quyền anh trên võ đài, được quay qua color grade xanh lục), và các crop chân dung vuông chặt của từng cá nhân trên nhiều nền khác nhau (nội thất ấm áp, cửa sổ ánh sáng ban ngày). Xử lý luôn là full-bleed, edge-to-edge, không góc bo tròn, không mask, không overlay text. Các section ảnh tối là điểm khác biệt duy nhất khỏi canvas peach ấm — chúng đọc như những ô cửa sổ cắt vào một trang in. Sự tương phản màu sắc giữa nền đất sét ấm và media tối-mát mẻ tự nó là một design device. Icon bị giới hạn ở ba mark tổng cộng: một hamburger bar ở trên-trái, một circular badge có glyph ở trên-phải, và một mũi tên scroll xuống — tất cả đều là stroke-only outline màu #ff1a00.

## Layout

Trang là một scroll dọc không có ràng buộc ngang ngoài ~1440px max-width trên nội dung text. Màn hình đầu tiên là một canvas ấm gần như trống chỉ với bốn corner element (nav, logo, badge, footer) và một statement căn giữa — sau đó là một section video tối full-bleed, tiếp theo là một dải metadata, rồi một khối display text lớn mang cảm giác monospace, sau đó là portrait grid ba cột. Nhịp điệu là: canvas ấm trống → media tối full-bleed → khối text ấm → media tối → khối text ấm → grid ảnh. Không có hệ thống light/dark band xen kẽ — thay vào đó, canvas ấm là mặc định và full-bleed media đâm xuyên qua nó. Section gap rất lớn (120-160px), với text căn trái trong các khối và căn giữa cho hero statement. Grid nghiêm ngặt: ba cột cho portrait, full-width cho video, max-width căn giữa cho khối text. Navigation tối thiểu — chỉ là một chồng text dọc ở góc trên-bên trái, không có background container.

## Agent Prompt Guide

**Quick Color Reference**
- text: #ff1a00
- background: #e7a196
- border / icon stroke: #ff1a00
- accent (play control, badge circle): #ff1a00
- media frame: #0a0a0a
- primary action: không có màu CTA riêng biệt

**Example Component Prompts**
1. Xây dựng hero statement headline: 48px Monument Grotesk weight 400, #ff1a00, line-height 1.0, letter-spacing -1.92px, căn giữa trên nền #e7a196, với một em-dash dài (—) đứng trước text ở bên trái.
2. Xây dựng corner navigation block: chồng dọc các link GT Pressura in hoa (ABOUT, SERVICES, WORK, VALUES, TEAM, CONTACT, ESTIMATION) ở 12px weight 400, #ff1a00, letter-spacing -0.005em, cách nhau 5px row-gap, ghim vào góc trên-bên trái của viewport, không background.
3. Xây dựng full-bleed video frame: khối media edge-to-edge với hình tròn 64px căn giữa trên ảnh, stroke 1.5px màu #ff1a00, chứa play triangle đặc màu #ff1a00.
4. Xây dựng display type block: GT Pressura 190px weight 400, #ff1a00, line-height 0.80, letter-spacing -8.17px, in hoa, căn trái, dùng cho chuỗi chữ số mang cảm giác monospace.
5. Xây dựng footer bar: một hàng duy nhất ở cuối màn hình đầu tiên, ba mục trải dài trên toàn bộ chiều rộng (trái: "BRAVERY IN PRACTICE", giữa: "SCROLL TO VIEW MORE ↓", phải: "©2026"), tất cả GT Pressura 12px in hoa #ff1a00, nằm trực tiếp trên canvas #e7a196, không border hay background.

## Similar Brands

- **STUDIO BRAD** — Cùng thẩm mỹ agency brutalist một màu — một màu chromatic rực rỡ (thường là đỏ) gào lên trên nền canvas tối giản, với type in hoa cỡ lớn và hầu như không có UI chrome
- **&Walsh** — Brand consultancy với portfolio site dùng một display family duy nhất tracking âm mạnh, corner-pinned navigation, và flat full-bleed media không card container
- **COLLINS** — Brand identity studio mà site coi type như toàn bộ interface — grotesque mang cảm giác monospace cỡ lớn ở kích thước display, màu sắc tối giản, và full-bleed photography làm điểm đối trọng thị giác duy nhất
- **Locomotive** — Agency Canada dùng nền off-white ấm áp, type neo-grotesque in hoa cỡ lớn, và đỏ cam đậm làm chromatic accent duy nhất cho mọi thứ tương tác và văn bản

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-signal-flare: #ff1a00;
  --color-sun-baked-canvas: #e7a196;
  --color-midnight-frame: #0a0a0a;

  /* Typography — Font Families */
  --font-gt-pressura: 'GT Pressura', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-monument-grotesk: 'Monument Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.2;
  --tracking-caption: -0.06px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.2;
  --tracking-body-sm: -0.07px;
  --text-body: 16px;
  --leading-body: 1.2;
  --tracking-body: -0.08px;
  --text-subheading: 18px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.09px;
  --text-subheading-lg: 20px;
  --leading-subheading-lg: 1.2;
  --tracking-subheading-lg: -0.5px;
  --text-heading: 48px;
  --leading-heading: 1;
  --tracking-heading: -1.44px;
  --text-heading-lg: 95px;
  --leading-heading-lg: 0.82;
  --tracking-heading-lg: -3.52px;
  --text-display-sm: 128px;
  --leading-display-sm: 0.82;
  --tracking-display-sm: -5.12px;
  --text-display: 190px;
  --leading-display: 0.8;
  --tracking-display: -8.17px;
  --text-display-xl: 245px;
  --leading-display-xl: 0.8;
  --tracking-display-xl: -12.25px;

  /* Typography — Weights */
  --font-weight-regular: 400;

  /* Spacing */
  --spacing-unit: 6px;
  --spacing-12: 12px;
  --spacing-24: 24px;
  --spacing-30: 30px;
  --spacing-60: 60px;
  --spacing-120: 120px;
  --spacing-138: 138px;
  --spacing-150: 150px;

  /* Layout */
  --page-max-width: 1440px;
  --section-gap: 120-160px;
  --card-padding: 0px;
  --element-gap: 20px;

  /* Named Radii */
  --radius-tags: 0px;
  --radius-cards: 0px;
  --radius-media: 0px;
  --radius-inputs: 0px;
  --radius-buttons: 0px;

  /* Surfaces */
  --surface-sun-baked-canvas: #e7a196;
  --surface-midnight-frame: #0a0a0a;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-signal-flare: #ff1a00;
  --color-sun-baked-canvas: #e7a196;
  --color-midnight-frame: #0a0a0a;

  /* Typography */
  --font-gt-pressura: 'GT Pressura', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-monument-grotesk: 'Monument Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.2;
  --tracking-caption: -0.06px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.2;
  --tracking-body-sm: -0.07px;
  --text-body: 16px;
  --leading-body: 1.2;
  --tracking-body: -0.08px;
  --text-subheading: 18px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.09px;
  --text-subheading-lg: 20px;
  --leading-subheading-lg: 1.2;
  --tracking-subheading-lg: -0.5px;
  --text-heading: 48px;
  --leading-heading: 1;
  --tracking-heading: -1.44px;
  --text-heading-lg: 95px;
  --leading-heading-lg: 0.82;
  --tracking-heading-lg: -3.52px;
  --text-display-sm: 128px;
  --leading-display-sm: 0.82;
  --tracking-display-sm: -5.12px;
  --text-display: 190px;
  --leading-display: 0.8;
  --tracking-display: -8.17px;
  --text-display-xl: 245px;
  --leading-display-xl: 0.8;
  --tracking-display-xl: -12.25px;

  /* Spacing */
  --spacing-12: 12px;
  --spacing-24: 24px;
  --spacing-30: 30px;
  --spacing-60: 60px;
  --spacing-120: 120px;
  --spacing-138: 138px;
  --spacing-150: 150px;
}
```