Files

steven_li 9d6cde2d23 feat: 将项目从nano重命名为beaver并更新相关配置

- 将所有环境变量前缀从NANO_改为BEAVER_
- 更新README.md文档内容，包括项目介绍、组件说明和快速开始指南
- 修改.gitignore文件，添加auth-portal运行时路径排除规则
- 更新app-instance镜像标签从nano/app-instance改为beaver/app-instance
- 增强技能安全检查器，支持工具前缀白名单功能
- 添加技能草稿重新检查安全性API端点
- 扩展证据选择器，收集工具调用名称用于技能学习
- 改进技能合成器，基于实际调用的工具生成工具提示
- 优化路由超时处理机制，增加重试逻辑
- 更新后端架构文档，添加可视化入口和基础概念说明
- 实现在WebSocket消息中传递工具迭代次数信息

2026-05-20 18:01:06 +08:00

5.5 KiB

Raw Blame History

DESIGN.md

Brand

Beaver — Taupe

A calm editorial UI system focused on rhythm, hierarchy, and soft neutral contrast.
Designed for AI-native tools, dashboards, and minimalist productivity software.

The interface emphasizes:

Spacious layouts
Soft grayscale surfaces
Typography-first hierarchy
Rounded geometry
Quiet shadows
Dense information with low visual noise

The visual tone should feel:

thoughtful
mature
calm
premium
architectural
editorial

Avoid:

saturated colors
hard borders
sharp corners
excessive gradients
loud shadows
playful illustration-heavy UI

Colors

Core Palette

Token	Hex	Usage
background	`#F5F3F1`	Main app background
foreground	`#0B0B0B`	Primary text
primary	`#1D1715`	Primary actions
secondary	`#E5E2DF`	Secondary surfaces
muted	`#DDD9D6`	Muted backgrounds
accent	`#CAC5C0`	Borders / subtle emphasis

Neutral Scale

Token	Hex
zinc-50	`#F7F5F4`
zinc-100	`#ECE8E5`
zinc-200	`#D8D2CE`
zinc-300	`#B8AEA8`
zinc-400	`#8B7E77`
zinc-500	`#6A5E58`
zinc-600	`#4F4642`
zinc-700	`#342E2B`

Semantic Colors

Taupe

Step	Hex
taupe-100	`#E7E2DE`
taupe-300	`#B8AEA8`
taupe-500	`#8B7E77`
taupe-700	`#5F5550`

Sage

Step	Hex
sage-100	`#E3E8E2`
sage-300	`#B7C2B5`
sage-500	`#869683`
sage-700	`#657162`

Slate

Step	Hex
slate-100	`#E4E7EB`
slate-300	`#BCC4CE`
slate-500	`#8C96A3`
slate-700	`#697281`

Typography

Philosophy

Typography drives hierarchy.

The system should feel like a modern editorial publication mixed with a productivity dashboard.

Large headings use elegant serif typography.
UI and body copy use neutral grotesk sans-serif typography.

Font Stack

Serif

font-family: "Lora", Georgia, serif;

Used for:

hero titles
article headings
marketing emphasis
editorial sections

Sans

font-family: "Public Sans", Inter, sans-serif;

Used for:

UI
labels
forms
dashboards
buttons
navigation

Type Scale

Style	Size	Weight	Line Height
h1	48px	600	1.1
h2	36px	600	1.15
h3	28px	500	1.2
body-lg	18px	400	1.7
body	16px	400	1.6
small	14px	400	1.5
mono	13px	500	1.4

Radius

Rounded geometry should feel soft but architectural.

Token	Radius
xs	4px
sm	8px
md	12px
lg	16px
xl	24px
full	999px

Cards should primarily use:

border-radius: 16px;

Shadows

Shadows should be subtle and diffused.

Avoid strong elevation.

Soft

box-shadow:
0 1px 2px rgba(0,0,0,0.04),
0 6px 24px rgba(0,0,0,0.03);

Floating

box-shadow:
0 12px 40px rgba(0,0,0,0.06);

Grid

Layout

12-column grid
Max width: 1280px
Horizontal padding: 32px
Large whitespace between sections

Content Widths

Type	Width
reading	720px
dashboard	1280px
modal	480px
form	560px

Spacing

Base unit:

4px

Spacing scale:

Token	Value
1	4px
2	8px
3	12px
4	16px
5	20px
6	24px
8	32px
10	40px
12	48px
16	64px

Use generous vertical rhythm.

Sections should breathe.

Components

Buttons

Primary

Dark background
White text
Pill radius
Minimal shadow

background: #1D1715;
color: white;
border-radius: 999px;
height: 40px;
padding: 0 16px;

Secondary

background: #ECE8E5;
color: #1D1715;

Ghost

Transparent background with subtle hover fill.

Cards

Cards are soft containers with quiet separation.

background: rgba(255,255,255,0.7);
border: 1px solid rgba(0,0,0,0.04);
border-radius: 16px;

Avoid heavy borders.

Inputs

Inputs should feel invisible until focused.

background: #F7F5F4;
border: 1px solid transparent;

Focus:

border-color: #8B7E77;
box-shadow: 0 0 0 3px rgba(139,126,119,0.12);

Charts

Charts should use muted earthy tones.

Preferred palette:

taupe
sage
slate