FedM8 · UX · fedm8-003

Card hub + social

FedM8's standard for all new app work, approved Nov 2, 2026. Warm ground, navy for where you are, one amber action, big choice cards, Reddit-style threads, team-up (Prime, Sub, 1099) and an 'I can do this' button on every opportunity. Fully token-driven, so members can change the look at runtime. Rollout to every page is in progress.

standard

Project: FedM8
Use for: every FedM8 app screen as pages are rebuilt; every new FedM8 screen, tool or page
Source of truth: Original page
Copied from: jbnx/fedm8-scan@c079166 design/003 on 2026-11-06

DESIGN.md tokens.json spec.json design-003.css

Screens

Approved comps. Each has a text source an AI can read.

FedM8 Card hub + social: Contract detail screen — Contract detail · comp source

FedM8 Card hub + social: Home screen — Home · comp source

FedM8 Card hub + social: Find work screen — Find work · comp source

FedM8 Card hub + social: Grants screen — Grants · comp source

FedM8 Card hub + social: Pipeline screen — Pipeline · comp source

FedM8 Card hub + social: Teaming screen — Teaming · comp source

Profile · comp source

FedM8 Card hub + social: Messages screen — Messages · comp source

FedM8 Card hub + social: Community screen — Community · comp source

FedM8 Card hub + social: Veterans screen — Veterans · comp source

FedM8 Card hub + social: Certifications screen — Certifications · comp source

FedM8 Card hub + social: Learn screen — Learn · comp source

FedM8 Card hub + social: Settings screen — Settings · comp source

FedM8 Card hub + social: Mobile home screen — Mobile home · comp source

FedM8 Card hub + social: Mobile contract screen — Mobile contract · comp source

FedM8 Card hub + social: Mobile community screen — Mobile community · comp source

Copy the code

tokens.json

