AMS 设计规范 · Design System v1.0

01颜色系统 · Color Tokens

色彩架构

双主题 CSS 变量体系。深色模式主体，浅色模式备用。通过 data-theme 属性切换。

Dark Theme

--bg

#0A0A0C

--bg-1

#16161A

--bg-2

#1C1C22

--bg-3

#22222B

--line

#2A2A35

--line-2

#393948

Accent Palette

--accent (dark)

#8B5CFF

--accent-hi

#A78BFF

--accent-soft

rgba(139,92,255,0.14)

--accent (light)

#6102FF

Text Colors

--fg

#FFFFFF · Primary

--fg-dim

#A1A1AA · Muted

--fg-dim2

#71717A · Faint

--fg-dim3

#52525B · Ghost

Full Token Reference

--bgPage background#0A0A0C / #FFF

--bg-1Soft surface (hover, nav)#16161A / #FAFAFA

--bg-2Card background#1C1C22 / #F4F4F5

--bg-3Card hover, input fill#22222B / #E9E9EC

--lineHairline borders, dividers#2A2A35 / #E5E5EA

--line-2Stronger border on hover#393948 / #D4D4D8

--fgPrimary text#FFF / #0A0A0C

--fg-dimMuted body text#A1A1AA / #52525B

--fg-dim2Labels, meta, eyebrows#71717A

--fg-dim3Ghost text, placeholders#52525B / #A1A1AA

--accentPrimary brand color#8B5CFF / #6102FF

--accent-hiAccent hover / highlight#A78BFF / #4E02CC

--accent-softAccent tinted backgroundrgba(139,92,255,.14)

02字体排版 · Typography

字体系统

三字族分工明确：Space Grotesk 显示级标题（lowercase）， JetBrains Mono 代码与元信息， Inter 正文与 UI。

h-display — Space Grotesk 500 · clamp(48px,9vw,144px)

ams_

智能体管理学 · Agentic Management Science

h-1 — Space Grotesk 500 · clamp(36px,5.5vw,88px) · lh 0.98 · 仅用于拉丁字符

six rewrites × five stages

注：Space Grotesk 为拉丁字体，h-1/h-2 负字距不适用于中文

h-2 — Space Grotesk 500 · clamp(28px,3.6vw,56px) · lh 1.08 · 仅用于拉丁字符

competitive intelligence redesigned

h-3 — Space Grotesk 500 · clamp(20px,1.8vw,28px) · 中英文均可

Agent Networks · 自进化组织

Eyebrow — JetBrains Mono · 11px · ls 0.18em · UPPERCASE

Framework · F01 · 智能体五力重构法

Body — Inter · 16px · lh 1.5 · ls -0.005em

当执行可以被智能体承担，企业管理学的所有基本假设——竞争结构、组织形态、产品逻辑、系统方法、价值评估、人类定位——都需要被重写一遍。AMS 提供了一套系统性框架，帮助企业在智能体时代重构管理基础。

Mono — JetBrains Mono · 13px · UI/meta text

        const agent = new AgentOrchestrator({ intent: "rewrite.competition", stage: "L4" });

        await agent.execute({ frameworks: ["F01","F02","F03"] });

Font Weight Showcase

Space Grotesk

重构 500

重构 600

重构 700

JetBrains Mono

agent_v1 · 400

agent_v1 · 500

EYEBROW · 0.18em

Inter

正文 Regular · 400

正文 Medium · 500

正文 Semi · 600

03按钮 · Buttons

按钮体系

四种 Pill 按钮 + 文本链接 + 图标按钮 + 遗留 Bracket 按钮。所有按钮使用 JetBrains Mono，悬停时箭头右移 4px。

Pill Buttons — border-radius: 999px

Primary Pill → Secondary Pill → Accent Pill →

Usage Rules

pill-primarywhite border → filled on hover. Primary CTA.
pill-secondaryline border, muted. Secondary CTA.
pill-accentpurple fill. Prominent action.

Legacy Buttons (ams.css) — retained for compatibility

btn-primary → btn-bracket → btn-pill btn-pill.is-active text-cta →

Text Link

查看框架全集 → link-arrow →

Icon Buttons — 32px circle

hover → 15° rotate + accent border color

Button Transition Specs

default → all .2s ease

.arr → transform .2s ease · translateX(4px)

icon-btn → rotate(15deg) on hover

text-link gap → 4px → 8px on hover

04卡片 · Cards

卡片体系

七种卡片变体，统一 8px 圆角（code card 用 10px），基础 padding 24px，细边框体系。

Default Card · Feature Card (accent hover-line)

Default Card

bg-2 · border-line · hover bg-3

卡片内容示例。悬停时背景色从 bg-2 过渡到 bg-3，无其他装饰效果。

Feature Card

底部渐变线 · scaleX 动画

悬停时底部呈现 2px 紫色渐变线条，从左向右展开，强调特性卡片。

Stat Card — tabular-nums number

40

管理框架

6

模块重写

5

成熟度阶段

3

治理神经

Framework Card (F-badge style)

F01

智能体五力重构法

重新审视波特五力，在 AI Agent 时代重构竞争优势的来源与护城河评估。

L4 竞争重写 →

G01

意图管理框架

确保人类意图在 Agent 执行链中不被稀释、不被扭曲的系统性方法论。

治理神经 Intent →

F07

人机角色重定义

当 Agent 承担执行，人的定位从执行者演变为编排者、设定者。

L3 组织重写 →

Governance Rail — horizontal

◎

意图管理

Intent · G01

◇

边界与升级

Boundary · G02

