dallmo-ui

Developer-first design system for the Dallmo platform. Dark by default, terminal-aesthetic, celebrates technical seniority.

Install

npm install dallmo-ui
# or
pnpm add dallmo-ui

Peer dependencies

npm install lucide-react react react-dom
# Optional — animations and syntax highlighting
npm install framer-motion shiki

Usage

import { SeniorityBadge, StackBadge, DevCard, ReputationScore } from 'dallmo-ui'
import { JobCard, TalentCard, MatchScore, SkillGap } from 'dallmo-ui'
import { CodeBlock, TerminalOutput, DiffView } from 'dallmo-ui'

Tokens (JS/TS)

import { colors, typography, spacing, effects } from 'dallmo-ui/tokens'

colors.brand[500]        // oklch(0.55 0.27 293)  — Electric Violet
colors.seniority.senior  // oklch(0.75 0.17 55)   — Amber
colors.status.open       // oklch(0.72 0.17 145)  — Green

Components

Identity

| Component | Description | |---|---| | SeniorityBadge | Colored badge per level: jr (blue), mid (green), senior (amber), staff (violet), principal (gold) | | StackBadge | Tech badge with official brand color per stack | | ReputationScore | Score with animated glow, tier-colored | | DevCard | Compact developer card with open-to-work indicator | | DevDNA | Personality type display ("The Systems Architect") |

Matching

| Component | Description | |---|---| | MatchScore | SVG circular progress, color-coded by threshold | | JobCard | Job listing with company, level, stacks, match score | | TalentCard | Candidate card with match breakdown bars | | SkillGap | Matched / missing / bonus stacks analysis |

Code

| Component | Description | |---|---| | CodeBlock | macOS-style header, copy button, shiki syntax highlighting | | TerminalOutput | Terminal-style output with command/output/error lines | | DiffView | Diff display with hunk headers and line coloring |

Design Tokens

All colors use the OKLCh color space for perceptual uniformity.

Brand: Electric Violet oklch(0.55 0.27 293) — the hue of VS Code Copilot, JetBrains, GitHub Copilot.

Seniority scale:

• jr — Blue oklch(0.65 0.18 230)
• mid — Green oklch(0.72 0.17 145)
• senior — Amber oklch(0.75 0.17 55)
• staff — Violet oklch(0.55 0.27 293)
• principal — Gold oklch(0.82 0.15 85)

Publishing

cd design-system/packages/ui
npm run build:full
npm login
npm publish

License

MIT