style(web): 统一生产界面圆角为6px
This commit is contained in:
yuxuanhui
+29
-29
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user