Skip to content
Cloaked Design SystemDesign tools

Design with the same decisions.

Use Figma and Claude Design with current components, semantic tokens and a handoff that engineering can verify.

Implementation preview
CURRENT SOURCE0.2.0-preview.1

Keep this version and its content digest with the work.

Read the system index
01

Bring the current decisions into your tool

Design artifacts and implementation should identify the same components, states and semantic roles.

Figma

reconciliation required

Figma remains the design authoring workspace. Existing CDS 4.0 links are provenance; current package parity has not been certified.

Prepare the handoff
  1. Start with the current contract and token export, recording version and digest in the design handoff.
  2. Map semantic token names to variables and preserve light/dark modes. Record Figma file, component/node, variable and mode IDs.
  3. Review the same anatomy, states and component interactions; submit changes to the canonical package and reconcile the Figma library after approval.
Figma documentation

Claude Design

setup and verification required

Use this repository as the linked component source and provide the current guidance and token packet. Organization design-system setup is a separate reviewed action.

Prepare the handoff
  1. Connect the design repository or provide the current contract packet using the supported design-system setup workflow.
  2. Include semantic tokens, real component source, named states and explicit platform limitations.
  3. Return the design decisions, component IDs and source digest with the handoff to engineering; verify the result against this reference.
Claude Design documentation
02

Make the handoff traceable

Include what changed, where it lives and which source version it follows.

Design → engineering
Use the current Cloaked design system: https://design.cloaked.team/data/design-system.json.
Read the relevant component contracts and semantic token definitions.
Record the system version, content digest, component IDs and design artifact IDs.
Show the required states in both themes, including focus, validation and long content.
Identify differences from the source and any platform adaptations.
Return the handoff with evidence; do not infer Figma parity or product approval.
Translate tokens with their units and limits.

245 of 256 definitions have portable typed values. 11 require explicit runtime or font-relative translation; native mapping still needs consumer verification.

03

Keep the original Figma links useful

These imported links identify the source artifacts. Compare them with the current package before using them as evidence of parity.

legacy provenance · current parity not verified

Cloaked Design System 4.0 (2026) - Release

File and node access follows your Figma permissions. An available link does not verify that its content matches this preview.

Foundations

Components

Implementation preview

This design-owned implementation is ready to try and review. It does not establish product approval. Imported specifications retain their original review status.

Inspect version 0.2.0-preview.1