pig/DESIGN.md at master · minuque/pig

version

alpha

name

pig Workbench

description

A Pi Agent GUI with a near-white conversation shell in light mode, flush opaque sidebar and composer, and a near-black shell in dark mode. Action and focus indigo is separate from link indigo. Sidebar selection is neutral. Category colors are skill, steel, teal, and gray. The layout uses a flush sidebar and an opaque transcript column. Navigation and window controls use lower contrast than transcript content.

colors

primary	primary-active	secondary	on-primary	canvas	canvas-soft	surface	sidebar	border	border-subtle	composer-bg	ink	ink-secondary	ink-muted	ink-faint	accent-skill	accent-steel	accent-teal	accent-gray	accent-orange	accent-orange-deep	accent-green	danger-bg	success-bg	warning-bg	info-bg
#5e6ad2	#4f5bc4	#4c56c8	#ffffff	#f7f7f8	#f7f7f8	#ffffff	#fcfcfd	#dedede	#e8e8e8	#f4f4f5	#1b1b1b	#5c5c5c	#6e6e6e	#8a8a8a	#8160d8	#5b7c9d	#2f8f7b	#8a8d94	#d97706	#d97706	#52a450	#fee2e2	#dcfce7	#fef9c3	#eceef8

typography

display-1

display-2

heading-1

heading-2

heading-3

title

body-md

body-sm

button

caption

eyebrow

caption-mono

fontFamily	fontSize	fontWeight	lineHeight	letterSpacing
SystemUI	64px	700	1.0	-2.125px

fontFamily	fontSize	fontWeight	lineHeight	letterSpacing
SystemUI	54px	700	1.04	-1.875px

fontFamily	fontSize	fontWeight	lineHeight	letterSpacing
SystemUI	40px	700	1.1	-1px

fontFamily	fontSize	fontWeight	lineHeight	letterSpacing
SystemUI	26px	600	1.23	-0.4px

fontFamily	fontSize	fontWeight	lineHeight	letterSpacing
SystemUI	22px	600	1.27	-0.25px

fontFamily	fontSize	fontWeight	lineHeight	letterSpacing
SystemUI	16px	600	1.4	-0.125px

fontFamily	fontSize	fontWeight	lineHeight	letterSpacing
SystemUI	14px	400	1.43	0

fontFamily	fontSize	fontWeight	lineHeight	letterSpacing
SystemUI	14px	400	1.43	0

fontFamily	fontSize	fontWeight	lineHeight	letterSpacing
SystemUI	13px	500	1.38	0

fontFamily	fontSize	fontWeight	lineHeight	letterSpacing
SystemUI	13px	400	1.38	0

fontFamily	fontSize	fontWeight	lineHeight	letterSpacing
SystemUI	12px	600	1.33	0.125px

fontFamily	fontSize	fontWeight	lineHeight	letterSpacing
GeistMono	12px	400	1.33	1.2px

rounded

xs	sm	md	lg	xl	popover	code	full
4px	6px	8px	8px	16px	12px	0.65rem	9999px

spacing

xxs	xs	sm	md	lg	xl	xxl
4px	8px	12px	16px	24px	28px	32px

components

nav-bar

button-primary

button-primary-pressed

button-secondary

button-utility

button-icon-circular

badge-pill

badge-mono

feature-card

feature-card-elevated

pricing-plan-card

pricing-plan-card-featured

text-input

hero-band

footer

status-run

status-ok

status-warn-deep

mark-skill

mark-steel

mark-teal

mark-gray

illustration-well

ex-pricing-tier

ex-pricing-tier-featured

ex-product-selector

ex-cart-drawer

ex-app-shell-row

ex-data-table-cell

ex-auth-form-card

ex-modal-card

ex-empty-state-card

ex-toast

backgroundColor	textColor	typography	padding
{colors.canvas-soft}	{colors.ink}	{typography.body-sm}	12px

backgroundColor	textColor	typography	rounded
{colors.primary}	{colors.on-primary}	{typography.button}	{rounded.lg}

backgroundColor	textColor
{colors.primary-active}	{colors.on-primary}

backgroundColor	textColor	typography	rounded
{colors.surface}	{colors.ink}	{typography.button}	{rounded.lg}

backgroundColor	textColor	typography	rounded	padding
{colors.surface}	{colors.ink}	{typography.button}	{rounded.md}	4px 14px

