oh-my-design-cli 1.6.0 → 1.6.2

package/skills/claude-design/scripts/gather_references.py

@@ -0,0 +1,437 @@
+#!/usr/bin/env python3
+"""Gather local brand/visual reference assets (and explicit URL references) for the claude-design skill.
+
+Walks a root directory (default: current working directory) up to a bounded depth, pruning
+noisy/excluded directories in place, and collects files whose extension matches a set of
+VISUAL image asset types. By default DOCUMENT files (.pdf, .hwp/.hwpx, .doc/.docx, .ppt/.pptx,
+.xls/.xlsx) are EXCLUDED — they are document templates, not brand visuals — unless --include-docs
+is passed.
+
+Ranking (v2): brand-likelihood FIRST, then modification time (newest first). Filenames that look
+like real brand assets (logo, wordmark, symbol, icon, brand, og, hero, cover, favicon, app-icon)
+score high and float to the top; everything else falls back to mtime. Results are then size-filtered
+and capped at a maximum count. This fixes the prior bug where large PDF business-plan templates
+outranked the real brand assets (logo.svg / og.png) that Claude Design actually wants.
+
+Explicit URL references can be passed (repeatable) and are echoed back alongside the discovered files.
+
+Designed to be robust: never crashes on a bad/unreadable path (PermissionError, FileNotFoundError,
+OSError are all swallowed gracefully). stdlib only.
+
+CLI:
+    python3 gather_references.py [--root DIR] [--max N] [--max-mb FLOAT] [--url URL ...]
+        [--ext .png,.jpg,...] [--exclude GLOB ...] [--depth N] [--include-docs] [--json]
+
+Output:
+    With --json: a JSON object
+        {"root": ..., "files": [{"path","type","bytes","mtime_iso"}], "urls": [...],
+         "truncated": bool, "ranked_by": ..., "note": ...}
+    Without --json: a short human-readable summary.
+"""
+
+import argparse
+import fnmatch
+import json
+import os
+import re
+import sys
+from datetime import datetime, timezone
+
+# ---------------------------------------------------------------------------
+# Defaults (mirrored in the SKILL.md file contract)
+# ---------------------------------------------------------------------------
+
+DEFAULT_MAX_FILES = 12
+DEFAULT_MAX_MB = 8.0
+DEFAULT_DEPTH = 4
+
+# v2: VISUAL-ONLY by default. Brand visuals, not document templates.
+DEFAULT_EXTENSIONS = [
+    ".png", ".jpg", ".jpeg", ".webp", ".svg", ".avif", ".gif",
+]
+
+# Document extensions are never visual brand assets. Excluded from the default
+# scan; only included when --include-docs is passed (they are then *added* to the
+# active extension set, alongside whatever visual/--ext set is in effect).
+DOC_EXTENSIONS = [
+    ".pdf",
+    ".hwp", ".hwpx",
+    ".doc", ".docx",
+    ".ppt", ".pptx",
+    ".xls", ".xlsx",
+]
+
+DEFAULT_EXCLUDED_DIRS = [
+    "node_modules", ".git", "dist", "build", ".next", ".nuxt", "out",
+    "venv", ".venv", "__pycache__", ".cache", "coverage", "target",
+    "Pods", ".gradle", ".idea", ".DS_Store",
+]
+
+# v2: brand-likelihood ranking. A filename whose basename contains one of these
+# tokens (as a whole token, delimited by start/end of name or any non-alphanumeric
+# separator) is treated as a likely real brand asset and floated to the top of the
+# results, ahead of generic screenshots / incidental images.
+#
+# Token boundaries matter: the short "og" token (Open Graph: og.png / og-image.png)
+# must NOT match as a substring inside ordinary words like dog/frog/blog/logout/
+# progress/recognition/cognac/biography, and "logo" must not match "logout". The
+# leading group consumes one separator (or start-of-string); the trailing boundary
+# is a zero-width lookahead so adjacent tokens (e.g. "icon-logo") both still match.
+BRAND_KEYWORD_PATTERN = re.compile(
+    r"(?:^|[^a-z0-9])"
+    r"(?:logo|wordmark|symbol|icon|brand|hero|cover|favicon|app[-_]?icon|og[-_]?image|og)"
+    r"(?=[^a-z0-9]|$)",
+    re.IGNORECASE,
+)
+
+RANKED_BY = "brand-likelihood, then mtime-desc"
+
+
+# ---------------------------------------------------------------------------
+# Helpers
+# ---------------------------------------------------------------------------
+
+def _normalize_extensions(raw):
+    """Turn a comma-separated extension string into a lowercased set with leading dots.
+
+    Accepts forms like ".png,jpg, .JPEG" and yields {".png", ".jpg", ".jpeg"}.
+    Returns None to signal "fall back to defaults" when nothing usable is parsed.
+    """
+    if raw is None:
+        return None
+    exts = set()
+    for part in str(raw).split(","):
+        part = part.strip().lower()
+        if not part:
+            continue
+        if not part.startswith("."):
+            part = "." + part
+        exts.add(part)
+    return exts or None
+
+
+def _ext_of(path):
+    """Lowercased file extension including the leading dot (e.g. '.png'), or '' if none."""
+    return os.path.splitext(path)[1].lower()
+
+
+def _type_of(path):
+    """Lowercased extension WITHOUT the leading dot (e.g. 'png'), or '' if none."""
+    return _ext_of(path).lstrip(".")
+
+
+def _mtime_iso(epoch):
+    """Convert an epoch float to an ISO-8601 UTC string; never raises."""
+    try:
+        return datetime.fromtimestamp(epoch, tz=timezone.utc).isoformat()
+    except (OverflowError, OSError, ValueError):
+        return ""
+
+
+def _is_excluded_dir(name, exclude_globs):
+    """True if a directory basename matches any exclude glob (or default excluded set)."""
+    for pattern in exclude_globs:
+        if fnmatch.fnmatch(name, pattern):
+            return True
+    return False
+
+
+def _brand_score(path):
+    """Heuristic brand-likelihood score for a file path.
+
+    Higher = more likely to be a real brand asset Claude Design should reference.
+    Scored on the *filename* (the basename), case-insensitively, against
+    BRAND_KEYWORD_PATTERN (which matches brand tokens only at token boundaries, so
+    "og" matches og.png/og-image but never dog/blog/logout). Returns 1 if any brand
+    token is present, else 0.
+
+    This is intentionally a coarse binary signal: brand-likelihood is the PRIMARY
+    sort key, with mtime as the tie-breaker, so we only need to separate "looks
+    like a brand asset" from "everything else". Never raises.
+    """
+    try:
+        name = os.path.basename(path)
+    except Exception:
+        return 0
+    return 1 if BRAND_KEYWORD_PATTERN.search(name) else 0
+
+
+def gather(root, max_files, max_mb, extensions, exclude_globs, depth):
+    """Walk `root` up to `depth` levels, collecting matching files.
+
+    Returns (files, truncated, note) where:
+      - files: list of dicts {path, type, bytes, mtime_iso}, ranked by brand-likelihood
+        first then mtime-desc, size-filtered, and capped.
+      - truncated: True if matching files were dropped because of the cap. A negative
+        `max_files` means "keep everything", so it is never truncated.
+      - note: optional human note (e.g. about an unreadable root); '' otherwise.
+    """
+    note = ""
+    matched = []  # list of (brand_score, mtime, path, size)
+
+    try:
+        abs_root = os.path.abspath(root)
+    except (OSError, ValueError):
+        return [], False, "Could not resolve root path: %r" % (root,)
+
+    if not os.path.exists(abs_root):
+        return [], False, "Root path does not exist: %s" % abs_root
+    if not os.path.isdir(abs_root):
+        return [], False, "Root path is not a directory: %s" % abs_root
+
+    max_bytes = None
+    if max_mb is not None and max_mb >= 0:
+        max_bytes = int(max_mb * 1024 * 1024)
+
+    root_depth = abs_root.rstrip(os.sep).count(os.sep)
+
+    try:
+        # os.walk does NOT follow directory symlinks by default, so symlink loops cannot hang us.
+        walker = os.walk(abs_root, topdown=True, onerror=lambda err: None)
+        for current_dir, dirnames, filenames in walker:
+            # Enforce bounded depth by pruning descent once we exceed the limit.
+            try:
+                current_depth = current_dir.rstrip(os.sep).count(os.sep) - root_depth
+            except Exception:
+                current_depth = 0
+            if current_depth >= depth:
+                # Do not descend any deeper.
+                dirnames[:] = []
+            else:
+                # Prune excluded directories IN PLACE so os.walk skips them entirely.
+                dirnames[:] = [
+                    d for d in dirnames if not _is_excluded_dir(d, exclude_globs)
+                ]
+
+            for fname in filenames:
+                if _ext_of(fname) not in extensions:
+                    continue
+                fpath = os.path.join(current_dir, fname)
+                try:
+                    st = os.stat(fpath)
+                except (PermissionError, FileNotFoundError, OSError):
+                    # Unreadable entry or broken symlink; skip gracefully.
+                    continue
+                # Skip anything that isn't a regular file (e.g. a directory named "foo.png").
+                if not os.path.isfile(fpath):
+                    continue
+                size = st.st_size
+                if max_bytes is not None and size > max_bytes:
+                    continue
+                matched.append((_brand_score(fpath), st.st_mtime, fpath, size))
+    except (PermissionError, FileNotFoundError, OSError) as exc:
+        note = "Walk interrupted: %s" % exc
+
+    # v2 ranking: brand-likelihood FIRST (high score first), then newest first.
+    matched.sort(key=lambda item: (item[0], item[1]), reverse=True)
+
+    if max_files >= 0:
+        truncated = len(matched) > max_files
+        kept = matched[:max_files]
+    else:
+        # Negative cap means "keep everything"; nothing is dropped.
+        truncated = False
+        kept = matched
+
+    files = []
+    for _score, mtime, fpath, size in kept:
+        files.append({
+            "path": fpath,
+            "type": _type_of(fpath),
+            "bytes": size,
+            "mtime_iso": _mtime_iso(mtime),
+        })
+
+    return files, truncated, note
+
+
+# ---------------------------------------------------------------------------
+# CLI
+# ---------------------------------------------------------------------------
+
+def build_parser():
+    parser = argparse.ArgumentParser(
+        prog="gather_references.py",
+        description=(
+            "Scan a directory for brand/visual reference assets and collect explicit URL "
+            "references for the claude-design skill. Visual-only by default; documents "
+            "(.pdf/.hwp/.doc/.ppt/.xls) are excluded unless --include-docs is given. "
+            "Results are ranked by brand-likelihood first, then by modification time."
+        ),
+    )
+    parser.add_argument(
+        "--root",
+        default=os.getcwd(),
+        help="Directory to scan (default: current working directory).",
+    )
+    parser.add_argument(
+        "--max",
+        dest="max_files",
+        type=int,
+        default=DEFAULT_MAX_FILES,
+        help="Maximum number of files to return (default: %d)." % DEFAULT_MAX_FILES,
+    )
+    parser.add_argument(
+        "--max-mb",
+        dest="max_mb",
+        type=float,
+        default=DEFAULT_MAX_MB,
+        help="Skip files larger than this many megabytes (default: %s)." % DEFAULT_MAX_MB,
+    )
+    parser.add_argument(
+        "--url",
+        dest="urls",
+        action="append",
+        default=[],
+        metavar="URL",
+        help="Explicit URL reference (repeatable).",
+    )
+    parser.add_argument(
+        "--ext",
+        dest="ext",
+        default=None,
+        metavar=".png,.jpg,...",
+        help=(
+            "Comma-separated list of extensions to match. Overrides the visual-only "
+            "default (%s). If --include-docs is also passed, document extensions are "
+            "added on top of this set." % ",".join(DEFAULT_EXTENSIONS)
+        ),
+    )
+    parser.add_argument(
+        "--include-docs",
+        dest="include_docs",
+        action="store_true",
+        help=(
+            "Also include document files (%s). These are EXCLUDED by default because "
+            "they are document templates, not brand visuals." % ",".join(DOC_EXTENSIONS)
+        ),
+    )
+    parser.add_argument(
+        "--exclude",
+        dest="exclude",
+        action="append",
+        default=[],
+        metavar="GLOB",
+        help="Additional directory-name glob(s) to exclude (repeatable).",
+    )
+    parser.add_argument(
+        "--depth",
+        type=int,
+        default=DEFAULT_DEPTH,
+        help="Maximum directory depth to descend (default: %d)." % DEFAULT_DEPTH,
+    )
+    parser.add_argument(
+        "--json",
+        action="store_true",
+        help="Emit a JSON object instead of a human-readable summary.",
+    )
+    return parser
+
+
+def _human_size(num_bytes):
+    """Render a byte count as a compact human-readable string."""
+    try:
+        value = float(num_bytes)
+    except (TypeError, ValueError):
+        return "?"
+    for unit in ("B", "KB", "MB", "GB", "TB"):
+        if value < 1024.0 or unit == "TB":
+            if unit == "B":
+                return "%d %s" % (int(value), unit)
+            return "%.1f %s" % (value, unit)
+        value /= 1024.0
+    return "%.1f TB" % value
+
+
+def main(argv=None):
+    parser = build_parser()
+    args = parser.parse_args(argv)
+
+    # Resolve the active extension set:
+    #   - --ext (if given) replaces the visual-only default;
+    #   - otherwise use the visual-only default;
+    #   - --include-docs ADDS document extensions on top of whichever set is active.
+    extensions = _normalize_extensions(args.ext)
+    if extensions is None:
+        extensions = set(DEFAULT_EXTENSIONS)
+    if args.include_docs:
+        extensions = set(extensions) | set(DOC_EXTENSIONS)
+
+    exclude_globs = list(DEFAULT_EXCLUDED_DIRS) + list(args.exclude or [])
+
+    depth = args.depth if args.depth is not None and args.depth >= 0 else DEFAULT_DEPTH
+
+    files, truncated, note = gather(
+        root=args.root,
+        max_files=args.max_files,
+        max_mb=args.max_mb,
+        extensions=extensions,
+        exclude_globs=exclude_globs,
+        depth=depth,
+    )
+
+    urls = list(args.urls or [])
+
+    try:
+        abs_root = os.path.abspath(args.root)
+    except (OSError, ValueError):
+        abs_root = args.root
+
+    if args.json:
+        payload = {
+            "root": abs_root,
+            "files": files,
+            "urls": urls,
+            "truncated": truncated,
+            "ranked_by": RANKED_BY,
+            "note": note,
+        }
+        print(json.dumps(payload, ensure_ascii=False, indent=2))
+        return 0
+
+    # Human-readable summary.
+    lines = []
+    lines.append("Reference scan root: %s" % abs_root)
+    lines.append(
+        "Found %d file(s) (cap=%d, max-mb=%s, depth=%d, docs=%s)%s"
+        % (
+            len(files),
+            args.max_files,
+            args.max_mb,
+            depth,
+            "included" if args.include_docs else "excluded",
+            " [truncated: more matched than shown]" if truncated else "",
+        )
+    )
+    lines.append("Ranked by: %s" % RANKED_BY)
+    if files:
+        lines.append("")
+        for entry in files:
+            lines.append(
+                "  - %s  [%s, %s, %s]"
+                % (
+                    entry["path"],
+                    entry["type"] or "?",
+                    _human_size(entry["bytes"]),
+                    entry["mtime_iso"] or "?",
+                )
+            )
+    else:
+        lines.append("  (no matching brand/visual assets found)")
+
+    if urls:
+        lines.append("")
+        lines.append("URL references (%d):" % len(urls))
+        for url in urls:
+            lines.append("  - %s" % url)
+
+    if note:
+        lines.append("")
+        lines.append("Note: %s" % note)
+
+    print("\n".join(lines))
+    return 0
+
+
+if __name__ == "__main__":
+    sys.exit(main())

