chore(web): 统一设计文档格式
This commit is contained in:
yuxuanhui
+26
-4
@@ -263,6 +263,7 @@ The single chromatic accent is **Fin Orange** (`{colors.fin-orange}` #ff5600)
|
||||
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.
|
||||
- Product-screenshot-led page rhythm: every section centers a product mockup card, marketing chrome stays minimal.
|
||||
- **Saans** proprietary sans-serif carries the entire hierarchy; SaansMono for code-only contexts.
|
||||
@@ -276,6 +277,7 @@ The page rhythm is heavy on **product mockups**: every section's payload is a hi
|
||||
> Source pages: intercom.com (home), /pricing, /helpdesk, /customers, /helpdesk/inbox.
|
||||
|
||||
### Brand & Accent
|
||||
|
||||
- **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.
|
||||
@@ -283,6 +285,7 @@ The page rhythm is heavy on **product mockups**: every section's payload is a hi
|
||||
- **Brand Blue** ({colors.brand-blue}): Saturated brand blue (#0007cb) — used on a small set of marketing illustrations.
|
||||
|
||||
### Surface
|
||||
|
||||
- **Canvas** ({colors.canvas}): Default page background — soft cream-white #f5f1ec.
|
||||
- **Surface 1** ({colors.surface-1}): Pure white — used for floating cards (pricing, feature, product-mockup).
|
||||
- **Surface 2** ({colors.surface-2}): Slightly darker cream — startup-discount banner, alt-row stripes.
|
||||
@@ -292,6 +295,7 @@ The page rhythm is heavy on **product mockups**: every section's payload is a hi
|
||||
- **Inverse Surface 1** ({colors.inverse-surface-1}): One step lighter — hovered footer items in dark contexts.
|
||||
|
||||
### Text
|
||||
|
||||
- **Ink** ({colors.ink}): All headlines, body type, button labels — charcoal #111111.
|
||||
- **Ink Muted** ({colors.ink-muted}): Secondary type at #626260 — meta info, deselected pricing tabs.
|
||||
- **Ink Subtle** ({colors.ink-subtle}): Tertiary type at #7b7b78 — footer columns, helper text.
|
||||
@@ -300,6 +304,7 @@ The page rhythm is heavy on **product mockups**: every section's payload is a hi
|
||||
- **Inverse Ink Muted** ({colors.inverse-ink-muted}): Light gray on black — quote-strip meta.
|
||||
|
||||
### Semantic & Report Palette (in-product mockups)
|
||||
|
||||
- **Error Red** ({colors.semantic-error}): Form validation, destructive states.
|
||||
- **Success Green** ({colors.semantic-success}): Positive states (also `{colors.report-green}`).
|
||||
- **Report Blue** ({colors.report-blue}): Analytics chart blue.
|
||||
@@ -321,7 +326,7 @@ The same family carries the entire hierarchy. Hierarchy is carried by size + wei
|
||||
### Hierarchy
|
||||
|
||||
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|
||||
|---|---|---|---|---|---|
|
||||
| ------------------------- | ---- | ------ | ----------- | -------------- | ------------------------------- |
|
||||
| `{typography.display-xl}` | 72px | 500 | 1.05 | -2.0px | Largest hero headline |
|
||||
| `{typography.display-lg}` | 56px | 500 | 1.10 | -1.4px | Section opener headlines |
|
||||
| `{typography.display-md}` | 40px | 500 | 1.15 | -0.8px | Sub-section headlines |
|
||||
@@ -371,7 +376,7 @@ The cream canvas does the work white space would in another brand. Sections sepa
|
||||
## Elevation & Depth
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|---|---|---|
|
||||
| ----------------- | ---------------------------------------------------------------- | --------------------------------------------- |
|
||||
| 0 (flat) | No shadow, no border | Default for body type, hero text, footer |
|
||||
| 1 (lift on cream) | `{colors.surface-1}` white background on `{colors.canvas}` cream | Pricing cards, feature cards, product mockups |
|
||||
| 2 (hairline lift) | `{colors.surface-1}` + 1px `{colors.hairline}` border | Floating tiles with extra definition |
|
||||
@@ -389,7 +394,7 @@ Intercom resists drop shadows. Depth is communicated by the white-on-cream surfa
|
||||
### Border Radius Scale
|
||||
|
||||
| Token | Value | Use |
|
||||
|---|---|---|
|
||||
| ---------------- | ----- | -------------------------------------- |
|
||||
| `{rounded.xs}` | 6px | Small chips, badges |
|
||||
| `{rounded.sm}` | 6px | Inline tags |
|
||||
| `{rounded.md}` | 6px | All buttons, form inputs |
|
||||
@@ -410,68 +415,85 @@ Intercom resists drop shadows. Depth is communicated by the white-on-cream surfa
|
||||
### Buttons
|
||||
|
||||
**`button-primary`** — Charcoal CTA. The default primary CTA across all pages.
|
||||
|
||||
- Background `{colors.ink}`, text `{colors.on-primary}`, type `{typography.button}`, padding 10px 18px, rounded `{rounded.md}`.
|
||||
- Pressed state lives in `button-primary-pressed`.
|
||||
|
||||
**`button-secondary`** — White button on cream. Used for secondary CTAs.
|
||||
|
||||
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.button}`, padding 10px 18px, rounded `{rounded.md}`. 1px `{colors.hairline}` border.
|
||||
|
||||
**`button-tertiary`** — Plain text button.
|
||||
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.button}`, rounded `{rounded.md}`, padding 10px 18px.
|
||||
|
||||
**`button-fin`** — Fin Orange CTA — reserved for Fin AI product CTAs.
|
||||
|
||||
- Background `{colors.fin-orange}`, text `{colors.on-primary}`, type `{typography.button}`, rounded `{rounded.md}`, padding 10px 18px.
|
||||
|
||||
### Pricing Tabs
|
||||
|
||||
**`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
|
||||
|
||||
**`pricing-card`** — Each tier on `/pricing`.
|
||||
|
||||
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.lg}`, padding 24px.
|
||||
|
||||
**`pricing-card-featured`** — Featured / recommended tier — inverts to charcoal.
|
||||
|
||||
- Background `{colors.ink}`, text `{colors.on-primary}`, otherwise identical structure.
|
||||
|
||||
**`feature-card`** — Generic feature highlight.
|
||||
|
||||
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.lg}`, padding 24px.
|
||||
|
||||
**`product-mockup-card`** — The dominant card type — frames a high-fidelity product UI screenshot.
|
||||
|
||||
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.xl}`, padding 24px.
|
||||
|
||||
**`testimonial-card`** — Customer quote with avatar + name + company.
|
||||
|
||||
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body-lg}`, rounded `{rounded.lg}`, padding 32px.
|
||||
|
||||
**`startup-discount-card`** — The "Startups get 90% off" tinted card.
|
||||
|
||||
- Background `{colors.surface-2}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.lg}`, padding 32px.
|
||||
|
||||
**`customer-logo-tile`** — Small tile in the customer marquee.
|
||||
|
||||
- Background `{colors.canvas}`, text `{colors.ink-muted}`, type `{typography.caption}`, rounded `{rounded.xs}`, padding 16px.
|
||||
|
||||
**`cta-banner`** — Closing CTA panel near page bottom.
|
||||
|
||||
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.headline}`, rounded `{rounded.lg}`, padding 48px.
|
||||
|
||||
### Inputs & Forms
|
||||
|
||||
**`text-input`** + **`text-input-focused`** — Form fields on contact and search overlays.
|
||||
|
||||
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.md}`, padding 10px 14px.
|
||||
|
||||
### FAQ
|
||||
|
||||
**`faq-row`** — Expandable accordion row in the pricing FAQ.
|
||||
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.md}`, padding 24px. 1px `{colors.hairline-soft}` bottom rule.
|
||||
|
||||
### Navigation
|
||||
|
||||
**`top-nav`** — Sticky cream bar with the Intercom wordmark left, nav links centered, log-in + sign-up pair right.
|
||||
|
||||
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-sm}`, height 56px.
|
||||
|
||||
### Footer
|
||||
|
||||
**`footer`** — Dense link grid on `{colors.canvas}` cream with the Intercom wordmark left.
|
||||
|
||||
- Background `{colors.canvas}`, text `{colors.ink-muted}`, type `{typography.caption}`, padding 64px 32px.
|
||||
|
||||
## Do's and Don'ts
|
||||
@@ -502,7 +524,7 @@ Intercom resists drop shadows. Depth is communicated by the white-on-cream surfa
|
||||
### Breakpoints
|
||||
|
||||
| Name | Width | Key Changes |
|
||||
|---|---|---|
|
||||
| ---------- | ------ | --------------------------------------------------- |
|
||||
| Desktop-XL | 1440px | Default desktop layout |
|
||||
| Desktop | 1280px | Card grid 3-up maintained |
|
||||
| Tablet | 1024px | Card grid 3-up → 2-up |
|
||||
|
||||
Reference in New Issue
Block a user