backgroundColor	textColor	rounded
rgba(15, 17, 21, 0.05)	{colors.ink}	{rounded.full}

backgroundColor	textColor	typography	rounded	padding
{colors.surface}	{colors.primary}	{typography.eyebrow}	{rounded.full}	4px 8px

backgroundColor	textColor	typography	rounded	padding
{colors.canvas-soft}	{colors.ink-muted}	{typography.caption-mono}	{rounded.xs}	2px 6px

backgroundColor	textColor	typography	rounded	padding
{colors.surface}	{colors.ink}	{typography.body-md}	{rounded.lg}	16px

backgroundColor	textColor	rounded	padding
{colors.canvas}	{colors.ink}	{rounded.lg}	16px

backgroundColor	textColor	typography	rounded	padding
{colors.surface}	{colors.ink}	{typography.body-sm}	{rounded.md}	16px

backgroundColor	textColor	rounded	padding
{colors.canvas-soft}	{colors.ink}	{rounded.md}	16px

backgroundColor	textColor	typography	rounded	padding
{colors.surface}	{colors.ink}	{typography.body-sm}	{rounded.lg}	8px

backgroundColor	textColor	typography	padding
{colors.secondary}	{colors.on-primary}	{typography.heading-2}	32px

backgroundColor	textColor	typography	padding
{colors.canvas-soft}	{colors.ink-secondary}	{typography.caption}	24px

description	textColor
Streaming / warning mark. Semantic warning.	{colors.accent-orange}

description	textColor
Success mark.	{colors.accent-green}

description	textColor
Active-session / emphasis warning text.	{colors.accent-orange-deep}

description	backgroundColor	textColor	rounded	padding
Category chip. Memory.	{colors.surface}	{colors.accent-skill}	{rounded.xs}	2px 6px

description	backgroundColor	textColor	rounded	padding
Category chip. Skills.	{colors.surface}	{colors.accent-steel}	{rounded.xs}	2px 6px

description	backgroundColor	textColor	rounded	padding
Category chip. Tools.	{colors.surface}	{colors.accent-teal}	{rounded.xs}	2px 6px

description	backgroundColor	textColor	rounded	padding
Category chip. Other.	{colors.surface}	{colors.accent-gray}	{rounded.xs}	2px 6px

description	backgroundColor	textColor
Illustration well on ink.	{colors.ink}	{colors.on-primary}

description	backgroundColor	textColor	borderColor	rounded	padding
Quiet card on the conversation surface.	{colors.surface}	{colors.ink}	{colors.border}	{rounded.lg}	{spacing.md}

description	backgroundColor	textColor	rounded	padding
Featured surface. Polarity-flipped fill.	{colors.ink}	{colors.on-primary}	{rounded.lg}	{spacing.md}

description	backgroundColor	rounded	padding
Summary card on canvas-soft.	{colors.canvas-soft}	{rounded.lg}	{spacing.md}

description	backgroundColor	rounded	padding	item-divider
Stacked list surface.	{colors.surface}	{rounded.lg}	{spacing.md}	{colors.border}

description	backgroundColor	activeIndicator	rounded	padding
Sidebar row. Selection is neutral.	{colors.canvas-soft}	{colors.ink}	{rounded.md}	{spacing.xs} {spacing.sm}

description	headerBackground	headerTypography	bodyTypography	cellPadding	rowBorder
Dense table chrome.	{colors.canvas-soft}	{typography.eyebrow}	{typography.body-sm}	{spacing.xs} {spacing.sm}	{colors.border}

description	backgroundColor	rounded	padding
Form card.	{colors.surface}	{rounded.lg}	{spacing.md}

description	backgroundColor	rounded	padding
Modal surface with border.	{colors.surface}	{rounded.lg}	{spacing.md}

description	backgroundColor	rounded	padding	captionTypography
Empty-state frame.	{colors.canvas-soft}	{rounded.lg}	{spacing.lg}	{typography.body-md}

description	backgroundColor	rounded	padding	typography
Toast surface.	{colors.surface}	{rounded.lg}	{spacing.sm} {spacing.md}	{typography.body-sm}

Overview

Pig 浅色壳层用近白，侧栏贴窗边，输入卡不透明。深色壳层近黑，侧栏略抬升。系统 UI 字号默认 14px。动作靛用于动作和焦点，链接使用更深的同一色相，侧栏选中使用中性灰。布局包含齐边侧栏与不透明的对话列，导航和窗口控件的对比度低于对话内容。