{
 "id": "003",
 "name": "Card hub + social",
 "version": "2026-11-02",
 "status": "standard",
 "summary": "Warm ground, navy for 'where you are', one amber action, big choice cards, and a social layer (threads, team-up, presence) on every screen. Fully token-driven so each user can change the look at runtime.",
 "page": "https://fedm8.com/design/003/",
 "spec": "https://fedm8.com/design/003/spec.json",
 "catalog": "https://fedm8.com/design/catalog.json",
 "source_canvas": "https://claude.ai/artifact/EyVJ6iwBFst8c2BheBoS7v",
 "use_for": [
  "The app: every screen in fedm8.com/os",
  "Every new screen, tool or page"
 ],
 "not_for": [
  "Brand marks, videos, print: design 001"
 ],
 "precedence": "spec.json (v2 rules R1–R9) wins over the comps. Design 003 is the app standard since 2026-11-02; design 002 is retired.",
 "overrides_002": [
  "002 rule 'no dark theme' is replaced by runtime themes (presets + user overrides) under the contrast guard"
 ],
 "inherits_from_catalog": [
  "shared.comments_box (every page)",
  "shared.plan_tile (B/P after paid tools)",
  "shared.naming (Match-M8, FedM8 AI · not a member, room, Post)"
 ],
 "how_to_use": [
  "Components read ONLY semantic --fm-* tokens. Never write a hex, px size, radius or font name inside a component.",
  "Apply a theme by setting data-theme on <html> and loading theme CSS generated from presets[preset] merged with the user's overrides.",
  "Map catalog shared variables from semantic tokens: --pc-surface=var(--fm-surface), --pc-ink=var(--fm-ink), --pc-muted=var(--fm-ink-3), --pc-line=var(--fm-line), --pc-accent=var(--fm-action), --pc-accent-ink=var(--fm-action-ink), --pc-soft=var(--fm-surface-alt), --pc-radius=var(--fm-radius-md), --pc-font=var(--fm-font-sans); --plan-p-ink=var(--fm-pro), --plan-p-bg=var(--fm-pro-soft), --plan-p-line=var(--fm-pro), --plan-b-ink=var(--fm-accent-ink), --plan-b-bg=var(--fm-accent-soft), --plan-b-line=var(--fm-accent-ink).",
  "Check every screen at 1440x1000 and 375x812, in all three colour presets."
 ],
 "roles": {
  "--fm-bg": {
   "name": "Ground",
   "use": "Page behind cards"
  },
  "--fm-surface": {
   "name": "Surface",
   "use": "Cards, header, fields, dialogs"
  },
  "--fm-surface-alt": {
   "name": "Surface alt",
   "use": "Highlight cards, claim bar, continue card"
  },
  "--fm-line": {
   "name": "Line",
   "use": "Hairlines, card edges"
  },
  "--fm-line-strong": {
   "name": "Line strong",
   "use": "Dashed empty states, disabled edges"
  },
  "--fm-ink": {
   "name": "Ink",
   "use": "Primary text, headings"
  },
  "--fm-ink-2": {
   "name": "Ink 2",
   "use": "Secondary text"
  },
  "--fm-ink-3": {
   "name": "Ink 3",
   "use": "Meta text (min 13px)"
  },
  "--fm-on-dark": {
   "name": "On dark",
   "use": "Text on navy/selected fills"
  },
  "--fm-nav-active-bg": {
   "name": "Nav active",
   "use": "Active nav pill, current chevron segment"
  },
  "--fm-nav-active-ink": {
   "name": "Nav active ink",
   "use": "Text on active nav"
  },
  "--fm-selected-bg": {
   "name": "Selected",
   "use": "Selected ChoiceCard"
  },
  "--fm-selected-ink": {
   "name": "Selected ink",
   "use": "Text on selected card"
  },
  "--fm-row-selected-bg": {
   "name": "Row selected",
   "use": "Selected list row / chat item (R1)"
  },
  "--fm-row-selected-ink": {
   "name": "Row selected ink",
   "use": "Text on selected row"
  },
  "--fm-action": {
   "name": "Action",
   "use": "The one primary button per screen (R2)"
  },
  "--fm-action-ink": {
   "name": "Action ink",
   "use": "Text on primary button"
  },
  "--fm-action-hover": {
   "name": "Action hover",
   "use": "Primary button hover"
  },
  "--fm-accent-soft": {
   "name": "Accent soft",
   "use": "Badges, chevron middle segment, highlights"
  },
  "--fm-accent-ink": {
   "name": "Accent ink",
   "use": "Text on accent soft"
  },
  "--fm-chip-selected-bg": {
   "name": "Chip selected",
   "use": "Selected filter chip (R7)"
  },
  "--fm-chip-selected-ink": {
   "name": "Chip selected ink",
   "use": "Text on selected chip"
  },
  "--fm-success": {
   "name": "Success",
   "use": "I can do this ON, checks, online dot"
  },
  "--fm-success-soft": {
   "name": "Success soft",
   "use": "Accepted answer, success fills"
  },
  "--fm-pro": {
   "name": "Pro",
   "use": "Pro plan tile, FedM8 AI badge"
  },
  "--fm-pro-soft": {
   "name": "Pro soft",
   "use": "Pro/AI fills"
  },
  "--fm-urgent": {
   "name": "Urgent",
   "use": "Due ≤48h (R5)"
  },
  "--fm-urgent-soft": {
   "name": "Urgent soft",
   "use": "Urgent chip fill"
  },
  "--fm-warn": {
   "name": "Warn",
   "use": "Due ≤7 days (R5)"
  },
  "--fm-warn-soft": {
   "name": "Warn soft",
   "use": "Warn chip fill"
  },
  "--fm-info-soft": {
   "name": "Info soft",
   "use": "Neutral type badges"
  },
  "--fm-focus-ring": {
   "name": "Focus ring",
   "use": "Keyboard focus, 2px, never removed"
  }
 },
 "presets": {
  "card-hub": {
   "name": "Card hub (default)",
   "colors": {
    "--fm-bg": "#f3f1ec",
    "--fm-surface": "#ffffff",
    "--fm-surface-alt": "#fffaf0",
    "--fm-line": "#e0dccf",
    "--fm-line-strong": "#8b8676",
    "--fm-ink": "#14284b",
    "--fm-ink-2": "#3d4f6e",
    "--fm-ink-3": "#4a5b78",
    "--fm-on-dark": "#ffffff",
    "--fm-nav-active-bg": "#14284b",
    "--fm-nav-active-ink": "#ffffff",
    "--fm-selected-bg": "#14284b",
    "--fm-selected-ink": "#ffffff",
    "--fm-row-selected-bg": "#fdf3dc",
    "--fm-row-selected-ink": "#14284b",
    "--fm-action": "#f5a524",
    "--fm-action-ink": "#14284b",
    "--fm-action-hover": "#e0951a",
    "--fm-accent-soft": "#fde3b0",
    "--fm-accent-ink": "#8a4b00",
    "--fm-chip-selected-bg": "#fde3b0",
    "--fm-chip-selected-ink": "#14284b",
    "--fm-success": "#1f6b4a",
    "--fm-success-soft": "#e3f1ea",
    "--fm-pro": "#5b3a8a",
    "--fm-pro-soft": "#efe8f7",
    "--fm-urgent": "#a3262a",
    "--fm-urgent-soft": "#fbe3e3",
    "--fm-warn": "#8a4b00",
    "--fm-warn-soft": "#fde3b0",
    "--fm-info-soft": "#eaf0fb",
    "--fm-focus-ring": "#1d4ed8"
   },
   "scalars": {
    "--fm-density": 1,
    "--fm-type-scale": 1,
    "--fm-radius-scale": 1
   }
  },
  "high-contrast": {
   "name": "High contrast",
   "colors": {
    "--fm-bg": "#ffffff",
    "--fm-surface": "#ffffff",
    "--fm-surface-alt": "#fff6e0",
    "--fm-line": "#5b6475",
    "--fm-line-strong": "#3a4152",
    "--fm-ink": "#000814",
    "--fm-ink-2": "#1b2a44",
    "--fm-ink-3": "#26334d",
    "--fm-on-dark": "#ffffff",
    "--fm-nav-active-bg": "#000814",
    "--fm-nav-active-ink": "#ffffff",
    "--fm-selected-bg": "#000814",
    "--fm-selected-ink": "#ffffff",
    "--fm-row-selected-bg": "#ffe7a8",
    "--fm-row-selected-ink": "#000814",
    "--fm-action": "#ffb020",
    "--fm-action-ink": "#000814",
    "--fm-action-hover": "#e89a00",
    "--fm-accent-soft": "#ffe7a8",
    "--fm-accent-ink": "#5a3000",
    "--fm-chip-selected-bg": "#ffe7a8",
    "--fm-chip-selected-ink": "#000814",
    "--fm-success": "#0b4d31",
    "--fm-success-soft": "#d4f0e2",
    "--fm-pro": "#3f1f70",
    "--fm-pro-soft": "#ebe0fa",
    "--fm-urgent": "#7a0a0f",
    "--fm-urgent-soft": "#ffd9d9",
    "--fm-warn": "#5a3000",
    "--fm-warn-soft": "#ffe7a8",
    "--fm-info-soft": "#dde8ff",
    "--fm-focus-ring": "#0033cc"
   },
   "scalars": {
    "--fm-density": 1,
    "--fm-type-scale": 1.1,
    "--fm-radius-scale": 1
   }
  },
  "dark": {
   "name": "Dark",
   "colors": {
    "--fm-bg": "#0f1726",
    "--fm-surface": "#172238",
    "--fm-surface-alt": "#1d2a44",
    "--fm-line": "#2c3c5c",
    "--fm-line-strong": "#7085ad",
    "--fm-ink": "#eef2f8",
    "--fm-ink-2": "#c6d0e2",
    "--fm-ink-3": "#a9b6cd",
    "--fm-on-dark": "#0f1726",
    "--fm-nav-active-bg": "#e8edf6",
    "--fm-nav-active-ink": "#14284b",
    "--fm-selected-bg": "#e8edf6",
    "--fm-selected-ink": "#14284b",
    "--fm-row-selected-bg": "#26365a",
    "--fm-row-selected-ink": "#eef2f8",
    "--fm-action": "#f5a524",
    "--fm-action-ink": "#14284b",
    "--fm-action-hover": "#ffb948",
    "--fm-accent-soft": "#3a2e16",
    "--fm-accent-ink": "#f5c46b",
    "--fm-chip-selected-bg": "#3a2e16",
    "--fm-chip-selected-ink": "#f5c46b",
    "--fm-success": "#6fd3a3",
    "--fm-success-soft": "#163328",
    "--fm-pro": "#c7a8f0",
    "--fm-pro-soft": "#2a2140",
    "--fm-urgent": "#ff9a9a",
    "--fm-urgent-soft": "#3a1d22",
    "--fm-warn": "#f5c46b",
    "--fm-warn-soft": "#3a2e16",
    "--fm-info-soft": "#1f2d4a",
    "--fm-focus-ring": "#8fb4ff"
   },
   "scalars": {
    "--fm-density": 1,
    "--fm-type-scale": 1,
    "--fm-radius-scale": 1
   }
  },
  "compact": {
   "name": "Compact",
   "colors": "card-hub",
   "scalars": {
    "--fm-density": 0.85,
    "--fm-type-scale": 0.95,
    "--fm-radius-scale": 0.75
   }
  }
 },
 "scalars": {
  "type": {
   "--fm-font-sans": "\"Plus Jakarta Sans\", ui-sans-serif, system-ui, sans-serif",
   "--fm-font-mono": "\"JetBrains Mono\", ui-monospace, monospace",
   "--fm-text-xs": "calc(12px * var(--fm-type-scale))",
   "--fm-text-sm": "calc(13px * var(--fm-type-scale))",
   "--fm-text-md": "calc(15px * var(--fm-type-scale))",
   "--fm-text-lg": "calc(18px * var(--fm-type-scale))",
   "--fm-text-xl": "calc(22px * var(--fm-type-scale))",
   "--fm-text-2xl": "calc(28px * var(--fm-type-scale))",
   "--fm-text-3xl": "calc(34px * var(--fm-type-scale))",
   "--fm-text-stat": "calc(40px * var(--fm-type-scale))",
   "--fm-weight-regular": "400",
   "--fm-weight-medium": "500",
   "--fm-weight-semibold": "600",
   "--fm-weight-bold": "700"
  },
  "space": {
   "--fm-space-1": "calc(4px * var(--fm-density))",
   "--fm-space-2": "calc(8px * var(--fm-density))",
   "--fm-space-3": "calc(12px * var(--fm-density))",
   "--fm-space-4": "calc(16px * var(--fm-density))",
   "--fm-space-5": "calc(20px * var(--fm-density))",
   "--fm-space-6": "calc(24px * var(--fm-density))",
   "--fm-space-7": "calc(32px * var(--fm-density))",
   "--fm-space-8": "calc(48px * var(--fm-density))"
  },
  "shape": {
   "--fm-radius-sm": "calc(8px * var(--fm-radius-scale))",
   "--fm-radius-md": "calc(12px * var(--fm-radius-scale))",
   "--fm-radius-lg": "calc(16px * var(--fm-radius-scale))",
   "--fm-radius-xl": "calc(20px * var(--fm-radius-scale))",
   "--fm-radius-pill": "999px",
   "--fm-border-width": "1px",
   "--fm-shadow-1": "0 1px 2px rgba(20,40,75,.06)",
   "--fm-shadow-2": "0 6px 20px rgba(20,40,75,.10)"
  },
  "motion": {
   "--fm-motion-fast": "120ms",
   "--fm-motion-base": "200ms",
   "--fm-ease": "cubic-bezier(.2,.7,.2,1)"
  },
  "layout": {
   "--fm-page-max": "1440px",
   "--fm-gutter": "24px",
   "--fm-gutter-mobile": "16px",
   "--fm-rail-left": "320px",
   "--fm-rail-right": "320px",
   "--fm-tap-min": "44px",
   "--fm-header-h": "64px"
  }
 },
 "user_limits": {
  "--fm-type-scale": {
   "min": 0.9,
   "max": 1.3,
   "step": 0.05,
   "default": 1,
   "label": "Text size"
  },
  "--fm-density": {
   "options": {
    "compact": 0.85,
    "comfortable": 1,
    "roomy": 1.15
   },
   "default": "comfortable",
   "label": "Spacing"
  },
  "--fm-radius-scale": {
   "options": {
    "square": 0.25,
    "rounded": 1,
    "extra-round": 1.5
   },
   "default": "rounded",
   "label": "Corners"
  },
  "accent": {
   "swatches": [
    "#f5a524",
    "#2f7de1",
    "#1f8a5b",
    "#c2410c",
    "#7c3aed"
   ],
   "applies_to": [
    "--fm-action",
    "--fm-action-hover",
    "--fm-accent-soft",
    "--fm-chip-selected-bg"
   ],
   "rule": "Only swatches that keep every PAIRS check ≥ min in the active preset are offered; ink is chosen automatically (dark or white) for ≥4.5:1."
  },
  "reduce_motion": {
   "type": "boolean",
   "default": "follows OS prefers-reduced-motion"
  },
  "preset": {
   "options": [
    "card-hub",
    "high-contrast",
    "dark",
    "compact"
   ],
   "default": "card-hub"
  }
 },
 "theme_schema": "https://fedm8.com/design/003/theme.schema.json",
 "contrast": {
  "card-hub": [
   {
    "fg": "--fm-ink",
    "bg": "--fm-bg",
    "fg_hex": "#14284b",
    "bg_hex": "#f3f1ec",
    "ratio": 12.97,
    "min": 4.5,
    "pass": true,
    "use": "Body on ground"
   },
   {
    "fg": "--fm-ink",
    "bg": "--fm-surface",
    "fg_hex": "#14284b",
    "bg_hex": "#ffffff",
    "ratio": 14.64,
    "min": 4.5,
    "pass": true,
    "use": "Body on card"
   },
   {
    "fg": "--fm-ink-2",
    "bg": "--fm-surface",
    "fg_hex": "#3d4f6e",
    "bg_hex": "#ffffff",
    "ratio": 8.26,
    "min": 4.5,
    "pass": true,
    "use": "Secondary on card"
   },
   {
    "fg": "--fm-ink-3",
    "bg": "--fm-bg",
    "fg_hex": "#4a5b78",
    "bg_hex": "#f3f1ec",
    "ratio": 6.08,
    "min": 4.5,
    "pass": true,
    "use": "Meta on ground"
   },
   {
    "fg": "--fm-ink-3",
    "bg": "--fm-surface",
    "fg_hex": "#4a5b78",
    "bg_hex": "#ffffff",
    "ratio": 6.87,
    "min": 4.5,
    "pass": true,
    "use": "Meta on card"
   },
   {
    "fg": "--fm-ink-3",
    "bg": "--fm-surface-alt",
    "fg_hex": "#4a5b78",
    "bg_hex": "#fffaf0",
    "ratio": 6.6,
    "min": 4.5,
    "pass": true,
    "use": "Meta on highlight card"
   },
   {
    "fg": "--fm-nav-active-ink",
    "bg": "--fm-nav-active-bg",
    "fg_hex": "#ffffff",
    "bg_hex": "#14284b",
    "ratio": 14.64,
    "min": 4.5,
    "pass": true,
    "use": "Active nav"
   },
   {
    "fg": "--fm-selected-ink",
    "bg": "--fm-selected-bg",
    "fg_hex": "#ffffff",
    "bg_hex": "#14284b",
    "ratio": 14.64,
    "min": 4.5,
    "pass": true,
    "use": "Selected card text"
   },
   {
    "fg": "--fm-row-selected-ink",
    "bg": "--fm-row-selected-bg",
    "fg_hex": "#14284b",
    "bg_hex": "#fdf3dc",
    "ratio": 13.26,
    "min": 4.5,
    "pass": true,
    "use": "Selected row"
   },
   {
    "fg": "--fm-action-ink",
    "bg": "--fm-action",
    "fg_hex": "#14284b",
    "bg_hex": "#f5a524",
    "ratio": 7.17,
    "min": 4.5,
    "pass": true,
    "use": "Primary button"
   },
   {
    "fg": "--fm-accent-ink",
    "bg": "--fm-accent-soft",
    "fg_hex": "#8a4b00",
    "bg_hex": "#fde3b0",
    "ratio": 5.44,
    "min": 4.5,
    "pass": true,
    "use": "Badge"
   },
   {
    "fg": "--fm-chip-selected-ink",
    "bg": "--fm-chip-selected-bg",
    "fg_hex": "#14284b",
    "bg_hex": "#fde3b0",
    "ratio": 11.7,
    "min": 4.5,
    "pass": true,
    "use": "Selected chip"
   },
   {
    "fg": "--fm-success",
    "bg": "--fm-success-soft",
    "fg_hex": "#1f6b4a",
    "bg_hex": "#e3f1ea",
    "ratio": 5.53,
    "min": 4.5,
    "pass": true,
    "use": "Success text"
   },
   {
    "fg": "--fm-success",
    "bg": "--fm-surface",
    "fg_hex": "#1f6b4a",
    "bg_hex": "#ffffff",
    "ratio": 6.44,
    "min": 4.5,
    "pass": true,
    "use": "Success on card"
   },
   {
    "fg": "--fm-pro",
    "bg": "--fm-pro-soft",
    "fg_hex": "#5b3a8a",
    "bg_hex": "#efe8f7",
    "ratio": 7.26,
    "min": 4.5,
    "pass": true,
    "use": "Pro tag"
   },
   {
    "fg": "--fm-urgent",
    "bg": "--fm-urgent-soft",
    "fg_hex": "#a3262a",
    "bg_hex": "#fbe3e3",
    "ratio": 6.0,
    "min": 4.5,
    "pass": true,
    "use": "Urgent chip"
   },
   {
    "fg": "--fm-urgent",
    "bg": "--fm-surface",
    "fg_hex": "#a3262a",
    "bg_hex": "#ffffff",
    "ratio": 7.32,
    "min": 4.5,
    "pass": true,
    "use": "Urgent on card"
   },
   {
    "fg": "--fm-warn",
    "bg": "--fm-warn-soft",
    "fg_hex": "#8a4b00",
    "bg_hex": "#fde3b0",
    "ratio": 5.44,
    "min": 4.5,
    "pass": true,
    "use": "Warn chip"
   },
   {
    "fg": "--fm-ink",
    "bg": "--fm-info-soft",
    "fg_hex": "#14284b",
    "bg_hex": "#eaf0fb",
    "ratio": 12.79,
    "min": 4.5,
    "pass": true,
    "use": "Type badge"
   },
   {
    "fg": "--fm-line-strong",
    "bg": "--fm-surface",
    "fg_hex": "#8b8676",
    "bg_hex": "#ffffff",
    "ratio": 3.64,
    "min": 3.0,
    "pass": true,
    "use": "Non-text edges"
   },
   {
    "fg": "--fm-focus-ring",
    "bg": "--fm-surface",
    "fg_hex": "#1d4ed8",
    "bg_hex": "#ffffff",
    "ratio": 6.7,
    "min": 3.0,
    "pass": true,
    "use": "Focus ring"
   },
   {
    "fg": "--fm-success",
    "bg": "--fm-bg",
    "fg_hex": "#1f6b4a",
    "bg_hex": "#f3f1ec",
    "ratio": 5.71,
    "min": 3.0,
    "pass": true,
    "use": "Online dot / toggle ON"
   }
  ],
  "high-contrast": [
   {
    "fg": "--fm-ink",
    "bg": "--fm-bg",
    "fg_hex": "#000814",
    "bg_hex": "#ffffff",
    "ratio": 20.1,
    "min": 4.5,
    "pass": true,
    "use": "Body on ground"
   },
   {
    "fg": "--fm-ink",
    "bg": "--fm-surface",
    "fg_hex": "#000814",
    "bg_hex": "#ffffff",
    "ratio": 20.1,
    "min": 4.5,
    "pass": true,
    "use": "Body on card"
   },
   {
    "fg": "--fm-ink-2",
    "bg": "--fm-surface",
    "fg_hex": "#1b2a44",
    "bg_hex": "#ffffff",
    "ratio": 14.37,
    "min": 4.5,
    "pass": true,
    "use": "Secondary on card"
   },
   {
    "fg": "--fm-ink-3",
    "bg": "--fm-bg",
    "fg_hex": "#26334d",
    "bg_hex": "#ffffff",
    "ratio": 12.63,
    "min": 4.5,
    "pass": true,
    "use": "Meta on ground"
   },
   {
    "fg": "--fm-ink-3",
    "bg": "--fm-surface",
    "fg_hex": "#26334d",
    "bg_hex": "#ffffff",
    "ratio": 12.63,
    "min": 4.5,
    "pass": true,
    "use": "Meta on card"
   },
   {
    "fg": "--fm-ink-3",
    "bg": "--fm-surface-alt",
    "fg_hex": "#26334d",
    "bg_hex": "#fff6e0",
    "ratio": 11.73,
    "min": 4.5,
    "pass": true,
    "use": "Meta on highlight card"
   },
   {
    "fg": "--fm-nav-active-ink",
    "bg": "--fm-nav-active-bg",
    "fg_hex": "#ffffff",
    "bg_hex": "#000814",
    "ratio": 20.1,
    "min": 4.5,
    "pass": true,
    "use": "Active nav"
   },
   {
    "fg": "--fm-selected-ink",
    "bg": "--fm-selected-bg",
    "fg_hex": "#ffffff",
    "bg_hex": "#000814",
    "ratio": 20.1,
    "min": 4.5,
    "pass": true,
    "use": "Selected card text"
   },
   {
    "fg": "--fm-row-selected-ink",
    "bg": "--fm-row-selected-bg",
    "fg_hex": "#000814",
    "bg_hex": "#ffe7a8",
    "ratio": 16.51,
    "min": 4.5,
    "pass": true,
    "use": "Selected row"
   },
   {
    "fg": "--fm-action-ink",
    "bg": "--fm-action",
    "fg_hex": "#000814",
    "bg_hex": "#ffb020",
    "ratio": 10.99,
    "min": 4.5,
    "pass": true,
    "use": "Primary button"
   },
   {
    "fg": "--fm-accent-ink",
    "bg": "--fm-accent-soft",
    "fg_hex": "#5a3000",
    "bg_hex": "#ffe7a8",
    "ratio": 9.29,
    "min": 4.5,
    "pass": true,
    "use": "Badge"
   },
   {
    "fg": "--fm-chip-selected-ink",
    "bg": "--fm-chip-selected-bg",
    "fg_hex": "#000814",
    "bg_hex": "#ffe7a8",
    "ratio": 16.51,
    "min": 4.5,
    "pass": true,
    "use": "Selected chip"
   },
   {
    "fg": "--fm-success",
    "bg": "--fm-success-soft",
    "fg_hex": "#0b4d31",
    "bg_hex": "#d4f0e2",
    "ratio": 8.19,
    "min": 4.5,
    "pass": true,
    "use": "Success text"
   },
   {
    "fg": "--fm-success",
    "bg": "--fm-surface",
    "fg_hex": "#0b4d31",
    "bg_hex": "#ffffff",
    "ratio": 9.91,
    "min": 4.5,
    "pass": true,
    "use": "Success on card"
   },
   {
    "fg": "--fm-pro",
    "bg": "--fm-pro-soft",
    "fg_hex": "#3f1f70",
    "bg_hex": "#ebe0fa",
    "ratio": 10.1,
    "min": 4.5,
    "pass": true,
    "use": "Pro tag"
   },
   {
    "fg": "--fm-urgent",
    "bg": "--fm-urgent-soft",
    "fg_hex": "#7a0a0f",
    "bg_hex": "#ffd9d9",
    "ratio": 8.62,
    "min": 4.5,
    "pass": true,
    "use": "Urgent chip"
   },
   {
    "fg": "--fm-urgent",
    "bg": "--fm-surface",
    "fg_hex": "#7a0a0f",
    "bg_hex": "#ffffff",
    "ratio": 11.18,
    "min": 4.5,
    "pass": true,
    "use": "Urgent on card"
   },
   {
    "fg": "--fm-warn",
    "bg": "--fm-warn-soft",
    "fg_hex": "#5a3000",
    "bg_hex": "#ffe7a8",
    "ratio": 9.29,
    "min": 4.5,
    "pass": true,
    "use": "Warn chip"
   },
   {
    "fg": "--fm-ink",
    "bg": "--fm-info-soft",
    "fg_hex": "#000814",
    "bg_hex": "#dde8ff",
    "ratio": 16.33,
    "min": 4.5,
    "pass": true,
    "use": "Type badge"
   },
   {
    "fg": "--fm-line-strong",
    "bg": "--fm-surface",
    "fg_hex": "#3a4152",
    "bg_hex": "#ffffff",
    "ratio": 10.2,
    "min": 3.0,
    "pass": true,
    "use": "Non-text edges"
   },
   {
    "fg": "--fm-focus-ring",
    "bg": "--fm-surface",
    "fg_hex": "#0033cc",
    "bg_hex": "#ffffff",
    "ratio": 8.95,
    "min": 3.0,
    "pass": true,
    "use": "Focus ring"
   },
   {
    "fg": "--fm-success",
    "bg": "--fm-bg",
    "fg_hex": "#0b4d31",
    "bg_hex": "#ffffff",
    "ratio": 9.91,
    "min": 3.0,
    "pass": true,
    "use": "Online dot / toggle ON"
   }
  ],
  "dark": [
   {
    "fg": "--fm-ink",
    "bg": "--fm-bg",
    "fg_hex": "#eef2f8",
    "bg_hex": "#0f1726",
    "ratio": 15.96,
    "min": 4.5,
    "pass": true,
    "use": "Body on ground"
   },
   {
    "fg": "--fm-ink",
    "bg": "--fm-surface",
    "fg_hex": "#eef2f8",
    "bg_hex": "#172238",
    "ratio": 14.14,
    "min": 4.5,
    "pass": true,
    "use": "Body on card"
   },
   {
    "fg": "--fm-ink-2",
    "bg": "--fm-surface",
    "fg_hex": "#c6d0e2",
    "bg_hex": "#172238",
    "ratio": 10.23,
    "min": 4.5,
    "pass": true,
    "use": "Secondary on card"
   },
   {
    "fg": "--fm-ink-3",
    "bg": "--fm-bg",
    "fg_hex": "#a9b6cd",
    "bg_hex": "#0f1726",
    "ratio": 8.76,
    "min": 4.5,
    "pass": true,
    "use": "Meta on ground"
   },
   {
    "fg": "--fm-ink-3",
    "bg": "--fm-surface",
    "fg_hex": "#a9b6cd",
    "bg_hex": "#172238",
    "ratio": 7.76,
    "min": 4.5,
    "pass": true,
    "use": "Meta on card"
   },
   {
    "fg": "--fm-ink-3",
    "bg": "--fm-surface-alt",
    "fg_hex": "#a9b6cd",
    "bg_hex": "#1d2a44",
    "ratio": 6.99,
    "min": 4.5,
    "pass": true,
    "use": "Meta on highlight card"
   },
   {
    "fg": "--fm-nav-active-ink",
    "bg": "--fm-nav-active-bg",
    "fg_hex": "#14284b",
    "bg_hex": "#e8edf6",
    "ratio": 12.46,
    "min": 4.5,
    "pass": true,
    "use": "Active nav"
   },
   {
    "fg": "--fm-selected-ink",
    "bg": "--fm-selected-bg",
    "fg_hex": "#14284b",
    "bg_hex": "#e8edf6",
    "ratio": 12.46,
    "min": 4.5,
    "pass": true,
    "use": "Selected card text"
   },
   {
    "fg": "--fm-row-selected-ink",
    "bg": "--fm-row-selected-bg",
    "fg_hex": "#eef2f8",
    "bg_hex": "#26365a",
    "ratio": 10.63,
    "min": 4.5,
    "pass": true,
    "use": "Selected row"
   },
   {
    "fg": "--fm-action-ink",
    "bg": "--fm-action",
    "fg_hex": "#14284b",
    "bg_hex": "#f5a524",
    "ratio": 7.17,
    "min": 4.5,
    "pass": true,
    "use": "Primary button"
   },
   {
    "fg": "--fm-accent-ink",
    "bg": "--fm-accent-soft",
    "fg_hex": "#f5c46b",
    "bg_hex": "#3a2e16",
    "ratio": 8.21,
    "min": 4.5,
    "pass": true,
    "use": "Badge"
   },
   {
    "fg": "--fm-chip-selected-ink",
    "bg": "--fm-chip-selected-bg",
    "fg_hex": "#f5c46b",
    "bg_hex": "#3a2e16",
    "ratio": 8.21,
    "min": 4.5,
    "pass": true,
    "use": "Selected chip"
   },
   {
    "fg": "--fm-success",
    "bg": "--fm-success-soft",
    "fg_hex": "#6fd3a3",
    "bg_hex": "#163328",
    "ratio": 7.49,
    "min": 4.5,
    "pass": true,
    "use": "Success text"
   },
   {
    "fg": "--fm-success",
    "bg": "--fm-surface",
    "fg_hex": "#6fd3a3",
    "bg_hex": "#172238",
    "ratio": 8.71,
    "min": 4.5,
    "pass": true,
    "use": "Success on card"
   },
   {
    "fg": "--fm-pro",
    "bg": "--fm-pro-soft",
    "fg_hex": "#c7a8f0",
    "bg_hex": "#2a2140",
    "ratio": 7.4,
    "min": 4.5,
    "pass": true,
    "use": "Pro tag"
   },
   {
    "fg": "--fm-urgent",
    "bg": "--fm-urgent-soft",
    "fg_hex": "#ff9a9a",
    "bg_hex": "#3a1d22",
    "ratio": 7.5,
    "min": 4.5,
    "pass": true,
    "use": "Urgent chip"
   },
   {
    "fg": "--fm-urgent",
    "bg": "--fm-surface",
    "fg_hex": "#ff9a9a",
    "bg_hex": "#172238",
    "ratio": 7.82,
    "min": 4.5,
    "pass": true,
    "use": "Urgent on card"
   },
   {
    "fg": "--fm-warn",
    "bg": "--fm-warn-soft",
    "fg_hex": "#f5c46b",
    "bg_hex": "#3a2e16",
    "ratio": 8.21,
    "min": 4.5,
    "pass": true,
    "use": "Warn chip"
   },
   {
    "fg": "--fm-ink",
    "bg": "--fm-info-soft",
    "fg_hex": "#eef2f8",
    "bg_hex": "#1f2d4a",
    "ratio": 12.2,
    "min": 4.5,
    "pass": true,
    "use": "Type badge"
   },
   {
    "fg": "--fm-line-strong",
    "bg": "--fm-surface",
    "fg_hex": "#7085ad",
    "bg_hex": "#172238",
    "ratio": 4.27,
    "min": 3.0,
    "pass": true,
    "use": "Non-text edges"
   },
   {
    "fg": "--fm-focus-ring",
    "bg": "--fm-surface",
    "fg_hex": "#8fb4ff",
    "bg_hex": "#172238",
    "ratio": 7.67,
    "min": 3.0,
    "pass": true,
    "use": "Focus ring"
   },
   {
    "fg": "--fm-success",
    "bg": "--fm-bg",
    "fg_hex": "#6fd3a3",
    "bg_hex": "#0f1726",
    "ratio": 9.84,
    "min": 3.0,
    "pass": true,
    "use": "Online dot / toggle ON"
   }
  ]
 },
 "avatar_palette": [
  "#14284b",
  "#1f6b4a",
  "#5b3a8a",
  "#8a4b00",
  "#a3262a",
  "#2f5d8a"
 ],
 "approved": "2026-11-02"
}

