For design tools

What a design agent may assume about Cure.

Give this to a tool like claude.ai/design before it draws anything. It states which components exist, what a semantic name resolves to, the grid and its breakpoints, the design tokens, and the operations a design may be patched with. A design expressed in these terms compiles to Cure metadata deterministically — Cure runs no second model over it and guesses nothing.

Download JSON Download full catalogue

Generated 2026-09-17 · 21 design components · 19 intents · 57 placeable component types

01 · Resolution

Three ways to name a thing, in order.

A design does not have to name a Cure component. It may name one, name an intent, or name nothing and let the field's type decide. Cure resolves in this order and takes the first that is present.

1
explicit component
The design names a Cure component type outright. Nothing is inferred; what you name is what is placed.
2
intent default
The design names an intent. Cure picks the component and the props that intent always uses, so every form agrees with every other.
3
field type default
The design names neither. The field’s data type decides, which is what makes a bare list of fields a valid design.

02 · Design components

Design names, and what each one becomes.

The left column is the vocabulary a design tool may use. The right is the Cure component it compiles to, with the field types it accepts. Where Cure has no dedicated component, the note says so rather than inventing one.

text_fieldinput

→ UInput

textemailurlphonenumber

textareainput

→ UTextarea

text

selectinput

→ USelect

selectenumreference

comboboxinput

→ USelect

selectenumreference

USelect in searchable mode; Cure has no separate combobox component.

date_pickerinput

→ UInputDate

datedatetime

user_pickerinput

→ USelect

reference

No dedicated user picker. Bind a USelect to a reference field that points at a user record.

group_pickerinput

→ USelect

reference

No dedicated group picker. Bind a USelect to a reference field that points at a group record.

record_headerlayout

→ Heading

Compose with a TextLabel kicker and a badge row; there is no single record-header component.

status_badgedisplay

→ UBadge

selectenumtextboolean

priority_badgedisplay

→ UBadge

selectenumtext

panellayout

→ CurePanel

tabslayout

→ CureTabs

accordionlayout

→

activity_timelinerecordSet

→

related_recordsrecordSet

→ CureTable

attachmentsfileManagement

→ UFileUpload

commentsrecordSet

→

data_tablerecordSet

→ CureTable

metricdisplay

→ CureStatCard

chartvisualization

→ CureCharts

svgrecordSet

→ CureSvg

03 · Intents

Say what it is for, not what it looks like.

An intent carries meaning a component name cannot. Naming record_status says this is the record's status — which component draws it, and with which props, is Cure's decision and stays consistent across every form.

record_status

→ UBadgefrom field: status

Coloured status pill bound to the record's status/enum field.

record_priority

→ UBadgefrom field: priority

Priority tag bound to the record's priority field.

record_title

→ Heading

The record's primary heading (name/title/code field).

record_kicker

→ TextLabel

Small uppercase context label above the title.

long_description

→ UTextarea

Multi-line free text.

short_text

→ UInput

Single-line free text.

single_select

→ USelect

One value from a fixed or referenced set.

date

→ UInputDate

A single calendar date.

user_identity

→ USelect

Pick a user. Bind to a reference field; no dedicated user picker.

group_identity

→ USelect

Pick a group. Bind to a reference field; no dedicated group picker.

related_records

→ CureTable

Child rows scoped to the open record (set a qualifier).

attachments

→ UFileUpload

File attachments for the record.

activity_history

→ CureSvg

Vertical event timeline. No native component; render with a scriptable CureSvg bound to the history rows.

comments

→ CureSvg

Threaded comments. No native component; render with a scriptable CureSvg or a child CureTable.

metric

→ CureStatCard

A single KPI value with a label.

metric_group

→ CureStatSection

A row of KPI cards.

chart

→ CureCharts

A data chart.

map

→ CureMap

A map with pins from lat/lon fields.

custom_visual

→ CureSvg

Anything bespoke - a scriptable CureSvg with svg + javascript + bindings.

04 · Layout

12 columns, five regions, three breakpoints.

A design places things in named regions rather than at coordinates. Each region has a role, and the role decides how many columns it takes at each breakpoint — so a design does not need to specify all three.

Regions

Region	Role	Span
`header`	full	12
`main`	main	8
`sidebar`	sidebar	4
`activity`	full	12
`footer`	full	12

Columns per role and breakpoint

Role	desktop	tablet	mobile
`main`	8	7	12
`sidebar`	4	5	12
`full`	12	12	12
`half`	6	6	12
`third`	4	6	12
`quarter`	3	6	12

mobile < 640pxtablet 640px - 1024pxdesktop > 1024px

05 · Tokens

The values a design may set.

These are the defaults. A design overrides any of them by name; anything it does not name keeps the value below.

Colours

background#f8fafc
surface#ffffff
surfaceMuted#f1f5f9
primary#2563eb
secondary#64748b
accent#b4552d
accent100#f6e6dd
accent700#8f3f1f
text#0f172a
textMuted#64748b
border#e2e8f0
danger#dc2626
warning#d97706
success#16a34a

typography

`heading`	system-ui, -apple-system, sans-serif
`body`	system-ui, -apple-system, sans-serif
`label`	system-ui, -apple-system, sans-serif
`muted`	system-ui, -apple-system, sans-serif

spacing

`compact`	8px
`normal`	16px
`comfortable`	24px

radius

`none`	0px
`small`	4px
`medium`	8px
`large`	16px

shadow

`none`	none
`small`	0 1px 2px rgba(15, 23, 42, 0.06)
`medium`	0 4px 12px rgba(15, 23, 42, 0.10)

