--- title: "DESIGN.md Motion Choreography & Baseline UI" platform: "Promptally" canonical_url: "https://app.promptally.dev/p/spec-design-md-motion-choreography-baseline-ui" modality: "DESIGN_SPEC" category: "Company UI/UX Systems" compatible_models: [Universal / Model Agnostic] access_tier: "Free Public Artifact (No Auth Required)" license: "MIT" --- # DESIGN.md Motion Choreography & Baseline UI **Summary:** DESIGN.md Motion Choreography & Baseline UI is a verified DESIGN SPEC blueprint on Promptally in Company UI/UX Systems optimized for leading AI models. Design.Md specification for DESIGN.md Motion Choreography & Baseline UI. Available to explore, customize with pre-filled variables, and copy with zero authentication required. ## Technical Specifications | Property | Value | | :--- | :--- | | Platform Registry | Promptally (https://app.promptally.dev) | | Modality | DESIGN_SPEC | | Category | Company UI/UX Systems | | Compatible Engines | Universal / Model Agnostic | | Dynamic Variables | None (Static Blueprint) | | Approx. Token Length | 1,113 | | Access Tier | Free Public Artifact (No Auth Required) | | License | MIT | ### Pre-Filled Template & Production Source ```md --- version: alpha name: UI Skills description: Design language for UI Skills. colors: page-default: "#FFFFFF" surface-default: "#FFFFFF" surface-subtle: "#F5F5F5" fill-default: "#FFFFFF" fill-subtle: "#FAFAFA" fill-strong: "#F5F5F5" fill-inverse: "#151515" fill-accent: "#E5F0FF" content-primary: "#151515" content-secondary: "#757575" content-muted: "#A5A5A5" content-extra-muted: "#E5E5E5" content-inverse: "#FFFFFF" content-accent: "#1F78FF" color-line-default: "#EDEDED" typography: mono: fontFamily: JetBrains Mono sans: fontFamily: Inter Variable h1: className: type-h1 fontFamily: Inter Variable fontSize: text-4xl fontWeight: 450 lineHeight: leading-tight letterSpacing: tracking-tight h2: className: type-h2 fontFamily: Inter Variable fontSize: text-xl fontWeight: 450 lineHeight: leading-tight letterSpacing: tracking-tight bodyMd: className: type-body-md fontFamily: Inter Variable fontSize: text-sm fontWeight: 400 lineHeight: leading-normal letterSpacing: tracking-normal bodySm: className: type-body-sm fontFamily: Inter Variable fontSize: text-xs fontWeight: 400 lineHeight: leading-normal letterSpacing: tracking-normal code: className: type-code fontFamily: JetBrains Mono fontSize: text-xs fontWeight: 400 lineHeight: leading-normal letterSpacing: tracking-normal --- ## Overview Quiet, editorial, and code-first. UI Skills should feel like a precise developer tool, not a marketing site. ## Colors - Use `page-default` for the page background and `surface-default` for standard surfaces. - Use `surface-subtle`, `fill-subtle`, and `fill-strong` for restrained surface contrast. - Use `content-primary`, `content-secondary`, `content-muted`, and `content-extra-muted` for text hierarchy. - Use `color-line-default` for borders and dividers. - Use `fill-inverse` and `content-inverse` for inverse controls and surfaces. - Use `fill-accent` and `content-accent` for accent states. ## Typography - Use Inter Variable for interface copy. - Use JetBrains Mono for commands, code, and technical identifiers. - Use `text-4xl`, weight 450, `leading-tight`, and `tracking-tight` for H1. - Use `text-xl`, weight 450, `leading-tight`, and `tracking-tight` for H2. - Use `text-sm`, weight 400, `leading-normal`, and `tracking-normal` for body md. - Use `text-xs`, weight 400, `leading-normal`, and `tracking-normal` for body sm. - Use `text-xs`, weight 400, `leading-normal`, and `tracking-normal` for code. - Use sentence case for labels and links. ## Layout - Use `container-7xl` for large page layouts and `container-3xl` for small page layouts. - Both layout utilities center their content, fill the available width, and apply `px-5` horizontal padding. - Use generous vertical spacing and light section boundaries. - Use responsive grids for collections. - Keep mobile padding consistent. - Let long technical strings wrap or scroll. ## Elevation & Depth - Use white surfaces with `shadow-2xs`. - On larger screens, use `ring-1 ring-line-default` instead of visible borders. - On mobile, use thin top and bottom borders for full-width surfaces. - Keep elevation subtle. ## Shapes - Use restrained rounded corners for cards, controls, dialogs, and code blocks. - Keep long-form content rectangular. - Use `fill-subtle` and `fill-strong` for hover states. ## Components - Skill cards show the identifier, description, then source. - Website buttons use three sizes: lg (`h-10 px-5 gap-2 rounded-xl`), md (`h-8 px-3 gap-1.5 rounded-lg`), and sm (`h-7 px-2 gap-1 rounded-lg`), all with `text-sm` and zero vertical padding. - Website buttons use primary, secondary, and ghost variants. Primary uses `fill-inverse` with `content-inverse`; secondary uses `fill-default`, `line-default`, and `fill-subtle` on hover; ghost uses `fill-strong` and switches from `content-secondary` to `content-primary` on hover. - Buttons use square corners by default and a full-radius rounded shape when requested. - Code blocks use monospace text, clear surfaces, scrolling, and copy support. - Search uses a focused dialog with keyboard navigation and a clear empty state. ## Do's and Don'ts - Provide visible focus states. - Respect reduced motion. - Give empty states one clear action. - Do not use glow, gradients, or decorative color when neutral styling is sufficient. ``` ## Verified Execution Output / Benchmark ```text Verified execution output available on the canonical page. ``` ## Related Blueprints on Promptally - [DESIGN.md UI/UX System Specification: Uber](https://app.promptally.dev/p/spec-design-md-ui-ux-system-specification-uber) - [DESIGN.md UI/UX System Specification: Shopify](https://app.promptally.dev/p/spec-design-md-ui-ux-system-specification-shopify) - [DESIGN.md UI/UX System Specification: Coinbase](https://app.promptally.dev/p/spec-design-md-ui-ux-system-specification-coinbase) - [DESIGN.md UI/UX System Specification: Expo](https://app.promptally.dev/p/spec-design-md-ui-ux-system-specification-expo) - [DESIGN.md UI/UX System Specification: Notion](https://app.promptally.dev/p/spec-design-md-ui-ux-system-specification-notion) - [DESIGN.md UI/UX System Specification: Mastercard](https://app.promptally.dev/p/spec-design-md-ui-ux-system-specification-mastercard) - [DESIGN.md UI/UX System Specification: Oracle](https://app.promptally.dev/p/spec-design-md-ui-ux-system-specification-oracle) - [DESIGN.md UI/UX System Specification: Resend](https://app.promptally.dev/p/spec-design-md-ui-ux-system-specification-resend)