返回列表
行业: 开发者工具与 IDEWebsite

Mintlify

Mintlify 以天空氛围渐变和柔和奶油蓝营销页面吸引注意，再以清晰、紧凑的文档界面承载技术内容，形成兼具品牌温度与开发者效率的双模式体验。

Light UIGradientDeveloper-focusedDesign System
Mintlify 网站预览
设计系统
品牌色彩 · 32

primary

#0A0A0A

--color-primary

on primary

#FFFFFF

--color-on-primary

brand green

#00D4A4

--color-brand-green

brand green deep

#00B48A

--color-brand-green-deep

brand green soft

#7CEBCB

--color-brand-green-soft

brand tag

#3772CF

--color-brand-tag

brand warn

#C37D0D

--color-brand-warn

brand annotate

#1BA673

--color-brand-annotate

brand error

#D45656

--color-brand-error

brand cursor

#888888

--color-brand-cursor

hero sky from

#87A8C8

--color-hero-sky-from

hero sky to

#F5E9D8

--color-hero-sky-to

hero dark from

#1A3D4A

--color-hero-dark-from

hero dark to

#2D5A4F

--color-hero-dark-to

testimonial orange

#F55A3C

--color-testimonial-orange

testimonial orange deep

#CC3A1F

--color-testimonial-orange-deep

canvas

#FFFFFF

--color-canvas

canvas dark

#0A0A0A

--color-canvas-dark

surface

#F7F7F7

--color-surface

surface soft

#FAFAFA

--color-surface-soft

surface code

#1C1C1E

--color-surface-code

hairline

#E5E5E5

--color-hairline

hairline soft

#EDEDED

--color-hairline-soft

hairline dark

#1F1F1F

--color-hairline-dark

ink

#0A0A0A

--color-ink

charcoal

#1C1C1E

--color-charcoal

slate

#3A3A3C

--color-slate

steel

#5A5A5C

--color-steel

stone

#888888

--color-stone

muted

#A8A8AA

--color-muted

on dark

#FFFFFF

--color-on-dark

on dark muted

#B3B3B3

--color-on-dark-muted

字体系统

字体家族

Inter / Geist Mono

字重

600400500

备注

2 个字体家族，完整字阶、行高和字距见 DESIGN.md

标签
Light UIGradientDeveloper-focusedDesign System
设计文档

品牌设计系统的完整 Markdown 文档

Mintlify — Style Reference

> Mintlify presents documentation infrastructure with a dual-mode aesthetic — atmospheric sky-gradient marketing heroes (cloud illustration backdrops, soft cream-to-blue washes) paired with dense developer-grade documentation surfaces. The system uses Inter for UI prose, Geist Mono for code, and a signature Mintlify green ({colors.brand-green}) reserved for accent CTAs and active states. Black-pill primary buttons dominate marketing, white-on-dark inversions appear on dark hero bands, and a 3-column documentation layout (sidebar / prose / TOC) anchors the developer experience. Coverage spans homepage, startups program, pricing comparison, and the live tabs documentation page.

**Theme:** light

