Back to Details

kumo-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Cloudflare Design

Cloudflare 设计规范

Apply these rules when designing, implementing, or reviewing Cloudflare product interfaces. Follow recommended examples and avoid patterns marked as examples to avoid.
在设计、实现或评审Cloudflare产品界面时，请遵循以下规则。参考推荐示例，避免使用标记为“应避免”的模式。

Rules

规则

content-text-size
Use 14px for content text

content-text-size
正文文本使用14px字号

All content text—body, buttons, data, other interactables—must be 14px in size. 16px and above are restricted to headings and subheadings.
Good
tsx
<Text>Content text</Text>
Avoid
tsx
<Text size="lg">Content text</Text>
所有正文文本——包括主体内容、按钮、数据及其他可交互元素——字号必须为14px。16px及以上字号仅可用于标题和副标题。
推荐示例
tsx
<Text>Content text</Text>
应避免示例
tsx
<Text size="lg">Content text</Text>

heading-case
Always sentence case headings

heading-case
标题始终采用句首大写格式

Never capitalize or uppercase headings. Product names must be title-cased.
Good
tsx
<Text as="h2">Recent requests</Text>
Avoid
tsx
<Text as="h2">Recent Requests</Text>
tsx
<Text as="h2" DANGEROUS_className="uppercase">
  Recent requests
</Text>
标题请勿全部大写或每个单词首字母大写。产品名称需采用标题大小写格式（每个主要单词首字母大写）。
推荐示例
tsx
<Text as="h2">Recent requests</Text>
应避免示例
tsx
<Text as="h2">Recent Requests</Text>
tsx
<Text as="h2" DANGEROUS_className="uppercase">
  Recent requests
</Text>

font-tracking
Never change the font's tracking

font-tracking
切勿修改字体字间距

Do not use the 
tracking-*
classes to change the spacing between characters.
Good
tsx
<span className="text-lg">Worker Metrics</span>
Avoid
tsx
<span className="text-lg tracking-tight">Worker Metrics</span>
请勿使用
tracking-*
类来更改字符之间的间距。
推荐示例
tsx
<span className="text-lg">Worker Metrics</span>
应避免示例
tsx
<span className="text-lg tracking-tight">Worker Metrics</span>

font-weight
Never use 
font-bold

font-weight
切勿使用
font-bold

Use 
font-semibold
for headings and 
font-medium
for bold inline text.
Good
tsx
<Text as="h3" variant="heading3">Account settings</Text>
<Text as="strong" bold>required</Text>
Avoid
tsx
<Text as="h3" DANGEROUS_className="font-bold">Account settings</Text>
<Text as="strong" DANGEROUS_className="font-bold">required</Text>
标题使用
font-semibold
，行内加粗文本使用
font-medium
。
推荐示例
tsx
<Text as="h3" variant="heading3">Account settings</Text>
<Text as="strong" bold>required</Text>
应避免示例
tsx
<Text as="h3" DANGEROUS_className="font-bold">Account settings</Text>
<Text as="strong" DANGEROUS_className="font-bold">required</Text>

related-text-spacing
Put related text closer together

related-text-spacing
关联文本需紧凑排列

Related text should have smaller spacing around it than the content it belongs to.
Good
tsx
<div className="grid gap-6">
  <div className="grid gap-1.5">
    <Text as="h3">Web Analytics</Text>
    <Text>Measure site traffic without changing your code.</Text>
  </div>
  <Button>Configure</Button>
</div>
Avoid
tsx
<div className="grid gap-4">
  <Text as="h3">Web Analytics</Text>
  <Text>Measure site traffic without changing your code.</Text>
  <Button>Configure</Button>
</div>
关联文本的间距应小于其所属内容的间距。
推荐示例
tsx
<div className="grid gap-6">
  <div className="grid gap-1.5">
    <Text as="h3">Web Analytics</Text>
    <Text>Measure site traffic without changing your code.</Text>
  </div>
  <Button>Configure</Button>
