oh-my-design-cli 1.6.7 → 1.7.1

package/web/references/loom/DESIGN.md

@@ -0,0 +1,396 @@
+---
+id: loom
+name: Loom
+country: US
+category: productivity
+homepage: "https://www.loom.com"
+primary_color: "#1868db"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=loom.com&sz=128"
+verified: "2026-06-08"
+added: "2026-06-08"
+omd: "0.1"
+tokens:
+  source: live-extract
+  extracted: "2026-06-08"
+  components_harvested: true
+  note: "primary = live Loom blue #1868db (pill CTA, white text); brand accents (coral #ff613d, purple #bf63f3, deep purple #48245d) appear in marketing illustration gradients"
+  colors:
+    primary: "#1868db"
+    primary-hover: "#0052cc"
+    brand: "#1868db"
+    canvas: "#ffffff"
+    surface-blue: "#e9f2fe"
+    foreground: "#101214"
+    body: "#292a2e"
+    muted: "#7d818a"
+    on-primary: "#ffffff"
+    ink: "#101214"
+    accent-coral: "#ff613d"
+    accent-purple: "#bf63f3"
+    accent-deep: "#48245d"
+  typography:
+    family: { display: "Charlie Display", text: "Charlie Text" }
+    display-hero: { size: 63, weight: 700, lineHeight: 1.03, tracking: 0, use: "Hero headline, bold confident statement" }
+    display-lg:   { size: 44, weight: 700, lineHeight: 1.14, tracking: 0, use: "Section headlines" }
+    heading:      { size: 33, weight: 700, lineHeight: 1.27, tracking: 0, use: "Sub-section / card headings" }
+    lead:         { size: 27, weight: 400, lineHeight: 1.52, use: "Lead paragraph, intro copy" }
+    body:         { size: 16, weight: 400, lineHeight: 1.5, use: "Standard reading text, nav links" }
+    button:       { size: 16, weight: 700, lineHeight: 1.0, use: "Primary button label" }
+    button-light: { size: 16, weight: 400, lineHeight: 1.0, use: "Header CTA label" }
+  spacing: { xs: 4, sm: 8, md: 16, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
+  rounded: { sm: 8, md: 16, lg: 24, full: 9999 }
+  shadow:
+    soft: "rgba(0,0,0,0.03) 0px 4px 6.4px 0px"
+    standard: "rgba(0,0,0,0.05) 0px 3px 9.6px 0px"
+  components:
+    button-primary: { type: button, bg: "#1868db", fg: "#ffffff", radius: "9999px", padding: "16px 23px", height: "58px", font: "16px / 700", hover: "bg #0052cc", use: "Primary CTA (Get Loom for free, Download now, Learn more)" }
+    button-light: { type: button, bg: "#e9f2fe", fg: "#101214", radius: "9999px", padding: "16px 23px", height: "58px", font: "16px / 700", use: "Secondary actions (Contact Sales, Install Chrome Extension, See all use cases)" }
+    button-dark: { type: button, bg: "#101214", fg: "#ffffff", radius: "9999px", padding: "16px 23px", height: "58px", font: "16px / 700", use: "Alternate emphasis CTA (Learn more, Explore our blog)" }
+    icon-button: { type: button, bg: "#ffffff", fg: "#292a2e", radius: "9999px", height: "56px", shadow: "rgba(0,0,0,0.03) 0px 4px 6.4px 0px, rgba(0,0,0,0.05) 0px 3px 9.6px 0px", use: "Testimonial carousel previous/next controls" }
+    footer: { type: card, bg: "#e9f2fe", fg: "#292a2e", use: "Footer background, links hover toward #1868db" }
+---
+
+# Design System Inspiration of Loom
+
+## 1. Visual Theme & Atmosphere
+
+Loom's website projects the friendly confidence of a consumer-grade tool that quietly does serious work. The canvas is pure white (`#ffffff`) with near-black ink (`#101214`) for headlines and a softer charcoal (`#292a2e`) for body copy, while a single saturated blue (`#1868db`) carries every primary action. This is not the cold corporate blue of legacy enterprise software; it is a bright, approachable cobalt that reads as energetic and trustworthy. The overall impression is of a product that wants you to press record immediately — clean, bold, and unintimidating.
+
+The defining typographic gesture is the **Charlie** type family — `Charlie Display` for headlines and `Charlie Text` for body — a humanist sans with warm, rounded terminals. Headlines run heavy at weight 700 and large sizes (the hero lands around 63px), giving the page a punchy editorial loudness that is the opposite of the whisper-weight restraint seen in fintech systems. Where Stripe murmurs, Loom announces. The hero copy ("One video is worth a thousand words") is set in this bold display face with tight line-height (~1.03), creating dense, declarative blocks that feel like a magazine cover.
+
+Loom's other signature is its commitment to the **full-pill geometry**. Every button — primary, secondary, dark, and the circular carousel controls — uses a `9999px` border-radius. Nothing on the page is sharp-cornered; the rounding signals softness and consumer-friendliness. Surfaces lift off the page with gentle, low-opacity multi-layer shadows (`rgba(0,0,0,0.03)` and `rgba(0,0,0,0.05)` at small blur), so depth feels airy rather than dramatic. Marketing illustrations introduce playful gradient accents — coral (`#ff613d`), bright purple (`#bf63f3`), and a deep aubergine (`#48245d`) — that keep the otherwise blue-and-white palette from feeling sterile.
+
+**Key Characteristics:**
+- Charlie Display / Charlie Text — a warm humanist sans, bold at display sizes
+- Weight 700 headlines as the signature — punchy, declarative, consumer-confident
+- Single dominant action color: Loom blue (`#1868db`) on pure white
+- Full-pill geometry (`9999px`) on every button and control — nothing sharp
+- Near-black ink headings (`#101214`) over softer charcoal body (`#292a2e`)
+- Soft, low-opacity multi-layer shadows — airy elevation, never heavy
+- Light-blue surface tint (`#e9f2fe`) for secondary buttons and footer
+- Playful coral / purple gradient accents (`#ff613d`, `#bf63f3`, `#48245d`) in illustrations
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Loom Blue** (`#1868db`): Primary brand color, CTA backgrounds, primary links, interactive highlights. A bright, saturated cobalt that anchors every action on the page.
+- **Ink** (`#101214`): Primary heading color and dark-button fill. A near-black with a faint blue undertone — warmer and softer than pure `#000000`.
+- **Pure White** (`#ffffff`): Page background, card surfaces, primary-button text, circular control fill.
+
+### Secondary & Surface
+- **Surface Blue** (`#e9f2fe`): Light-blue tint used for secondary "light" buttons and the footer background. Reads as a calm, on-brand neutral.
+- **Body Charcoal** (`#292a2e`): Standard body copy, nav links, secondary labels. Softer than the ink headings for comfortable reading.
+- **Muted Gray** (`#7d818a`): De-emphasized text, captions, metadata, supporting labels.
+
+### Interactive
+- **Loom Blue** (`#1868db`): Primary buttons, primary links, active states.
+- **Primary Hover** (`#0052cc`): Deeper blue for hover/pressed states on primary links and buttons.
+
+### Accent (illustration & marketing)
+- **Coral** (`#ff613d`): Warm orange-red used in illustration gradients and decorative highlights.
+- **Bright Purple** (`#bf63f3`): Vivid violet for gradient decoration and playful accents.
+- **Deep Aubergine** (`#48245d`): Dark purple anchoring gradient illustrations and immersive accent zones.
+
+### Neutral Scale
+- **Ink** (`#101214`): Headings, strong labels.
+- **Body** (`#292a2e`): Paragraph text, navigation.
+- **Muted** (`#7d818a`): Secondary/captions.
+- **On-Primary** (`#ffffff`): Text and icons on Loom blue or dark fills.
+
+## 3. Typography Rules
+
+### Font Family
+- **Display**: `Charlie Display`, with fallback `sans-serif` — used for all headlines.
+- **Text**: `Charlie Text`, with fallback `sans-serif` — used for body, leads, nav, and UI.
+- Charlie is a warm humanist sans with rounded terminals; Loom pairs the heavier Display cut for headings with the more readable Text cut for running copy.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Notes |
+|------|------|------|--------|-------------|-------|
+| Display Hero | Charlie Display | 63px (3.95rem) | 700 | 1.03 (tight) | Hero headline, max size, declarative |
+| Display Large | Charlie Display | 44px (2.75rem) | 700 | 1.14 | Major section headlines |
+| Heading | Charlie Display | 33px (2.03rem) | 700 | 1.27 | Sub-section and card headings |
+| Lead | Charlie Text | 27px (1.67rem) | 400 | 1.52 | Lead paragraph, intro copy |
+| Body | Charlie Text | 16px (1.00rem) | 400 | 1.50 | Standard reading text, nav links |
+| Button | Charlie Text | 16px (1.00rem) | 700 | 1.00 (tight) | Primary/dark button label |
+| Button Light | Charlie Text | 16px (1.00rem) | 400 | 1.00 (tight) | Header CTA, lighter weight |
+
+### Principles
+- **Bold display weight as signature**: Weight 700 on headlines is Loom's loudest typographic choice. The page is meant to feel energetic and immediate, not restrained.
+- **Two cuts, two jobs**: `Charlie Display` carries headings (heavy, tight); `Charlie Text` carries everything readable (regular, comfortable 1.5 line-height).
+- **Tight headlines, generous body**: Display line-heights compress toward 1.03–1.27 for dense impact; body and lead relax to 1.5–1.52 for readability.
+- **Minimal tracking**: Letter-spacing stays `normal` across the system — the warmth comes from the typeface, not from tracking manipulation.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (Loom Blue)**
+- Background: `#1868db`
+- Text: `#ffffff`
+- Radius: `9999px`
+- Padding: 16px 23px
+- Height: 58px
+- Font: 16px Charlie Text weight 700
+- Hover: deepens toward `#0052cc`
+- Use: Primary CTA ("Get Loom for free", "Download now", "Learn more")
+
+**Primary Compact**
+- Background: `#1868db`
+- Text: `#ffffff`
+- Radius: `9999px`
+- Padding: 8px 16px
+- Height: 48px
+- Font: 16px Charlie Text weight 400
+- Use: Header CTA ("Get Loom for free" in nav)
+
+**Light (Surface Blue)**
+- Background: `#e9f2fe`
+- Text: `#101214`
+- Radius: `9999px`
+- Padding: 16px 23px
+- Height: 58px
+- Font: 16px Charlie Text weight 700
+- Use: Secondary actions ("Contact Sales", "Install Chrome Extension", "See all use cases")
+
+**Dark (Ink)**
+- Background: `#101214`
+- Text: `#ffffff`
+- Radius: `9999px`
+- Padding: 16px 23px
+- Height: 58px
+- Font: 16px Charlie Text weight 700
+- Use: Alternate emphasis CTA ("Learn more", "Explore our blog")
+
+### Icon Buttons / Carousel Controls
+- Background: `#ffffff`
+- Text: `#292a2e`
+- Radius: `9999px` (circular)
+- Height: 56px
+- Shadow: `rgba(0,0,0,0.03) 0px 4px 6.4px 0px, rgba(0,0,0,0.05) 0px 3px 9.6px 0px`
+- Use: Testimonial carousel previous/next controls
+
+### Cards & Containers
+- Background: `#ffffff`
+- Radius: 16px (md), 24px (lg) for larger feature cards
+- Shadow (soft): `rgba(0,0,0,0.03) 0px 4px 6.4px 0px`
+- Shadow (standard): `rgba(0,0,0,0.05) 0px 3px 9.6px 0px`
+- Use: Feature cards, testimonial cards, media previews
+
+### Navigation
+- Background: white, clean horizontal nav
+- Links: Charlie Text 16px weight 400, `#292a2e`
+- Primary CTA: Loom blue pill ("Get Loom for free") right-aligned
+- Secondary CTA: light-blue pill ("Contact Sales")
+
+### Footer
+- Background: `#e9f2fe`
+- Text: `#292a2e`
+- Links: `#292a2e`, hover toward `#1868db`
+
+---
+
+**Verified:** 2026-06-08 (omd:add-reference — Tier 1 live inspect)
+**Tier 1 sources:** https://www.loom.com (live DOM computed-style inspect — hero, nav, CTA buttons, carousel controls, footer; playwright getComputedStyle)
+**Tier 2 sources:** getdesign.md/loom — not authoritative; refero — directory only
+**Conflicts unresolved:** none
+**`.verification.md`:** `web/references/loom/.verification.md`
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 4px, 8px, 16px, 24px, 32px, 48px, 64px
+- Button padding follows an 8px rhythm (8px/16px compact, 16px/23px large)
+
+### Grid & Container
+- Centered single-column hero with large bold headline and a pair of pill CTAs
+- Feature sections alternate text + media in 2-column splits
+- Testimonial carousel with circular white controls
+- Generous full-width sections with light-blue tinted zones for rhythm
+
+### Whitespace Philosophy
+- **Open and breathable**: Loom leans on white space to keep the bold headlines from feeling heavy. The 1.5 body line-height reinforces an unhurried reading pace.
+- **Section tinting**: Light-blue (`#e9f2fe`) zones and the footer break the white expanse without introducing hard color, creating a soft light/lighter cadence.
+- **Pill rhythm**: Repeated full-radius buttons create a consistent rounded visual motif down the page.
+
+### Border Radius Scale
+- Small (8px): subtle rounding on small surfaces
+- Medium (16px): standard cards
+- Large (24px): feature cards, media frames
+- Full (9999px): every button and circular control
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Page background, inline text |
+| Soft (Level 1) | `rgba(0,0,0,0.03) 0px 4px 6.4px 0px` | Subtle card lift |
+| Standard (Level 2) | `rgba(0,0,0,0.05) 0px 3px 9.6px 0px` | Cards, controls, media previews |
+| Control (Level 2) | `rgba(0,0,0,0.03) 0px 4px 6.4px, rgba(0,0,0,0.05) 0px 3px 9.6px` | Circular carousel buttons |
+
+**Shadow Philosophy**: Loom's elevation is deliberately gentle. Shadow opacities stay between 0.03 and 0.05 with small blur radii, so cards and controls feel like they hover a few millimeters off the page rather than casting deep dramatic shadows. The neutral (un-tinted) black shadow keeps the focus on the bold typography and bright blue actions — depth is a supporting role, never the star.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Loom blue (`#1868db`) as the single primary action color
+- Set headlines in Charlie Display at weight 700 — bold and declarative
+- Make every button and control a full pill (`9999px`)
+- Use near-black ink (`#101214`) for headings and softer charcoal (`#292a2e`) for body
+- Keep elevation soft and low-opacity (0.03–0.05)
+- Use the light-blue surface (`#e9f2fe`) for secondary buttons and footer
+- Let body text breathe at 1.5 line-height
+- Reserve coral/purple accents for illustrations and gradients only
+
+### Don't
+- Use sharp or small-radius corners on buttons — Loom is fully pill-shaped
+- Set headlines in a light weight — bold 700 is the brand voice
+- Introduce a second competing primary color — blue owns all actions
+- Use heavy, high-opacity, or tinted dramatic shadows
+- Use coral/purple accents for buttons or links — they are decorative only
+- Use pure black (`#000000`) for headings — ink `#101214` is warmer
+- Crowd body copy with tight line-height — keep 1.5 for readability
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <640px | Single column, hero compresses, stacked CTAs |
+| Tablet | 640-1024px | 2-column splits collapse, moderate padding |
+| Desktop | 1024-1280px | Full alternating text+media layout |
+| Large Desktop | >1280px | Centered content with generous margins |
+
+### Touch Targets
+- Buttons run 48–58px tall — comfortably tappable pills
+- Circular carousel controls at 56px diameter
+- Nav links with generous spacing
+
+### Collapsing Strategy
+- Hero: ~63px display compresses to ~36–40px on mobile, weight 700 maintained
+- Navigation: horizontal links + CTA pills collapse to a menu toggle
+- Feature splits: side-by-side text+media stack vertically
+- CTA pairs stack full-width on mobile
+- Section spacing compresses on smaller viewports
+
+### Image Behavior
+- Product/video preview frames keep rounded corners (16–24px) at all sizes
+- Marketing illustrations with coral/purple gradients simplify on mobile
+- Media maintains soft shadow elevation across breakpoints
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA: Loom Blue (`#1868db`)
+- CTA Hover: Deeper Blue (`#0052cc`)
+- Background: Pure White (`#ffffff`)
+- Heading text: Ink (`#101214`)
+- Body text: Charcoal (`#292a2e`)
+- Muted text: Gray (`#7d818a`)
+- Secondary surface / footer: Surface Blue (`#e9f2fe`)
+- Dark button: Ink (`#101214`)
+- Accent decorative: Coral (`#ff613d`), Purple (`#bf63f3`), Deep Aubergine (`#48245d`)
+
+### Example Component Prompts
+- "Create a hero on white. Headline at 63px Charlie Display weight 700, line-height 1.03, color #101214. Lead at 27px Charlie Text weight 400, line-height 1.52, color #101214. Primary CTA pill (#1868db, 9999px radius, 16px 23px padding, white text weight 700) plus a light pill (#e9f2fe bg, #101214 text, 9999px)."
+- "Design a feature card: white background, 16px radius, shadow rgba(0,0,0,0.05) 0px 3px 9.6px. Heading 33px Charlie Display weight 700, #101214. Body 16px Charlie Text weight 400, line-height 1.5, #292a2e."
+- "Build a dark CTA pill: #101214 background, white text, 9999px radius, 16px 23px padding, 16px Charlie Text weight 700."
+- "Create circular carousel controls: white #ffffff fill, 56px diameter, 9999px radius, shadow rgba(0,0,0,0.03) 0px 4px 6.4px, rgba(0,0,0,0.05) 0px 3px 9.6px."
+- "Design a footer: #e9f2fe background, #292a2e text, links hovering toward #1868db."
+
+### Iteration Guide
+1. Loom blue (`#1868db`) is the only primary action color — never split actions across colors
+2. All buttons and controls are full pills (`9999px`) — no exceptions
+3. Headlines use Charlie Display weight 700; body uses Charlie Text weight 400 at 1.5 line-height
+4. Heading color is ink `#101214`, body is charcoal `#292a2e`, muted is `#7d818a`
+5. Keep shadows soft (0.03–0.05 opacity, small blur) — airy not heavy
+6. Light-blue `#e9f2fe` is the secondary-surface and footer tint
+7. Reserve coral/purple gradients for illustrations only — never for UI controls
+
+---
+
+## 10. Voice & Tone
+
+Loom's voice is warm, direct, and human — the tone of a helpful colleague who would rather show you than tell you. The product itself is about replacing long written messages with a quick video, and the copy mirrors that: short, plain, action-first. The hero line *"One video is worth a thousand words"* sets the register — a familiar idiom repurposed with a knowing wink, confident without being grandiose. CTAs are friendly imperatives ("Get Loom for free", "Download now"), never gated or salesy on the basics.
+
+| Context | Tone |
+|---|---|
+| Hero headlines | Bold, idiomatic, confident. Conversational, never corporate. |
+| Product descriptions | One concrete benefit per line. "Record your screen, voice, and face." |
+| CTAs | Friendly imperatives. "Get Loom for free", "Download now", "Learn more". |
+| Onboarding / empty states | Encouraging, low-pressure. Invites the first recording. |
+| Enterprise / sales | Slightly more formal but still warm; "Contact Sales" not "Request a demo gate". |
+| Support / errors | Plain-language, reassuring, solution-first. |
+
+**Forbidden phrases.** "Revolutionary", "game-changer", "supercharge", "synergy", "cutting-edge". Jargon-heavy enterprise-speak. Exclamation-stacked hype. Anything that makes recording a video feel like a chore.
+
+## 11. Brand Narrative
+
+Loom was founded in **2015** (originally as *Opentest*, then *OpenVid*, before becoming Loom) by **Joe Thomas**, **Shahed Khan**, and **Vinay Hiremath**. The founders were building a usability-testing product and discovered that the most valuable thing they had made was the simple screen-and-camera recorder they used to share feedback. They pivoted to that recorder — the insight being that asynchronous video could replace a huge volume of meetings and long written messages.
+
+That founding insight — *async video as a faster, more human way to communicate at work* — shaped everything: a one-click recorder, instant shareable links, and a friendly consumer-grade interface that lowers the barrier to pressing record. Loom grew rapidly through bottom-up adoption inside companies and was **acquired by Atlassian in 2023** for roughly $975M, positioning it alongside Atlassian's suite of team-collaboration tools.
+
+What Loom embraces: speed-to-record, warmth, and the idea that showing beats telling. What it rejects: the friction of meetings, the cold formality of legacy enterprise screen-share tools, and any UX that makes capturing a quick video feel heavyweight. The bold blue-and-white visual identity is the design expression of that ethos — bright, immediate, and unintimidating.
+
+## 12. Principles
+
+1. **Show, don't tell.** *UI implication:* Lead with video previews and live demos; let the product demonstrate itself rather than describing it in walls of text.
+2. **One click to record.** *UI implication:* The primary action (Loom blue pill) is unmistakable and always within reach; never bury the record/start CTA.
+3. **Warm over corporate.** *UI implication:* Rounded full-pill geometry, friendly Charlie typeface, and conversational copy keep the tool approachable, not enterprise-cold.
+4. **Async beats meetings.** *UI implication:* Flows favor self-serve, low-friction starts ("Get Loom for free") over gated sales funnels.
+5. **Clarity through restraint.** *UI implication:* A single dominant action color and soft elevation keep attention on content; decorative color stays in illustrations.
+
+## 13. Personas
+
+*Personas below are fictional archetypes informed by publicly observable Loom user segments (remote-team managers, engineers, customer-facing teams, educators), not individual people.*
+
+**Priya Nair, 34, Austin.** Engineering manager at a remote-first startup. Records a 3-minute Loom instead of writing a long PR review or scheduling another sync. Values the one-click recorder and instant share link; would abandon any tool that made capturing a quick walkthrough feel like setup work.
+
+**Marcus Bell, 41, Manchester.** Customer success lead. Sends personalized Loom videos to onboard new accounts. Cares that recipients can watch without an account and that the playback page looks polished and on-brand.
+
+**Sofia Lindqvist, 28, Stockholm.** Product designer. Uses Loom to narrate design walkthroughs for async feedback across time zones. Appreciates the warm, unintimidating interface that makes hitting record feel casual rather than performative.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no recordings yet)** | White canvas, friendly headline in ink (`#101214`), one Loom blue pill CTA inviting the first recording. Encouraging, low-pressure. |
+| **Empty (no search results)** | Muted gray (`#7d818a`) single line explaining nothing matched, with filters visible to adjust. No dead-end illustration. |
+| **Loading (library first paint)** | Skeleton blocks at final dimensions in surface-blue (`#e9f2fe`) tint with gentle shimmer. |
+| **Loading (video processing)** | Inline progress indicator in Loom blue; previous content stays visible where possible. |
+| **Error (upload/record failed)** | Inline message in plain language, solution-first, with a clear retry pill. Never a generic "Something went wrong". |
+| **Error (form validation)** | Field-level message describing what is invalid and what would be valid. |
+| **Success (recording shared)** | Brief confirmation with the shareable link surfaced immediately for one-tap copy. |
+| **Success (action saved)** | Short auto-dismiss toast, sentence case, no exclamation hype. |
+| **Skeleton** | Surface-blue blocks at final dimensions; soft shimmer consistent with the gentle shadow system. |
+| **Disabled** | Reduced opacity on surface and label together; blue actions fade rather than switching to gray, preserving brand read. |
+
+## 15. Motion & Easing
+
+**Durations**:
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | State commits, selection, focus rings |
+| `motion-fast` | 120ms | Hover, button press, focus |
+| `motion-standard` | 220ms | Dropdowns, carousel slides, card reveals |
+| `motion-slow` | 320ms | Page-level transitions, hero reveals |
+
+**Easings**:
+
+| Token | Curve | Use |
+|---|---|---|
+| `ease-enter` | `cubic-bezier(0.2, 0.6, 0.25, 1)` | Arriving — panels, dropdowns, cards |
+| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals |
+| `ease-standard` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | Two-way transitions |
+
+**Signature motions.**
+
+1. **Carousel slide.** Testimonial carousel advances with `motion-standard / ease-standard`, a smooth horizontal glide paired with the soft-shadowed circular controls.
+2. **Hover lift.** Buttons and cards lift subtly on hover via `motion-fast`, deepening the soft shadow slightly — gentle, never bouncy.
+3. **CTA feedback.** Primary pills respond to press with a quick `motion-fast` color deepen toward `#0052cc`.
+4. **Reduce motion.** Under `prefers-reduced-motion: reduce`, all `motion-*` tokens collapse to `motion-instant`; carousels advance instantly and hover lifts are removed. The interface stays fully functional.

