Design skill
@cloudflare/kumo

Design skill

Cloudflare product design guidance for building and reviewing Kumo interfaces.

Installation 

npx skills add cloudflare/kumo@kumo-design

Rules

Use 14px for content text

All content text—body, buttons, data, other interactables—must be 14px in size. 16px and above are restricted to headings and subheadings.
Recommended example

API tokens

Production token expires in 30 days.

Example to avoid

API tokens

Production token expires in 30 days.

Always sentence case headings

Never capitalize or uppercase headings. Product names must be title-cased.
Recommended example
Recent requests
Example to avoid
Recent Requests
Example to avoid
Recent Requests

Never change the font's tracking

Do not use the tracking-* classes to change the spacing between characters.
Recommended example
Worker Metrics
Example to avoid
Worker Metrics

Never use font-bold

Use font-semibold for headings and font-medium for bold inline text.
Recommended example

Account settings

This action is required.

Example to avoid

Account settings

This action is required.

Put related text closer together

Related text should have smaller spacing around it than the content it belongs to.
Recommended example

Web Analytics

Measure site traffic without changing your code.

Example to avoid

Web Analytics

Measure site traffic without changing your code.

Optically align spacing around text

Spacing around text should take into account its line height. Typically this means vertical spacing should be slightly smaller than horizontal.
Recommended example

Production

Example to avoid

Production

Never transition colors for hover states

Color changes on hover must be immediate. Transitions on fast interactions make the UI feel sluggish.
Recommended example
Example to avoid

Never use borders with drop shadows

Use ring ring-kumo-line to create a transparent border that maintains sharp edges.
Recommended example

Workers API

Last deployed 4 minutes ago

Example to avoid

Workers API

Last deployed 4 minutes ago

Use concentric border radii

When borders or rings are 8px or less apart, their corner radii must be mathematically concentric: outer radius = inner radius + padding.
Recommended example
Example to avoid

Align icons with the first line of text

Inline icons must be optically the same size as and be center-aligned with text. Use h-lh flex items-center for multi-line alignment.
Recommended example

API token permissions cannot be changed after creation.

Example to avoid

API token permissions cannot be changed after creation.

Example to avoid

API token permissions cannot be changed after creation.

Reduce the font size of inline monospaced text

Monospaced text should have a slightly smaller font size (~0.9em) when mixed with regular text.
Recommended example

Edit wrangler.toml to continue.

Example to avoid

Edit wrangler.toml to continue.

Use border to separate sticky elements from the content

Recommended example

API tokens

Production token

Preview token

Staging token

Development token

Testing token

Production token

Preview token

Staging token

Development token

Testing token

Example to avoid

API tokens

Production token

Preview token

Staging token

Development token

Testing token

Production token

Preview token

Staging token

Development token

Testing token

Maintain content size during collapse animations

Collapsible content must maintain its content size while closing to avoid its content shifting during animations.
Recommended example

Web Analytics

Measure traffic without changing your code.

Example to avoid

Web Analytics

Measure traffic without changing your code.

Never stack LayerCard on top of one another

Recommended example

Recent Requests

Time

Status

Query

00:50 UTC

Error

kumo

Example to avoid

Recent Requests

Time

Status

Query

00:50 UTC

Error

kumo

Never conditionally render dialogs

Conditionally rendering dialogs disables their open/close animation. Use the open prop to determine if a dialog should be visible or not.
Recommended example
<Dialog.Root open={open} onOpenChange={setOpen}>
  <Dialog>
    <Dialog.Title>Edit Worker</Dialog.Title>
    <Dialog.Description>Update this Worker's settings.</Dialog.Description>
  </Dialog>
</Dialog.Root>
Example to avoid
{open && (
  <Dialog.Root open>
    <Dialog>
      <Dialog.Title>Edit Worker</Dialog.Title>
    </Dialog>
  </Dialog.Root>
)}