</div>
应避免示例
tsx
<div className="grid gap-4">
  <Text as="h3">Web Analytics</Text>
  <Text>Measure site traffic without changing your code.</Text>
  <Button>Configure</Button>
</div>

text-spacing
Optically align spacing around text

text-spacing
文本间距需视觉对齐

Spacing around text should take into account its line height. Typically this means vertical spacing should be slightly smaller than horizontal.
Good
tsx
<LayerCard className="px-5 py-4">...</LayerCard>
Avoid
tsx
<LayerCard className="p-5">...</LayerCard>
文本周围的间距应考虑其行高。通常这意味着垂直间距应略小于水平间距。
推荐示例
tsx
<LayerCard className="px-5 py-4">...</LayerCard>
应避免示例
tsx
<LayerCard className="p-5">...</LayerCard>

hover-color-transitions
Never transition colors for hover states

hover-color-transitions
悬停状态切勿使用颜色过渡动画

Color changes on hover must be immediate. Transitions on fast interactions make the UI feel sluggish.
Good
tsx
<button className="hover:bg-kumo-tint">...</button>
Avoid
tsx
<button className="transition-colors duration-300 hover:bg-kumo-tint">
  ...
</button>
悬停时的颜色变化必须是即时的。快速交互上的过渡动画会让UI显得迟缓。
推荐示例
tsx
<button className="hover:bg-kumo-tint">...</button>
应避免示例
tsx
<button className="transition-colors duration-300 hover:bg-kumo-tint">
  ...
</button>

shadow-borders
Never use borders with drop shadows

shadow-borders
切勿同时使用边框与阴影

Use 
ring ring-kumo-line
to create a transparent border that maintains sharp edges.
Good
tsx
<LayerCard className="shadow-md ring ring-kumo-line">...</LayerCard>
Avoid
tsx
<LayerCard className="border border-kumo-line shadow-md">...</LayerCard>
使用
ring ring-kumo-line
创建透明边框，以保持边缘清晰。
推荐示例
tsx
<LayerCard className="shadow-md ring ring-kumo-line">...</LayerCard>
应避免示例
tsx
<LayerCard className="border border-kumo-line shadow-md">...</LayerCard>

concentric-border-radius
Use concentric border radii

concentric-border-radius
使用同心圆角

When borders or rings are 8px or less apart, their corner radii must be mathematically concentric: outer radius = inner radius + padding.
Good
tsx
<div className="rounded-xl p-1">
  <div className="rounded-lg">...</div>
</div>
Avoid
tsx
<div className="rounded-xl p-1">
  <div className="rounded-xl">...</div>
</div>
当边框或环形间距为8px或更小时，它们的圆角半径必须在数学上同心：外半径 = 内半径 + 内边距。
推荐示例
tsx
<div className="rounded-xl p-1">
  <div className="rounded-lg">...</div>
</div>
应避免示例
tsx
<div className="rounded-xl p-1">
  <div className="rounded-xl">...</div>
</div>

icon-alignment
Align icons with the first line of text

icon-alignment
图标与文本第一行对齐

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
<div className="flex items-start gap-2">
  <span className="h-lh flex items-center">
    <Icon />
  </span>
  <Text>Text that may wrap onto multiple lines</Text>
</div>
Avoid
tsx
<div className="flex items-start gap-2">
  <span className="flex items-center">
    <Icon />
  </span>
  <Text>Text that may wrap onto multiple lines</Text>
</div>
tsx
<div className="flex items-center gap-2">
  <Icon />
  <Text>Text that may wrap onto multiple lines</Text>
</div>
行内图标必须在视觉上与文本大小一致，并与文本居中对齐。多行文本对齐时使用
h-lh flex items-center
。
推荐示例
tsx
<div className="flex items-start gap-2">
  <span className="h-lh flex items-center">
    <Icon />
  </span>
  <Text>Text that may wrap onto multiple lines</Text>
