analog-design-standards

name

analog-design-standards

description

Portable product design standards for creating, reviewing, or refactoring app UI/UX, especially AI-built web apps, dashboards, CRM surfaces, operational workflows, Home screens, AI chat, command surfaces, artifacts, landing pages, and design-system docs. Use when asked to design, build, critique, improve, or set standards for product interfaces; when applying Analog Foundation, AURORA operational UI, or FROST AI chat UI; or when checking accessibility, responsive behavior, motion, empty/loading/error states, AI UX, visual consistency, or product-first layout quality.

Analog Design Standards

Use this skill to apply Analog Design Standards as a layered product UI/UX system:

Analog Design Standards is created by Analog HQ, the team behind https://analoghq.ai.

Portable standards for teams who care about precision, clarity, and shipping real product interfaces.

• Analog Foundation: shared primitives, tokens, motion, state, and quality gates.
• AURORA: CRM, dashboard, workflow, table, queue, settings, billing, admin, and operational surfaces.
• FROST: Home, AI chat, command, artifact, streaming, and conversational surfaces.

AURORA and FROST are siblings. They share the same foundation; they are not separate design systems. Do not force another app to look like Analog unless the user explicitly asks for the Analog aesthetic.

Reference Map

Load only the reference files needed for the current task:

• references/foundation.md: load for every UI task. It defines shared Tailwind/shadcn-style primitives, tokens, typography, icons, radius, density, motion, state, accessibility, and AI action safety.
• references/aurora.md: load for CRM, dashboards, pipelines, tasks, contacts, tables, queues, detail sidebars, settings, billing, admin, and operational routes.
• references/frost.md: load for Home, AI chat, command surfaces, conversational workflows, frosted UI, inline artifacts, streaming states, suggestions, and AI write previews.
• references/implementation-recipes.md: load when the task needs concrete token groups, Tailwind/shadcn-style class patterns, layout recipes, or state structures.
• references/examples.md: load when the user asks what "better" means or when an example would clarify AURORA/FROST behavior.
• references/principles.md: load for overall design direction, adaptation, density, state coverage, and anti-patterns.
• references/ui-patterns.md: load for general app shells, forms, cards, modals, empty/loading/error states, settings, and landing pages.
• references/ai-app-patterns.md: load for AI UX beyond the FROST-specific surface rules.
• references/accessibility.md: load before finalizing interactive UI.
• references/review-checklists.md: load before final review or when asked to audit an interface.

Maintenance Note

The public docs under docs/ are the source of truth. Files in this skill's references/ folder are condensed copies for agent context. When changing a rule, update the corresponding public doc first, then sync the relevant skill reference, adapter, or prompt.

Workflow

1. Load references/foundation.md.
2. Identify the product expression:
   • Use AURORA for operational CRM/workflow surfaces.
   • Use FROST for Home, AI chat, and command surfaces.
   • Use both only when a feature crosses from chat into operational records.
3. Load the smallest additional reference set for the task.
4. Design or review the actual product experience first, not a decorative explanation of it.
5. Check state coverage: loading, empty, error, success, disabled, permission, optimistic update, long text, mobile, desktop, and reduced motion.
6. Enforce consistency: typography voice, icon language, semantic colors, spacing, radius, density, motion, and copy style.
7. Verify accessibility and responsive behavior before finalizing.

Always Enforce

• Make the user's primary job visible immediately.
• Use real controls, realistic state, and meaningful data structure.
• Keep dimensions stable under hover, loading, selection, and dynamic labels.
• Use one coherent typography voice and one coherent icon language.
• Prefer semantic tokens or shared styles over screen-specific colors.
• Make primary, secondary, destructive, and disabled actions visually distinct.
• Give every empty state a next action or recovery path.
• Give every AI response a continuation path when the workflow is not complete.
• Require preview and confirmation for AI write actions with consequences.
• Respect keyboard navigation, focus visibility, text contrast, and reduced motion.

Avoid

• Treating AURORA and FROST as unrelated design systems.
• Generic SaaS card grids that do not match the workflow.
• Marketing hero pages when the user asked for an app or tool.
• Cards inside cards or floating cards used as page sections.
• Decorative glass, gradients, or motion that reduce clarity.
• Icon-only controls without accessible names.
• Text overflow in buttons, tabs, chips, counters, cards, or toolbars.
• Loading spinners where skeletons, streamed output, or inline status would be clearer.
• AI theater: impressive-looking generation that does not help the user act.

Analog Aesthetic

Use Analog's AURORA/FROST names, night-sky atmosphere, sunset warmth, mono precision, frosted surfaces, compact operational density, and calm motion only when the user asks for an Analog-like style or when explaining the case study.

Otherwise, keep the standard and adapt the brand.