package/web/references/lovable/DESIGN.md

@@ -10,6 +10,44 @@ logo:
   slug: "https://lovable.dev/favicon-192x192.png"
 verified: "2026-05-15"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  components_harvested: true
+  colors:
+    primary: "#ff6f61"
+    cream: "#f7f4ed"
+    charcoal: "#1c1c1c"
+    off-white: "#fcfbf8"
+    muted: "#5f5f5d"
+    border: "#eceae4"
+    ring: "#3b82f6"
+    on-primary: "#fcfbf8"
+  typography:
+    family: { sans: "Camera Plain Variable", mono: "ui-monospace" }
+    display-hero: { size: 60, weight: 600, lineHeight: 1.10, tracking: -1.5, use: "Maximum impact, editorial" }
+    display-alt:  { size: 60, weight: 480, lineHeight: 1.00, use: "Lighter hero variant" }
+    section:      { size: 48, weight: 600, lineHeight: 1.00, tracking: -1.2, use: "Feature section titles" }
+    subheading:   { size: 36, weight: 600, lineHeight: 1.10, tracking: -0.9, use: "Sub-sections" }
+    card-title:   { size: 20, weight: 400, lineHeight: 1.25, use: "Card headings" }
+    body-large:   { size: 18, weight: 400, lineHeight: 1.38, use: "Introductions" }
+    body:         { size: 16, weight: 400, lineHeight: 1.50, use: "Standard reading text" }
+    button:       { size: 16, weight: 400, lineHeight: 1.50, use: "Button labels" }
+    button-small: { size: 14, weight: 400, lineHeight: 1.50, use: "Compact buttons" }
+    caption:      { size: 14, weight: 400, lineHeight: 1.50, use: "Metadata, small text" }
+  spacing: { xs: 8, sm: 10, md: 12, base: 16, lg: 24, xl: 32, xxl: 56, section: 80 }
+  rounded: { sm: 4, md: 6, lg: 16, full: 9999 }
+  shadow:
+    inset: "rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px"
+    focus: "rgba(0,0,0,0.1) 0px 4px 12px"
+  components:
+    button-primary: { type: button, bg: "#1c1c1c", fg: "#fcfbf8", radius: 6, padding: "8px 16px", use: "Primary CTA with inset shadow" }
+    button-ghost: { type: button, bg: "transparent", fg: "#1c1c1c", radius: 6, padding: "8px 16px", use: "Secondary actions, 1px interactive border" }
+    button-cream: { type: button, bg: "#f7f4ed", fg: "#1c1c1c", radius: 6, padding: "8px 16px", use: "Tertiary/toolbar actions" }
+    button-pill: { type: button, bg: "#f7f4ed", fg: "#1c1c1c", radius: 9999, use: "Icon button, plan mode toggle, voice record" }
+    card-standard: { type: card, bg: "#f7f4ed", radius: 12, use: "Standard card, 1px border, no shadow" }
+    input-default: { type: input, bg: "#f7f4ed", fg: "#1c1c1c", radius: 6, use: "Form field, 1px border, ring-blue focus" }
+    badge-pill: { type: badge, bg: "#f7f4ed", fg: "#1c1c1c", radius: 9999, use: "Suggestion pill with eceae4 border" }
 ---
 
 # Design System Inspiration of Lovable

