Better Diabla

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/betterdiabla.com -->
<!-- Extracted: 2026-10-13T15:32:40.758Z | Schema: v1 | Quality: 65/100 -->
---
version: alpha
name: "Better Diabla"
description: "Better Diabla presents a professional web presence."
colors:
  primary: "#e03a2f"
  tertiary: "#ff80b3"
  neutral: "#14532d"
  surface: "#efe1f8"
  on-surface: "#3b3388"
  on-surface-secondary: "#14532d"
  border: "#efe1f8"
  link: "#3b3388"
  error: "#dd7774"
  warning: "#dc8f38"
  success: "#4bb98c"
  surface-dark: "#e0fe9c"
typography:
  display-lg:
    fontFamily: "Helvetica Neue"
    fontSize: "28px"
    fontWeight: "700"
  headline-lg:
    fontFamily: "Helvetica Neue"
    fontSize: "20px"
    fontWeight: "700"
    lineHeight: "24px"
  headline-md:
    fontFamily: "Helvetica Neue"
    fontSize: "25px"
    fontWeight: "300"
    letterSpacing: "2px"
  headline-sm:
    fontFamily: "Helvetica Neue"
    fontSize: "16px"
    fontWeight: "700"
  body-md:
    fontFamily: "Helvetica Neue"
    fontSize: "12px"
    fontWeight: "400"
rounded:
  sm: "4px"
  md: "10px"
  lg: "32px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-primary:
    backgroundColor: "#e03a2f"
    textColor: "#ffffff"
    rounded: "32px"
    padding: "10.4px 21.6px"
    fontSize: "12.8px"
    fontWeight: "700"
    borderColor: "#3b3388"
    borderWidth: "2px"
    boxShadow: "rgb(59, 51, 136) 2px 2px 1px 1px"
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#312e81"
    rounded: "10px"
    padding: "13.6px 16px"
    fontSize: "14.72px"
    fontWeight: "500"
    borderColor: "#312e81"
    borderWidth: "2px"
---

# Better Diabla — Design System

## Overview

Better Diabla presents a professional web presence.

Key characteristics: professional.

**Key characteristics:**

- Vibe — professional
- Design era — contemporary
- Emotional tone — professional
- Target audience — general audience
- Visual energy — 5/10 (moderate)

## Colors

The palette draws on 17 distinct colors observed across the site, organized into semantic roles below.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#e03a2f` | Crimson |
| accent / tertiary | `#ff80b3` | Hot Pink |
| surface | `#efe1f8` | Lavender |
| background | `#edebe6` | Linen |
| text | `#3b3388` | Rebecca Purple |
| secondary text | `#14532d` | Dark Slate Gray |
| border | `#efe1f8` | Lavender |
| link | `#3b3388` | Rebecca Purple |
| muted | `#14532d` | Dark Slate Gray |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| surface | `#e0fe9c` | Khaki |

### Semantic

| Role | Hex | Use |
|------|-----|-----|
| success | `#4bb98c` | Confirmations, positive states |
| warning | `#dc8f38` | Caution, intermediate states |
| error | `#dd7774` | Failures, destructive actions |

## Typography

Type is set in Helvetica Neue, Helvetica Neue, Arial, with hierarchy expressed through size and weight contrast rather than family-switching.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Helvetica Neue | body | system | 400, 500, 700 |
| Helvetica Neue | heading | system | 300, 700 |
| Arial | body | system | 400, 700 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Helvetica Neue | 28px | 700 | — | — |
| Heading 2 | Helvetica Neue | 20px | 700 | 24px | — |
| Heading 3 | Helvetica Neue | 25px | 300 | — | 2px |
| Heading 4 | Helvetica Neue | 16px | 700 | — | — |
| Body | Helvetica Neue | 12px | 400 | — | — |

### Conventions

- Heading case — sentence-case

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| modal | `rgb(47, 51, 136) 5.24px 6.99px 0px 0px` |
| modal | `rgb(45, 52, 133) 5.24px 6.99px 0px 0px` |
| button | `rgb(59, 51, 136) 2px 2px 1px 1px` |

## Shapes

Border-radius scale:

- `sm` — 4px
- `md` — 10px
- `lg` — 32px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Primary**

- Background — `#e03a2f`
- Text — `#ffffff`
- Radius — `32px`
- Padding — `10.4px 21.6px`
- Font size — `12.8px`
- Font weight — `700`
- Border — `2px solid #3b3388`
- Shadow — `rgb(59, 51, 136) 2px 2px 1px 1px`
- Sample copy — "PRE VENTA: Get on The List"

**Secondary**

- Background — `#ffffff`
- Text — `#312e81`
- Radius — `10px`
- Padding — `13.6px 16px`
- Font size — `14.72px`
- Font weight — `500`
- Border — `2px solid #312e81`
- Sample copy — "Más energía y menos bajones durante el día"

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 5/10 | balanced |
| Playful ↔ Serious | 5/10 | balanced |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 3/10 | respectful |
| Technical ↔ Accessible | 5/10 | balanced |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/betterdiabla.com) | 100% |
| favicon | — | ico | [link](brands/betterdiabla.com/logo-0.ico) | 95% |
| favicon | — | ico | [link](brands/betterdiabla.com/logo-1.ico) | 95% |
| primary | — | webp | [link](brands/betterdiabla.com/logo-2.webp) | 85% |
| logomark | — | svg | [link](brands/betterdiabla.com/logo-svg-3.svg) | 90% |
| logomark | — | svg | [link](brands/betterdiabla.com/logo-svg-4.svg) | 90% |
| logomark | — | svg | [link](brands/betterdiabla.com/logo-svg-5.svg) | 90% |

## Sources

- Official brand guidelines — https://www.canva.com/docs/media-kits/
- Live brand page — https://extractvibe.com/brand/betterdiabla.com
- Raw JSON — https://extractvibe.com/api/brand/betterdiabla.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/betterdiabla.com/design.md
- Extracted — 2026-10-13T15:32:40.758Z
- Generator — ExtractVibe vv1
- Quality score — 65/100

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md