brand-guidelines

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:

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