/ Brand · UI Specification

UI 规范

把 XAISites 已实现的设计系统压缩到一页:栅格、间距、组件、按钮与链接、Hero 与 Module 布局。所有样例直接渲染自项目代码,改了 token 这里就跟着变。

/ 01 — Grid & Spacing

栅格与间距

12 列响应式栅格 · 8px 节奏 · 三档容器宽度。同一个尺度贯穿全站。

12-col grid · gap-6max-w-7xl · px-4 sm:px-6 lg:px-8

col-span-7 · content

col-span-5 · sidebar

8px rhythm · Tailwind units1u = 4px

space-1

4px

space-2

8px

space-3

12px

space-4

16px

space-6

24px

space-8

32px

space-12

48px

space-16

64px

Containers

max-w-3xl768pxReading column · long-form

max-w-5xl1024pxPage hero · narrative

max-w-7xl1280pxDefault page shell

px (mobile)16pxpx-4

px (tablet+)24 / 32pxsm:px-6 lg:px-8

Vertical rhythm

section py112 / 144pxpy-28 sm:py-36

hero pt144 / 176pxpt-36 sm:pt-44

card padding32 / 40pxp-8 sm:p-10

grid gap24pxgap-6 default

grid gap (hairline)1pxgap-px on bg-border/40

Breakpoints

sm

≥ 640px

md

≥ 768px

lg

≥ 1024px

xl

≥ 1280px

2xl

≥ 1536px

/ 02 — Type scale

字号与行高

Display / Heading / Body / Caption 四档共 12 个 token,标题用 clamp 流体缩放。

Aa 数据 · Console

.text-display-xl

Hero · 48 → 72px

Aa 数据 · Console

.text-display-lg

Page hero · 40 → 56px

Aa 数据 · Console

.text-heading-lg

Section title · 36px

Aa 数据 · Console

.text-heading-md

Sub-section · 30px

Aa 数据 · Console

.text-heading-sm

Card title · 24px

Aa 数据 · Console

.text-body-lg

Lead paragraph · 18px

Aa 数据 · Console

.text-body

Body · 16px / 1.65

Aa 数据 · Console

.text-body-sm

Dense body · 14px

Aa 数据 · Console

.text-eyebrow

Mono · 12px · 0.25em tracking

Aa 数据 · Console

.text-overline

Mono · 11px · 0.2em tracking

Aa 数据 · Console

.text-stat

Numerals · tabular-nums

Aa 数据 · Console

.text-caption

Meta · muted

/ 03 — Components

组件样式

Card · Stat · Eyebrow · Tag · Divider — 站内出现频率最高的五个原子组件。

Card · defaultrounded-2xl hairline bg-gradient-card p-8

/ 01 — Module

AI Bot Cluster

7×24 自动化客服、直播与营销机器人。

Stat · numerictext-stat text-accent-glow

Stream Events

100M+

实时事件 / 日

Tags · pillrounded-full hairline px-3 py-1

Filters

Multi-countryBrand UnityAI-OperatedCity License

Eyebrow + heading.text-eyebrow + h2.text-gradient

/ 02 — Modules

六大模块

数百品牌、数百万店铺,统一在六个模块下编排。

Divider · hairline gridgrid gap-px bg-border/40

cell 1

cell 2

cell 3

cell 4

Status · livebg-success/15 text-success

Statuses

OnlineSyncingThrottledFailed

/ 04 — Buttons & Links

按钮与链接

三档按钮(Primary / Ghost / Outline)+ 三档链接(Inline / Mono CTA / Nav)。

Buttons

Primary · brand action<Button className="bg-gradient-primary text-primary-foreground shadow-glow" />

Ghost · secondary action<Button variant="ghost" />

Outline · neutral action<Button variant="outline" className="hairline" />

Sizing

size=lgh-10 px-8Hero CTA

size=defaulth-9 px-4In-page action

size=smh-8 px-3Header / table action

radiusrounded-md6px global

Links

Inline linkunderline-offset-4 text-primary hover:underline

Read the full capabilities overview before applying.

Mono CTA · explorefont-mono text-xs uppercase tracking-wider text-primary

Explore modules

Nav linktext-sm text-muted-foreground hover:text-foreground

Vision Capabilities Modules

States

:hoveropacity / underline / gap+1

:focus-visible2px ring-primary, 2px offset

:activeopacity-90

:disabledopacity-50, no events

/ 05 — Layouts

Hero & Module 布局

首屏 Hero 与栅格 Module 的标准结构、留白与断点行为。

Layout · Hero (centered)max-w-7xl · pt-36 sm:pt-44 · pb-28 sm:pb-36

Badge · 24px round

Headline · text-displayAccent line

Subhead — body text, max-w-xl, centered. Two-line max for visual balance.

Badge

py-1.5 px-4 · gap-2

Headline → Sub

mt-8

Sub → CTA

mt-10

CTA gap

gap-3

Layout · Module grid (3 col · hairline-divided)gap-px · sm:grid-cols-2 · lg:grid-cols-3

/ 02 — Modules

Section title here

Section sub-headline · max-w-2xl · text-muted-foreground.

Explore

01 — Console

Global Console

Card body · text-body-sm · text-muted-foreground · 1.6 line height.

02 — AI

Bot Cluster

Card body · text-body-sm · text-muted-foreground · 1.6 line height.

03 — Data

Data Brain

Card body · text-body-sm · text-muted-foreground · 1.6 line height.

Section py

py-28 sm:py-36

Title → grid

mt-12 / mt-16

Card padding

p-8 sm:p-10

Cell border

gap-px on bg-border/40

本页是设计与开发之间的合同。任何偏离需要在 PR 中 @design 评审。