common_component_library_vue 0.1.0

package/DESIGN.md

@@ -0,0 +1,487 @@
+---
+version: alpha
+name: Stripi-Inspired-design-analysis
+description: An inspired interpretation of Stripi's design language — a financial-infrastructure brand built on a deep navy ink, an electric indigo primary, and a recurring atmospheric gradient mesh that occupies the upper third of nearly every marketing page. The system pairs the proprietary Sohne family at thin (300) weights with negative letter-spacing for editorial-density display headlines, and uses tabular-figure body type where money and numerics matter. Buttons are tight-radius pills, cards live on near-white surfaces, and the dashboard track flips polarity to a familiar dark-app shell.
+
+colors:
+  primary: "#533afd"
+  primary-deep: "#4434d4"
+  primary-press: "#2e2b8c"
+  primary-soft: "#665efd"
+  primary-bg-subdued-hover: "#b9b9f9"
+  brand-dark-900: "#1c1e54"
+  ink: "#0d253d"
+  ink-secondary: "#273951"
+  ink-mute: "#64748d"
+  ink-mute-2: "#61718a"
+  on-primary: "#ffffff"
+  canvas: "#ffffff"
+  canvas-soft: "#f6f9fc"
+  canvas-cream: "#f5e9d4"
+  hairline: "#e3e8ee"
+  hairline-input: "#a8c3de"
+  ruby: "#ea2261"
+  magenta: "#f96bee"
+  lemon: "#9b6829"
+  shadow-blue: "#003770"
+
+typography:
+  display-xxl:
+    fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif"
+    fontSize: 56px
+    fontWeight: 300
+    lineHeight: 1.03
+    letterSpacing: -1.4px
+    fontFeature: ss01
+  display-xl:
+    fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif"
+    fontSize: 48px
+    fontWeight: 300
+    lineHeight: 1.15
+    letterSpacing: -0.96px
+    fontFeature: ss01
+  display-lg:
+    fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif"
+    fontSize: 32px
+    fontWeight: 300
+    lineHeight: 1.1
+    letterSpacing: -0.64px
+    fontFeature: ss01
+  display-md:
+    fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif"
+    fontSize: 26px
+    fontWeight: 300
+    lineHeight: 1.12
+    letterSpacing: -0.26px
+    fontFeature: ss01
+  heading-lg:
+    fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif"
+    fontSize: 22px
+    fontWeight: 300
+    lineHeight: 1.1
+    letterSpacing: -0.22px
+    fontFeature: ss01
+  heading-md:
+    fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif"
+    fontSize: 20px
+    fontWeight: 300
+    lineHeight: 1.4
+    letterSpacing: -0.2px
+    fontFeature: ss01
+  heading-sm:
+    fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif"
+    fontSize: 18px
+    fontWeight: 300
+    lineHeight: 1.4
+    letterSpacing: 0
+    fontFeature: ss01
+  body-lg:
+    fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif"
+    fontSize: 16px
+    fontWeight: 300
+    lineHeight: 1.4
+    letterSpacing: 0
+    fontFeature: ss01
+  body-md:
+    fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif"
+    fontSize: 15px
+    fontWeight: 300
+    lineHeight: 1.4
+    letterSpacing: 0
+    fontFeature: ss01
+  body-tabular:
+    fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif"
+    fontSize: 14px
+    fontWeight: 300
+    lineHeight: 1.4
+    letterSpacing: -0.42px
+    fontFeature: tnum
+  button-md:
+    fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif"
+    fontSize: 16px
+    fontWeight: 400
+    lineHeight: 1.0
+    letterSpacing: 0
+    fontFeature: ss01
+  button-sm:
+    fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif"
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 1.0
+    letterSpacing: 0
+    fontFeature: ss01
+  caption:
+    fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif"
+    fontSize: 13px
+    fontWeight: 400
+    lineHeight: 1.4
+    letterSpacing: -0.39px
+    fontFeature: tnum
+  micro:
+    fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif"
+    fontSize: 11px
+    fontWeight: 300
+    lineHeight: 1.4
+    letterSpacing: 0
+    fontFeature: ss01
+  micro-cap:
+    fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif"
+    fontSize: 10px
+    fontWeight: 400
+    lineHeight: 1.15
+    letterSpacing: 0.1px
+    fontFeature: ss01
+
+rounded:
+  xs: 4px
+  sm: 6px
+  md: 8px
+  lg: 12px
+  xl: 16px
+  pill: 9999px
+
+spacing:
+  xxs: 2px
+  xs: 4px
+  sm: 8px
+  md: 12px
+  lg: 16px
+  xl: 24px
+  xxl: 32px
+  huge: 64px
+
+components:
+  button-primary-pill:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.pill}"
+    padding: 8px 16px
+  button-primary-pill-pressed:
+    backgroundColor: "{colors.primary-press}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.pill}"
+    padding: 8px 16px
+  button-secondary:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.primary}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.pill}"
+    padding: 8px 16px
+  button-on-dark:
+    backgroundColor: "{colors.brand-dark-900}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.pill}"
+    padding: 8px 16px
+  text-input:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.sm}"
+    padding: 8px 12px
+  text-input-focused:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.sm}"
+    padding: 8px 12px
+  card-feature-light:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  card-pricing:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  card-pricing-featured:
+    backgroundColor: "{colors.brand-dark-900}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  card-cream-band:
+    backgroundColor: "{colors.canvas-cream}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  card-dashboard-mockup:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-tabular}"
+    rounded: "{rounded.lg}"
+    padding: 24px
+  pill-tag-soft:
+    backgroundColor: "{colors.primary-bg-subdued-hover}"
+    textColor: "{colors.primary-deep}"
+    typography: "{typography.micro-cap}"
+    rounded: "{rounded.pill}"
+    padding: 4px 8px
+  nav-bar-on-mesh:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.xs}"
+    padding: 16px 24px
+  link-on-light:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.primary}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.xs}"
+    padding: 0px
+  footer-light:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink-mute}"
+    typography: "{typography.caption}"
+    rounded: "{rounded.xs}"
+    padding: 64px 24px
+---
+
+## Overview
+
+Stripi's design language opens with the gradient mesh. A wide horizontal band of pastel cream, sherbet orange, lavender, electric indigo, and ruby pink occupies the upper third of nearly every marketing page — the brand's instantly-recognizable atmospheric backdrop. Type and product UI mockups float above it on `{colors.canvas}` (white), with the gradient acting as both decoration and visual anchor. The lower portion of the page returns to white, with feature explanations on `{colors.canvas-soft}` (a barely-tinted cool off-white) and dashboard product mockups composited as faux IDE/console panels in deep navy.
+
+The color system has two primary roles. **Indigo** (`{colors.primary}` — `#533afd`) is the brand's signature CTA color, used sparingly: one filled pill per band. **Deep navy** (`{colors.ink}` — `#0d253d`) is the universal body text color and the fill of dashboard mockups, the featured pricing tier, and the dark-app surfaces on the dashboard track. Ruby (`{colors.ruby}`) and magenta (`{colors.magenta}`) appear inside the gradient mesh and as accent dots in product UI mockups; they are not used as button colors.
+
+Typography is built around **Sohne** at weight 300 with negative letter-spacing — the brand's editorial-density display signature. Display sizes (32–56px) use -1.4px to -0.64px tracking; body sizes use 0; tabular caption sizes (where money and numerics matter) use the OpenType `tnum` feature plus a tightening -0.36 to -0.42px tracking. The `ss01` stylistic set is enabled across all roles.
+
+**Key Characteristics:**
+- Gradient-mesh backdrop on every marketing hero — cream/orange/lavender/indigo/ruby horizontally washed across the upper third of the page.
+- Single-indigo CTA hierarchy: filled `{colors.primary}` pill is the only filled button on marketing surfaces.
+- Sohne thin (weight 300) display tier with negative tracking from -1.4px to -0.2px depending on size.
+- Tabular-figure body type (`tnum`) for any cell containing money or numerics — the brand's quiet financial-data signal.
+- Dark-app dashboard track: deep navy product UI mockups sit composited above the white canvas, frequently with rendered code or dashboard tables inside.
+- Pill-shaped buttons (`{rounded.pill}` 9999px) with tight `8px 16px` padding — short, decisive, transactional.
+- Cream-band feature cards (`{colors.canvas-cream}`) introduce a warm interlude between blue/white sections without breaking the brand's chromatic logic.
+
+## Colors
+
+> **Source pages:** home (`/`), `/payments`, `/pricing`, `dashboard.stripe.com/register/payments`.
+
+### Brand & Accent
+- **Indigo** (`{colors.primary}` — `#533afd`): The brand's signature CTA color. Filled-pill button, link emphasis, gradient anchor.
+- **Indigo Deep** (`{colors.primary-deep}` — `#4434d4`): A deeper indigo used in gradient mid-stops and as the press-state warmer alternative.
+- **Indigo Press** (`{colors.primary-press}` — `#2e2b8c`): Pressed-state lift of the primary.
+- **Indigo Soft** (`{colors.primary-soft}` — `#665efd`): A lighter indigo used in product-UI accents and chart highlights.
+- **Indigo Subdued** (`{colors.primary-bg-subdued-hover}` — `#b9b9f9`): Pale indigo fill used as soft tag background.
+- **Brand Dark 900** (`{colors.brand-dark-900}` — `#1c1e54`): The deep navy used on the featured pricing tier and dashboard chrome.
+- **Ruby** (`{colors.ruby}` — `#ea2261`): Gradient accent and chart highlight; never a button.
+- **Magenta** (`{colors.magenta}` — `#f96bee`): Brighter pink stop in gradient meshes.
+- **Lemon** (`{colors.lemon}` — `#9b6829`): Warm sherbet stop in gradient backdrops.
+
+### Surface
+- **Canvas** (`{colors.canvas}` — `#ffffff`): Default page background.
+- **Canvas Soft** (`{colors.canvas-soft}` — `#f6f9fc`): Cool-tinted off-white used on feature bands beneath the gradient hero.
+- **Canvas Cream** (`{colors.canvas-cream}` — `#f5e9d4`): Warm cream used as a feature-band fill — the brand's chromatic interlude.
+- **Hairline** (`{colors.hairline}` — `#e3e8ee`): 1px borders on cards and tables.
+- **Hairline Input** (`{colors.hairline-input}` — `#a8c3de`): Slightly cooler hairline used on form inputs.
+
+### Text
+- **Ink** (`{colors.ink}` — `#0d253d`): Default body text color across the brand. Deep navy, never pure black.
+- **Ink Secondary** (`{colors.ink-secondary}` — `#273951`): Secondary text on white.
+- **Ink Mute** (`{colors.ink-mute}` — `#64748d`): Helper text, captions, table labels.
+- **Ink Mute 2** (`{colors.ink-mute-2}` — `#61718a`): Near-equivalent to ink-mute used in nav.
+- **On Primary** (`{colors.on-primary}` — `#ffffff`): Text on indigo / dark-navy surfaces.
+
+### Semantic
+The brand does not use a separate semantic color palette in the marketing system — error / success states live in dashboard-product UI specifically.
+
+## Typography
+
+### Font Family
+
+The display and UI tier is **Sohne** (proprietary, licensed from Klim Type Foundry) at weights 300 (thin) and 400 (regular). The variable font (`sohne-var`) is loaded with `font-feature-settings: "ss01"` enabled globally — the stylistic set substitutes a single-story `a` and other character variants that are part of the brand's typographic signature.
+
+When Sohne is unavailable, fall back to **SF Pro Display** at thin weights, then system-ui. For maximum brand fidelity, **Inter** (open-source) at weight 300 with `font-feature-settings: "ss01"` and `letter-spacing: -1.4px` on display sizes approximates the rhythm closely.
+
+### Hierarchy
+
+| Token | Size | Weight | Line Height | Letter Spacing | Use |
+|---|---|---|---|---|---|
+| `{typography.display-xxl}` | 56px | 300 | 1.03 | -1.4px | Hero headline |
+| `{typography.display-xl}` | 48px | 300 | 1.15 | -0.96px | Section opener |
+| `{typography.display-lg}` | 32px | 300 | 1.1 | -0.64px | Card title / sub-section |
+| `{typography.display-md}` | 26px | 300 | 1.12 | -0.26px | Compact card title |
+| `{typography.heading-lg}` | 22px | 300 | 1.1 | -0.22px | Pricing tier name |
+| `{typography.heading-md}` | 20px | 300 | 1.4 | -0.2px | Section sub-heading |
+| `{typography.heading-sm}` | 18px | 300 | 1.4 | 0 | Mini-section label |
+| `{typography.body-lg}` | 16px | 300 | 1.4 | 0 | Marketing body lead |
+| `{typography.body-md}` | 15px | 300 | 1.4 | 0 | Default UI body |
+| `{typography.body-tabular}` | 14px | 300 | 1.4 | -0.42px | Money / numeric tables (uses `tnum`) |
+| `{typography.button-md}` | 16px | 400 | 1.0 | 0 | Pill button label |
+| `{typography.button-sm}` | 14px | 400 | 1.0 | 0 | Compact pill label |
+| `{typography.caption}` | 13px | 400 | 1.4 | -0.39px | Helper, table labels |
+| `{typography.micro}` | 11px | 300 | 1.4 | 0 | Fine print |
+| `{typography.micro-cap}` | 10px | 400 | 1.15 | 0.1px | All-caps eyebrow |
+
+### Principles
+- **Thin weight is the brand.** Display tiers always render at weight 300. Bumping to 400+ removes the brand's editorial air.
+- **Negative tracking on display.** -1.4px at 56px, scaling proportionally down to -0.2px at 20px. The negative tracking is the brand's typographic signature.
+- **Tabular figures for money.** Any cell rendering currency, transaction amounts, or numeric counts uses `font-feature-settings: "tnum"` plus a tightening tracking. The brand quietly signals its financial DNA through this micro-detail.
+- **`ss01` globally.** Apply `font-feature-settings: "ss01"` to the body element so the stylistic-set substitution is on for every text role.
+
+### Note on Font Substitutes
+Sohne is proprietary. Use **Inter** (open-source via Google Fonts) at weight 300 with `letter-spacing: -1.4px` and `font-feature-settings: "ss01"` for display tiers — Inter is the closest open-source analogue. For body sizes, Inter at 300 weight with `font-feature-settings: "tnum"` (where applicable) is the canonical substitute. Avoid Helvetica or system-ui defaults — they're heavier than the brand needs.
+
+## Layout
+
+### Spacing System
+- **Base unit**: 8px (with 2 / 4 / 12 sub-tokens for fine work).
+- **Tokens**: `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px · `{spacing.xxl}` 32px · `{spacing.huge}` 64px.
+- **Section padding**: 64–96px on marketing surfaces; 32–48px on dashboard / product surfaces.
+- **Card internal padding**: 32px on feature cards; 24px on dashboard mockups.
+
+### Grid & Container
+- Marketing pages center in a ~1200px container with the gradient mesh extending edge-to-edge above.
+- Pricing collapses 4-up → 2-up → 1-up at 1024 / 768 breakpoints.
+- Dashboard product mockups use their own internal grids (12-col tables, 3-col card grids) rendered as static composites.
+
+### Whitespace Philosophy
+The gradient mesh occupies the upper third of the page; the white canvas below is generously padded. Section gaps tend toward 96px, with content tightening to 32px on dashboard / pricing pages where users compare and act.
+
+## Elevation & Depth
+
+| Level | Treatment | Use |
+|---|---|---|
+| 0 | Flat | Default surface |
+| 1 | `box-shadow: rgba(0,55,112,0.08) 0 1px 3px` | Card lift on white |
+| 2 | `box-shadow: rgba(0,55,112,0.08) 0 8px 24px, rgba(0,55,112,0.04) 0 2px 6px` | Floating panels, dashboard mockup chrome |
+| 3 | Gradient mesh backdrop | The brand's primary depth medium — atmospheric color rather than literal shadow |
+
+### Decorative Depth
+The gradient mesh IS the depth system. Implemented as a layered SVG or large background image rather than CSS gradients (the actual mesh has organic blob shapes that aren't CSS-renderable). The mesh provides the brand's signature lift; literal shadows are reserved for product-UI mockups and stay subtle.
+
+## Shapes
+
+### Border Radius Scale
+
+| Token | Value | Use |
+|---|---|---|
+| `{rounded.xs}` | 4px | Hairline tags, table chrome |
+| `{rounded.sm}` | 6px | Form inputs |
+| `{rounded.md}` | 8px | Compact cards, alerts |
+| `{rounded.lg}` | 12px | Pricing cards, feature cards |
+| `{rounded.xl}` | 16px | Dashboard product mockup chrome |
+| `{rounded.pill}` | 9999px | All buttons, tag pills |
+
+### Photography Geometry
+The brand uses **product UI mockups** more than photography. Dashboard composites render as faux IDE/terminal/dashboard chrome inside `{rounded.lg}` 12px containers with a subtle `box-shadow`. Real photography appears in customer logo strips and the rare case-study card; treated as inset 4:3 with no shadow.
+
+## Components
+
+### Buttons
+
+**`button-primary-pill`** — the dominant CTA system-wide.
+- Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button-md}`, padding `{spacing.sm} {spacing.lg}` (8px 16px), rounded `{rounded.pill}` 9999px.
+- Pressed state `button-primary-pill-pressed` shifts background to `{colors.primary-press}`.
+
+**`button-secondary`** — outline-style alternative.
+- Background `{colors.canvas}`, text `{colors.primary}`, 1px solid `{colors.primary}` border, same pill geometry.
+
+**`button-on-dark`** — used on dashboard / dark surfaces.
+- Background `{colors.brand-dark-900}`, text `{colors.on-primary}`, same pill geometry.
+
+### Cards & Containers
+
+**`card-feature-light`** — feature explanation card on white.
+- Background `{colors.canvas}`, padding `{spacing.xxl}`, rounded `{rounded.lg}` 12px, 1px `{colors.hairline}` border, optional Level 1 shadow.
+
+**`card-pricing`** — standard pricing tier.
+- Background `{colors.canvas}`, padding `{spacing.xxl}`, rounded `{rounded.lg}`, 1px `{colors.hairline}` border. Title `{typography.heading-lg}`, price `{typography.display-md}`, body `{typography.body-md}`, CTA pinned bottom as `button-primary-pill`.
+
+**`card-pricing-featured`** — the inverted dark featured tier.
+- Background `{colors.brand-dark-900}`, text `{colors.on-primary}`, otherwise identical structure to `card-pricing`. The deep-navy fill is the brand's distinctive featured-tier choice.
+
+**`card-cream-band`** — warm interlude card.
+- Background `{colors.canvas-cream}`, text `{colors.ink}`, padding `{spacing.xxl}`, rounded `{rounded.lg}`. Used to break up the indigo / white rhythm with warmth.
+
+**`card-dashboard-mockup`** — composited dashboard / product UI screenshot.
+- Background `{colors.canvas}`, type `{typography.body-tabular}` (with `tnum`), padding `{spacing.xl}` 24px, rounded `{rounded.lg}` 12px, Level 2 shadow. Often contains nested mini-mockups: code preview + dashboard table + chart card.
+
+### Inputs & Forms
+
+**`text-input`** — standard form field.
+- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-md}`, padding `{spacing.sm} {spacing.md}` (8px 12px), rounded `{rounded.sm}` 6px, 1px `{colors.hairline-input}` border.
+- Focus state `text-input-focused`: border swaps to `{colors.primary}`.
+
+### Navigation
+
+**`nav-bar-on-mesh`** — top nav floating over the gradient hero.
+- Background `{colors.canvas}` (or transparent depending on scroll), text `{colors.ink}`, padding `{spacing.lg} {spacing.xl}`. Logo wordmark on the left, primary nav center, sign-in + filled `button-primary-pill` on the right.
+
+### Pills, Tags, and Chips
+
+**`pill-tag-soft`** — subdued indigo tag.
+- Background `{colors.primary-bg-subdued-hover}`, text `{colors.primary-deep}`, type `{typography.micro-cap}`, padding `4px 8px`, rounded `{rounded.pill}`.
+
+### Signature Components
+
+**Gradient Mesh Backdrop** — pastel cream → sherbet orange → lavender → indigo → ruby pink stops blurred horizontally across the upper third of the page. Implemented as SVG or a large background image — not a flat CSS gradient (the real mesh has organic blob shapes).
+
+**Composited Dashboard Mockup** — multi-layer faux-product-UI compositions: an IDE panel on the left, a dashboard table center, a chart card on the right, all rendered at small scale inside `{rounded.lg}` containers with subtle Level 2 shadows. The composite is the brand's most-photographed feature.
+
+**Tabular-Figure Money Type** — every number rendering money, count, or transaction value uses `font-feature-settings: "tnum"`. The brand's quiet signal that it's a financial-infrastructure platform.
+
+**`link-on-light`** — inline links on light surfaces.
+- Text `{colors.primary}` rendered in `{typography.body-md}`, no underline by default.
+
+**`footer-light`** — site-wide footer.
+- Background `{colors.canvas}`, text `{colors.ink-mute}`, type `{typography.caption}`, padding `{spacing.huge} {spacing.xl}` (64px 24px). Holds 4–6 columns of link groups, social icons, and a small legal row.
+
+## Do's and Don'ts
+
+### Do
+- Reserve `{colors.primary}` for filled CTAs and inline link emphasis — it should appear sparingly, one filled button per band.
+- Apply the gradient mesh to every marketing hero; bare-canvas heroes feel off-brand.
+- Render display tiers at weight 300 with negative letter-spacing — the thin tracking is the typographic signature.
+- Use `font-feature-settings: "tnum"` on every money / numeric cell.
+- Apply `font-feature-settings: "ss01"` globally on the body element.
+- Pair every feature explanation with a composited product UI mockup; the brand's argument is "look at the actual product."
+
+### Don't
+- Don't bump display weight above 300 — at 400 the brand's editorial air collapses.
+- Don't add new accent colors outside the documented gradient stops (cream / orange / lavender / indigo / ruby / magenta).
+- Don't use the indigo `{colors.primary}` as a body-text color — it's a CTA and link color, not a type color at body size.
+- Don't shrink button padding below `8px 16px` — the tight pill is part of the brand's transactional feel.
+- Don't render money cells without `tnum` — it breaks the quiet financial-data signature.
+- Don't replace the pill shape with rounded-rectangles for buttons.
+
+## Responsive Behavior
+
+### Breakpoints
+
+| Name | Width | Key Changes |
+|---|---|---|
+| Wide | ≥ 1440px | Full gradient mesh edge-to-edge; dashboard composite at full scale |
+| Desktop | 1024–1440px | Default content max-width; pricing 4-up |
+| Tablet | 768–1023px | Pricing 2-up; dashboard composite simplifies to 2 panels |
+| Mobile | < 768px | Pricing 1-up; hamburger nav; display drops 56 → 36px |
+
+### Touch Targets
+- Pill buttons hit ≥ 40×40px on mobile via padding scaling. On smaller screens, buttons size up to 44×44px to maintain WCAG AAA.
+- Form fields stay at 40px minimum height.
+
+### Collapsing Strategy
+- Display tiers stair-step 56 → 48 → 32 → 26 → 22px through the breakpoints.
+- Gradient mesh re-tiles on mobile to preserve the wash without disappearing.
+- Dashboard composites simplify to single-panel mockups on mobile; the multi-layer composition only renders at desktop+.
+- Pricing tiers stair-step 4-up → 2-up → 1-up.
+
+### Image Behavior
+Product UI composites use `srcset` with art-direction crops at major breakpoints. Mobile crops focus on the most actionable inner panel; desktop crops show the full multi-layer composition.
+
+## Iteration Guide
+
+1. Focus on ONE component at a time.
+2. Reference component names and tokens directly (`{colors.primary}`, `{button-primary-pill}-pressed`, `{rounded.pill}`).
+3. Run `npx @google/design.md lint DESIGN.md` after edits.
+4. Add new variants as separate entries.
+5. Default body to `{typography.body-md}` (15px); use `{typography.body-tabular}` for any money / numeric cell.
+6. Apply `ss01` globally on the body; apply `tnum` per-element on numeric content.
+7. The gradient mesh is non-negotiable on marketing heroes — bare-canvas heroes break the brand.

package/README.md

@@ -0,0 +1,100 @@
+# common_component_library_vue
+
+**Vue 3 · TypeScript · Vite · DESIGN.md**
+
+一个由 [DESIGN.md](DESIGN.md) 驱动的通用组件库。视觉规范取自
+[awesome-design-md](https://github.com/VoltAgent/awesome-design-md) 收录的 **Stripe** 设计语言分析
+（靛蓝主色 `#533afd`、深海军蓝墨色 `#0d253d`、Sohne 300 细字重排版、胶囊按钮、渐变网格、tabular figures）。
+
+> DESIGN.md 是 Google Stitch 提出的纯文本设计系统文档：把一份 markdown 放进项目根目录，
+> 告诉 AI 代理 "build me a page that looks like this"，即可生成视觉一致的高质量 UI。
+
+## 快速开始
+
+```bash
+npm install
+npm run dev        # 启动组件演示页 (http://localhost:5173)
+npm run build      # 类型检查 + 构建演示页
+npm run build:lib  # 构建可发布的组件库 (dist-lib/, ESM + UMD)
+npm run preview    # 预览构建产物
+```
+
+## 项目结构
+
+```
+common_component_library_vue/
+├── DESIGN.md              # 设计规范（Stripe 风格，来自 awesome-design-md）
+├── index.html             # 演示页入口
+├── vite.config.ts         # 演示页构建
+├── vite.lib.config.ts     # 组件库构建（lib mode）
+└── src/
+    ├── main.ts            # 演示页挂载
+    ├── App.vue            # 组件展示页（色板/排版/全部组件）
+    ├── index.ts           # 组件库导出入口（含 install 插件）
+    ├── styles/
+    │   ├── tokens.css     # 设计令牌：颜色/字体/圆角/间距/阴影 → CSS 变量 --cc-*
+    │   └── base.css       # 全局基础样式（ss01、tnum、类型角色工具类）
+    └── components/        # 15 个通用组件（前缀 Cc）
+```
+
+## 组件列表
+
+| 组件 | 说明 | 对应 DESIGN.md token |
+|---|---|---|
+| `CcButton` | 胶囊按钮：primary / secondary / on-dark / ghost / link，sm·md·lg | `{button-primary-pill}`、`{button-secondary}`、`{button-on-dark}` |
+| `CcInput` | 输入框：label / hint / error / prefix，聚焦换主色边框 | `{text-input}`、`{text-input-focused}` |
+| `CcTextarea` | 多行文本域 | `{text-input}` 几何语言 |
+| `CcSelect` | 原生 select 美化，自定义 chevron | `{text-input}` |
+| `CcSwitch` | 胶囊开关 | 品牌胶囊几何 |
+| `CcCheckbox` | 复选框 | 品牌色勾选 |
+| `CcRadio` | 单选（共享 v-model 成组） | 品牌色圆点 |
+| `CcCard` | feature / pricing / pricing-featured / cream / dashboard / plain | `{card-*}` 全套 |
+| `CcTag` | 软标签 / 实心 / 深色 / 描边，支持 dot、closable | `{pill-tag-soft}` |
+| `CcBadge` | 数字角标（tnum 数字，max 截断） | — |
+| `CcAlert` | info / success / warning / error，可关闭 | 语义色（dashboard UI） |
+| `CcModal` | 弹窗：Teleport、Esc 关闭、遮罩点击、过渡 | `{card-dashboard-mockup}` 深度 |
+| `CcTooltip` | 悬浮提示：top / bottom / left / right，delay | 深海军蓝气泡 |
+| `CcSpinner` | 加载指示器 | 品牌靛蓝 |
+| `CcDivider` | 分割线，支持文本 | `{colors.hairline}` |
+
+## 使用组件库
+
+```ts
+// 方式一：按需引入
+import { CcButton, CcInput } from 'common_component_library_vue'
+import 'common_component_library_vue/src/styles/tokens.css'
+
+// 方式二：全量注册
+import CcLibrary from 'common_component_library_vue'
+app.use(CcLibrary)
+```
+
+## 设计令牌
+
+所有 DESIGN.md token 均映射为 CSS 自定义属性（`src/styles/tokens.css`）：
+
+- **颜色** `--cc-primary / --cc-ink / --cc-brand-dark-900 / --cc-hairline …`
+- **排版** 类型层级以工具类提供：`.cc-text-display-xxl … .cc-text-micro-cap`
+- **圆角** `--cc-radius-xs / sm / md / lg / xl / pill`
+- **间距** `--cc-space-xxs … --cc-space-huge`（8px 基准）
+- **阴影** `--cc-shadow-level-1 / level-2`
+
+关键品牌细节（来自 DESIGN.md 的 Do's & Don'ts）：
+
+1. **细字重是品牌**：展示级文字一律 300，配负字距（-1.4px → -0.2px），不要升到 400+。
+2. **`ss01` 全局开启**，`tnum` 用在所有金额/数字单元格上。
+3. **靛蓝 `{colors.primary}` 只用于 CTA 和链接**，不做正文色。
+4. **按钮永远是胶囊**（`{rounded.pill}`），不要用圆角矩形替代；padding 不低于 `8px 16px`。
+5. **渐变网格是营销 hero 的标配**，裸白 hero 视为偏离品牌。
+
+## 字体说明
+
+Sohne 是 Klim 的专有字体。按 DESIGN.md 的替代方案，本库使用开源的
+[Inter](https://rsms.me/inter/)（Google Fonts 版）在 300 字重 + 负字距下近似品牌节奏，
+已通过 `@fontsource/inter` 打包，离线可用。
+
+## 许可与致谢
+
+- DESIGN.md 由 [awesome-design-md](https://github.com/VoltAgent/awesome-design-md)（MIT）从 Stripe 公开站点提取，本库仅作学习与演示。
+- 设计令牌来自公开可见的 CSS 值，不主张对 Stripe 视觉识别的所有权。
+- 代码部分 MIT。

package/dist-lib/common-component-library-vue.css

@@ -0,0 +1,2 @@
+.cc-spinner[data-v-00c109fa]{color:var(--f2187a8a);animation:.8s linear infinite cc-spin-00c109fa}.cc-spinner__arc[data-v-00c109fa]{stroke:currentColor}@keyframes cc-spin-00c109fa{to{transform:rotate(360deg)}}.cc-btn[data-v-deb42261]{justify-content:center;align-items:center;gap:var(--cc-space-sm);border-radius:var(--cc-radius-pill);font-family:var(--cc-font-family);letter-spacing:0;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border:0;padding:8px 16px;font-size:16px;font-weight:400;line-height:1;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,transform 50ms;display:inline-flex}.cc-btn[data-v-deb42261]:focus-visible{box-shadow:var(--cc-focus-ring);outline:none}.cc-btn[data-v-deb42261]:disabled{cursor:not-allowed;opacity:.55}.cc-btn--primary[data-v-deb42261]{background-color:var(--cc-primary);color:var(--cc-on-primary)}.cc-btn--primary[data-v-deb42261]:hover:not(:disabled){background-color:var(--cc-primary-deep)}.cc-btn--primary[data-v-deb42261]:active:not(:disabled){background-color:var(--cc-primary-press)}.cc-btn--secondary[data-v-deb42261]{background-color:var(--cc-canvas);color:var(--cc-primary);border:1px solid var(--cc-primary);padding:7px 15px}.cc-btn--secondary[data-v-deb42261]:hover:not(:disabled){background-color:var(--cc-primary);color:var(--cc-on-primary)}.cc-btn--secondary[data-v-deb42261]:active:not(:disabled){background-color:var(--cc-primary-press);border-color:var(--cc-primary-press)}.cc-btn--on-dark[data-v-deb42261]{background-color:var(--cc-brand-dark-900);color:var(--cc-on-primary)}.cc-btn--on-dark[data-v-deb42261]:hover:not(:disabled){background-color:#252866}.cc-btn--on-dark[data-v-deb42261]:active:not(:disabled){background-color:#13153f}.cc-btn--ghost[data-v-deb42261]{color:var(--cc-ink);background-color:#0000}.cc-btn--ghost[data-v-deb42261]:hover:not(:disabled){background-color:var(--cc-canvas-soft);color:var(--cc-ink)}.cc-btn--ghost[data-v-deb42261]:active:not(:disabled){background-color:var(--cc-hairline)}.cc-btn--link[data-v-deb42261]{color:var(--cc-primary);background-color:#0000;padding:2px 4px}.cc-btn--link[data-v-deb42261]:hover:not(:disabled){text-decoration:underline}.cc-btn--sm[data-v-deb42261]{padding:6px 12px;font-size:14px}.cc-btn--sm.cc-btn--secondary[data-v-deb42261]{padding:5px 11px}.cc-btn--lg[data-v-deb42261]{padding:12px 24px;font-size:16px}.cc-btn--lg.cc-btn--secondary[data-v-deb42261]{padding:11px 23px}.cc-btn--block[data-v-deb42261]{width:100%;display:flex}.cc-btn--loading[data-v-deb42261]{cursor:wait}.cc-btn__spinner[data-v-deb42261]{display:inline-flex}.cc-btn__content[data-v-deb42261]{align-items:center;display:inline-flex}.cc-input[data-v-4b6c01de]{gap:var(--cc-space-xs);font-family:var(--cc-font-family);flex-direction:column;display:flex}.cc-input__label[data-v-4b6c01de]{letter-spacing:-.39px;color:var(--cc-ink-secondary);font-size:13px;font-weight:400}.cc-input__field[data-v-4b6c01de]{min-height:var(--cc-input-height);background-color:var(--cc-canvas);border:1px solid var(--cc-hairline-input);border-radius:var(--cc-radius-sm);align-items:center;transition:border-color .15s,box-shadow .15s;display:flex}.cc-input__field[data-v-4b6c01de]:focus-within{border-color:var(--cc-primary);box-shadow:var(--cc-focus-ring)}.cc-input--error .cc-input__field[data-v-4b6c01de]{border-color:var(--cc-error)}.cc-input--error .cc-input__field[data-v-4b6c01de]:focus-within{box-shadow:0 0 0 3px #ea226126}.cc-input__control[data-v-4b6c01de]{min-width:0;color:var(--cc-ink);background:0 0;border:0;outline:none;flex:1;padding:8px 12px;font-family:inherit;font-size:15px;font-weight:300;line-height:1.4}.cc-input__control[data-v-4b6c01de]::placeholder{color:var(--cc-ink-mute);opacity:.75}.cc-input__control[data-v-4b6c01de]:disabled{cursor:not-allowed;background-color:var(--cc-canvas-soft);color:var(--cc-ink-mute)}.cc-input__prefix[data-v-4b6c01de]{color:var(--cc-ink-mute);padding-left:12px;font-size:15px;font-weight:300}.cc-input__field--prefix .cc-input__control[data-v-4b6c01de]{padding-left:6px}.cc-input__message[data-v-4b6c01de]{color:var(--cc-ink-mute);margin:0;font-size:12px;font-weight:400;line-height:1.4}.cc-input__message--error[data-v-4b6c01de]{color:var(--cc-error)}.cc-textarea[data-v-9840d15e]{gap:var(--cc-space-xs);font-family:var(--cc-font-family);flex-direction:column;display:flex}.cc-textarea__label[data-v-9840d15e]{letter-spacing:-.39px;color:var(--cc-ink-secondary);font-size:13px;font-weight:400}.cc-textarea__control[data-v-9840d15e]{resize:vertical;border:1px solid var(--cc-hairline-input);border-radius:var(--cc-radius-sm);background-color:var(--cc-canvas);min-height:96px;color:var(--cc-ink);outline:none;padding:8px 12px;font-family:inherit;font-size:15px;font-weight:300;line-height:1.5;transition:border-color .15s,box-shadow .15s}.cc-textarea__control[data-v-9840d15e]::placeholder{color:var(--cc-ink-mute);opacity:.75}.cc-textarea__control[data-v-9840d15e]:focus{border-color:var(--cc-primary);box-shadow:var(--cc-focus-ring)}.cc-textarea--error .cc-textarea__control[data-v-9840d15e]{border-color:var(--cc-error)}.cc-textarea__control[data-v-9840d15e]:disabled{cursor:not-allowed;background-color:var(--cc-canvas-soft);color:var(--cc-ink-mute)}.cc-textarea__message[data-v-9840d15e]{color:var(--cc-ink-mute);margin:0;font-size:12px;font-weight:400;line-height:1.4}.cc-textarea__message--error[data-v-9840d15e]{color:var(--cc-error)}.cc-select[data-v-0e1871e6]{gap:var(--cc-space-xs);font-family:var(--cc-font-family);flex-direction:column;display:flex}.cc-select__label[data-v-0e1871e6]{letter-spacing:-.39px;color:var(--cc-ink-secondary);font-size:13px;font-weight:400}.cc-select__wrap[data-v-0e1871e6]{align-items:center;display:flex;position:relative}.cc-select__control[data-v-0e1871e6]{appearance:none;width:100%;min-height:var(--cc-input-height);border:1px solid var(--cc-hairline-input);border-radius:var(--cc-radius-sm);background-color:var(--cc-canvas);color:var(--cc-ink);cursor:pointer;outline:none;padding:8px 36px 8px 12px;font-family:inherit;font-size:15px;font-weight:300;line-height:1.4;transition:border-color .15s,box-shadow .15s}.cc-select__control[data-v-0e1871e6]:focus{border-color:var(--cc-primary);box-shadow:var(--cc-focus-ring)}.cc-select__control[data-v-0e1871e6]:disabled{cursor:not-allowed;background-color:var(--cc-canvas-soft);color:var(--cc-ink-mute)}.cc-select--error .cc-select__control[data-v-0e1871e6]{border-color:var(--cc-error)}.cc-select__chevron[data-v-0e1871e6]{pointer-events:none;color:var(--cc-primary);position:absolute;right:12px}.cc-select__message[data-v-0e1871e6]{color:var(--cc-ink-mute);margin:0;font-size:12px;font-weight:400}.cc-select__message--error[data-v-0e1871e6]{color:var(--cc-error)}.cc-switch[data-v-cb8ad6ea]{align-items:center;gap:var(--cc-space-sm);font-family:var(--cc-font-family);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;padding:0;display:inline-flex}.cc-switch__track[data-v-cb8ad6ea]{border-radius:var(--cc-radius-pill);background-color:var(--cc-hairline);border:1px solid var(--cc-hairline-input);box-sizing:border-box;flex-shrink:0;align-items:center;width:40px;height:22px;transition:background-color .2s,border-color .2s;display:inline-flex;position:relative}.cc-switch--checked .cc-switch__track[data-v-cb8ad6ea]{background-color:var(--cc-primary);border-color:var(--cc-primary)}.cc-switch--sm .cc-switch__track[data-v-cb8ad6ea]{width:32px;height:18px}.cc-switch__knob[data-v-cb8ad6ea]{border-radius:var(--cc-radius-pill);background-color:var(--cc-canvas);width:16px;height:16px;margin-left:2px;transition:transform .2s;box-shadow:0 1px 2px #00377033}.cc-switch--sm .cc-switch__knob[data-v-cb8ad6ea]{width:12px;height:12px}.cc-switch--checked .cc-switch__knob[data-v-cb8ad6ea]{transform:translate(18px)}.cc-switch--sm.cc-switch--checked .cc-switch__knob[data-v-cb8ad6ea]{transform:translate(14px)}.cc-switch__label[data-v-cb8ad6ea]{color:var(--cc-ink);font-size:15px;font-weight:300}.cc-switch[data-v-cb8ad6ea]:focus-visible{outline:none}.cc-switch:focus-visible .cc-switch__track[data-v-cb8ad6ea]{box-shadow:var(--cc-focus-ring)}.cc-switch--disabled[data-v-cb8ad6ea]{cursor:not-allowed;opacity:.5}.cc-checkbox[data-v-bf838053]{align-items:center;gap:var(--cc-space-sm);font-family:var(--cc-font-family);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;display:inline-flex}.cc-checkbox__native[data-v-bf838053]{opacity:0;width:0;height:0;position:absolute}.cc-checkbox__box[data-v-bf838053]{border:1px solid var(--cc-hairline-input);border-radius:var(--cc-radius-xs);background-color:var(--cc-canvas);color:#0000;flex-shrink:0;justify-content:center;align-items:center;width:18px;height:18px;transition:background-color .15s,border-color .15s,color .15s;display:inline-flex}.cc-checkbox__check[data-v-bf838053]{stroke:currentColor}.cc-checkbox__native:checked+.cc-checkbox__box[data-v-bf838053]{background-color:var(--cc-primary);border-color:var(--cc-primary);color:var(--cc-on-primary)}.cc-checkbox__native:focus-visible+.cc-checkbox__box[data-v-bf838053]{box-shadow:var(--cc-focus-ring)}.cc-checkbox__native:indeterminate+.cc-checkbox__box[data-v-bf838053]{background-color:var(--cc-primary);border-color:var(--cc-primary)}.cc-checkbox__label[data-v-bf838053]{color:var(--cc-ink);font-size:15px;font-weight:300}.cc-checkbox--disabled[data-v-bf838053]{cursor:not-allowed;opacity:.5}.cc-radio[data-v-0a6c4d47]{align-items:center;gap:var(--cc-space-sm);font-family:var(--cc-font-family);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;display:inline-flex}.cc-radio__native[data-v-0a6c4d47]{opacity:0;width:0;height:0;position:absolute}.cc-radio__dot[data-v-0a6c4d47]{border:1px solid var(--cc-hairline-input);border-radius:var(--cc-radius-pill);background-color:var(--cc-canvas);flex-shrink:0;justify-content:center;align-items:center;width:18px;height:18px;transition:border-color .15s,box-shadow .15s;display:inline-flex}.cc-radio__dot[data-v-0a6c4d47]:after{content:"";border-radius:var(--cc-radius-pill);background-color:var(--cc-primary);width:8px;height:8px;transition:transform .15s;transform:scale(0)}.cc-radio__native:checked+.cc-radio__dot[data-v-0a6c4d47]{border-color:var(--cc-primary)}.cc-radio__native:checked+.cc-radio__dot[data-v-0a6c4d47]:after{transform:scale(1)}.cc-radio__native:focus-visible+.cc-radio__dot[data-v-0a6c4d47]{box-shadow:var(--cc-focus-ring)}.cc-radio__label[data-v-0a6c4d47]{color:var(--cc-ink);font-size:15px;font-weight:300}.cc-radio--disabled[data-v-0a6c4d47]{cursor:not-allowed;opacity:.5}.cc-card[data-v-7f39ac3e]{border-radius:var(--cc-radius-lg);padding:var(--cc-space-xxl);font-family:var(--cc-font-family);gap:var(--cc-space-lg);flex-direction:column;display:flex;position:relative}.cc-card--flush[data-v-7f39ac3e]{padding:0}.cc-card--feature[data-v-7f39ac3e],.cc-card--pricing[data-v-7f39ac3e]{background-color:var(--cc-canvas);color:var(--cc-ink);border:1px solid var(--cc-hairline);box-shadow:var(--cc-shadow-level-1)}.cc-card--pricing-featured[data-v-7f39ac3e]{background-color:var(--cc-brand-dark-900);color:var(--cc-on-primary);box-shadow:var(--cc-shadow-level-2);border:1px solid #0000}.cc-card--cream[data-v-7f39ac3e]{background-color:var(--cc-canvas-cream);color:var(--cc-ink);border:1px solid #0000}.cc-card--dashboard[data-v-7f39ac3e]{background-color:var(--cc-canvas);color:var(--cc-ink);border:1px solid var(--cc-hairline);box-shadow:var(--cc-shadow-level-2);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}.cc-card--plain[data-v-7f39ac3e]{background-color:var(--cc-canvas);color:var(--cc-ink);border:1px solid var(--cc-hairline)}.cc-card__header[data-v-7f39ac3e]{gap:var(--cc-space-xs);flex-direction:column;display:flex}.cc-card__title[data-v-7f39ac3e]{letter-spacing:-.22px;color:inherit;font-size:22px;font-weight:300;line-height:1.1}.cc-card--pricing-featured .cc-card__title[data-v-7f39ac3e]{color:var(--cc-on-primary)}.cc-card__desc[data-v-7f39ac3e]{color:var(--cc-ink-mute);font-size:15px;font-weight:300;line-height:1.4}.cc-card--pricing-featured .cc-card__desc[data-v-7f39ac3e]{color:#ffffffb8}.cc-card__body[data-v-7f39ac3e]{flex:1}.cc-card--dashboard .cc-card__body[data-v-7f39ac3e]{letter-spacing:-.42px;font-size:14px;line-height:1.4}.cc-card__footer[data-v-7f39ac3e]{align-items:center;gap:var(--cc-space-md);padding-top:var(--cc-space-lg);display:flex}.cc-tag[data-v-858b2086]{align-items:center;gap:var(--cc-space-xs);border-radius:var(--cc-radius-pill);letter-spacing:.1px;text-transform:uppercase;white-space:nowrap;vertical-align:middle;padding:4px 8px;font-size:10px;font-weight:400;line-height:1.15;display:inline-flex}.cc-tag--sm[data-v-858b2086]{padding:2px 6px;font-size:9px}.cc-tag--soft[data-v-858b2086]{background-color:var(--cc-primary-subdued);color:var(--cc-primary-deep)}.cc-tag--outline[data-v-858b2086]{color:var(--cc-ink-mute);border:1px solid var(--cc-hairline);background-color:#0000;padding:3px 7px}.cc-tag--dark[data-v-858b2086]{background-color:var(--cc-brand-dark-900);color:var(--cc-on-primary)}.cc-tag--solid[data-v-858b2086]{background-color:var(--cc-primary);color:var(--cc-on-primary)}.cc-tag__dot[data-v-858b2086]{border-radius:var(--cc-radius-pill);opacity:.8;background-color:currentColor;width:5px;height:5px}.cc-tag__close[data-v-858b2086]{color:inherit;cursor:pointer;opacity:.7;background:0 0;border:0;justify-content:center;align-items:center;padding:0;transition:opacity .15s;display:inline-flex}.cc-tag__close[data-v-858b2086]:hover{opacity:1}.cc-badge[data-v-466a4bd0]{border-radius:var(--cc-radius-pill);vertical-align:middle;justify-content:center;align-items:center;min-width:18px;height:18px;padding:0 6px;font-size:11px;font-weight:400;line-height:1;display:inline-flex}.cc-badge--soft[data-v-466a4bd0]{background-color:var(--cc-primary-subdued);color:var(--cc-primary-deep)}.cc-badge--solid[data-v-466a4bd0]{background-color:var(--cc-primary);color:var(--cc-on-primary)}.cc-badge--dot[data-v-466a4bd0]{background-color:var(--cc-ruby);color:var(--cc-on-primary)}.cc-badge--dot-only[data-v-466a4bd0]{background-color:var(--cc-ruby);width:8px;min-width:8px;height:8px;padding:0}.cc-badge--dot-only .cc-badge__text[data-v-466a4bd0]{display:none}.cc-alert[data-v-8671adaf]{align-items:flex-start;gap:var(--cc-space-md);border:1px solid var(--cc-hairline);border-radius:var(--cc-radius-md);background-color:var(--cc-canvas-soft);padding:var(--cc-space-lg);font-family:var(--cc-font-family);display:flex}.cc-alert__icon[data-v-8671adaf]{flex-shrink:0;margin-top:1px;display:inline-flex}.cc-alert__content[data-v-8671adaf]{flex:1;min-width:0}.cc-alert__title[data-v-8671adaf]{color:var(--cc-ink);font-size:15px;font-weight:400;line-height:1.4}.cc-alert__desc[data-v-8671adaf]{color:var(--cc-ink-mute);margin-top:2px;font-size:13px;font-weight:300;line-height:1.4}.cc-alert__close[data-v-8671adaf]{color:var(--cc-ink-mute);cursor:pointer;border-radius:var(--cc-radius-xs);background:0 0;border:0;justify-content:center;align-items:center;padding:4px;transition:color .15s,background-color .15s;display:inline-flex}.cc-alert__close[data-v-8671adaf]:hover{color:var(--cc-ink);background-color:var(--cc-hairline)}.cc-modal[data-v-d2a6d4fd]{z-index:1000;padding:var(--cc-space-xl);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background-color:#0d253d73;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.cc-modal__panel[data-v-d2a6d4fd]{background-color:var(--cc-canvas);border-radius:var(--cc-radius-lg);width:100%;box-shadow:var(--cc-shadow-level-2);padding:var(--cc-space-xl);gap:var(--cc-space-lg);outline:none;flex-direction:column;max-height:calc(100vh - 64px);display:flex;overflow-y:auto}.cc-modal__header[data-v-d2a6d4fd]{justify-content:space-between;align-items:flex-start;gap:var(--cc-space-lg);display:flex}.cc-modal__title[data-v-d2a6d4fd]{letter-spacing:-.22px;color:var(--cc-ink);font-size:22px;font-weight:300;line-height:1.1}.cc-modal__close[data-v-d2a6d4fd]{color:var(--cc-ink-mute);cursor:pointer;border-radius:var(--cc-radius-pill);background:0 0;border:0;flex-shrink:0;justify-content:center;align-items:center;padding:6px;transition:color .15s,background-color .15s;display:inline-flex}.cc-modal__close[data-v-d2a6d4fd]:hover{color:var(--cc-ink);background-color:var(--cc-canvas-soft)}.cc-modal__body[data-v-d2a6d4fd]{color:var(--cc-ink);font-size:15px;font-weight:300;line-height:1.5}.cc-modal__footer[data-v-d2a6d4fd]{justify-content:flex-end;align-items:center;gap:var(--cc-space-md);padding-top:var(--cc-space-md);display:flex}.cc-modal-enter-active[data-v-d2a6d4fd],.cc-modal-leave-active[data-v-d2a6d4fd]{transition:opacity .2s}.cc-modal-enter-active .cc-modal__panel[data-v-d2a6d4fd],.cc-modal-leave-active .cc-modal__panel[data-v-d2a6d4fd]{transition:transform .2s}.cc-modal-enter-from[data-v-d2a6d4fd],.cc-modal-leave-to[data-v-d2a6d4fd]{opacity:0}.cc-modal-enter-from .cc-modal__panel[data-v-d2a6d4fd],.cc-modal-leave-to .cc-modal__panel[data-v-d2a6d4fd]{transform:translateY(8px)scale(.98)}.cc-tooltip[data-v-2befb04b]{display:inline-flex;position:relative}.cc-tooltip__bubble[data-v-2befb04b]{z-index:900;border-radius:var(--cc-radius-sm);background-color:var(--cc-brand-dark-900);max-width:240px;color:var(--cc-on-primary);letter-spacing:-.24px;white-space:nowrap;pointer-events:none;box-shadow:var(--cc-shadow-level-2);padding:6px 10px;font-size:12px;font-weight:400;line-height:1.4;position:absolute}.cc-tooltip--top[data-v-2befb04b]{bottom:calc(100% + 6px);left:50%;transform:translate(-50%)}.cc-tooltip--bottom[data-v-2befb04b]{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.cc-tooltip--left[data-v-2befb04b]{top:50%;right:calc(100% + 6px);transform:translateY(-50%)}.cc-tooltip--right[data-v-2befb04b]{top:50%;left:calc(100% + 6px);transform:translateY(-50%)}.cc-tooltip__bubble[data-v-2befb04b]:after{content:"";background-color:var(--cc-brand-dark-900);width:6px;height:6px;position:absolute;transform:rotate(45deg)}.cc-tooltip--top[data-v-2befb04b]:after{margin:-3px 0 0 -3px;top:100%;left:50%}.cc-tooltip--bottom[data-v-2befb04b]:after{margin:0 0 -3px -3px;bottom:100%;left:50%}.cc-tooltip--left[data-v-2befb04b]:after{margin:-3px 0 0 -3px;top:50%;left:100%}.cc-tooltip--right[data-v-2befb04b]:after{margin:-3px -3px 0 0;top:50%;right:100%}.cc-divider[data-v-c42961cd]{align-items:center;width:100%;margin:0;display:flex}.cc-divider--horizontal[data-v-c42961cd]{background-color:var(--cc-hairline);height:1px}.cc-divider--horizontal.cc-divider[data-v-c42961cd]:has(.cc-divider__label){background-color:#0000}.cc-divider__label[data-v-c42961cd]{justify-content:center;align-items:center;gap:var(--cc-space-lg);color:var(--cc-ink-mute);letter-spacing:-.39px;white-space:nowrap;font-size:13px;font-weight:400;display:inline-flex}.cc-divider__label[data-v-c42961cd]:before,.cc-divider__label[data-v-c42961cd]:after{content:"";background-color:var(--cc-hairline);width:48px;height:1px}.cc-divider--vertical[data-v-c42961cd]{background-color:var(--cc-hairline);align-self:stretch;width:1px;height:100%}:root{--cc-primary:#533afd;--cc-primary-deep:#4434d4;--cc-primary-press:#2e2b8c;--cc-primary-soft:#665efd;--cc-primary-subdued:#b9b9f9;--cc-brand-dark-900:#1c1e54;--cc-ruby:#ea2261;--cc-magenta:#f96bee;--cc-lemon:#9b6829;--cc-canvas:#fff;--cc-canvas-soft:#f6f9fc;--cc-canvas-cream:#f5e9d4;--cc-hairline:#e3e8ee;--cc-hairline-input:#a8c3de;--cc-ink:#0d253d;--cc-ink-secondary:#273951;--cc-ink-mute:#64748d;--cc-ink-mute-2:#61718a;--cc-on-primary:#fff;--cc-success:#0a9f6e;--cc-success-soft:#e3f5ee;--cc-warning:#9b6829;--cc-warning-soft:#faf0e0;--cc-error:#ea2261;--cc-error-soft:#fde7ef;--cc-info:#533afd;--cc-shadow-blue:#003770;--cc-shadow-level-1:#00377014 0 1px 3px;--cc-shadow-level-2:#00377014 0 8px 24px, #0037700a 0 2px 6px;--cc-focus-ring:0 0 0 3px #533afd2e;--cc-font-family:"Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;--cc-font-mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;--cc-text-display-xxl:56px / 1.03 300 -1.4px;--cc-text-display-xl:48px / 1.15 300 -.96px;--cc-text-display-lg:32px / 1.1 300 -.64px;--cc-text-display-md:26px / 1.12 300 -.26px;--cc-text-heading-lg:22px / 1.1 300 -.22px;--cc-text-heading-md:20px / 1.4 300 -.2px;--cc-text-heading-sm:18px / 1.4 300 0;--cc-text-body-lg:16px / 1.4 300 0;--cc-text-body-md:15px / 1.4 300 0;--cc-text-body-tabular:14px / 1.4 300 -.42px;--cc-text-button-md:16px / 1 400 0;--cc-text-button-sm:14px / 1 400 0;--cc-text-caption:13px / 1.4 400 -.39px;--cc-text-micro:11px / 1.4 300 0;--cc-text-micro-cap:10px / 1.15 400 .1px;--cc-radius-xs:4px;--cc-radius-sm:6px;--cc-radius-md:8px;--cc-radius-lg:12px;--cc-radius-xl:16px;--cc-radius-pill:9999px;--cc-space-xxs:2px;--cc-space-xs:4px;--cc-space-sm:8px;--cc-space-md:12px;--cc-space-lg:16px;--cc-space-xl:24px;--cc-space-xxl:32px;--cc-space-huge:64px;--cc-container-max:1200px;--cc-input-height:40px}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{font-family:var(--cc-font-family);color:var(--cc-ink);background-color:var(--cc-canvas);font-feature-settings:"ss01";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-size:15px;font-weight:300;line-height:1.4}h1,h2,h3,h4,h5,h6{color:var(--cc-ink);margin:0;font-weight:300}p{margin:0}a{color:var(--cc-primary);text-decoration:none}a:hover{text-decoration:underline}::selection{background-color:var(--cc-ink);color:#f2f2f2}.tnum,.tnum *{font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.cc-text-display-xxl{letter-spacing:-1.4px;font-size:56px;font-weight:300;line-height:1.03}.cc-text-display-xl{letter-spacing:-.96px;font-size:48px;font-weight:300;line-height:1.15}.cc-text-display-lg{letter-spacing:-.64px;font-size:32px;font-weight:300;line-height:1.1}.cc-text-display-md{letter-spacing:-.26px;font-size:26px;font-weight:300;line-height:1.12}.cc-text-heading-lg{letter-spacing:-.22px;font-size:22px;font-weight:300;line-height:1.1}.cc-text-heading-md{letter-spacing:-.2px;font-size:20px;font-weight:300;line-height:1.4}.cc-text-heading-sm{font-size:18px;font-weight:300;line-height:1.4}.cc-text-body-lg{font-size:16px;font-weight:300;line-height:1.4}.cc-text-body-md{font-size:15px;font-weight:300;line-height:1.4}.cc-text-caption{letter-spacing:-.39px;font-feature-settings:"tnum";font-size:13px;font-weight:400;line-height:1.4}.cc-text-micro{font-size:11px;font-weight:300;line-height:1.4}.cc-text-micro-cap{letter-spacing:.1px;text-transform:uppercase;font-size:10px;font-weight:400;line-height:1.15}
+/*$vite$:1*/