diff --git a/.trellis/spec/frontend/component-guidelines.md b/.trellis/spec/frontend/component-guidelines.md index 3e36299..4e5abed 100644 --- a/.trellis/spec/frontend/component-guidelines.md +++ b/.trellis/spec/frontend/component-guidelines.md @@ -32,6 +32,12 @@ export function Button({ - 复杂页面用 `Card`、`CardHeader`、`CardContent` 等 composition primitive,而不是复制一套容器样式。 - 新建 shared primitive 前先搜索是否已有 `Button`、`Badge`、`Card` 或 `cn`。 +### 统一圆角 + +- 生产前端所有有圆角的页面布局和组件统一使用 6px;`src/styles/globals.css` 中的 `--radius`、`--radius-sm`、`--radius-md`、`--radius-lg` 和 `--radius-xl` 必须最终解析为 6px。 +- 组件 class 优先使用 `rounded-md` 及其方向变体;只有结构性边缘可以使用 `rounded-none`。不要新增 `rounded-full`、不同 named radius 或 arbitrary radius,以免组件之间重新出现圆角漂移。 +- 该约定同样适用于 Badge、Avatar、Progress 和滚动条等 shared primitive,不因原有胶囊或圆形语义保留例外。 + ## 页面状态 页面应把加载、错误、成功状态转成用户可见的语义文本。`SystemStatusPage` 根据 query 状态显示“正在连接”“连接异常”“运行正常”,没有数据时使用安全的默认服务名。 diff --git a/zhixing-web/DESIGN.md b/zhixing-web/DESIGN.md index dd01090..469f514 100644 --- a/zhixing-web/DESIGN.md +++ b/zhixing-web/DESIGN.md @@ -1,7 +1,7 @@ --- version: alpha name: Intercom-design-analysis -description: "An editorial customer-service marketing canvas built around a soft cream-white ground, charcoal type set in Saans (Intercom's proprietary geometric sans), and a single confident Fin Orange (#ff5600) reserved for the Fin AI brand. Cards live as floating white tiles with thin hairline borders and minimal radii (8–16px). Display headlines run Saans at weight 500 with measured negative tracking. The system reads as a careful, product-led publication: product screenshots dominate, ornament is rare, and the only place chromatic energy enters is the Fin Orange CTA." +description: "An editorial customer-service marketing canvas built around a soft cream-white ground, charcoal type set in Saans (Intercom's proprietary geometric sans), and a single confident Fin Orange (#ff5600) reserved for the Fin AI brand. Cards live as floating white tiles with thin hairline borders and a unified 6px radius. Display headlines run Saans at weight 500 with measured negative tracking. The system reads as a careful, product-led publication: product screenshots dominate, ornament is rare, and the only place chromatic energy enters is the Fin Orange CTA." colors: primary: "#111111" @@ -111,14 +111,14 @@ typography: letterSpacing: 0 rounded: - xs: 4px + xs: 6px sm: 6px - md: 8px - lg: 12px - xl: 16px - xxl: 24px - pill: 9999px - full: 9999px + md: 6px + lg: 6px + xl: 6px + xxl: 6px + pill: 6px + full: 6px spacing: xxs: 4px @@ -212,13 +212,13 @@ components: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.button}" - rounded: "{rounded.pill}" + rounded: "{rounded.md}" padding: 8px 16px pricing-tab-selected: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.button}" - rounded: "{rounded.pill}" + rounded: "{rounded.md}" padding: 8px 16px faq-row: backgroundColor: "{colors.canvas}" @@ -260,7 +260,7 @@ Display type is **Saans** — Intercom's proprietary geometric sans — set at w The single chromatic accent is **Fin Orange** (`{colors.fin-orange}` #ff5600) — Intercom's AI-product brand color. It surfaces on the Fin product CTA, the Fin badge in pricing, and a few inline emphasis moments. It is NOT a system primary; the system primary is charcoal `{colors.ink}`. Intercom also maintains a small **report palette** (`{colors.report-blue}`, `{colors.report-green}`, `{colors.report-pink}`, `{colors.report-lime}`) used inside in-product analytics surfaces shown in mockups. -The page rhythm is heavy on **product mockups**: every section's payload is a high-fidelity screenshot of Intercom's product UI, framed in white cards with `{rounded.xl}` 16px corners. The marketing chrome is intentionally quiet so the product can be the protagonist. +The page rhythm is heavy on **product mockups**: every section's payload is a high-fidelity screenshot of Intercom's product UI, framed in white cards with a consistent 6px corner radius. The marketing chrome is intentionally quiet so the product can be the protagonist. **Key Characteristics:** - **Cream canvas** (`{colors.canvas}` #f5f1ec) is the brand's defining surface — neither white nor gray, deliberately warm. @@ -269,14 +269,14 @@ The page rhythm is heavy on **product mockups**: every section's payload is a hi - **Charcoal** `{colors.ink}` (#111111) is the system primary — buttons, headlines, body type all sit on charcoal. - **Fin Orange** (`{colors.fin-orange}` #ff5600) is the AI product color — used on the Fin CTA and Fin badge, never decoratively. - Display tracking pulls aggressively negative (-2.0px on 72px); body stays at 0. -- Card corners stay modest at `{rounded.lg}` 12px and `{rounded.xl}` 16px — never pill-rounded; never square. +- All component corners use the same 6px radius — never pill-rounded and never intentionally square unless a structural edge requires `rounded-none`. ## Colors > Source pages: intercom.com (home), /pricing, /helpdesk, /customers, /helpdesk/inbox. ### Brand & Accent -- **Charcoal** ({colors.ink}): The system primary surface. Headlines, body type, primary CTA pill background — all charcoal. +- **Charcoal** ({colors.ink}): The system primary surface. Headlines, body type, and primary CTA background — all charcoal. - **White** ({colors.on-primary}): Text on charcoal CTAs; canvas of floating cards. - **Fin Orange** ({colors.fin-orange}): The AI-product accent. Used on the Fin CTA, Fin badge, and a small set of inline emphasis moments. - **Report Orange** ({colors.report-orange}): A slightly different orange used inside the report / analytics palette for in-product mockups. @@ -332,7 +332,7 @@ The same family carries the entire hierarchy. Hierarchy is carried by size + wei | `{typography.body}` | 16px | 400 | 1.50 | 0 | Default body | | `{typography.body-sm}` | 14px | 400 | 1.50 | 0 | Card body, footer | | `{typography.caption}` | 12px | 400 | 1.40 | 0 | Captions, meta | -| `{typography.button}` | 15px | 500 | 1.20 | 0 | Pill / square button labels | +| `{typography.button}` | 15px | 500 | 1.20 | 0 | Button labels | | `{typography.eyebrow}` | 14px | 500 | 1.30 | 0 | Section eyebrow (sentence case) | | `{typography.mono}` | 13px | 400 | 1.50 | 0 | SaansMono for code in mockups | @@ -355,7 +355,7 @@ If implementing without Saans, suitable substitutes include **Söhne** (paid), * - **Base unit**: 8px. - **Tokens (front matter)**: `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px. - Card interior padding: `{spacing.lg}` 24px on pricing/feature cards; `{spacing.xl}` 32px on testimonial/discount cards; `{spacing.xxl}` 48px on CTA banners. -- Pill button padding: 10px vertical · 18px horizontal. +- Button padding: 10px vertical · 18px horizontal. ### Grid & Container @@ -390,20 +390,20 @@ Intercom resists drop shadows. Depth is communicated by the white-on-cream surfa | Token | Value | Use | |---|---|---| -| `{rounded.xs}` | 4px | Small chips, badges | +| `{rounded.xs}` | 6px | Small chips, badges | | `{rounded.sm}` | 6px | Inline tags | -| `{rounded.md}` | 8px | All buttons, form inputs | -| `{rounded.lg}` | 12px | Pricing cards, feature cards, FAQ rows | -| `{rounded.xl}` | 16px | Product mockup cards | -| `{rounded.xxl}` | 24px | Oversized CTA banners | -| `{rounded.pill}` | 9999px | Tab toggles | -| `{rounded.full}` | 9999px | Avatar circles | +| `{rounded.md}` | 6px | All buttons, form inputs | +| `{rounded.lg}` | 6px | Pricing cards, feature cards, FAQ rows | +| `{rounded.xl}` | 6px | Product mockup cards | +| `{rounded.xxl}` | 6px | Oversized CTA banners | +| `{rounded.pill}` | 6px | Tab toggles (legacy alias) | +| `{rounded.full}` | 6px | Avatar containers (legacy alias) | ### Photography & Illustration Geometry -- Product UI screenshots dominate the marketing surface; they sit in `{rounded.xl}` 16px tiles. +- Product UI screenshots dominate the marketing surface; they sit in 6px-radius tiles. - Customer logo tiles render at small sizes (~24–32px logo height) on `{colors.canvas}` cream with no border. -- Avatar circles in testimonial cards use `{rounded.full}` at 40–48px sizes. +- Avatar containers in testimonial cards use the same 6px radius at 40–48px sizes. ## Components @@ -424,8 +424,8 @@ Intercom resists drop shadows. Depth is communicated by the white-on-cream surfa ### Pricing Tabs -**`pricing-tab-default`** + **`pricing-tab-selected`** — Pill-toggle on `/pricing`. -- Default: `{colors.canvas}` background, `{colors.ink-muted}` text, rounded `{rounded.pill}`. +**`pricing-tab-default`** + **`pricing-tab-selected`** — Compact tab toggle on `/pricing`. +- Default: `{colors.canvas}` background, `{colors.ink-muted}` text, rounded `{rounded.md}` (6px). - Selected: `{colors.surface-1}` white background, `{colors.ink}` text — selected = lift onto white. ### Cards & Containers @@ -483,7 +483,7 @@ Intercom resists drop shadows. Depth is communicated by the white-on-cream surfa - Use **`button-fin`** Fin Orange ONLY on Fin AI product CTAs and Fin badges. - Pair Saans display at weight 500 with body at 400. - Use product UI screenshots as the protagonist of every section. -- Use `{rounded.lg}` 12px for cards and `{rounded.xl}` 16px for product mockup tiles. +- Use the unified 6px radius for cards, controls, tags, avatars, and product mockup tiles. - Apply negative tracking proportionally to display sizes. ### Don't @@ -492,7 +492,7 @@ Intercom resists drop shadows. Depth is communicated by the white-on-cream surfa - Don't use Fin Orange as a section background or as a generic primary CTA. - Don't add drop shadows to floating cards. - Don't introduce a second display family. -- Don't pill-round CTAs. +- Don't introduce radius values other than the unified 6px token (except structural `rounded-none`). - Don't write all-caps tracked eyebrows. - Don't promote the report palette colors to brand-level surfaces. - Don't combine charcoal CTAs and Fin Orange CTAs in the same viewport. @@ -512,7 +512,7 @@ Intercom resists drop shadows. Depth is communicated by the white-on-cream surfa ### Touch Targets - CTAs hold ≥40px tap height across viewports. -- Pricing tab pills hold ≥40px tap height. +- Pricing tabs hold ≥40px tap height. - Form inputs hold ≥44px tap target on touch. ### Collapsing Strategy diff --git a/zhixing-web/src/app/layout/app-layout.tsx b/zhixing-web/src/app/layout/app-layout.tsx index a2b88fe..a4bf0c8 100644 --- a/zhixing-web/src/app/layout/app-layout.tsx +++ b/zhixing-web/src/app/layout/app-layout.tsx @@ -91,7 +91,7 @@ function DesktopSidebar({ activePath }: { activePath: string }) { function Brand() { return (
批次级错误