# Kumo Design
> Cloudflare product design guidance. Use when designing, implementing, or reviewing Cloudflare dashboard interfaces, Kumo UI, responsive styling, dialogs, or frontend tests.
- Skill: `cloudflare/kumo-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add cloudflare/kumo-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/cloudflare/kumo-design/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Cloudflare (https://skillmd.com/u/cloudflare)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/cloudflare/kumo-design
---
# Cloudflare Design
Apply these rules when designing, implementing, or reviewing Cloudflare product interfaces. Follow recommended examples and avoid patterns marked as examples to avoid.
## Rules
### `content-text-size` 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.
**Good**
```tsx
Content text
```
**Avoid**
```tsx
Content text
```
### `heading-case` Always sentence case headings
Never capitalize or uppercase headings. Product names must be title-cased.
**Good**
```tsx
Recent requests
```
**Avoid**
```tsx
Recent Requests
```
```tsx
Recent requests
```
### `font-tracking` Never change the font's tracking
Do not use the `tracking-*` classes to change the spacing between characters.
**Good**
```tsx
Worker Metrics
```
**Avoid**
```tsx
Worker Metrics
```
### `font-weight` Never use `font-bold`
Use `font-semibold` for headings and `font-medium` for bold inline text.
**Good**
```tsx
Account settingsrequired
```
**Avoid**
```tsx
Account settingsrequired
```
### `related-text-spacing` Put related text closer together
Related text should have smaller spacing around it than the content it belongs to.
**Good**
```tsx
Web AnalyticsMeasure site traffic without changing your code.
```
**Avoid**
```tsx
Web AnalyticsMeasure site traffic without changing your code.
```
### `text-spacing` 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.
**Good**
```tsx
...
```
**Avoid**
```tsx
...
```
### `hover-color-transitions` Never transition colors for hover states
Color changes on hover must be immediate. Transitions on fast interactions make the UI feel sluggish.
**Good**
```tsx
```
**Avoid**
```tsx
```
### `shadow-borders` Never use borders with drop shadows
Use `ring ring-kumo-line` to create a transparent border that maintains sharp edges.
**Good**
```tsx
...
```
**Avoid**
```tsx
...
```
### `concentric-border-radius` 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.
**Good**
```tsx
...
```
**Avoid**
```tsx
...
```
### `icon-alignment` 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.
**Good**
```tsx
Text that may wrap onto multiple lines
```
**Avoid**
```tsx
Text that may wrap onto multiple lines
```
```tsx
Text that may wrap onto multiple lines
```
### `inline-monospace-size` Reduce the font size of inline monospaced text
Monospaced text should have a slightly smaller font size (~0.9em) when mixed with regular text.
**Good**
```tsx
Edit wrangler.toml to
continue.
```
**Avoid**
```tsx
Edit wrangler.toml to continue.
```
### `sticky-borders` Use `border` to separate sticky elements from the content
**Good**
```tsx
...
```
**Avoid**
```tsx
...
```
### `collapse-content-size` Maintain content size during collapse animations
Collapsible content must maintain its content size while closing to avoid its content shifting during animations.
**Good**
```tsx
...
```
**Avoid**
```tsx
...
```
### `layer-card-nesting` Never stack `LayerCard` on top of one another
**Good**
```tsx
Recent requests...
```
**Avoid**
```tsx
Recent requests...
```
### `dialog-rendering` 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.
**Good**
```tsx
```
**Avoid**
```tsx
{
open && (
);
}
```