**Source website:** [https://www.mintlify.com/](https://www.mintlify.com/)

Use the live official website to compare and validate this extracted snapshot. The current source website remains authoritative.

Tokens — Colors

| Name | Value | Token | Role |

|---|---|---|---|

| primary | `#0a0a0a` | `--color-primary` | primary role extracted from the source design |

| on primary | `#ffffff` | `--color-on-primary` | on primary role extracted from the source design |

| brand green | `#00d4a4` | `--color-brand-green` | brand green role extracted from the source design |

| brand green deep | `#00b48a` | `--color-brand-green-deep` | brand green deep role extracted from the source design |

| brand green soft | `#7cebcb` | `--color-brand-green-soft` | brand green soft role extracted from the source design |

| brand tag | `#3772cf` | `--color-brand-tag` | brand tag role extracted from the source design |

| brand warn | `#c37d0d` | `--color-brand-warn` | brand warn role extracted from the source design |

| brand annotate | `#1ba673` | `--color-brand-annotate` | brand annotate role extracted from the source design |

| brand error | `#d45656` | `--color-brand-error` | brand error role extracted from the source design |

| brand cursor | `#888888` | `--color-brand-cursor` | brand cursor role extracted from the source design |

| hero sky from | `#87a8c8` | `--color-hero-sky-from` | hero sky from role extracted from the source design |

| hero sky to | `#f5e9d8` | `--color-hero-sky-to` | hero sky to role extracted from the source design |

| hero dark from | `#1a3d4a` | `--color-hero-dark-from` | hero dark from role extracted from the source design |

| hero dark to | `#2d5a4f` | `--color-hero-dark-to` | hero dark to role extracted from the source design |

| testimonial orange | `#f55a3c` | `--color-testimonial-orange` | testimonial orange role extracted from the source design |

| testimonial orange deep | `#cc3a1f` | `--color-testimonial-orange-deep` | testimonial orange deep role extracted from the source design |

| canvas | `#ffffff` | `--color-canvas` | canvas role extracted from the source design |

| canvas dark | `#0a0a0a` | `--color-canvas-dark` | canvas dark role extracted from the source design |

| surface | `#f7f7f7` | `--color-surface` | surface role extracted from the source design |

| surface soft | `#fafafa` | `--color-surface-soft` | surface soft role extracted from the source design |

| surface code | `#1c1c1e` | `--color-surface-code` | surface code role extracted from the source design |

| hairline | `#e5e5e5` | `--color-hairline` | hairline role extracted from the source design |

| hairline soft | `#ededed` | `--color-hairline-soft` | hairline soft role extracted from the source design |

| hairline dark | `#1f1f1f` | `--color-hairline-dark` | hairline dark role extracted from the source design |

| ink | `#0a0a0a` | `--color-ink` | ink role extracted from the source design |

| charcoal | `#1c1c1e` | `--color-charcoal` | charcoal role extracted from the source design |

| slate | `#3a3a3c` | `--color-slate` | slate role extracted from the source design |

| steel | `#5a5a5c` | `--color-steel` | steel role extracted from the source design |

| stone | `#888888` | `--color-stone` | stone role extracted from the source design |

| muted | `#a8a8aa` | `--color-muted` | muted role extracted from the source design |

| on dark | `#ffffff` | `--color-on-dark` | on dark role extracted from the source design |

| on dark muted | `#b3b3b3` | `--color-on-dark-muted` | on dark muted role extracted from the source design |

Tokens — Typography

Inter · `--font-primary`

  • **Substitute:** Inter, system-ui, sans-serif
  • **Weights:** 600, 400, 500
  • **Sizes:** 72px, 56px, 48px, 36px, 28px, 22px, 18px, 16px, 14px, 13px, 12px, 11px
  • **Line height:** 1.05, 1.1, 1.2, 1.25, 1.3, 1.4, 1.5
  • **Letter spacing:** -2px, -1.5px, -1px, -0.5px, 0, 0.5px
  • **Role:** Brand typography family observed across the documented type scale.

    • Geist Mono · `--font-family-2`

  • **Substitute:** Inter, system-ui, sans-serif
  • **Weights:** 400, 500
  • **Sizes:** 14px, 13px
  • **Line height:** 1.5, 1.4, 1.3
  • **Letter spacing:** 0
  • **Role:** Brand typography family observed across the documented type scale.

    • Type Scale

    | Role | Size | Line Height | Letter Spacing | Token |

    |---|---|---|---|---|

    | hero-display | 72px | 1.05 | -2px | `--text-hero-display` |

    | display-lg | 56px | 1.1 | -1.5px | `--text-display-lg` |

    | heading-1 | 48px | 1.1 | -1px | `--text-heading-1` |

    | heading-2 | 36px | 1.2 | -0.5px | `--text-heading-2` |

    | heading-3 | 28px | 1.25 | 0 | `--text-heading-3` |

    | heading-4 | 22px | 1.3 | 0 | `--text-heading-4` |

    | heading-5 | 18px | 1.4 | 0 | `--text-heading-5` |

    | subtitle | 18px | 1.5 | 0 | `--text-subtitle` |

    | body-md | 16px | 1.5 | 0 | `--text-body-md` |

    | body-md-medium | 16px | 1.5 | 0 | `--text-body-md-medium` |

    | body-sm | 14px | 1.5 | 0 | `--text-body-sm` |

    | body-sm-medium | 14px | 1.5 | 0 | `--text-body-sm-medium` |

    | caption | 13px | 1.4 | 0 | `--text-caption` |

    | caption-bold | 13px | 1.4 | 0 | `--text-caption-bold` |

    | micro | 12px | 1.4 | 0 | `--text-micro` |

    | micro-uppercase | 11px | 1.4 | 0.5px | `--text-micro-uppercase` |

    | button-md | 14px | 1.3 | 0 | `--text-button-md` |

    | code-md | 14px | 1.5 | 0 | `--text-code-md` |

    | code-sm | 13px | 1.4 | 0 | `--text-code-sm` |

    | code-inline | 13px | 1.3 | 0 | `--text-code-inline` |

    Tokens — Spacing & Shapes

    **Density:** comfortable

    Spacing Scale

    | Name | Value | Token |

    |---|---|---|

    | xxs | 4px | `--spacing-xxs` |

    | xs | 8px | `--spacing-xs` |

    | sm | 12px | `--spacing-sm` |

    | md | 16px | `--spacing-md` |

    | lg | 20px | `--spacing-lg` |

    | xl | 24px | `--spacing-xl` |

    | xxl | 32px | `--spacing-xxl` |

    | xxxl | 40px | `--spacing-xxxl` |

    | section-sm | 48px | `--spacing-section-sm` |

    | section | 64px | `--spacing-section` |

    | section-lg | 96px | `--spacing-section-lg` |

    | hero | 120px | `--spacing-hero` |

    Border Radius

    | Name | Value | Token |

    |---|---|---|

    | xs | 4px | `--radius-xs` |

    | sm | 6px | `--radius-sm` |

    | md | 8px | `--radius-md` |

    | lg | 12px | `--radius-lg` |

    | xl | 16px | `--radius-xl` |

    | xxl | 24px | `--radius-xxl` |

    | full | 9999px | `--radius-full` |

    Layout

  • **Section gap:** 64px
  • **Card padding:** 20px
  • **Element gap:** 16px
  • **Max content width:** 1200px

    • Components

    button primary

    **Role:** button primary component

  • **backgroundColor:** `{colors.primary}`
  • **textColor:** `{colors.on-primary}`
  • **typography:** `{typography.button-md}`
  • **rounded:** `{rounded.full}`
  • **padding:** `10px 20px`

    • button primary pressed

    **Role:** button primary pressed component

  • **backgroundColor:** `{colors.charcoal}`
  • **textColor:** `{colors.on-primary}`

    • button primary disabled

    **Role:** button primary disabled component

  • **backgroundColor:** `{colors.hairline}`
  • **textColor:** `{colors.muted}`

    • button accent green

    **Role:** button accent green component

  • **backgroundColor:** `{colors.brand-green}`
  • **textColor:** `{colors.primary}`
  • **typography:** `{typography.button-md}`
  • **rounded:** `{rounded.full}`
  • **padding:** `10px 20px`

    • button on dark

    **Role:** button on dark component

  • **backgroundColor:** `{colors.on-dark}`
  • **textColor:** `{colors.primary}`
  • **typography:** `{typography.button-md}`
  • **rounded:** `{rounded.full}`
  • **padding:** `10px 20px`

    • button secondary

    **Role:** button secondary component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.button-md}`
  • **rounded:** `{rounded.full}`
  • **padding:** `10px 20px`
  • **border:** `1px solid {colors.hairline}`

    • button ghost

    **Role:** button ghost component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.button-md}`
  • **rounded:** `{rounded.md}`
  • **padding:** `8px 12px`

    • button link

    **Role:** button link component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-sm-medium}`
  • **padding:** `0`

    • button icon circular

    **Role:** button icon circular component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **rounded:** `{rounded.full}`
  • **size:** `32px`
  • **border:** `1px solid {colors.hairline}`

    • card base

    **Role:** card base component

  • **backgroundColor:** `{colors.canvas}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `{spacing.xl}`
  • **border:** `1px solid {colors.hairline}`

    • card feature

    **Role:** card feature component

  • **backgroundColor:** `{colors.surface}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `{spacing.xxl}`

    • card help

    **Role:** card help component

  • **backgroundColor:** `{colors.canvas}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `{spacing.xl}`
  • **border:** `1px solid {colors.hairline}`

    • card startup perk

    **Role:** card startup perk component

  • **backgroundColor:** `{colors.canvas}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `{spacing.xl}`
  • **border:** `1px solid {colors.hairline}`

    • pricing card

    **Role:** pricing card component

  • **backgroundColor:** `{colors.canvas}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `{spacing.xxl}`
  • **border:** `1px solid {colors.hairline}`

    • pricing card featured

    **Role:** pricing card featured component

  • **backgroundColor:** `{colors.canvas}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `{spacing.xxl}`
  • **border:** `2px solid {colors.brand-green}`
  • **shadow:** `rgba(0, 212, 164, 0.08) 0px 8px 24px`

    • testimonial card feature

    **Role:** testimonial card feature component

  • **backgroundColor:** `{colors.testimonial-orange}`
  • **textColor:** `{colors.on-dark}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `{spacing.section}`

    • testimonial card quote

    **Role:** testimonial card quote component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `{spacing.xxl}`
  • **border:** `1px solid {colors.hairline}`

    • text input

    **Role:** text input component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.md}`
  • **padding:** `{spacing.sm} {spacing.md}`
  • **border:** `1px solid {colors.hairline}`
  • **height:** `40px`

    • text input focused

    **Role:** text input focused component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **border:** `2px solid {colors.brand-green}`

    • search pill

    **Role:** search pill component

  • **backgroundColor:** `{colors.surface}`
  • **textColor:** `{colors.steel}`
  • **typography:** `{typography.body-sm}`
  • **rounded:** `{rounded.md}`
  • **padding:** `{spacing.xs} {spacing.md}`
  • **height:** `36px`
  • **border:** `1px solid {colors.hairline}`

    • segmented tab

    **Role:** segmented tab component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.steel}`
  • **typography:** `{typography.body-sm-medium}`
  • **padding:** `{spacing.sm} {spacing.md}`
  • **border:** `0 0 2px transparent solid`

    • segmented tab active

    **Role:** segmented tab active component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-sm-medium}`
  • **border:** `0 0 2px {colors.ink} solid`

    • pill tab

    **Role:** pill tab component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.steel}`
  • **typography:** `{typography.body-sm-medium}`
  • **rounded:** `{rounded.full}`
  • **padding:** `8px 16px`
  • **border:** `1px solid {colors.hairline}`

    • pill tab active

    **Role:** pill tab active component

  • **backgroundColor:** `{colors.primary}`
  • **textColor:** `{colors.on-primary}`
  • **rounded:** `{rounded.full}`
  • **border:** `1px solid {colors.primary}`

    • toggle monthly yearly

    **Role:** toggle monthly yearly component

  • **backgroundColor:** `{colors.surface}`
  • **textColor:** `{colors.ink}`
  • **rounded:** `{rounded.full}`
  • **padding:** `4px`

    • badge discount

    **Role:** badge discount component

  • **backgroundColor:** `{colors.brand-green}`
  • **textColor:** `{colors.primary}`
  • **typography:** `{typography.caption-bold}`
  • **rounded:** `{rounded.full}`
  • **padding:** `2px 8px`

    • badge required

    **Role:** badge required component

  • **backgroundColor:** `{colors.brand-error}`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.micro-uppercase}`
  • **rounded:** `{rounded.sm}`
  • **padding:** `2px 6px`

    • badge type

    **Role:** badge type component

  • **backgroundColor:** `{colors.surface}`
  • **textColor:** `{colors.steel}`
  • **typography:** `{typography.code-sm}`
  • **rounded:** `{rounded.sm}`
  • **padding:** `2px 6px`

    • badge tag

    **Role:** badge tag component

  • **backgroundColor:** `rgba(55, 114, 207, 0.15)`
  • **textColor:** `{colors.brand-tag}`
  • **typography:** `{typography.caption-bold}`
  • **rounded:** `{rounded.sm}`
  • **padding:** `2px 8px`

    • promo banner

    **Role:** promo banner component

  • **backgroundColor:** `{colors.canvas-dark}`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.body-sm-medium}`
  • **padding:** `{spacing.sm} {spacing.md}`

    • code block

    **Role:** code block component

  • **backgroundColor:** `{colors.surface-code}`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.code-md}`
  • **rounded:** `{rounded.md}`
  • **padding:** `{spacing.md}`

    • code block header

    **Role:** code block header component

  • **backgroundColor:** `{colors.surface-code}`
  • **textColor:** `{colors.on-dark-muted}`
  • **typography:** `{typography.caption}`
  • **padding:** `{spacing.xs} {spacing.md}`
  • **border:** `0 0 1px {colors.hairline-dark} solid`

    • code inline

    **Role:** code inline component

  • **backgroundColor:** `{colors.surface}`
  • **textColor:** `{colors.charcoal}`
  • **typography:** `{typography.code-inline}`
  • **rounded:** `{rounded.xs}`
  • **padding:** `2px 6px`
  • **border:** `1px solid {colors.hairline}`

    • property row

    **Role:** property row component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-sm}`
  • **padding:** `{spacing.md} 0`
  • **border:** `0 0 1px {colors.hairline-soft} solid`

    • feature comparison table

    **Role:** feature comparison table component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-sm}`
  • **rounded:** `{rounded.md}`
  • **border:** `1px solid {colors.hairline}`

    • feature comparison row

    **Role:** feature comparison row component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **padding:** `{spacing.md} {spacing.lg}`
  • **border:** `0 0 1px {colors.hairline-soft} solid`

    • sidebar nav item

    **Role:** sidebar nav item component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.steel}`
  • **typography:** `{typography.body-sm}`
  • **rounded:** `{rounded.sm}`
  • **padding:** `{spacing.xs} {spacing.md}`

    • sidebar nav item active

    **Role:** sidebar nav item active component

  • **backgroundColor:** `{colors.surface}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-sm-medium}`

    • sidebar section header

    **Role:** sidebar section header component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.steel}`
  • **typography:** `{typography.micro-uppercase}`
  • **padding:** `{spacing.md} {spacing.md} {spacing.xs}`

    • doc toc item

    **Role:** doc toc item component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.steel}`
  • **typography:** `{typography.body-sm}`
  • **padding:** `{spacing.xxs} 0`

    • doc toc item active

    **Role:** doc toc item active component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-sm-medium}`

    • copy code button

    **Role:** copy code button component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.on-dark-muted}`
  • **typography:** `{typography.caption}`
  • **rounded:** `{rounded.sm}`
  • **padding:** `{spacing.xxs} {spacing.xs}`
  • **border:** `1px solid {colors.hairline-dark}`

    • hero band sky

    **Role:** hero band sky component

  • **backgroundColor:** `{colors.hero-sky-from}`
  • **textColor:** `{colors.on-dark}`
  • **rounded:** `0`
  • **padding:** `{spacing.hero}`

    • hero band dark

    **Role:** hero band dark component

  • **backgroundColor:** `{colors.hero-dark-from}`
  • **textColor:** `{colors.on-dark}`
  • **rounded:** `0`
  • **padding:** `{spacing.hero}`

    • hero product mockup

    **Role:** hero product mockup component

  • **backgroundColor:** `{colors.canvas}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `0`
  • **border:** `1px solid {colors.hairline-soft}`
  • **shadow:** `rgba(0, 0, 0, 0.12) 0px 24px 48px -8px`

    • logo wall item

    **Role:** logo wall item component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.steel}`
  • **typography:** `{typography.body-md-medium}`
  • **padding:** `{spacing.lg}`

    • faq accordion item

    **Role:** faq accordion item component

  • **backgroundColor:** `{colors.canvas}`
  • **rounded:** `{rounded.md}`
  • **padding:** `{spacing.xl}`
  • **border:** `1px solid {colors.hairline-soft}`

    • footer region

    **Role:** footer region component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.steel}`
  • **typography:** `{typography.body-sm}`
  • **padding:** `{spacing.section} {spacing.xxl}`
  • **border:** `1px solid {colors.hairline}`

    • footer link

    **Role:** footer link component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.steel}`
  • **typography:** `{typography.body-sm}`
  • **padding:** `{spacing.xxs} 0`

    • startup program card

    **Role:** startup program card component

  • **backgroundColor:** `{colors.canvas}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `{spacing.xxl}`
  • **border:** `1px solid {colors.hairline}`

    • founder quote card

    **Role:** founder quote card component

  • **backgroundColor:** `{colors.testimonial-orange}`
  • **textColor:** `{colors.on-dark}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `{spacing.xxl}`

    • Do's and Don'ts

    Do

  • Use `--color-primary` for the brand's primary interaction treatment.
  • Keep page surfaces anchored to `--color-canvas`.
  • Preserve every typography style's documented size, line height, and letter spacing.
  • Compare major implementation decisions against [the live Mintlify website](https://www.mintlify.com/).

    • Don't

  • Do not introduce colors outside the documented color token set.
  • Do not replace `--color-ink` with an arbitrary neutral.
  • Do not flatten documented component states or spacing relationships.
  • Do not treat this extracted snapshot as newer than the live source website.

    • Layout

    Use the documented spacing scale and component geometry as the implementation baseline. Validate responsive composition and current page rhythm against [the live source](https://www.mintlify.com/).

    同类品牌推荐

    Composio

    Dark UI · Gradient

    Cursor

    Light UI · Editorial

    Expo

    Light UI · Editorial

    Mintlify 设计系统 | 品牌模板 · ViboDesign