package/web/references/91app/DESIGN.md

@@ -0,0 +1,151 @@
+---
+id: "91app"
+name: "91APP"
+country: TW
+category: ecommerce
+homepage: "https://www.91app.com"
+primary_color: "#061C3D"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=91app.com&sz=128"
+verified: "2026-06-01"
+omd: "0.1"
+---
+# Design System Inspiration of 91APP
+
+## 1. Visual Theme & Atmosphere
+
+91APP carries the composure of retail infrastructure built to be trusted at scale — the brand of Taiwan's leading omnichannel OMO (online-merge-offline) commerce SaaS. Its identity rests on a deep structural navy (#061C3D) that anchors text, headings, and the primary call-to-action, giving every screen the gravity of a B2B platform that merchants stake their storefronts on. Against a clean white ground (#FFFFFF), that navy reads as steady and engineered rather than playful. A coral-red accent (#E85040) provides the single point of energy — the action color reserved for moments that should feel decisive. Traditional-Chinese Noto Sans TC sets the type with neutral, legible clarity suited to a Taiwanese merchant audience. The overall atmosphere is one of confident retail infrastructure: orderly, generously rounded at the touch points, and quietly serious.
+
+## 2. Color Palette & Roles
+
+The palette is disciplined and role-driven, with navy as the dominant structural color and coral as the lone action accent.
+
+| Token | Value | Role |
+|-------|-------|------|
+| Structural navy | #061C3D | Body text, headings, primary button background |
+| Action coral | #E85040 | Coral CTA background — the action accent |
+| Red emphasis | #CB200E | Emphasis text, highlight callouts |
+| Neutral fill | #F7F6FB | Neutral / secondary button fill |
+| Ground | #FFFFFF | Page background, text on filled buttons |
+
+Navy (#061C3D, rgb 6,28,61) does the heavy lifting: it is the text color, the heading color, and the fill of the primary button — chosen as the brand's primary color precisely because it carries so much of the interface. Coral (#E85040, rgb 232,80,64) is the deliberate counterpoint, an action accent that should stay rare to keep its decisiveness. Red emphasis (#CB200E) is a hotter red reserved for emphasis text. The neutral fill (#F7F6FB) gives secondary surfaces a soft, near-white lift off the pure-white ground.
+
+## 3. Typography Rules
+
+Type is set in Noto Sans TC (Traditional Chinese), with Helvetica as the fallback — a neutral, highly legible pairing appropriate for a Taiwanese merchant audience. Body copy runs at 16px. Hero headings step up to 44px at weight 700 in structural navy (#061C3D), giving the top of the page clear authority without ornament. The hierarchy is straightforward: large bold navy headings over calm 16px body, letting the content of a commerce platform stay scannable.
+
+- Body: 16px, Noto Sans TC / Helvetica
+- Hero heading: 44px / 700, #061C3D, Noto Sans TC
+
+## 4. Component Stylings
+
+### Primary Button
+
+**Default (navy)**
+- Background: #061C3D
+- Text: #FFFFFF
+- Border: none
+- Radius: 16px
+- Height: 48px
+- Font: 16px / 600
+- Use: Primary call-to-action — the dominant navy action on white ground
+
+### Coral CTA Button
+
+**Default (coral accent)**
+- Background: #E85040
+- Text: #FFFFFF
+- Border: none
+- Radius: 16px
+- Height: 40px
+- Font: 16px / 500
+- Use: The single energetic action accent — reserve for decisive, attention-drawing moments
+
+### Neutral Button
+
+**Default (secondary)**
+- Background: #F7F6FB
+- Text: #061C3D
+- Border: none
+- Radius: 3px
+- Height: 48px
+- Font: 16px / 600
+- Use: Secondary / neutral action on a soft near-white fill
+
+### Hero Heading
+
+**Default**
+- Background: transparent
+- Text: #061C3D
+- Border: none
+- Font: 44px / 700
+- Use: Top-of-page heading in Noto Sans TC carrying brand authority
+
+## 5. Layout Principles
+
+The layout reads as clean retail infrastructure: a white ground (#FFFFFF) gives content room to breathe, navy structure organizes the hierarchy, and the coral accent is placed sparingly so the eye knows exactly where the action is. Generously rounded primary buttons (16px radius) sit as confident, tappable anchors. Secondary surfaces use the neutral fill (#F7F6FB) to separate without hard borders, keeping the page calm and uncluttered. The composition favors order and legibility over decoration — the look of a platform whose job is to make merchants feel secure.
+
+## 6. Depth & Elevation
+
+Depth is handled with restraint. Rather than heavy shadows, separation comes from color and fill: the neutral #F7F6FB surfaces lift gently off the pure-white ground, and the saturated navy and coral buttons stand forward through contrast alone. The generous 16px corner radius on primary actions softens the interface and signals approachability, while the tighter 3px radius on the neutral button reads as a more utilitarian, grounded surface. The overall sense of elevation is flat and modern, leaning on contrast and rounding instead of literal shadow stacking.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use navy #061C3D as the structural backbone — text, headings, and the primary button.
+- Keep coral #E85040 rare, reserved for the single most important action.
+- Set type in Noto Sans TC with Helvetica fallback; body at 16px.
+- Give primary actions the generous 16px radius for an approachable, tappable feel.
+- Lift secondary surfaces with the soft #F7F6FB neutral fill instead of hard borders.
+
+### Don't
+- Spread coral #E85040 across many elements — it loses its decisive force.
+- Put navy text on navy fill or otherwise compromise the navy/white contrast.
+- Mix the red emphasis #CB200E into general body copy; keep it for emphasis.
+- Invent ornament or heavy shadows — the brand reads engineered and calm.
+
+## 8. Responsive Behavior
+
+The brand's button system is sized for touch and scale: a 48px-tall primary button and 48px neutral button give comfortable tap targets, while the 40px coral CTA reads as a slightly more compact accent. With a 16px body size and large 44px hero headings, the hierarchy holds up from desktop down to mobile merchant views. The white ground and soft neutral fills keep content legible across viewport sizes without relying on layout-specific decoration. (Specific breakpoint values are not provided in the source; size and contrast carry the responsive behavior.)
+
+## 9. Agent Prompt Guide
+
+When generating UI in the 91APP style, instruct the agent: build on a white ground (#FFFFFF) with deep navy (#061C3D) as the structural color for body text, headings, and the primary button. Make the primary button navy with white text, 16px radius, 48px height, 16px/600 type. Reserve a single coral (#E85040) action accent — white text, 16px radius, 40px height, 16px/500 — for the most decisive call-to-action only. For secondary actions, use the neutral fill #F7F6FB with navy text, 3px radius, 48px height, 16px/600. Set hero headings at 44px/700 in navy. Use Noto Sans TC (Helvetica fallback), 16px body. Keep the feel calm, engineered, and trustworthy — retail infrastructure, not decoration. Use red emphasis #CB200E only for emphasized text.
+
+## 10. Voice & Tone
+
+The voice is that of trustworthy retail infrastructure — confident, clear, and B2B-grade. It speaks to merchants who are betting their storefronts on the platform, so it favors steadiness and competence over hype. Like the navy-dominant palette, the tone is structural and dependable, with energy reserved for the moments that matter. It is professional Traditional-Chinese-first, addressing a Taiwanese commerce audience directly and practically.
+
+## 11. Brand Narrative
+
+91APP is Taiwan's leading omnichannel retail-commerce SaaS, built around OMO — online-merge-offline. Its visual identity tells that story: a deep-navy structural brand conveys the reliability of infrastructure merchants depend on, while a coral-red action accent on a clean white ground signals the decisive moments of commerce. The Traditional-Chinese Noto Sans typography and generously rounded primary buttons round out a brand that reads as confident, approachable retail infrastructure — serious where it counts, welcoming at the point of action.
+
+## 12. Principles
+
+- Structure first: navy carries text, headings, and the primary action — the brand's backbone.
+- One point of energy: coral is the lone action accent, kept rare to stay decisive.
+- Clarity over ornament: white ground, legible 16px Noto Sans TC, no unnecessary decoration.
+- Approachable touch points: generous 16px rounding on primary actions invites interaction.
+- Trust through restraint: soft neutral fills and flat depth keep the platform calm and credible.
+
+## 13. Personas
+
+- **The Taiwanese merchant** — runs an omnichannel store and needs a platform that feels dependable; reassured by the navy structural brand and clear, legible interface.
+- **The operations lead** — manages day-to-day commerce flows and values the unambiguous hierarchy where coral marks exactly where to act.
+- **The decision-maker evaluating SaaS** — reads the engineered, confident aesthetic as a signal of trustworthy retail infrastructure worth staking a business on.
+
+## 14. States
+
+State styling is expressed through the documented button variants. The primary navy button (#061C3D background, white text, 16px radius, 48px height, 16px/600) is the default decisive action. The coral CTA (#E85040 background, white text, 16px radius, 40px height, 16px/500) marks the single high-energy action state. The neutral button (#F7F6FB fill, navy text, 3px radius, 48px height, 16px/600) covers the calm secondary state. Red emphasis (#CB200E) signals an emphasized or highlighted text state. (Hover, pressed, focus, and disabled values are not provided in the source; derive them by darkening or lightening these base colors while preserving the navy/coral roles.)
+
+## 15. Motion & Easing
+
+Specific motion and easing values are not provided in the source. In keeping with the brand's engineered, trustworthy character, any motion should be restrained and purposeful — calm transitions that reinforce stability rather than draw attention to themselves, with the coral action accent reserved for the moments worth animating.
+
+---
+**Verified:** 2026-06-01
+**Tier 1 sources:** https://www.91app.com (live DOM — body text, primary/coral/neutral buttons, hero heading, all hex/px values), https://91app.tech (brand-owned regional engineering/tech source), https://github.com/91APP (brand-owned regional org)
+**Tier 2 sources:** getdesign.md/91app — NOT LISTED. refero — not listed. Note: navy #061C3D is structural/dominant; coral #E85040 is the action accent (brand-color choice: navy chosen as primary as it carries text+headings+primary button).
+**Conflicts unresolved:** none
+**Proof:** see .verification.md (## Proof block)

package/web/references/airtable/DESIGN.md

@@ -154,8 +154,22 @@ Airtable's website is a clean, enterprise-friendly platform that communicates "s
 - Soft ambient: `rgba(15,48,106,0.05) 0px 0px 20px`
 
 ## 7. Do's and Don'ts
-### Do: Use Airtable Blue for CTAs, Haas with positive tracking, 12px radius buttons
-### Don't: Skip positive letter-spacing, use heavy shadows
+
+### Do
+- Use Airtable Blue (`#1b61c9`) only for CTAs and links, set on a white (`#ffffff`) canvas with Deep Navy (`#181d26`) text
+- Set the Haas / Haas Groot Disp font system with positive letter-spacing on body and small text (0.08px–0.28px) — it is Airtable's typographic signature
+- Apply the radius scale by component size: 12px buttons, 16px standard cards, 24px sections, 32px large containers
+- Lift primary buttons with the signature blue-tinted multi-layer shadow (`rgba(45,127,249,0.28) 0px 1px 3px`) so elevation ties back to the brand color
+- Reserve color for user data and keep chrome neutral, signaling 'live work' with the spotlight surface (`rgba(249,252,255,0.97)`) plus subtle `#e0e2e6` borders
+- Name theme variables with the semantic `--theme_*` convention (e.g. `--theme_success-text` for `#006400`) to match Airtable's internal tokens
+
+### Don't
+- Skip the positive letter-spacing on body and caption text — it is what gives Airtable its Swiss-precision feel
+- Lean on heavy gray backgrounds or dark drop shadows for depth instead of the spotlight surface and the soft ambient `rgba(15,48,106,0.05) 0px 0px 20px` glow
+- Spread Airtable Blue (`#1b61c9`) across chrome or large backgrounds — color belongs to user data, not the UI frame
+- Reach for the deliberately sharp 2px radius outside its cookie-consent context where buttons and cards use 12px and up
+- Add bouncy spring motion or exceed the 150–400ms timing tokens, and respect `prefers-reduced-motion` by dropping the spotlight fade-in
+- Use forbidden voice like 'revolutionary database', 'no-code magic', or emoji in product chrome
 
 ## 8. Responsive Behavior
 Breakpoints: 425–1664px (23 breakpoints)