---
name: brand-guidelines
description: The DigitalSpeed visual identity and styling system — logo, color, typography, photography, and graphic system. Use when generating any design asset, UI, layout, or code that must conform to the DigitalSpeed brand styling.
author: DigitalSpeed
---

# DigitalSpeed Brand Guidelines

The DigitalSpeed visual styling system. These directives are authoritative: every design asset, UI, layout, and code output representing DigitalSpeed must conform to the rules below. For voice, tone, and messaging, see `brand-persona`.

---

## 1. Logo

### 1.1 Logotype Foundation

All logo versions are built from the original brandmark set in the **Supreme** typeface — a bold, contemporary sans-serif embodying speed, sharpness, and modular geometry. Letterform spacing and internal recesses (especially negative spaces) have been refined for precise visual rhythm and functional clarity.

### 1.2 Horizontal Logotype (Default)

- **Layout:** "Digital" and "Speed" sit side-by-side on a single line.
- **Character:** Continuity and momentum.
- **Use when:** Headers, websites, full-width layouts, or any context where stability and recognition are needed.
- **Permitted backgrounds:** Scarlet Red, Raisin Black, Pure White, Anti-flash White, Azure.

### 1.3 Vertical Logotype

- **Layout:** "Speed" placed beneath "Digital", offset slightly to the right.
- **Character:** Acceleration and vertical rhythm while preserving balance.
- **Use when:** Secondary placements, social icons, confined vertical spaces, or contexts needing proportional contrast.
- **Permitted backgrounds:** Scarlet Red, Raisin Black, Pure White, Anti-flash White, Azure.

### 1.4 Mark (Monogram)

- **Design:** "DS" initials with a terminating dot.
- **Character:** Shorthand identity with clarity and confidence. The dot acts as a precise endpoint reflecting intentionality and completeness.
- **Use when:** Favicons, app icons, social avatars, internal tools, or any compact application.

### 1.5 Safe Area

The safe area around any logotype version (Horizontal, Vertical, Monogram) must remain free of visual interference. The protective field is determined by the **height and width of the "D" letter element** from the logotype. No text, graphics, or other elements may intrude into this zone.

### 1.6 Scalability

| Variant | Min Digital | Min Print | Reference Sizes (px) |
| --- | --- | --- | --- |
| Horizontal | 20 px | 5 mm | 160, 130, 100, 60, 40 |
| Vertical | 30 px | 8 mm | 160, 130, 100, 60, 40 |
| Monogram | 30 px | 8 mm | 170, 130, 100, 80, 60 |

Never render any logo variant below its stated minimum size.

### 1.7 Incorrect Usage

The following modifications are prohibited. Use only the prepared logotype versions without interference:

1. Do not change elements arrangement.
2. Do not distort the logotype.
3. Do not use the logotype as outline.
4. Do not allow low contrast between background and the logotype.
5. Do not use images as a fill of the logotype.
6. Do not rotate the logotype except by exactly 90 degrees.

---

## 2. Color

### 2.1 Color Palette

| Name | HEX | RGB | CMYK | Variants |
| --- | --- | --- | --- | --- |
| Scarlet Red | `#FF402D` | 255, 64, 45 | 0, 75, 82, 0 | Tints: 400, 300, 200, 100 |
| Raisin Black | `#1E1C1F` | 30, 28, 31 | 3, 10, 0, 88 | Shades: 900, 800, 700, 600 |
| Pure White | `#FFFFFF` | 255, 255, 255 | 0, 0, 0, 0 | — |
| Anti-flash White | `#EBEBEB` | 235, 235, 235 | 0, 0, 0, 8 | — |
| Azure | `#DDF0F6` | 221, 240, 246 | 10, 2, 0, 4 | — |

**Palette rationale:** High-contrast core of red, black, and white for clarity, precision, and strong visual hierarchy. Cool grey (Anti-flash White) and soft blue (Azure) introduce balance and calm.

### 2.2 Logo Color Applications

These are the only permitted logo-on-background combinations:

| Logo Color | Allowed Backgrounds |
| --- | --- |
| Pure White (`#FFFFFF`) | Scarlet Red (`#FF402D`), Raisin Black (`#1E1C1F`) |
| Raisin Black (`#1E1C1F`) | Pure White (`#FFFFFF`), Anti-flash White (`#EBEBEB`), Azure (`#DDF0F6`) |

