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

# Diabla — Home · Design System

> Playful outdoor living, framed in vivid red.

**Theme:** light · **Industry:** design · **Source:** https://www.diablaoutdoor.com/en/ · **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._

Diabla’s homepage pairs vivid red typography with generous white space and lifestyle photography of outdoor furniture. An immersive poolside hero gives way to an editorial mix of product, landscape, and designer stories, followed by a compact multi-column footer.

## North star

Let lifestyle photography lead, then use precise Diabla red typography and abundant white space to make each content block feel like an editorial feature.

## Overview

The visual identity is built around a strict two-colour foundation: white canvas and Diabla red (#ed2e38) for navigation, headings, copy, outlined controls, and fine rules. Red is assertive but not used as a filled page background; the imagery supplies most of the colour and atmosphere. Large uppercase Helvetica Neue displays create a light, fashion-editorial voice, balanced by compact uppercase navigation and small captions. The opening is a full-bleed poolside photograph with overlaid white title text and red navigation. Below it, white space separates an irregular editorial arrangement of landscape, furniture, and designer features rather than a uniform product catalogue. Thin red outlines define cards and pill-shaped links without shadows. The measured section rhythm is spacious, while the nine-column content structure supports varied image and text widths. The result feels casual and design-led, with photography carrying the lifestyle narrative and red providing consistent brand recognition.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Diabla Red | `#ed2e38` | `--color-diabla-red` | brand | Brand signature for navigation, headings, copy, card rules, and outlined pill controls; use as a crisp accent, not a large fill. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and content field, keeping editorial blocks open and allowing red typography and photographs to stand out. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#ed2e38` (Diabla Red) · `--color-border` → `#ed2e38` (Diabla Red) · `--color-accent` → `#ed2e38` (Diabla Red)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ed2e38` | `#ffffff` | 4.16:1 | AA-large |
| `#ed2e38` | `#ffffff` | 4.16:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| LinotypeHelveticaNeueLTStdRoman | `--font-body` | webfont | 400 | Navigation, body copy, captions, links, buttons, and editorial headings. | Helvetica Neue, with Arial as a free system fallback |

- **LinotypeHelveticaNeueLTStdRoman:** Use regular weight; headings, navigation, buttons, and captions are commonly uppercase. Keep tracking neutral and hierarchy driven by scale.

### Type scale — Golden Ratio (ratio ≈ 1.619, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 110px | 400 | 0.91 | 0 | uppercase | LinotypeHelveticaNeueLTStdLt | Oversized uppercase campaign words layered over the immersive hero imagery. |
| h1 | 80px | 400 | 0.88 | 0 | uppercase | LinotypeHelveticaNeueLTStdLt | Large uppercase headline for the main hero or lead editorial feature. |
| h2 | 33px | 400 | 1.09 | 0 | uppercase | LinotypeHelveticaNeueLTStdRoman | Uppercase feature and section headings, including collection names. |
| h3 | 22px | 400 | 1.09 | 0 | uppercase | LinotypeHelveticaNeueLTStdRoman | Uppercase product, designer, or story titles within the editorial grid. |
| body | 16px | 400 | 1.13 | 0 | — | LinotypeHelveticaNeueLTStdRoman | Short descriptive copy for furniture, designers, and brand stories. |
| caption | 14px | 400 | 2 | 0 | uppercase | LinotypeHelveticaNeueLTStdRoman | Small uppercase labels beneath or beside editorial images. |
| button | 15px | 400 | 1.8 | 0 | uppercase | LinotypeHelveticaNeueLTStdRoman | Uppercase text inside thin red outlined pill controls. |
| nav | 22px | 400 | 1.09 | 0 | uppercase | LinotypeHelveticaNeueLTStdRoman | Uppercase primary navigation and footer column labels. |
| link | 10px | 400 | 1.2 | 0 | uppercase | LinotypeHelveticaNeueLTStdRoman | Small uppercase inline links and secondary actions. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 10, 15, 16, 17, 20, 25, 30, 32, 40, 80 px.
- Section rhythm 80px · element gap 16px · card padding 17px · max content width 700px.

The page uses a nine-column editorial structure beneath a full-bleed hero. The hero spans the viewport, while lower content places images and text in varied widths and asymmetrical pairings rather than repeating identical cards. Content is center-aligned in many feature blocks, with broad white intervals between them. The measured section gap is 80px and element gap is 16px; the measured page max width is 700px, though the lead media breaks beyond it. The footer shifts to five columns and a denser information layout.

## Shape & elevation

- Radius: button `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.4s ease` on interactive elements.

The interface is predominantly flat: white canvas, no measured shadows, and no gradients. Fine red borders outline feature cards and pill controls, providing separation without raised surfaces. Photography creates the strongest depth and layering, especially in the full-bleed hero, where title and navigation sit directly over the scene.

## Imagery

Lifestyle and product photography dominate: the hero shows a resort-like pool and outdoor seating, while lower features mix landscape scenes, furniture, and a designer portrait. Images are presented as rectangular editorial frames with little visual ornament. Photography supplies the page’s greens, pinks, and natural material tones; these are image content, not additional interface palette colours.

## Components

### Full-bleed hero

Viewport-wide outdoor lifestyle image with centered, oversized uppercase campaign text and red navigation over the scene.

### Editorial feature card

Image-led story or product block with uppercase red title, concise copy, and a thin red outline where a card boundary is used.

### Pill action

Small uppercase red label in a thin outlined, fully rounded control; keep the fill transparent.

### Primary navigation

Uppercase red links arranged across the top of the hero, with the Diabla mark centered among the navigation groups.

### Designer profile

Portrait and editorial text grouped within a red hairline frame, using compact uppercase red typography.

### Multi-column footer

Compact white footer with red uppercase column labels, social links, newsletter fields, and a fine red top rule.

### Measured component styles

- **Primary button** (“HARBOR”): transparent background · text #ed2e38 · border 1px solid #ed2e38 · radius 14px · padding 0px 25px · 400 15px LinotypeHelveticaNeueLTStdRoman · uppercase
- **Link** (“LOST YOUR PASSWORD?”): transparent background · text #ed2e38 · radius 0px · padding 0px · 400 10px LinotypeHelveticaNeueLTStdRoman · uppercase
- **Input**: transparent background · text #ed2e38 · radius 0px · padding 5px 0px 0px 0px · 400 14px LinotypeHelveticaNeueLTStdRoman · uppercase
- **Card** (“Alejandra Gandia-Blasco Alejandra Gandía”): transparent background · text #ed2e38 · border 1px solid #ed2e38 · radius 0px · padding 20px 15px 17px 15px · 400 16px LinotypeHelveticaNeueLTStdRoman
- **Navigation item** (“DISTRIBUTION”): transparent background · text #ed2e38 · radius 0px · padding 0px · 400 14px LinotypeHelveticaNeueLTStdRoman · uppercase

## Do

- Keep white as the dominant interface canvas.
- Use #ed2e38 for brand text, outlines, and navigation.
- Let high-quality outdoor photography carry the colour and mood.
- Use uppercase display and navigation typography.
- Vary editorial image and text widths instead of making every card identical.
- Separate stories with generous white space.
- Use thin outlines rather than shadows to define controls.

## Don't

- Do not introduce unmeasured interface colours.
- Do not use large solid red panels as the default surface.
- Do not add drop shadows or decorative gradients.
- Do not force the editorial features into a uniform catalogue grid.
- Do not crowd images with dense explanatory copy.
- Do not use heavy or tightly tracked typography.

## Agent prompt

Build a new Diabla-style outdoor furniture page using Gallery White (#ffffff) as the primary canvas and Diabla Red (#ed2e38) for navigation, headings, copy, fine borders, and outlined controls. Start with a full-bleed lifestyle photograph and overlay a light, uppercase campaign heading plus restrained red navigation. Below, create an airy editorial sequence that alternates furniture, landscape, and designer imagery with concise text; vary the blocks rather than repeating a rigid product grid. Use the measured Helvetica Neue family or a close system fallback, regular weight, and uppercase styling for headings, navigation, buttons, and captions. Keep controls transparent with thin red outlines and pill-shaped ends. Avoid shadows, gradients, extra interface colours, and dense layouts. Finish with a compact multi-column footer for brand links, social channels, and newsletter signup.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed lifestyle image with centered campaign text and navigation layered over it. | immersive entry, overlaid navigation, campaign headline | edge-to-edge photography, uppercase display text, red navigation |
| 2 | content-feed | Asymmetric nine-column editorial flow pairing furniture, landscape, and designer images with short copy. | browse editorial stories, product discovery, designer profile | varied image widths, centered uppercase headings, red outline accents |
| 3 | footer | Compact five-column footer with brand, social, newsletter, and navigation groups. | newsletter signup, social links, footer navigation | thin red top rule, uppercase red labels, multi-column layout |

## Source CSS custom properties (selected)

```css
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--main-color: #ED2E38;
--secondary-color: #FCF0F3;
--third-color: #F9C2CC;
--fourth-color: #A39D9C;
--main-padding-space: 32px;
--plyr-color-main: #ED2E38;
--plyr-video-controls-background: transparent;
--plyr-range-thumb-shadow: none;
--plyr-range-thumb-active-shadow-width: 0;
--plyr-tooltip-color: #ED2E38;
--plyr-tooltip-shadow: none;
--plyr-tooltip-radius: 0;
--plyr-font-family: 'LinotypeHelveticaNeueLTStdLt', sans-serif;
--plyr-font-size-base: 11px;
--plyr-font-size-small: 11px;
--plyr-font-size-large: 11px;
--plyr-font-size-xlarge: 11px;
--swiper-theme-color: #007aff;
--wpforms-field-border-radius: 3px;
--wpforms-field-border-style: solid;
--wpforms-field-border-size: 1px;
--wpforms-field-background-color: #ffffff;
--wpforms-field-border-color: rgba( 0, 0, 0, 0.25 );
--wpforms-field-border-color-spare: rgba( 0, 0, 0, 0.25 );
--wpforms-field-text-color: rgba( 0, 0, 0, 0.7 );
--wpforms-field-menu-color: #ffffff;
--wpforms-label-color: rgba( 0, 0, 0, 0.85 );
--wpforms-label-sublabel-color: rgba( 0, 0, 0, 0.55 );
--wpforms-label-error-color: #d63637;
--wpforms-button-border-radius: 3px;
--wpforms-button-border-style: none;
--wpforms-button-border-size: 1px;
--wpforms-button-background-color: #066aab;
--wpforms-button-border-color: #066aab;
--wpforms-button-text-color: #ffffff;
--wpforms-page-break-color: #066aab;
--wpforms-background-image: none;
--wpforms-background-position: center center;
```

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