design-003.css

/* FedM8 design 003 — generated from tokens.json. Do not edit by hand. */
:root{
  --fm-font-sans:"Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --fm-font-mono:"JetBrains Mono", ui-monospace, monospace;
  --fm-text-xs:calc(12px * var(--fm-type-scale));
  --fm-text-sm:calc(13px * var(--fm-type-scale));
  --fm-text-md:calc(15px * var(--fm-type-scale));
  --fm-text-lg:calc(18px * var(--fm-type-scale));
  --fm-text-xl:calc(22px * var(--fm-type-scale));
  --fm-text-2xl:calc(28px * var(--fm-type-scale));
  --fm-text-3xl:calc(34px * var(--fm-type-scale));
  --fm-text-stat:calc(40px * var(--fm-type-scale));
  --fm-weight-regular:400;
  --fm-weight-medium:500;
  --fm-weight-semibold:600;
  --fm-weight-bold:700;
  --fm-space-1:calc(4px * var(--fm-density));
  --fm-space-2:calc(8px * var(--fm-density));
  --fm-space-3:calc(12px * var(--fm-density));
  --fm-space-4:calc(16px * var(--fm-density));
  --fm-space-5:calc(20px * var(--fm-density));
  --fm-space-6:calc(24px * var(--fm-density));
  --fm-space-7:calc(32px * var(--fm-density));
  --fm-space-8:calc(48px * var(--fm-density));
  --fm-radius-sm:calc(8px * var(--fm-radius-scale));
  --fm-radius-md:calc(12px * var(--fm-radius-scale));
  --fm-radius-lg:calc(16px * var(--fm-radius-scale));
  --fm-radius-xl:calc(20px * var(--fm-radius-scale));
  --fm-radius-pill:999px;
  --fm-border-width:1px;
  --fm-shadow-1:0 1px 2px rgba(20,40,75,.06);
  --fm-shadow-2:0 6px 20px rgba(20,40,75,.10);
  --fm-motion-fast:120ms;
  --fm-motion-base:200ms;
  --fm-ease:cubic-bezier(.2,.7,.2,1);
  --fm-page-max:1440px;
  --fm-gutter:24px;
  --fm-gutter-mobile:16px;
  --fm-rail-left:320px;
  --fm-rail-right:320px;
  --fm-tap-min:44px;
  --fm-header-h:64px;
  --fm-density:1;
  --fm-type-scale:1;
  --fm-radius-scale:1;
  --fm-bg:#f3f1ec;
  --fm-surface:#ffffff;
  --fm-surface-alt:#fffaf0;
  --fm-line:#e0dccf;
  --fm-line-strong:#8b8676;
  --fm-ink:#14284b;
  --fm-ink-2:#3d4f6e;
  --fm-ink-3:#4a5b78;
  --fm-on-dark:#ffffff;
  --fm-nav-active-bg:#14284b;
  --fm-nav-active-ink:#ffffff;
  --fm-selected-bg:#14284b;
  --fm-selected-ink:#ffffff;
  --fm-row-selected-bg:#fdf3dc;
  --fm-row-selected-ink:#14284b;
  --fm-action:#f5a524;
  --fm-action-ink:#14284b;
  --fm-action-hover:#e0951a;
  --fm-accent-soft:#fde3b0;
  --fm-accent-ink:#8a4b00;
  --fm-chip-selected-bg:#fde3b0;
  --fm-chip-selected-ink:#14284b;
  --fm-success:#1f6b4a;
  --fm-success-soft:#e3f1ea;
  --fm-pro:#5b3a8a;
  --fm-pro-soft:#efe8f7;
  --fm-urgent:#a3262a;
  --fm-urgent-soft:#fbe3e3;
  --fm-warn:#8a4b00;
  --fm-warn-soft:#fde3b0;
  --fm-info-soft:#eaf0fb;
  --fm-focus-ring:#1d4ed8;
}
:root[data-theme="card-hub"]{--fm-bg:#f3f1ec;--fm-surface:#ffffff;--fm-surface-alt:#fffaf0;--fm-line:#e0dccf;--fm-line-strong:#8b8676;--fm-ink:#14284b;--fm-ink-2:#3d4f6e;--fm-ink-3:#4a5b78;--fm-on-dark:#ffffff;--fm-nav-active-bg:#14284b;--fm-nav-active-ink:#ffffff;--fm-selected-bg:#14284b;--fm-selected-ink:#ffffff;--fm-row-selected-bg:#fdf3dc;--fm-row-selected-ink:#14284b;--fm-action:#f5a524;--fm-action-ink:#14284b;--fm-action-hover:#e0951a;--fm-accent-soft:#fde3b0;--fm-accent-ink:#8a4b00;--fm-chip-selected-bg:#fde3b0;--fm-chip-selected-ink:#14284b;--fm-success:#1f6b4a;--fm-success-soft:#e3f1ea;--fm-pro:#5b3a8a;--fm-pro-soft:#efe8f7;--fm-urgent:#a3262a;--fm-urgent-soft:#fbe3e3;--fm-warn:#8a4b00;--fm-warn-soft:#fde3b0;--fm-info-soft:#eaf0fb;--fm-focus-ring:#1d4ed8;--fm-density:1;--fm-type-scale:1;--fm-radius-scale:1;}
:root[data-theme="high-contrast"]{--fm-bg:#ffffff;--fm-surface:#ffffff;--fm-surface-alt:#fff6e0;--fm-line:#5b6475;--fm-line-strong:#3a4152;--fm-ink:#000814;--fm-ink-2:#1b2a44;--fm-ink-3:#26334d;--fm-on-dark:#ffffff;--fm-nav-active-bg:#000814;--fm-nav-active-ink:#ffffff;--fm-selected-bg:#000814;--fm-selected-ink:#ffffff;--fm-row-selected-bg:#ffe7a8;--fm-row-selected-ink:#000814;--fm-action:#ffb020;--fm-action-ink:#000814;--fm-action-hover:#e89a00;--fm-accent-soft:#ffe7a8;--fm-accent-ink:#5a3000;--fm-chip-selected-bg:#ffe7a8;--fm-chip-selected-ink:#000814;--fm-success:#0b4d31;--fm-success-soft:#d4f0e2;--fm-pro:#3f1f70;--fm-pro-soft:#ebe0fa;--fm-urgent:#7a0a0f;--fm-urgent-soft:#ffd9d9;--fm-warn:#5a3000;--fm-warn-soft:#ffe7a8;--fm-info-soft:#dde8ff;--fm-focus-ring:#0033cc;--fm-density:1;--fm-type-scale:1.1;--fm-radius-scale:1;}
:root[data-theme="dark"]{--fm-bg:#0f1726;--fm-surface:#172238;--fm-surface-alt:#1d2a44;--fm-line:#2c3c5c;--fm-line-strong:#7085ad;--fm-ink:#eef2f8;--fm-ink-2:#c6d0e2;--fm-ink-3:#a9b6cd;--fm-on-dark:#0f1726;--fm-nav-active-bg:#e8edf6;--fm-nav-active-ink:#14284b;--fm-selected-bg:#e8edf6;--fm-selected-ink:#14284b;--fm-row-selected-bg:#26365a;--fm-row-selected-ink:#eef2f8;--fm-action:#f5a524;--fm-action-ink:#14284b;--fm-action-hover:#ffb948;--fm-accent-soft:#3a2e16;--fm-accent-ink:#f5c46b;--fm-chip-selected-bg:#3a2e16;--fm-chip-selected-ink:#f5c46b;--fm-success:#6fd3a3;--fm-success-soft:#163328;--fm-pro:#c7a8f0;--fm-pro-soft:#2a2140;--fm-urgent:#ff9a9a;--fm-urgent-soft:#3a1d22;--fm-warn:#f5c46b;--fm-warn-soft:#3a2e16;--fm-info-soft:#1f2d4a;--fm-focus-ring:#8fb4ff;--fm-density:1;--fm-type-scale:1;--fm-radius-scale:1;}
:root[data-density="compact"]{--fm-density:.85}:root[data-density="roomy"]{--fm-density:1.15}
:root[data-corners="square"]{--fm-radius-scale:.25}:root[data-corners="extra-round"]{--fm-radius-scale:1.5}
@media (prefers-reduced-motion: reduce){:root{--fm-motion-fast:0ms;--fm-motion-base:0ms}}:root[data-reduce-motion="true"]{--fm-motion-fast:0ms;--fm-motion-base:0ms}
/* catalog shared bridges */ :root{--pc-surface:var(--fm-surface);--pc-ink:var(--fm-ink);--pc-muted:var(--fm-ink-3);--pc-line:var(--fm-line);--pc-accent:var(--fm-action);--pc-accent-ink:var(--fm-action-ink);--pc-soft:var(--fm-surface-alt);--pc-radius:var(--fm-radius-md);--pc-font:var(--fm-font-sans);--plan-p-ink:var(--fm-pro);--plan-p-bg:var(--fm-pro-soft);--plan-p-line:var(--fm-pro);--plan-b-ink:var(--fm-accent-ink);--plan-b-bg:var(--fm-accent-soft);--plan-b-line:var(--fm-accent-ink)}

All files

source-*.html files are the original page source, served as text. Open the original page for the live, interactive version.