M2 Design System

Overview

M2 is an IT company focused on project and team management. Their product suite enables teams to manage projects, track resources, schedule work, and collaborate — positioned as a premium, dark-themed platform with Microsoft-ecosystem sensibilities.

Products / Surfaces

1. Marketing Website — Public-facing site for acquisition and product overview
2. Web App — Core project & team management dashboard
3. Mobile App — iOS/Android companion for on-the-go access
4. Internal Dashboard / Resource Management — Operations and resource allocation tooling

Sources

• Logo: assets/m2-logo.png (uploaded by user)
• GitHub repo: https://github.com/oahsiao/M2_CLAUDE_PROJECT (currently sparse — placeholder only)
• No Figma link provided

---

CONTENT FUNDAMENTALS

Tone & Voice

• Professional but direct. No fluff; every sentence earns its place.
• Confident, not arrogant. M2 speaks as a knowledgeable partner, not a lecturer.
• Action-oriented. CTAs and labels use strong verbs: Manage, Track, Deploy, Assign, Launch.
• Minimal jargon — technical enough to resonate with IT managers, clear enough for executives.

Casing

• Product names: Title Case — "Resource Manager", "Team Hub"
• UI labels & nav: Title Case for navigation items; Sentence case for body copy and descriptions
• CTAs: All caps or Title Case for primary actions; sentence case for secondary

Pronouns

• Uses "you" to address the user directly ("Your Projects", "Your Team")
• The product/company refers to itself as "M2", not "we" in UI copy

Emoji / Special Characters

• No emoji in UI. Icons only (icon font or SVGs).
• Unicode characters used sparingly for decorative or functional purposes (arrows, bullets)
• Numbers and data are formatted with precision — commas for thousands, consistent decimal places

Examples

• ✓ "Manage your projects with precision."
• ✓ "Track team availability in real time."
• ✓ "Resource allocation. Simplified."
• ✗ "We make it easy to 🚀 your projects to the next level!"

---

VISUAL FOUNDATIONS

Colors

• Dark-first. Near-black backgrounds with layered surface elevations.
• Primary background: #0d0d0f (M2 Black)
• Surface layers: #13131a, #1a1a24, #22222f (elevation via lightness)
• Accent / Primary: #0078d4 (Microsoft Blue — familiar to enterprise IT users)
• Highlight / Cyan: #00bcf2 (electric highlights, data vis)
• Foreground: #ffffff (primary), #a0a0b8 (secondary), #606078 (tertiary/muted)
• Semantic: Success #107c10, Warning #ff8c00, Error #d13438

Typography

• Primary font: Orbitron (Google Fonts) — geometric, futuristic, all-caps-friendly; used for headings, logotype, data labels
• Body font: Inter (fallback: system-ui) — clean, readable, neutral for body copy and UI
• Mono font: JetBrains Mono — for code, IDs, timestamps, technical data

Spacing

• Base unit: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96
• Consistent padding inside components: 12px (compact), 16px (default), 24px (relaxed)

Backgrounds

• Solid dark surfaces — no gradients in primary UI
• Subtle radial or linear gradients used sparingly for hero sections on marketing site
• No full-bleed photography in UI; optional for marketing site
• No hand-drawn illustrations; geometric / abstract shapes only

Animation

• Easing: cubic-bezier(0.16, 1, 0.3, 1) — snappy out (Expo Out feel)
• Duration: 150ms for micro (hover/focus), 250ms for transitions, 400ms for page-level
• No bounces in core UI; reserved for celebratory moments
• Fade + subtle translate (4–8px Y) for entrances

Hover / Press States

• Hover: surface lightens by one elevation step + subtle border glow
• Press/active: slight scale down (scale(0.98)) + deeper background
• Links/interactive: #0078d4 underline or color shift
• No opacity-only hover states

Borders & Radius

• Border color: #2e2e40 (subtle on dark)
• Corner radius: 4px (compact inputs), 8px (cards/modals), 12px (large panels), 9999px (pills/badges)
• No sharp 0px corners on interactive elements; always at least 4px

Cards

• Background: #1a1a24 or #22222f
• Border: 1px solid #2e2e40
• Subtle box-shadow: 0 2px 8px rgba(0,0,0,0.4)
• No drop shadows with color; black/near-black only
• Inner glow on active/selected: inset 0 0 0 1.5px #0078d4

Iconography

See ICONOGRAPHY section below.

Imagery

• Cool tones preferred (blues, grays)
• Geometric / abstract preferred over photography in product UI
• Marketing site can use desaturated or dark-treated photography

---

ICONOGRAPHY

• Style: Lucide Icons (CDN) — 1.5px stroke, 24×24 default, rounded line caps
• No filled icons in primary UI; stroke-only
• Icon size scale: 16px (inline/compact), 20px (default UI), 24px (prominent), 32px (feature icons)
• Color: inherits from text color; active/accent states use #0078d4
• No emoji used as icons
• No PNG icons in UI — SVG/icon font only
• Logo mark: assets/m2-logo.png — circle with geometric "M" monogram

---

File Index

README.md                  — This file (you are here)
SKILL.md                   — Agent skill definition for Claude Code
SKILL.md                   — Agent skill definition
colors_and_type.css        — CSS custom properties: colors, type, spacing
assets/
  m2-logo.png              — M2 logomark (circle + M monogram, dark)
fonts/                     — Web fonts (Orbitron via Google Fonts)
preview/
  colors-brand.html        — Brand color swatches
  colors-semantic.html     — Semantic / functional colors
  colors-neutral.html      — Neutral scale
  type-display.html        — Display / heading type specimens
  type-body.html           — Body + mono type specimens
  type-scale.html          — Full type scale
  spacing-tokens.html      — Spacing tokens
  spacing-elevation.html   — Elevation / shadow system
  components-buttons.html  — Button states
  components-inputs.html   — Form inputs
  components-cards.html    — Card variants
  components-badges.html   — Badges & status indicators
  components-nav.html      — Navigation patterns
  brand-logo.html          — Logo usage card
ui_kits/
  web_app/                 — Web app UI kit (project dashboard)
  marketing/               — Marketing website UI kit
  mobile/                  — Mobile app UI kit
  dashboard/               — Internal resource management dashboard