Cloudflare product design guidance. Use when designing, implementing, or reviewing Cloudflare dashboard interfaces, Kumo UI, responsive styling, dialogs, or frontend tests.

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 Avoid heading case Always sentence case headings Never capitalize or uppercase headings. Product names must be title cased. Good Avoid font tracking Never change the font's tracking Do not use the tracking classes to change the spacing between characters. Good Avoid font weight Never use font bold Use font semibold for headings and font medium for bold inline text. Good Avoid related text spacing Put related text closer together Related text should have smaller spacing around it than the content it belongs to. Good Avoid 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 Avoid 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 Avoid shadow borders Never use borders with drop shadows Use ring ring kumo line to create a transparent border that maintains sharp edges. Good Avoid 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 Avoid 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 Avoid 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 Avoid sticky borders Use border to separate sticky elements from the content Good Avoid 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 Avoid layer card nesting Never stack LayerCard on top of one another Good Avoid 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 Avoid

kumo-design