# B2b Desktop Design System

> Generate modern B2B desktop design system specs — tokens, layout, information hierarchy — for Near delivery POC.

- Skill: `demondamon/b2b-desktop-design-system` (Agent Skill)
- Install (CLI): `npx skillmds@latest add demondamon/b2b-desktop-design-system`
- Raw SKILL.md: https://api.skillmd.com/api/skills/demondamon/b2b-desktop-design-system/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: DemonDamon (https://skillmd.com/u/demondamon)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/demondamon/b2b-desktop-design-system

---


# B2B Desktop Design System

## Goals

Produce **leading but pragmatic** enterprise desktop visuals without copyrighted asset packs.

## Checklist

### Color & type

- Primary: indigo/violet OKLCH (`--primary` family)
- Neutral surfaces: `--background`, `--surface-card`, `--text-strong`
- Type scale: 12 / 14 / 16 / 20 / 24 — max 3 weights on one screen

### Layout & hierarchy

- AppShell: brand row + grouped sidebar + content canvas
- One primary action per view; secondary actions in overflow/menu
- Status/progress in dedicated panel — not mixed into nav labels

### Components (POC minimum)

- Sidebar nav with active left accent bar
- PageHeader + Breadcrumb
- DataTable or card grid for list views
- Dialog/Sheet for destructive confirm

### References (patterns only, do not paste assets)

- IBM Carbon spacing rhythm
- Arco Design layout density
- Ant Design Pro information architecture

## Deliverables

Under `output/<task_id>/design/`:

- `design-system.md` — tokens, spacing, component states
- Wireframe: Figma link **or** `dashboard-wireframe.svg` fallback

## Figma MCP

When `figma-mcp` connected and `FIGMA_API_KEY` set, create/update a Figma file and record URL in design-system.md.

## Accessibility

- WCAG AA contrast for primary text on surfaces
- Focus ring visible in light and dark themes