06 · Events and revision

A design is not finished when it is drawn.

Events a design may wire

`click`	`button.click`UButton
`change`	`field.change`*
`event`	`window.event`CureSvg, UButton

Patch operations

An agent that has looked at a rendered screenshot corrects the design with these, rather than rebuilding it.

set_span
set_responsive
move
set_variant
set_prop
set_component_type
add_component
remove_component
set_token

Cure compiles a semantic DesignSpec to view metadata deterministically; it runs no second LLM layer. Images and POCs are interpreted by the calling agent, never by Cure. See cure://design/components for the design-name view and cure://schema/components for the raw node contract.

The brief, in full

This is what the copy button puts on your clipboard. Paste it ahead of the design request itself.

# Designing for Cure

Cure compiles a semantic design to application metadata deterministically. It runs
no second model over your output and infers nothing you did not state, so name
things from the vocabulary below rather than describing them.

## How a name resolves
1. An explicit Cure component type, if you give one.
2. Otherwise an intent, which fixes both the component and its props.
3. Otherwise the field's data type.

## Layout
A 12-column grid. Place things in regions, not at coordinates:
  header (full, 12/12)
  main (main, 8/12)
  sidebar (sidebar, 4/12)
  activity (full, 12/12)
  footer (full, 12/12)

A region's role decides its width per breakpoint, so state the role and leave the rest:
  main: desktop 8, tablet 7, mobile 12
  sidebar: desktop 4, tablet 5, mobile 12
  full: desktop 12, tablet 12, mobile 12
  half: desktop 6, tablet 6, mobile 12
  third: desktop 4, tablet 6, mobile 12
  quarter: desktop 3, tablet 6, mobile 12

Breakpoints: mobile < 640px, tablet 640px - 1024px, desktop > 1024px

## Design components
  text_field -> UInput
  textarea -> UTextarea
  select -> USelect
  combobox -> USelect  (USelect in searchable mode; Cure has no separate combobox component.)
  date_picker -> UInputDate
  user_picker -> USelect  (No dedicated user picker. Bind a USelect to a reference field that points at a user record.)
  group_picker -> USelect  (No dedicated group picker. Bind a USelect to a reference field that points at a group record.)
  record_header -> Heading  (Compose with a TextLabel kicker and a badge row; there is no single record-header component.)
  status_badge -> UBadge
  priority_badge -> UBadge
  panel -> CurePanel
  tabs -> CureTabs
  accordion -> null
  activity_timeline -> null
  related_records -> CureTable
  attachments -> UFileUpload
  comments -> null
  data_table -> CureTable
  metric -> CureStatCard
  chart -> CureCharts
  svg -> CureSvg

## Intents
  record_status -> UBadge
  record_priority -> UBadge
  record_title -> Heading
  record_kicker -> TextLabel
  long_description -> UTextarea
  short_text -> UInput
  single_select -> USelect
  date -> UInputDate
  user_identity -> USelect
  group_identity -> USelect
  related_records -> CureTable
  attachments -> UFileUpload
  activity_history -> CureSvg
  comments -> CureSvg
  metric -> CureStatCard
  metric_group -> CureStatSection
  chart -> CureCharts
  map -> CureMap
  custom_visual -> CureSvg

## Tokens you may override
Colours:
  background: #f8fafc
  surface: #ffffff
  surfaceMuted: #f1f5f9
  primary: #2563eb
  secondary: #64748b
  accent: #b4552d
  accent100: #f6e6dd
  accent700: #8f3f1f
  text: #0f172a
  textMuted: #64748b
  border: #e2e8f0
  danger: #dc2626
  warning: #d97706
  success: #16a34a
Spacing: compact 8px, normal 16px, comfortable 24px
Radius: none 0px, small 4px, medium 8px, large 16px

## Revising
After a design is rendered, correct it with these operations rather than rebuilding:
  set_span
  set_responsive
  move
  set_variant
  set_prop
  set_component_type
  add_component
  remove_component
  set_token

## Constraints
- Only these component types may be placed directly: Container, CureButtonGroup, CureCalendar, CureCharts, CureCirclePacking, CureDateTimeInput, CureEditor, CureFileBrowser, CureGantt, CureImage, CureKanban, CureMap, CureMarkdown, CureMetrix, CureMorphNumber, CureNavigation, CurePanelForms, CureProgressTable, CureResourceScheduler, CureStatCard, CureStatSection, CureStatusFlow, CureStatusTimeline, CureSvg, CureText, CureToolbar, Divider, Heading, TextLabel, UAlert, UAvatar, UBadge, UButton, UCalendar, UCheckbox, UCheckboxGroup, UChip, UColorPicker, UDropdownMenu, UEditor, UFieldGroup, UFileUpload, UInput, UInputDate, UInputNumber, UInputTags, UInputTime, UKbd, UPinInput, UProgress, URadioGroup, USelect, USkeleton, USlider, USwitch, UTextarea, UTreeSelect.
- Panels, tabs and tables are created through their own operations, not placed.
- Do not invent component names. Where Cure has no dedicated component the note above says so.

What a design agent may assume about Cure.

Three ways to name a thing, in order.

explicit component

intent default

field type default

Design names, and what each one becomes.

Say what it is for, not what it looks like.

12 columns, five regions, three breakpoints.

Regions

Columns per role and breakpoint

The values a design may set.

Colours

typography

spacing

radius

shadow

A design is not finished when it is drawn.

Events a design may wire

Patch operations

The brief, in full