</div>
应避免示例
tsx
<div className="flex items-start gap-2">
  <span className="flex items-center">
    <Icon />
  </span>
  <Text>Text that may wrap onto multiple lines</Text>
</div>
tsx
<div className="flex items-center gap-2">
  <Icon />
  <Text>Text that may wrap onto multiple lines</Text>
</div>

inline-monospace-size
Reduce the font size of inline monospaced text

inline-monospace-size
缩小行内等宽文本的字号

Monospaced text should have a slightly smaller font size (~0.9em) when mixed with regular text.
Good
tsx
<Text size="lg">
  Edit <span className="font-mono text-[0.9em]">wrangler.toml</span> to
  continue.
</Text>
Avoid
tsx
<Text size="lg">
  Edit <span className="font-mono">wrangler.toml</span> to continue.
</Text>
当等宽文本与常规文本混合使用时，其字号应略小（约0.9em）。
推荐示例
tsx
<Text size="lg">
  Edit <span className="font-mono text-[0.9em]">wrangler.toml</span> to
  continue.
</Text>
应避免示例
tsx
<Text size="lg">
  Edit <span className="font-mono">wrangler.toml</span> to continue.
</Text>

sticky-borders
Use 
border
to separate sticky elements from the content

sticky-borders
使用
border
分隔粘性元素与内容

Good
tsx
<div className="sticky top-0 border-b border-kumo-line">...</div>
Avoid
tsx
<div className="sticky top-0">...</div>
推荐示例
tsx
<div className="sticky top-0 border-b border-kumo-line">...</div>
应避免示例
tsx
<div className="sticky top-0">...</div>

collapse-content-size
Maintain content size during collapse animations

collapse-content-size
折叠动画期间保持内容尺寸不变

Collapsible content must maintain its content size while closing to avoid its content shifting during animations.
Good
tsx
<motion.div animate={{ width: open ? 256 : 0 }}>
  <div className="w-64">...</div>
</motion.div>
Avoid
tsx
<motion.div animate={{ width: open ? 256 : 0 }}>
  <div className="w-full min-w-0">...</div>
</motion.div>
可折叠内容在关闭时必须保持其内容尺寸，以避免动画过程中内容移位。
推荐示例
tsx
<motion.div animate={{ width: open ? 256 : 0 }}>
  <div className="w-64">...</div>
</motion.div>
应避免示例
tsx
<motion.div animate={{ width: open ? 256 : 0 }}>
  <div className="w-full min-w-0">...</div>
</motion.div>

layer-card-nesting
Never stack 
LayerCard
on top of one another

layer-card-nesting
切勿嵌套
LayerCard

Good
tsx
<div>
  <Text as="h3">Recent requests</Text>
  <LayerCard>...</LayerCard>
</div>
Avoid
tsx
<LayerCard>
  <Text as="h3">Recent requests</Text>
  <LayerCard>...</LayerCard>
</LayerCard>
推荐示例
tsx
<div>
  <Text as="h3">Recent requests</Text>
  <LayerCard>...</LayerCard>
</div>
应避免示例
tsx
<LayerCard>
  <Text as="h3">Recent requests</Text>
  <LayerCard>...</LayerCard>
</LayerCard>

dialog-rendering
Never conditionally render dialogs

dialog-rendering
切勿条件渲染对话框

Conditionally rendering dialogs disables their open/close animation. Use the 
open
prop to determine if a dialog should be visible or not.
Good
tsx
<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>
Avoid
tsx
{
  open && (
    <Dialog.Root open>
      <Dialog>
        <Dialog.Title>Edit Worker</Dialog.Title>
      </Dialog>
    </Dialog.Root>
  );
}
条件渲染对话框会禁用其开/关动画。使用
open
属性来控制对话框是否可见。
推荐示例
tsx
<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>
应避免示例
tsx
{
  open && (
    <Dialog.Root open>
      <Dialog>
        <Dialog.Title>Edit Worker</Dialog.Title>
      </Dialog>
    </Dialog.Root>
  );
}