Captions

一款完全在浏览器中运行的专业视频编辑器。

采用干净、轻盈的中性色调，搭配深炭灰色文字，确保高对比度和可读性。

transitional-serif · humanist-sans · system-ui

• display48px · 400
• h240px · 400
• body16px · 400

用于展示和标题排版时，使用过渡型衬线字体，以传达高端、富有编辑感的视觉效果。 · 用于正文和UI元素时，使用人文主义无衬线字体，以保持高度的可读性和亲和力。 · 在大型展示文字上保持紧凑的负字距，以形成连贯、专业的外观。

采用4和8的倍数作为一致的间距单位，在主要页面区块之间保留充足的垂直间距。

使用浅灰色的1px内嵌边框，微妙地定义浮动元素和输入框。

0px 4px 10px 0px rgba(0, 0, 0, 0.05) · 0px 0px 0px 0.5px inset rgb(208, 214, 215) · 0px 0px 80px 0px rgba(190, 210, 235, 0.45)

采用标准的居中列布局，设定最大内容宽度，在移动设备上过渡为单列布局。

为按钮和菜单等交互元素提供快速过渡。 · 为出现的元素提供平滑的透明度和变换动画。

细微的背景色变化或轻微的透明度调整。 · 通过背景色变化等方式提供即时的视觉反馈。

• button 胶囊形按钮，带有细微的边框或纯色深色背景，搭配最小的投影。
• card 柔和的圆角矩形，采用浅色背景，并带有微妙的内嵌边框或阴影。
• chip 小型胶囊标签，带有浅色边框，通常搭配一个图标。
• input 宽敞的大型输入区域或拖放区，采用圆角和虚线或实线的浅色边框。
• hero 醒目的文字标题，搭配一个大型交互式组件或视觉元素。

• 语气 专业、自信且直接。
• 标题风格 清晰、陈述性的语句，强调核心价值主张。
• 按钮文案 直接且以行动为导向，通常使用简单的动词。

• 不要使用明亮、饱和的主色——截图显示的是由深灰、白色和柔和蓝绿色组成的克制配色。
• 不要在标题中使用俏皮的圆角无衬线字体——截图在主展示文字上使用了精致的过渡型衬线字体。
• 不要在卡片上使用厚重的投影——截图显示的是非常微妙的阴影或内嵌边框来营造深度。
• 不要在主要组件上使用尖锐的方角——截图统一使用了圆角（8px 到 15px）。
• 不要将深色主题作为主要界面——截图显示的是以明亮、轻盈为主的主题。
• 不要在英雄区堆砌过多元素——截图显示了清晰的层次结构，只有一个主要标题和操作按钮。
• 避免: 过于随意或俚语化的语言。
• 避免: 激进的销售术语。
• 避免: 在主要UI文本中使用复杂的技术术语。

历史提取与模型分析 · 尚未逐项校验