Portable design standards for building polished, accessible, product-first apps with AI agents or by hand.
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.
Choose the shortest path that matches your setup:
Paste adapters/universal-prompt.md into your project instructions or system prompt.
Install the skill:
mkdir -p "${CODEX_HOME:-$HOME/.codex}/skills"
cp -R analog-design-standards/skills/analog-design-standards \
"${CODEX_HOME:-$HOME/.codex}/skills/"Then prompt:
Use $analog-design-standards to improve this dashboard with AURORA.
Install the project skill:
mkdir -p .claude/skills
cp -R analog-design-standards/skills/analog-design-standards .claude/skills/Then prompt:
/analog-design-standards Refactor this Home screen using FROST.
Use $analog-design-standards to design a CRM pipeline dashboard with AURORA.
Use $analog-design-standards to design a Home screen and AI chat flow with FROST.
Use $analog-design-standards to audit this UI for Foundation, AURORA/FROST fit,
state coverage, accessibility, responsive behavior, and AI action safety.
Analog Design Standards has three layers:
Analog Design Standards
+- Analog Foundation: shared primitives, tokens, motion, state, and quality gates
+- AURORA: operational CRM, dashboard, workflow, table, and settings surfaces
+- FROST: Home, AI chat, command, artifact, and conversational surfaces
The foundation is shared. AURORA and FROST are sibling expressions of that foundation, not separate design systems. AURORA is warm, precise, operational, and calm. FROST is immersive, focused, atmospheric, and action-oriented.
This package comes from Analog's internal UI/UX standards, but it is not a full Analog UI kit. The reusable core is separated from the Analog aesthetic so builders can apply the same quality bar to different brands, product categories, and frontend stacks.
- Claude Code: use adapters/claude-code.md.
- Codex: use adapters/codex.md.
- Lovable: paste adapters/lovable-project-knowledge.md into Project Knowledge.
- Bolt: paste adapters/bolt-project-knowledge.md into Project Knowledge.
- Cursor: adapt adapters/cursor-rules.md.
- Any agent: paste adapters/universal-prompt.md.
- Repo-wide agent guidance: adapt adapters/agents.md.
Fastest start: paste adapters/universal-prompt.md into your AI builder's project instructions.
- AI builders who want agents to produce better app screens.
- Solo founders who need a practical design standard without hiring a full design team on day one.
- Engineers who want reviewable UI rules for layout, motion, state, copy, and accessibility.
- Product teams who need a shared language for high-quality interface reviews.
analog-design-standards/
LICENSE
NOTICE
README.md
docs/
maintenance.md
implementation-recipes.md
examples.md
foundation.md
aurora.md
frost.md
principles.md
ui-patterns.md
ai-app-patterns.md
accessibility.md
motion-and-feedback.md
review-checklists.md
analog-case-study.md
adapters/
README.md
claude-code.md
codex.md
lovable-project-knowledge.md
bolt-project-knowledge.md
cursor-rules.md
agents.md
universal-prompt.md
prompts/
design-a-screen.md
improve-existing-ui.md
audit-ui.md
build-aurora-dashboard.md
build-frost-chat.md
skills/
analog-design-standards/
SKILL.md
agents/
openai.yaml
references/
foundation.md
aurora.md
frost.md
implementation-recipes.md
examples.md
principles.md
ui-patterns.md
ai-app-patterns.md
accessibility.md
review-checklists.md
Read maintenance.md before changing the package. It defines the source-of-truth and sync policy for docs, skill references, adapters, and prompts.
Start with foundation.md. It defines the shared base: Tailwind-first styling, shadcn/Radix-style primitive thinking, semantic tokens, typography, icons, radius, density, motion, state, accessibility, and review gates.
Use implementation-recipes.md when you want a more concrete starter shape for tokens, Tailwind classes, radius, layout, and state structure.
Then choose the product expression:
- aurora.md for CRM, dashboards, pipelines, tasks, contacts, tables, queues, detail sidebars, settings, billing, admin, and other operational surfaces.
- frost.md for Home, AI chat, conversational command surfaces, frosted UI, inline artifacts, streaming, suggestions, and AI write previews.
Use the supporting references as needed:
- principles.md for durable product-design rules.
- ui-patterns.md for app shells, forms, tables, modals, empty states, landing surfaces, and settings.
- ai-app-patterns.md for chat, artifacts, streaming, write confirmations, suggestions, and AI error states.
- accessibility.md for keyboard, focus, semantics, responsive behavior, color, forms, and modal requirements.
- motion-and-feedback.md for animation, loading, optimistic updates, sound, and haptics.
- review-checklists.md for pass/fail gates.
- examples.md for before/after examples that show how the standard changes generated UI.
- analog-case-study.md to see how the standard appears inside Analog's own product language.
The files under docs/ are the canonical human-readable standard. The skill
references under skills/analog-design-standards/references/, the adapters, and
the prompt pack are condensed delivery formats. When a rule changes in docs/,
update the matching skill reference and any adapter or prompt that repeats the
same rule. See maintenance.md.
Copy skills/analog-design-standards into your Codex skills directory or into
any compatible agent runtime that supports SKILL.md folders.
Invoke it with:
Use $analog-design-standards to design this app screen.
The skill is intentionally compact. It tells the agent when to load each reference file so it does not flood the context window with every design rule at once.
Use the prompts when you want a repeatable task shape:
- design-a-screen.md for new product screens.
- improve-existing-ui.md for focused UI upgrades without broad rewrites.
- audit-ui.md for review-only feedback.
- build-aurora-dashboard.md for CRM, dashboard, workflow, table, and queue surfaces.
- build-frost-chat.md for Home, AI chat, command, streaming, and artifact surfaces.
Analog's reference implementation is Tailwind-first and built around shadcn/Radix-style primitives, semantic CSS tokens, a compact radius scale, one product typography voice, one icon language, consistent motion, and accessibility gates.
That stack is a reference, not a public requirement. Adopters can use another frontend framework if they preserve the same foundation:
- semantic styling primitives instead of one-off component styles;
- reusable accessible primitives for buttons, dialogs, menus, inputs, tabs, and tooltips;
- stable radius, spacing, density, and motion scales;
- consistent typography and icon rules;
- complete loading, empty, error, success, disabled, permission, and responsive states.
These standards optimize for product interfaces, not decorative mockups.
Good output should:
- make the user's primary job visible immediately;
- use real controls, states, and data structures;
- preserve loading, empty, error, success, and permission states;
- work at mobile and desktop widths;
- use typography, color, icons, spacing, and motion consistently;
- avoid text overflow, layout shift, and inaccessible icon-only controls;
- treat AI features as workflows with consequences, not as visual theater.
Keep the quality bar, swap the brand:
- Choose one product typography voice and use it consistently.
- Choose one icon family and define semantic aliases for repeated concepts.
- Define semantic color tokens before writing screen-specific styles.
- Tune density to the audience: operational tools should be denser than editorial or consumer experiences.
- Make motion purposeful and respect reduced-motion preferences.
- Treat Analog's night-sky, sunset, and frost language as a case study, not a required aesthetic.
Apache License, Version 2.0. See LICENSE and NOTICE.
The license covers the package contents. It does not grant trademark rights in the Analog name, logo, product identity, or brand assets.