◆

主权控制

Sovereignty · G03

Code Card — traffic-light header · mono body

ams.config.ts

// AMS Agent Orchestration Config
const config = {
  frameworks: ["F01", "F07", "G01"],
  stage: "L4",
  accent: "#8B5CFF",
  rewrite: 6,
};
export default config;

05标签与徽章 · Labels & Badges

标记系统

七类标记元素，均使用 JetBrains Mono，以统一的视觉密度呈现分类信息。

Section Label (avenia-style)

01颜色系统 · Color Tokens

Framework · F01

display:flex · gap:12px · JetBrains Mono 11px · ls 0.18em · UPPERCASE

Eyebrow / Kicker

竞争重写 · Competition Rewrite · F01–F06

▌ v1.0 · 造物云思想底座

▌设计规范 · Design System

Status Badge · Framework Badge

实时 · Live

Agent 运行中

F01 G01 F07–F12

Stage Tags (L1–L5)

L1

工具辅助

L2

流程嵌入

L3

系统协同

L4

能力网络

L5

自进化

Module / Category Tags

① 竞争重写 ② 组织重写 ③ 产品重写 ④ 系统重写 ⑤ 价值重写 ⑥ 人类重写治理神经

06交互模式 · Interaction Patterns

交互组件

列表行、四列 Why 网格、文字走马灯。悬停交互均有过渡动效。

Use-Case Row — hover shifts padding + bg

竞争逻辑重构 · F01–F06

智能体五力 · 护城河重估 · 能力组合矩阵

→

组织形态演化 · F07–F12

角色重定义 · 人机协同 · 扁平化编排

→

产品逻辑重写 · F13–F19

任务化产品 · AaaS · 自适应交付

→

治理神经贯穿 · G01–G03

意图管理 · 边界控制 · 主权保障

→

Why-Card Grid — 4-col · 1px gap dividers · accent bottom-line

◎

系统性

40 个框架构成完整方法论体系，而非零散工具集合。

◇

阶段性

五阶段成熟度模型，精确定位企业当前位置与跃迁路径。

△

可操作

每个框架均有诊断矩阵、执行清单，可直接落地实施。

✦

前瞻性

基于 Agent 时代底层逻辑重构，而非修补工业时代框架。

Marquee / Rotator — continuous scroll · accent ✦ separators

竞争重写 ✦ 组织重写 ✦ 产品重写 ✦ 系统重写 ✦ 价值重写 ✦ 人类重写 ✦ 治理神经 ✦ 五阶段跃迁 ✦ 竞争重写 ✦ 组织重写 ✦ 产品重写 ✦ 系统重写 ✦ 价值重写 ✦ 人类重写 ✦ 治理神经 ✦ 五阶段跃迁 ✦

07动效规范 · Motion

动效体系

所有动效遵循统一的缓动曲线与时长规范。Reveal 使用 cubic-bezier(.2,.7,0,1) 获得有机感。

Reveal Animation — scroll-triggered · data-reveal

opacity: 0 → 1 · translateY(24px) → 0

transition: .9s cubic-bezier(.2,.7,0,1) · 触发：滚动进入视口

Aurora Orbs — blur(60px) · mix-blend-mode screen · orb-float 8s

aurora · bounded preview

Pulse · Float · Shimmer · Marquee

pulse-ring · 2.4s

status-dot · 2s

float-up · 5s

shimmer · 2.4s

ams

cursor blink · 1.05s

Transition Token Reference

UI fast: all .15s ease — 按钮颜色、透明度
UI default: all .18s ease — 边框、背景色
UI medium: all .22s ease — 卡片 hover
UI slow: all .25s ease — 主题切换
Arrow slide: transform .2s ease — .arr → translateX(4px)
Reveal: opacity+transform .9s cubic-bezier(.2,.7,0,1)
Reveal slow: 1s ease — data-reveal-slow
Clip reveal: clip-path 1.1s cubic-bezier(.7,0,.3,1)
Word reveal: .7s cubic-bezier(.2,.7,.2,1) · stagger 60ms
Card accent-line: scaleX .35s cubic-bezier(.2,.7,0,1)
Orb drift: 18s ease-in-out infinite
Marquee: 40–50s linear infinite

08布局规范 · Layout

布局系统

1200px max-width 容器，24px 水平 padding，72px 网格背景，8-step 间距比例，响应式网格系统。

Container · max-width: 1200px · padding: 0 24px

.container · max-width: 1200px · margin: 0 auto · padding: 0 24px

content area · scales with viewport · max 1200px

Spacing Scale (8px base)

4px

micro · gap, inline spacing

8px

xs · badge padding, icon gap

12px

sm · nav item padding

16px

md · base unit, card inner

24px

lg · card padding, section gap

32px

xl · component spacing

48px

2xl · section internal

80px

3xl · section py

96px

4xl · hero pt

Grid Patterns

2-col

1

2

3-col

1

2

3

4-col

1

2

3

4

why-grid pattern · gap: 1px · bg: var(--line)

1

2

3

4

Border Radius Scale

2px
btn-bracket

4px
legacy card

8px
card-default

10px
code card

999px
pill btn

50%
icon btn

Navigation Bar Spec

position: fixed · inset-x: 0 · top: 0

height: 64px (h-16)

backdrop-filter: blur(12px)

border-bottom: 1px solid var(--line)

brand: Space Grotesk 14px → mono 14px

links: JetBrains Mono 13px · fg-dim → fg

cta: btn-bracket · 2px radius

bg: gradient → transparent (fade-out)

ams 视觉语言_