---
type: design-system-index
last_imported: 2026-04-21
source: "Claude Design · handoff bundle"
---

# DKube Design System — Index

Handoff bundle from [Claude Design](https://claude.ai/design), reverse-engineered from dkube.io + the uploaded cube logo. Lives in the vault at `dkube-design-system/` and is browsable at http://localhost:47800/content (Design System section) for preview + download.

See [[README|Bundle README]] and [[project/README|Project README]] for agent instructions + visual foundations.

## Campaign

- [[project/Mechanical Contractor Campaign|Mechanical Contractor Campaign (HTML)]] — primary ABM campaign visual for Ajay 90-day: headlines, ad variants, banner concepts

## Reels (AI Readiness ARI funnel)

- [[project/reels/AI Readiness Reels|AI Readiness Reels (original, requires http)]]
- [[project/reels/AI Readiness Reels — standalone|AI Readiness Reels — standalone (inlined JSX, works via file://)]]
- [[project/reels/scenes|scenes.jsx — reel scene definitions]]
- [[project/reels/animations|animations.jsx — motion primitives]]
- [[project/reels/colors_and_type|colors_and_type.css (reels-scoped)]]

## Reels (Ajay talking-head, 3 repurposed cuts)

Relocated from vault root on 2026-04-21; `ajay.mp4` is symlinked into `project/reels/video/` so both http:// (dashboard) and file:// (double-click) work.

- [[project/reels/Ajay Repurposed Reels|Ajay Repurposed Reels (3 reels: 16:9 + two 9:16)]]
- `project/reels/video/ajay.mp4` → symlink → `ajay.mp4` (vault root, 6.4 MB)

## Brand / Logos

![[project/uploads/dkube_logo.avif]]
![[project/assets/dkube_icon_logo.avif]]

## Design System Previews

Each of these is a standalone HTML preview (cards, type specimens, colors, etc.). Best viewed via the dashboard at `localhost:47800/content` for rendered previews; Obsidian only stores + links them.

- [[project/preview/brand_logos|Brand Logos]]
- [[project/preview/colors_primary|Colors — Primary]]
- [[project/preview/colors_neutrals|Colors — Neutrals]]
- [[project/preview/colors_semantic|Colors — Semantic]]
- [[project/preview/type_display|Type — Display]]
- [[project/preview/type_scale|Type — Scale]]
- [[project/preview/type_specimens|Type — Specimens]]
- [[project/preview/radii_shadows|Radii + Shadows]]
- [[project/preview/spacing_scale|Spacing Scale]]
- [[project/preview/buttons|Buttons]]
- [[project/preview/chips_tags|Chips + Tags]]
- [[project/preview/cards|Cards]]
- [[project/preview/form_inputs|Form Inputs]]
- [[project/preview/nav_footer|Nav + Footer]]
- [[project/preview/iconography|Iconography]]
- [[project/preview/imagery|Imagery]]

## Code

- [[project/colors_and_type|colors_and_type.css — root design tokens]]

## Source uploads

- [[project/uploads/mech_ads_clean|mech_ads_clean.txt — cleaned ad copy]]
- [[project/uploads/mech_ads_text|mech_ads_text.txt — raw ad transcription]]
- `project/uploads/Mechanical_contractor_ads_and_headlines.docx` (Word doc — not indexed in Obsidian graph)

## Visual foundations (quick reference)

**Palette**:
- Primary `#6B53A3` · Primary-light `#9985BF` · Primary-deep `#4A3A7A`
- Ink `#0E0E10` · Body `#1F1F23` · Muted `#6E6E76`
- Page white `#FFFFFF` · Tinted purple section `#F7F5FB` · Card tint `#ECE7F5` · Dark inverse `#111013`
- Hairline border `#E7E4EE`

**Type**: Manrope (display) + Inter (body) + JetBrains Mono (code)

**Radii**: 12 (buttons/chips) · 16 (tiles) · 24 (content cards) · 32 (hero) · full (pills)

**CTAs**: ↗ top-right arrow, always action-first, sentence case (except largest H1s). **No emoji. Ever.**

## Usage notes for content pipeline

- When producing LinkedIn posts for Ajay, pull ad copy from `uploads/mech_ads_clean.txt`
- Reels scripts live in `project/reels/scenes.jsx` — translate frames into short-form copy for 02-content/drafts/shorts/
- The mechanical-contractor campaign HTML is the canonical ABM visual — reference it in sponsor outreach