Use implementation references to prepare a design that can be built and reviewed.
The component catalog, token reference, and source repository are the available starting points for Liquidify design work. A downloadable Liquidify design kit, asset library, and hosted design tooling have not been verified; treat those resources as pending.
| Design question | Reference | What to take from it |
|---|---|---|
| Which control fits the task? | Component catalog | Supported composition, variants, and states |
| How should content and actions relate? | Designing overview | Hierarchy and material purpose |
| Which colors express meaning? | Color | Semantic roles and theme review |
| What governs dimensions and rhythm? | Spacing and layout | Public token identifiers |
| Which text styles are available? | Typography | Text hierarchy and supported styles |
Inspect the running component when a catalog description conflicts with the installed implementation. A screenshot records one state and theme; it is not a complete specification.
For each task, record the component and public props, visible labels, state owner, and expected result. Name the token when a design decision depends on color or spacing. Describe what changes at narrow widths and with long text.
For an email preference, the handoff can specify a controlled Toggle with a visible label, a Button labeled “Save preferences,” and inline progress, failure, and success messages. The application owns persistence. Include the failure state with the draft still available for retry.
Figure in preparation
From a task to a handoff
An annotated preference form showing the component, state, token, and application responsibility for each part.
Use the same content in design review and implementation review. Check keyboard focus, disabled and loading states, theme changes, and text enlargement over realistic backgrounds. Record the source revision with captures so a later change can be compared.
Use real Liquidify captures for component anatomy and states. Use token-driven diagrams for measurements and relationships. Concept illustrations can explain an idea, but cannot demonstrate that a component or behavior exists.
No verified Figma library, downloadable design kit, or hosted design-review service is provided by this guide. Do not use another design system's assets as evidence of Liquidify support. For now, specify the supported component in the catalog and list any missing requirement explicitly.