Meetless Design System — Skill
This skill directs how to generate surfaces with the Meetless design system (a
Linear-derived dark-neutral web prototype language). Read DESIGN.md first, then bind the
package as described here.
What is inside
tokens.css — verbatim token contract (paste first).colors_and_type.css — self-contained colors + typography (Inter Variable /
Berkeley Mono).DESIGN.md — visual contract: theme, color, type, spacing, layout, components, motion,
voice, anti-patterns.ui_kits/app/ — applied interface kit (library, detail, recording, sources, pairing).preview/ — review cards (color, typography, spacing, components, brand, applied
surface).assets/, fonts/ — preserved marks and font pairing.examples/ — the full preserved source prototype.
Source context
Derived from Open Design project Web Prototype
(ae91ec19-7755-45b8-bda5-5d0fe64227dd, kind prototype, wireframe fidelity), bound
system linear-app. The copied evidence (prototype + product spec) describes
Meetless — a local-first meeting recorder owning local audio, private transcription,
meeting-scoped Ask, and cited playback. See context/source-context.md and
context/provenance.md.
Product context for visual application
The items below explain the prototype. They are not product authority and must
not be copied as policy. Use docs/product/ for
accepted Meetless behavior.
- Local-first. The host owns the MP3 on this computer; capture uploads nothing until the
one-time cloud-consent path is taken. Never imply server-side files.
- One meeting owner. A solo local workflow, not a team project surface.
- Ask is meeting-scoped. Answers ground only on the open meeting's transcript; progress
and failures read in the answer location — never as a global spinner or detached toast.
- Citations are trusted. Activating a claim reveals the validated transcript segment
and a Play from here action. Never attach a model-invented timestamp as identity.
- State-as-language. Use Saving audio, Transcribing, Ready, Needs attention —
never raw lifecycle values (
PROCESSING, DRAFT) or host/provider/daemon/request counts.
- Offline is distinct, not empty. Keep known rows visible and disabled while companion
HTTPS and validation recover — never show an empty list.
- One recording action. There is no separate "Create meeting" + "Start recording" pair.
When to use
- Any web surface for a personal, local-first meeting product: recording, transcript,
grounded Q&A, playback, companion pairing.
- Any prototype that should speak the calm, dense Linear-family dark-neutral language
with a single restrained indigo action.
How to use
- Read
DESIGN.md from this package.
- Start generated HTML with a
<style> whose first block is a verbatim copy of
tokens.css. Do not re-author the palette.
- Link
colors_and_type.css for production type/color classes, or copy its rules in.
- Clone component shapes from
ui_kits/app/ before building new ones.
- Set up layout by the three tiers (desktop ≥1120 / tablet 640–1119 / phone ≤639).
Design-system highlights
- One indigo action (
#5e6ad2) at most twice per screen; neutral dark canvas
(#08090a) with hairline chrome.
- Type & interaction: Inter Variable display+body (weight cap 590), Berkeley Mono for
timecodes, IDs and metadata.
- Layout: dense 4px unit, 9–12px rows, route-independent recording strip.
- Recovery voice: state-as-language (Saving audio, Ready, Needs attention), never
host-offline as an empty list.
Anti-patterns to avoid
- Two primary CTAs for one action in a viewport; gradient wash on canvas.
- A separate "Create meeting" entry alongside Record meeting.
- Host/daemon/provider/model/request counts leaked into user content.
- Full model inventory as primary buttons.
- Source readiness stated as fact unless runtime-backed (Proposed tag).
- Host-offline rendered as an empty meeting list.
- Raw lifecycle statuses instead of task language.
- Model-invented timestamps presented as citation identity.
Reduced motion
Support @media (prefers-reduced-motion: reduce) — kill pulse, pulse-work, spin
loops and button press transforms.
Verification
Before delivery, run the package audit:
"$OD_NODE_BIN" "$OD_BIN" tools connectors design-system-package-audit --path . --fail-on-warnings
Fix every error and actionable warning; keep README/DESIGN/preview manifest/ui_kits kit
synchronized with the final file structure.
1---2name: meetless-design-system3description: Reusable Open Design package for a calm dark-neutral, Linear-family web UI for local-first meeting recording, transcription, grounded Q&A, and companion pairing. Sources tokens from tokens.css / colors_and_type.css.4---56# Meetless Design System — Skill78This skill directs how to generate surfaces with the **Meetless** design system (a9Linear-derived dark-neutral web prototype language). Read `DESIGN.md` first, then bind the10package as described here.1112## What is inside1314- **`tokens.css`** — verbatim token contract (paste first).15- **`colors_and_type.css`** — self-contained colors + typography (Inter Variable /16 Berkeley Mono).17- **`DESIGN.md`** — visual contract: theme, color, type, spacing, layout, components, motion,18 voice, anti-patterns.19- **`ui_kits/app/`** — applied interface kit (library, detail, recording, sources, pairing).20- **`preview/`** — review cards (color, typography, spacing, components, brand, applied21 surface).22- **`assets/`, `fonts/`** — preserved marks and font pairing.23- **`examples/`** — the full preserved source prototype.2425## Source context2627Derived from Open Design project **Web Prototype**28(`ae91ec19-7755-45b8-bda5-5d0fe64227dd`, kind `prototype`, wireframe fidelity), bound29system **`linear-app`**. The copied evidence (prototype + product spec) describes30**Meetless** — a local-first meeting recorder owning local audio, private transcription,31meeting-scoped Ask, and cited playback. See `context/source-context.md` and32`context/provenance.md`.3334### Product context for visual application3536The items below explain the prototype. They are not product authority and must37not be copied as policy. Use [`docs/product/`](../docs/product/README.md) for38accepted Meetless behavior.3940- **Local-first.** The host owns the MP3 on this computer; capture uploads nothing until the41 one-time cloud-consent path is taken. Never imply server-side files.42- **One meeting owner.** A solo local workflow, not a team project surface.43- **Ask is meeting-scoped.** Answers ground only on the open meeting's transcript; progress44 and failures read in the answer location — never as a global spinner or detached toast.45- **Citations are trusted.** Activating a claim reveals the *validated* transcript segment46 and a **Play from here** action. Never attach a model-invented timestamp as identity.47- **State-as-language.** Use *Saving audio*, *Transcribing*, *Ready*, *Needs attention* —48 never raw lifecycle values (`PROCESSING`, `DRAFT`) or host/provider/daemon/request counts.49- **Offline is distinct, not empty.** Keep known rows visible and disabled while companion50 HTTPS and validation recover — never show an empty list.51- **One recording action.** There is no separate "Create meeting" + "Start recording" pair.5253## When to use5455- Any web surface for a personal, local-first meeting product: recording, transcript,56 grounded Q&A, playback, companion pairing.57- Any prototype that should speak the calm, dense Linear-family dark-neutral language58 with a single restrained indigo action.5960## How to use61621. Read `DESIGN.md` from this package.632. Start generated HTML with a `<style>` whose first block is a verbatim copy of64 `tokens.css`. Do not re-author the palette.653. Link `colors_and_type.css` for production type/color classes, or copy its rules in.664. Clone component shapes from `ui_kits/app/` before building new ones.675. Set up layout by the three tiers (desktop ≥1120 / tablet 640–1119 / phone ≤639).6869## Design-system highlights7071- **One indigo action** (`#5e6ad2`) at most twice per screen; neutral dark canvas72 (`#08090a`) with hairline chrome.73- **Type & interaction:** Inter Variable display+body (weight cap 590), Berkeley Mono for74timecodes, IDs and metadata.75- **Layout:** dense 4px unit, 9–12px rows, route-independent recording strip.76- **Recovery voice:** state-as-language (Saving audio, Ready, Needs attention), never77host-offline as an empty list.7879## Anti-patterns to avoid8081- Two primary CTAs for one action in a viewport; gradient wash on canvas.82- A separate "Create meeting" entry alongside Record meeting.83- Host/daemon/provider/model/request counts leaked into user content.84- Full model inventory as primary buttons.85- Source readiness stated as fact unless runtime-backed (**Proposed** tag).86- Host-offline rendered as an empty meeting list.87- Raw lifecycle statuses instead of task language.88- Model-invented timestamps presented as citation identity.8990## Reduced motion9192Support `@media (prefers-reduced-motion: reduce)` — kill `pulse`, `pulse-work`, `spin`93loops and button press transforms.9495## Verification9697Before delivery, run the package audit:9899```bash100"$OD_NODE_BIN" "$OD_BIN" tools connectors design-system-package-audit --path . --fail-on-warnings101```102103Fix every error and actionable warning; keep README/DESIGN/preview manifest/ui_kits kit104synchronized with the final file structure.
hoangnb24