Components
Interaction and state contracts
Shared behavior stays consistent while domain content remains local.
Nuxt UI states
Ordinary actions use the component's native color, variant, loading, and disabled props.
Outcome states
Loading, empty, missing, and failed reads have distinct semantics.
Loading projects
Fetching the latest entries…
No projects yet
Once records are added, they will display here.
Project not found
The requested record is not available.
Unable to load projects
Something went wrong while loading this content.
Disclosure and create workflow
Shared shells own trigger behavior and rhythm, not domain fields.
Disclosure content keeps its own layout and business meaning.
Create project
The card supplies workflow rhythm; the project owns its fields.
Action surfaces
Entity cards resolve to a link, a real button, or static content.
Static card
Readable, but not keyboard-actionable.
Disabled link card
No href and no accidental navigation.
CSS taxonomy
Atomic depth describes a shared visual contract. Vue components and pages remain named after their domain and route responsibility.
One semantic visual role
Eyebrow
Card heading
Type roles use the installed Tailwind scale and Nuxt UI colors.
Supporting metadata
Reusable local composition
Inset panel
Shared border, radius, and spacing.
Multi-component page pattern
Collection manager
Domain copy and data stay with the named component.