**All other logo/background color combinations are not allowed.**

### 2.3 Color Accessibility Guide

Compliance target: **WCAG AA contrast standards.**

| Element Type | Rule |
| --- | --- |
| Large text (18 pt+) | Must meet AA contrast ratio between text and background. |
| Normal text (below 18 pt) | Stricter AA compliance required — verify contrast ratios rigorously. |
| Graphics / Decorative elements | Lines, shapes, and elements that do not affect understanding have more flexibility, but should still aim for accessible contrast where practical. |

---

## 3. Typography

### 3.1 Primary Typeface: RM Neue

RM Neue is the sole primary typeface for all DigitalSpeed materials.

#### 3.1.1 Heading Typeface — RM Neue SemiBold

- **Weight:** SemiBold.
- **Usage:** Headlines, callouts, navigation.
- **Rationale:** Maximises contrast; reflects the brand's focus on design-as-system.

#### 3.1.2 Body Typeface — RM Neue Regular

- **Weight:** Regular.
- **Usage:** Long-form reading, interface text, detailed descriptions.
- **Rationale:** Neutral clarity and high legibility.

### 3.2 Type-Setting Rules

These rules are non-negotiable for all DigitalSpeed typographic output:

| Property | Rule |
| --- | --- |
| **Alignment** | Left-aligned only. Never right-align or force-justify. |
| **Case** | Sentence case always. |
| **Tracking** | 0% — do not modify. |

#### Line Height by Role

| Role | Line Height |
| --- | --- |
| Title | 125% |
| Subtitle | 145% |
| Heading | 150% |
| Body text | 150% |
| Caption | 140% |

### 3.3 Fall-Back Fonts

Use only when RM Neue is unavailable (e.g., PowerPoint, environments without custom font support):

- **Inter (Regular)** — for both Heading and Body text.

Do not substitute any other typeface. If Inter is also unavailable, flag the limitation rather than selecting an unapproved font.

---

## 4. Photography Style

### 4.1 Photography Guide

Visual metaphor: **volcanic lava** — controlled energy and deep structure.

#### Do's

- Lava-like textures.
- Macro details.
- High contrast.
- Deep shadows.
- Glow accents.
- High quality / high resolution.
- Threshold effects.

#### Don'ts

- Low quality or low-resolution images.
- Over-retouched images.
- "Stocky"-looking images (generic stock photography feel).

### 4.2 Mockups Photography Guide

#### Do's

- Neutral or warm color temperature.
- Unobtrusive backgrounds.
- Modern devices.
- Clean street backgrounds.

#### Don'ts

- Cluttered or distracting images.

---

## 5. Graphic System

### 5.1 Graphic Elements

Graphic elements are **structural extensions of the layout, not decoration**. Every element must serve a compositional purpose.

| Element | Description |
| --- | --- |
| Grid Overlays | Light-lined frameworks that establish structure. |
| Blocks & Tiles | Solid or semi-transparent rectangles for sectioning. |
| Directional Lines | Subtle motion cues that guide the eye. |
| Geometric Insets | Shapes that create focus and rhythm within layouts. |

### 5.2 Usage Rules

#### Do's

- Support clarity.
- Maintain alignment with the underlying grid.
- Guide the viewer's eye through content hierarchy.
- Keep forms consistent across materials.
- Pace content — use graphic elements to create breathing room and rhythm.

#### Don'ts

- Add visual noise or filler.
- Use misaligned overlays.
- Crowd the layout.
- Sacrifice legibility for style.

---

## Section Verification Checklist

All sections from the source identity document are mapped above:

- [x] Logo — Logotype (Horizontal, Vertical), Mark, Safe Area, Scalability, Incorrect Usage
- [x] Color — Color Palette, Logo Color Applications, Color Accessibility Guide
- [x] Typography — Typeface (RM Neue SemiBold + Regular), Type-Setting Rules, Fall-Back Fonts
- [x] Photography Style — Stock Photography, Mockups Photography
- [x] Graphic System — Graphic Elements, Usage Rules
- Voice & Tone — see `brand-persona` skill