# Method 8 β€” Design System > πŸ“ **Manifest of this folder** > > | Path | Purpose | > |---|---| > | `index.html` | Visual index β€” every token + kit + screen as a clickable card | > | `README.md` | This file β€” voice, color rules, spacing, iconography | > | `SKILL.md` | Skill prompt β€” invoke when designing for Method 8 | > | `colors_and_type.css` | All design tokens β€” colors, type, spacing, radii, shadows | > | `assets/` | Logos, AI marks, avatars, decorative SVGs lifted from the live app | > | `preview/` | Small token & component preview cards (used by the Design System tab) | > | `tokens/` | Full-page token references (Colors, Type, Spacing, Brand, Components) | > | `kits/` | UI-kit HTML files per surface β€” workspace, modules, runtime, auth, email | > | `prototypes/` | Interactive prototypes (sign-in flow) | > | `screenshots/` | Reference screenshots from the live product | This project is the design-system source of truth for **Method 8**, the assessment and compliance platform built by Onwards Analytics. Use it as the starting point for every new design artifact: pull tokens from `colors_and_type.css`, lift patterns from the UI kits in `kits/`, and use the live screen recreations in `reference-screens/` as ground truth for layout density and rhythm. > **Open `index.html`** for the visual index. Every card on that page is a > standalone HTML file you can open, copy from, or hand to a developer. --- ## What is Method 8? Method 8 is a **modular assessment platform** for governance, risk, compliance, and operational maturity work. It's used by consultants and internal program owners to: - Build **Programmes** β€” long-running engagements that bundle assessments, modules, and actions for a single client or business unit. - Run **Assessments** against frameworks (ISO 9001, ISO 27001, NIST, SOC 2, internal maturity models). Each assessment is a tree of question modules scored by respondents and reviewed by program owners. - Capture **Modules** β€” reusable question sets, scoring rubrics, and evidence requirements that plug into assessments. - Drive **Actions** β€” remediation tasks created from assessment findings, with priority, owner, status, tags, and due dates. - Get **AI assistance** β€” clarification prompts, suggested actions, and "Ask Method 8" answers grounded in the active assessment. - Watch the **Activity** feed β€” every status change, tag, comment, and AI interaction in chronological order. The product wraps these in a single web app aimed at consultants who run multiple client programs in parallel. Visual register: clean, dense, professional β€” closer to Linear/Untitled UI than to a flashy SaaS marketing site. ## Audience for this design system - **Designers** working on new screens, flows, or marketing surfaces. - **Engineers** scaffolding components or paying down inconsistency. - **Product** writing copy, choosing iconography, sizing modal density. - **Founders & sales** building decks, one-pagers, and proposal templates that match the product's visual register. When in doubt: **match the live product**. The screenshot in `assets/CreatorDashboard.png` is the canonical reference; deviations should be deliberate, not accidental. --- ## File map | Path | What's in it | | --- | --- | | `index.html` | Visual index β€” every token + UI kit + screen as a clickable card | | `colors_and_type.css` | All design tokens β€” colors, type, spacing, radius, shadow | | `tokens/*.html` | Token preview cards (Type, Colors, Spacing, Components) | | `kits/*.html` | UI kits per surface β€” dashboard, assessments, programs, AI, marketing | | `reference-screens/*.html` | Recreated production screens to use as layout reference | | `assets/` | Logos, icons, decorative SVGs lifted from the live app | | `SKILL.md` | Skill prompt β€” invoke when designing for Method 8 | Every UI kit and reference screen is a self-contained HTML file. Open one, inspect it, copy what you need into your design β€” they're scaffolds, not a component library you import. --- ## Content fundamentals The product is for working professionals running real engagements. Copy is **plain, direct, and operational**. Avoid marketing fluff inside the app. ### Voice & tone - **Direct over clever.** "Start the assessment" not "Let's get going!" - **Concrete nouns over abstractions.** "12 modules" not "Several items". - **Active voice for actions.** "Andrew added a tag" not "A tag was added by Andrew". - **Sentence case everywhere** β€” including buttons and column headers. The only ALL CAPS surface is small-print eyebrow labels (`MENU`, `RECENT ACTIVITY`). - **No exclamation marks** in the product UI. The single approved exception is the dashboard greeting (`Welcome, Andrew Matt πŸ‘‹`) β€” that one wave emoji is the only emoji in the product. ### Microcopy patterns | Surface | Pattern | Example | | --- | --- | --- | | Page H1 | Action or noun, not a question | `Dashboard`, `Assessments`, `New programme` | | Page subtitle | One sentence, ends with no period if it's a description | `Overview of your data about your company` | | Empty state | Imperative + one-line reason | `No assessments yet. Create one to get started.` | | Primary CTA | Verb + object, ≀ 3 words | `Create`, `Add module`, `Start assessment` | | Confirmation | State the consequence, then confirm | `This will delete 4 modules. Delete programme?` | | Status pill | Single word or short phrase, lowercase content | `In progress`, `Completed`, `Draft` | | Activity line | ` in ` | `Savannah added a tag in ISO 9001 Quality Management Assessment` | ### Numbers, dates, units - Cardinal numbers in stats render at `display-sm` weight and never get suffixes ("k", "m") on dashboards β€” show full numbers (`560`, `1,000`). - Dates render as relative time inside activity feeds (`5 min ago`, `12 min ago`) and as `MMM D, YYYY` in tables and detail panes. - Currency only appears in billing surfaces; format `$1,250.00 USD` with the ISO code suffixed for international engagements. ### Naming the product surfaces Always use these exact names β€” they match the database and the URL structure. Don't invent synonyms. - **Programmes** (note British spelling β€” matches the schema) - **Assessments** - **Modules** - **Actions** - **Activity** ### Vocabulary to avoid | Don't say | Say instead | | --- | --- | | Project | Programme | | Survey, questionnaire | Assessment | | Task | Action | | User | Member, respondent, owner (whichever role applies) | | Dashboard widgets | Stat cards, activity feed | --- ## Visual foundations ### The system in one paragraph Method 8 is a **light-mode-first, slate-on-white** product with **soft pastel icon hues** as the only chromatic accent. The header uses **deep slate (`#354152`)** for primary buttons, the sidebar uses **pale blue (`#d1e9ff`)** for the active nav state, and stat cards each carry a **single tinted icon chip** in their own hue (sky blue, violet, fuchsia, orange) β€” and that's *all* the color in the product. Everything else is white surfaces, slate-700 type, and gray-200 hairline borders. ### Color usage rules 1. **One brand button per screen.** The dark slate `--button-primary-bg` is reserved for the page's single most important action. Secondary actions are always the white-with-gray-border `--button-secondary-bg`. 2. **Status colors are semantic, not decorative.** Don't reach for `--color-success-500` to brighten a heading. Reserve red/amber/green for status pills, validation messages, and chart segments. 3. **Stat-card icon hues are paired by meaning.** - πŸ“˜ Programs β†’ `--color-icon-bookopen-*` (sky) - πŸ“„ Assessments β†’ `--color-icon-file-*` (violet) - πŸ“Ί Modules β†’ `--color-icon-presentation-*` (fuchsia) - 🎯 Actions β†’ `--color-icon-target-*` (orange) Don't swap them between domains; the muscle memory is part of the system. 4. **Backgrounds are stratified white β†’ gray-50 β†’ gray-100.** The page is `gray-50`, cards sit on `white`, hover/disabled states drop to `gray-100`. Never use `gray-200+` as a fill. 5. **Charts use the blue ramp.** Single-series line charts use `--color-blue-500` with a 0β†’8% blue fill below the line. Multi-series uses `blue-500`, `success-500`, `warning-500`, `error-500` in that priority order. ### Typography **Inter, weights 400/500/600.** Bold (700) is reserved for stat numbers only. - Page title β€” `30px / 38px / 600` - Card title β€” `18px / 28px / 600` - Body β€” `14px / 20px / 400` - Stat β€” `30px / 38px / 600`, slate-700 (not pure black) - Eyebrow β€” `11px / 16px / 600`, uppercase, 0.5px letter spacing, gray-500 Inter's stylistic alternates `cv02 cv03 cv04 cv11` are enabled globally β€” keeps the lowercase `l` distinguishable from `1` and the `i` dotted properly at small sizes. Always include `font-feature-settings: "cv02","cv03","cv04","cv11"` in any new font stack you compose. ### Spacing & rhythm The scale is **4px-based, named not numeric**. Use the token names (`--spacing-md`, `--spacing-3xl`) instead of raw px so density tweaks ripple through the system. - **Card padding** β€” `--spacing-3xl` (24px) on all four sides - **Card β†’ card gap** β€” `--spacing-2xl` (20px) - **Section β†’ section gap** β€” `--spacing-5xl` (40px) - **Inline icon β†’ label** β€” `--spacing-md` (8px) - **Form field gap** β€” `--spacing-xl` (16px) vertical, `--spacing-lg` (12px) between label and input - **Sidebar nav item padding** β€” 10px vertical, 12px horizontal, 8px gap to icon ### Shape language - **Radii** β€” `8px` is the default for buttons, inputs, cards, modals. `10px` for nav items. `12px` for stat-card icon chips. `9999px` (`--radius-pill`) for filter chips, status pills, and avatar badges. **Never** mix custom radii on a single screen. - **Borders** β€” 1px `--border-secondary` (gray-200) hairlines on every card, table row, and input. Avoid 2px borders β€” they read heavy. - **Shadows** β€” `--shadow-xs` for raised inputs, `--shadow-sm` for floating cards (popovers, dropdowns), `--shadow-lg` for modals. Dashboard stat cards are **borderless and shadowless** β€” they sit flat on the page background. ### Iconography - **Library:** [Hugeicons Pro](https://hugeicons.com/) β€” the production app uses `@hugeicons-pro/core-stroke-rounded` as the canonical set, with duotone/bulk/solid variants available for emphasis. 1.5–1.75px stroke, rounded line caps, 20Γ—20 default size in nav and 16Γ—16 inside stat rows. Lucide is an acceptable open-source stand-in for mocks when the Pro license isn't available β€” match stroke weight and corner radius. - **Icon color = text color of its sibling.** Nav icons inherit `--nav-item-icon-fg`; inline action icons inherit the surrounding text's `currentColor`. - **Stat-card icons** are the only icons that get a colored circular chip (40Γ—40, `--radius-xl`, paired hue from Β§Color Β§3). - **Avatars** are circular, never square. 40px in dashboards, 32px inline, 24px in dense tables. - **No emoji** in product chrome. The dashboard greeting wave (πŸ‘‹) is the single exception and is hard-coded into the dashboard template. ### Imagery & illustration The product itself is **photo-light**. Illustrations come from two sources: 1. **The Method 8 mark** (`assets/logo-mini.svg`) β€” used as a watermark on marketing surfaces and as the favicon. The infinity ribbon is sky-blue (`#7CD4FD`/`#36BFFA`); never recolor it. 2. **Lifted Untitled-UI illustrations** (`assets/document.svg`, `assets/decorative.svg`) β€” only allowed on empty states, marketing pages, and onboarding. Never inside a working data view. User avatars are real photos when available, otherwise an initial-letter fallback on a gray-100 chip with gray-700 type. ### Layout - **App shell:** 240px fixed sidebar, fluid main column, no max-width on the main content (it scales with the viewport up to ~1600px before content becomes uncomfortable). Header is 64px tall, full-bleed. - **Two-column dashboard:** main content takes the available width with a fixed 320px right rail for the activity feed. The rail collapses below 1280px viewport width. - **Forms:** two-column grids on settings and programme-creation, single column for confirmation and create flows under 720px. --- ## How to use this system 1. **Designing a new screen?** Open `index.html` and find the closest existing surface. Open that file, copy its scaffold, and edit. Don't re-derive the header/sidebar from scratch β€” the spacing is fragile. 2. **Designing a new component?** Pull the closest analog from the kits, then layer in tokens from `colors_and_type.css`. If a token doesn't exist for what you need, propose adding one in a comment β€” don't hardcode hex. 3. **Building a deck or one-pager?** Use the same Inter + slate-on-white register. The marketing kit (`kits/marketing.html`) shows the type scale at hero sizes and how the logo + decorative grid behave. 4. **Need a screen recording or animated demo?** Use the same color tokens. Motion is subtle: 200ms ease-out for hover state changes, 300ms ease-out for modal enter/exit, never bounce or spring on functional UI. If you can't answer a design question from this README, the screenshots, or the live product, ask. Don't invent.