package/web/references/lunit/DESIGN.md

@@ -10,25 +10,35 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=lunit.io&sz=256"
 verified: "2026-05-14"
 omd: "0.1"
-
-## 16. Do's and Don'ts
-
-### Do
-- Set every section, card, image, input, and footer to `border-radius: 0` and round only the single primary CTA pill to `100px`, honoring the binary radius thesis
-- Pair ClashGrotesk for headings and Lexend for body, keeping both at LIGHT weights — H1 at 78px/84px weight 400, body at 18.4px weight 300 — so authority reads through size and air, not heft
-- Fill the primary marketing CTA as a black pill (`#000000` background, `#ffffff` label) and withhold the signature blue `#1032cf` from primary actions
-- Set body ink in warm-cool gunmetal `#232f32` and hero H1 in near-black `#151515`, never pure `#000`, for standing copy
-- Build depth through full-bleed band switching (white canvas → black band → off-white footer `#eff0f4`) with `box-shadow: none` everywhere
-- Reserve the signature blue `#1032cf` (bright sibling `#2a4eef`) for system, cookie, hover, and dark-band moments, and use AOS scroll-reveal fades as the only motion
-
-### Don't
-- Apply mid-range radii like 4px, 6px, 8px, 12px, or 16px anywhere, or round cards, images, or surfaces that are not the primary action
-- Use the saturated signature blue `#1032cf` on the primary CTA — the brand-action color is black, and blue is deliberately withheld
-- Reach for bold or semibold typographic weights to add confidence; LIGHT weight is the rule across all heading levels
-- Add drop shadows or floating card elevation — depth comes from band switching, not floating objects
-- Add hero video autoplay, parallax, or animated stat counters on the `10,000+` band; keep motion to low-amplitude AOS fades
-- Introduce stock smiling-team photography, hex-mesh/circuit-board/neural-net cliché, multi-accent green-blue-orange palettes, exclamation marks, or emotive verbs like 'transform lives'
-
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    hero-ink: "#151515"
+    body-ink: "#232f32"
+    signature-blue: "#1032cf"
+    bright-blue: "#2a4eef"
+    canvas: "#ffffff"
+    dark: "#000000"
+    footer: "#eff0f4"
+    on-dark: "#ffffff"
+  typography:
+    family: { sans: "Lexend", mono: "Lexend" }
+    hero:    { size: 78, weight: 400, lineHeight: 1.08, use: "Hero H1, ClashGrotesk" }
+    section: { size: 52, weight: 400, lineHeight: 1.10, use: "Section H2, ClashGrotesk" }
+    body-lg: { size: 20, weight: 300, lineHeight: 1.40, use: "Lead body, Lexend" }
+    body:    { size: 18, weight: 300, lineHeight: 1.40, use: "Standard body, Lexend" }
+    body-sm: { size: 15, weight: 400, use: "Small body, Lexend" }
+    nav:     { size: 13, weight: 400, use: "Uppercase nav, tracked, Lexend" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
+  rounded: { sm: 4, md: 4, lg: 4, full: 9999 }
+  shadow:
+    none: "none"
+  components:
+    cta-pill: { type: button, bg: "#000000", fg: "#ffffff", radius: 9999, use: "Primary marketing CTA Contact Us, the single pill" }
+    surface: { type: card, bg: "#ffffff", fg: "#232f32", radius: 0, use: "Square-cornered section/card/image surface" }
+    blue-band: { type: badge, bg: "#1032cf", fg: "#ffffff", radius: 0, use: "Signature blue system-affordance band" }
+  components_harvested: true
 ---
 
 # Design System Inspiration of Lunit
@@ -266,3 +276,21 @@ See `assets/_reference/.live-inspect-proof.json` for the raw CDP `getComputedSty
 
 ### Conflicts unresolved
 - None. All Tier 1 measurements are internally consistent (single source = live DOM on 2026-05-14).
+
+## 16. Do's and Don'ts
+
+### Do
+- Set every section, card, image, input, and footer to `border-radius: 0` and round only the single primary CTA pill to `100px`, honoring the binary radius thesis
+- Pair ClashGrotesk for headings and Lexend for body, keeping both at LIGHT weights — H1 at 78px/84px weight 400, body at 18.4px weight 300 — so authority reads through size and air, not heft
+- Fill the primary marketing CTA as a black pill (`#000000` background, `#ffffff` label) and withhold the signature blue `#1032cf` from primary actions
+- Set body ink in warm-cool gunmetal `#232f32` and hero H1 in near-black `#151515`, never pure `#000`, for standing copy
+- Build depth through full-bleed band switching (white canvas → black band → off-white footer `#eff0f4`) with `box-shadow: none` everywhere
+- Reserve the signature blue `#1032cf` (bright sibling `#2a4eef`) for system, cookie, hover, and dark-band moments, and use AOS scroll-reveal fades as the only motion
+
+### Don't
+- Apply mid-range radii like 4px, 6px, 8px, 12px, or 16px anywhere, or round cards, images, or surfaces that are not the primary action
+- Use the saturated signature blue `#1032cf` on the primary CTA — the brand-action color is black, and blue is deliberately withheld
+- Reach for bold or semibold typographic weights to add confidence; LIGHT weight is the rule across all heading levels
+- Add drop shadows or floating card elevation — depth comes from band switching, not floating objects
+- Add hero video autoplay, parallax, or animated stat counters on the `10,000+` band; keep motion to low-amplitude AOS fades
+- Introduce stock smiling-team photography, hex-mesh/circuit-board/neural-net cliché, multi-accent green-blue-orange palettes, exclamation marks, or emotive verbs like 'transform lives'