メニュー
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.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Orchestrates Jira ticket creation from Figma designs using Atomic Design principles. Use this when initializing a project or syncing design specs to Jira for development.
Technical standards and best practices for creating and managing Slice and Custom Type preview images in Prismic Slice Machine.
Audits node_modules for package licenses. Uses bash to resolve SPDX IDs without reading file contents into context. LLM inference is a last resort for a small residual set.
Generates high-quality B2B technical articles following the "Digital Speed" methodology; DX-focused, Spec-Driven, and practitioner-led. Use when asked to create an article.
Generates a step-by-step tutorial aligned with the Digital Speed brand voice. Use when asked to write a tutorial, how-to guide, setup guide, or walkthrough.
The official Digital Speed brand persona, voice, and values. Use when asked to write any content, copy, or communication on behalf of Digital Speed.
| 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 |
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.
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.
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.
| 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.
The following modifications are prohibited. Use only the prepared logotype versions without interference:
| 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.
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.
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. |
RM Neue is the sole primary typeface for all DigitalSpeed materials.
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. |
| Role | Line Height |
|---|---|
| Title | 125% |
| Subtitle | 145% |
| Heading | 150% |
| Body text | 150% |
| Caption | 140% |
Use only when RM Neue is unavailable (e.g., PowerPoint, environments without custom font support):
Do not substitute any other typeface. If Inter is also unavailable, flag the limitation rather than selecting an unapproved font.
Visual metaphor: volcanic lava — controlled energy and deep structure.
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. |
All sections from the source identity document are mapped above:
brand-persona skill