浅色壳层 {colors.surface}（#ffffff），侧栏 {colors.sidebar}，输入卡 {colors.composer-bg}（#f4f4f5）。深色壳层 #0f0f11、侧栏 #161618、输入卡 #27272a。结构色 {colors.primary}（#5e6ad2）用于动作和焦点。控件圆角 {rounded.lg}（8px）。

深色是同一套分面的中性灰反相：壳层 #0f0f11、侧栏 #161618、输入卡 #27272a、用户气泡 #262628。次级井用 #121214。分类色用 skill / steel / teal / gray。阶段与栏目标签可用 {typography.caption-mono}。

壳层走 --surface，侧栏 --sidebar，输入卡 --composer-bg。浏览器与桌面颜色一致。浅色是默认入口。

Colors

Brand & Accent

Action Indigo ({colors.primary} — #5e6ad2)：动作、焦点。深色保持 #606acc，主按钮字色为白。链接走 --link（#4c56c8 / #9aa3ea），侧栏选中背景走 --interaction-selected。
Pressed Indigo ({colors.primary-active} — #4f5bc4)：主按钮按下。深色 #555fbf。
Link Indigo ({colors.secondary} — #4c56c8)：链接用更深的同一色相。深色 #9aa3ea。

分类（用量环、次要标记）：

{colors.accent-skill} / {colors.accent-steel}
{colors.accent-teal} / {colors.accent-gray}

Surface

Surface ({colors.surface} — #ffffff)：壳层（对话列）。
Sidebar ({colors.sidebar} — #fcfcfd)：侧栏，贴窗边。
Border subtle ({colors.border-subtle})：墨 8%，内部分割线。
Composer ({colors.composer-bg} — #f4f4f5)：输入卡不透明填充，比壳层暗一档在浅色下与背景拉开对比，深色 #27272a，底下的正文不会改变它的颜色。
Canvas ({colors.canvas} — #f7f7f8)：次级井。
Secondary well ({colors.canvas-soft} — #f7f7f8)：页面底。
Border ({colors.border})：墨 12%，控件与对话列外沿，比 border-subtle 深一档。

Text

Ink ({colors.ink} — #1b1b1b)
Charcoal ({colors.ink-secondary} — #5c5c5c)
Slate ({colors.ink-muted} — #6e6e6e)
Ash ({colors.ink-faint} — #8a8a8a)

Semantic

Success → {colors.accent-green}，井 {colors.success-bg}
Warning / 运行 → {colors.accent-orange}（强调 {colors.accent-orange-deep}），井 {colors.warning-bg}
Info 井 {colors.info-bg}
Danger → app.css 独立红，井 {colors.danger-bg}

orange 保留兼容命名，映射到黄色警告色。

Reference palette

颜色采用 Linear 近白/近黑表面与靛色交互分层。分割线按墨色透明度推导。辅助文字和状态色按可读性加深。

角色	浅色	深色
壳层	`#ffffff`	`#0f0f11`
侧栏	`#fcfcfd`	`#161618`
选中行	`#e6e6e8`	`#2c2c31`
输入卡	`#f4f4f5`	`#27272a`
菜单	`#ffffff`	`#1c1c1f`
用户气泡	`#e8e8ea`	`#262628`
链接	`#4c56c8`	`#9aa3ea`
行内代码	`#e8e8ea`	`#262628`
行内代码文字	`#1b1b1b`	`#e3e4e6`
primary	`#5e6ad2`	`#606acc`

动作靛以 #5e6ad2 为准。分类色不进品牌。

Dark

同一套分面的中性灰反相，写在 app.css .dark。

角色	值
壳层	`#0f0f11`
侧栏	`#161618`
输入卡	`#27272a`
用户气泡	`#262628`
主字	`#e3e4e6`
次级字	`#b8b9bc`
弱字	`#9a9b9e`
淡字	`#7e7f83`
primary	`#606acc`
主按钮字	`#ffffff`

Typography

Font Family

SystemUI：-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif。

代码与 {typography.caption-mono}：ui-monospace / SF Mono / Menlo / Consolas。

{typography.caption-mono} 用于阶段、栏目标签，大写 + 正 tracking。

对话 Markdown 正文字号 {typography.body-md}，行高 1.8（--ms-leading-body）。行内代码底 --inline-code，边 --border。

Hierarchy

Token	Size	Weight	Line Height	Use
`{typography.display-1}`	64px	700	1.0	展示标题
`{typography.display-2}`	54px	700	1.04	展示标题
`{typography.heading-1}`	40px	700	1.1	大节标题
`{typography.heading-2}`	26px	600	1.23	欢迎页 / 空 Session 短句
`{typography.heading-3}`	22px	600	1.27	卡片标题
`{typography.title}`	16px	600	1.4	栏标题
`{typography.body-md}`	14px	400	1.43	工作台正文
`{typography.body-sm}`	14px	400	1.43	侧栏、导航、对话元数据
`{typography.button}`	14px	500	1.43	按钮
`{typography.caption}`	13px	400	1.38	辅助说明
`{typography.eyebrow}`	12px	600	1.33	徽章、小标签
`{typography.caption-mono}`	12px	400	1.33	阶段 / 栏目标签

headline 只在展示场合。欢迎短句用 heading-2。栏标题 600，按钮 500。

Layout

Spacing

8px 基准。侧栏内边距 12/6；列表行 28–32px；输入卡与 Transcript 正文跟随内容宽度手柄（正文 680–920px，默认 732px），侧栏拖拽只改变两侧留白。

Shell

两栏铺满视口。桌面折叠保留 rail（56px，macOS 桌面 90px）。<900px 左栏为抽屉。

Responsive

Name	Width	变化
Desktop	≥901px	两栏 + rail 折叠
Tablet	521–900	抽屉
Mobile	≤520px	顶栏压缩，phase 文字收成圆点

Elevation & Depth

Level	Treatment	Use
0 — Flat	border / border-subtle	列表、对话列外沿用 border；内部分割线用 border-subtle
1 — Soft	细线，不用阴影分层	输入卡
2 — Pop	稍深，仍短	菜单、抽屉

深色卡和栏用 {colors.border}。侧栏贴窗边，与对话列只留外沿细线。输入卡填充 100%，避免底下的文字改变其颜色；悬浮输入条下方的留白条带同样补底色，滚动中的正文不从胶囊下沿透出。菜单、对话框与提示气泡共用同一份不透明底（--composer-bg），全站不用背景模糊。

Shapes

Token	Value	Use
`{rounded.xs}`	4px	小标签
`{rounded.sm}`	6px	折叠条、次要芯片
`{rounded.md}`	8px	列表行
`{rounded.lg}`	8px	菜单、气泡、主按钮
`{rounded.code}`	0.65rem	代码块
`{rounded.popover}`	12px	浮层、工具卡
`{rounded.xl}`	16px	大容器
`--composer-radius`	26px	输入卡胶囊
`{rounded.full}`	9999px	圆形图标钮

壳层圆角 0。发送是 28px primary 圆钮；运行中无文本时同一圆钮换成墨色实心圆 + 11px 圆角方块（停止）；输入卡为胶囊形：单行紧凑态与多行展开态共用底边锚定，动作行（回形针 + 模型 + 发送）贴胶囊底边。

Do's and Don'ts

浅色：壳层 {colors.surface}，侧栏与输入卡白底，侧栏贴窗边。
深色：壳层 #0f0f11、侧栏 #161618、输入卡 #27272a、用户气泡 #262628。
{colors.primary} 用于动作和焦点。选中走中性灰。
工作台 14px 系统字；标签可用等宽大写。
控件圆角 {rounded.lg}。输入卡胶囊 --composer-radius（26px），发送仍是圆钮。
桌面与网页的输入卡均用实色。桌面折叠保留 rail。
分类走 skill / steel / teal / gray。

Navigation Menu

Repository navigation

DESIGN.md

DESIGN.md

Overview

Colors

Brand & Accent

Surface

Text

Semantic

Reference palette

Dark

Typography

Font Family

Hierarchy

Layout

Spacing

Shell

Responsive

Elevation & Depth

Shapes

Do's and Don'ts

FilesExpand file tree

DESIGN.md

Latest commit

History

DESIGN.md

File metadata and controls

Overview

Colors

Brand & Accent

Surface

Text

Semantic

Reference palette

Dark

Typography

Font Family

Hierarchy

Layout

Spacing

Shell

Responsive

Elevation & Depth

Shapes

Do's and Don'ts