JobJitsu Design System (Production)
Calm confidence, desktop density, dark mode first.
Brand source: ../brand/BRAND_GUIDELINES.md · Voice: ../brand/VOICE_AND_TONE.md
This folder is the production-ready visual and interaction system for packages/ui and the desktop shell. Token names are implementation-ready. The shell applies data-theme and data-layout (compact / standard / wide) from RESPONSIVE.md. Shared page chrome (JjPage, JjEmptyState, JjSurface) lives in app/src/shell/layout until more Jj* primitives move into @jobjitsu/ui.
Principles
- Native feel, local power — Tight desktop density; soft elevation; no neon SaaS glow.
- Dark mode first — Default theme is Midnight; light is a deliberate switch.
- One job per view — Hierarchy via type and space, not card stacks everywhere.
- Privacy visible — Agent · On-device pill and status chrome are first-class components.
- Calm motion — Presence and hierarchy only; honor reduced motion.
- WCAG AA minimum — AAA where brand contrast already allows.
Document map
| Doc | Topic |
|---|---|
| DESIGN_TOKENS.md | Color, spacing, radius, elevation, icon, and z-index tokens |
| TYPOGRAPHY.md | Fonts, type ramp, tracking |
| ANIMATION.md | Duration, easing, approved motions |
| COMPONENT_VARIANTS.md | Core Jj* variants |
| THEME_DARK.md | Dark (default) theme map |
| THEME_LIGHT.md | Light theme map |
| ACCESSIBILITY.md | A11y requirements |
| RESPONSIVE.md | Desktop window & density rules |
Related brand docs (copy, icons, empty states): ../brand/DESIGN_SYSTEM.md
Token naming convention
--jj-{category}-{role}-{variant?}
Examples: --jj-color-bg-canvas, --jj-space-4, --jj-radius-md, --jj-motion-duration-standard
Semantic tokens (preferred in components) reference primitive tokens. Themes swap semantic aliases; components should rarely hard-code primitives.
