返回列表
行业: AI 与大语言模型平台Website

Mistral-AI

Mistral AI 以芥末黄、橙色和深红组成的日落渐变叠加山景摄影，并用暖奶油色表面与饱和橙色按钮贯穿页面，塑造独特而富有欧洲气质的 AI 品牌。

Light UIGradientDesign System
Mistral-AI 网站预览
设计系统
品牌色彩 · 36

primary

#FA520F

--color-primary

primary deep

#CC3A05

--color-primary-deep

on primary

#FFFFFF

--color-on-primary

sunshine 300

#FFD06A

--color-sunshine-300

sunshine 500

#FFB83E

--color-sunshine-500

sunshine 700

#FFA110

--color-sunshine-700

sunshine 800

#FF8105

--color-sunshine-800

sunshine 900

#FF8A00

--color-sunshine-900

yellow saturated

#FFD900

--color-yellow-saturated

cream

#FFF8E0

--color-cream

cream light

#FFFAEB

--color-cream-light

cream deeper

#FFF0C2

--color-cream-deeper

beige deep

#E6D5A8

--color-beige-deep

block 5

#FFE295

--color-block-5

block 6

#FFD900

--color-block-6

block 7

#FF8105

--color-block-7

ink

#1F1F1F

--color-ink

ink tint

#3D3D3D

--color-ink-tint

charcoal

#2C2C2C

--color-charcoal

slate

#4A4A4A

--color-slate

steel

#6A6A6A

--color-steel

stone

#8A8A8A

--color-stone

muted

#A8A8A8

--color-muted

hairline

#E5E5E5

--color-hairline

hairline soft

#EDEDED

--color-hairline-soft

hairline strong

#C7C7C7

--color-hairline-strong

canvas

#FFFFFF

--color-canvas

surface

#FAFAFA

--color-surface

surface cream

#FFF8E0

--color-surface-cream

surface cream soft

#FFFAEB

--color-surface-cream-soft

surface code

#1C1C1E

--color-surface-code

on dark

#FFFFFF

--color-on-dark

on dark muted

#A8A8A8

--color-on-dark-muted

on cream

#1F1F1F

--color-on-cream

footer cream

#FFF8E0

--color-footer-cream

link

#FA520F

--color-link

字体系统

字体家族

PP Editorial Old / Inter / JetBrains Mono

字重

400500600

备注

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

标签
Light UIGradientDesign System

设计笔记

Mistral AI 的设计强调简洁性和功能性，避免过度装饰，专注于内容的清晰呈现。

设计文档

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

Mistral-AI — Style Reference

> Mistral AI brands itself with a singular signature — atmospheric sunset gradients (mustard, orange, deep red) layered over photography of mountains, plus a horizontal "sunset stripe" bar that closes every page. The system pairs warm cream-yellow surfaces ({colors.cream}) with a saturated orange primary CTA ({colors.primary}) and uses an elegant near-serif voice for hero displays. Coverage spans homepage (Frontier AI hero), Le Studio product page, Coding solutions, news article surfaces, contact form, and services tier page — all anchored by the signature gradient closing band.

**Theme:** light

**Source website:** [https://mistral.ai/](https://mistral.ai/)

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 | `#fa520f` | `--color-primary` | primary role extracted from the source design |

| primary deep | `#cc3a05` | `--color-primary-deep` | primary deep role extracted from the source design |

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

| sunshine 300 | `#ffd06a` | `--color-sunshine-300` | sunshine 300 role extracted from the source design |

| sunshine 500 | `#ffb83e` | `--color-sunshine-500` | sunshine 500 role extracted from the source design |

| sunshine 700 | `#ffa110` | `--color-sunshine-700` | sunshine 700 role extracted from the source design |

| sunshine 800 | `#ff8105` | `--color-sunshine-800` | sunshine 800 role extracted from the source design |

| sunshine 900 | `#ff8a00` | `--color-sunshine-900` | sunshine 900 role extracted from the source design |

| yellow saturated | `#ffd900` | `--color-yellow-saturated` | yellow saturated role extracted from the source design |

| cream | `#fff8e0` | `--color-cream` | cream role extracted from the source design |

| cream light | `#fffaeb` | `--color-cream-light` | cream light role extracted from the source design |

| cream deeper | `#fff0c2` | `--color-cream-deeper` | cream deeper role extracted from the source design |

| beige deep | `#e6d5a8` | `--color-beige-deep` | beige deep role extracted from the source design |

| block 5 | `#ffe295` | `--color-block-5` | block 5 role extracted from the source design |

| block 6 | `#ffd900` | `--color-block-6` | block 6 role extracted from the source design |

| block 7 | `#ff8105` | `--color-block-7` | block 7 role extracted from the source design |

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

| ink tint | `#3d3d3d` | `--color-ink-tint` | ink tint role extracted from the source design |

| charcoal | `#2c2c2c` | `--color-charcoal` | charcoal role extracted from the source design |

| slate | `#4a4a4a` | `--color-slate` | slate role extracted from the source design |

| steel | `#6a6a6a` | `--color-steel` | steel role extracted from the source design |

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

| muted | `#a8a8a8` | `--color-muted` | muted 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 strong | `#c7c7c7` | `--color-hairline-strong` | hairline strong role extracted from the source design |

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

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

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

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

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

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

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

| on cream | `#1f1f1f` | `--color-on-cream` | on cream role extracted from the source design |

| footer cream | `#fff8e0` | `--color-footer-cream` | footer cream role extracted from the source design |

| link | `#fa520f` | `--color-link` | link role extracted from the source design |

Tokens — Typography

PP Editorial Old · `--font-primary`

  • **Substitute:** Inter, system-ui, sans-serif
  • **Weights:** 400
  • **Sizes:** 84px, 64px, 52px, 56px
  • **Line height:** 1.05, 1.1, 1.15
  • **Letter spacing:** -1.5px, -1px, -0.5px
  • **Role:** Brand typography family observed across the documented type scale.

    • Inter · `--font-family-2`

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

    • JetBrains Mono · `--font-family-3`

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

    • Type Scale

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

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

    | hero-display | 84px | 1.05 | -1.5px | `--text-hero-display` |

    | display-lg | 64px | 1.1 | -1px | `--text-display-lg` |

    | heading-1 | 52px | 1.15 | -0.5px | `--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.55 | 0 | `--text-body-md` |

    | body-md-medium | 16px | 1.55 | 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 | 1px | `--text-micro-uppercase` |

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

    | stat-display | 56px | 1.1 | -1px | `--text-stat-display` |

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

    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 | 20px | `--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.md}`
  • **padding:** `10px 20px`

    • button primary pressed

    **Role:** button primary pressed component

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

    • button primary disabled

    **Role:** button primary disabled component

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

    • button cream

    **Role:** button cream component

  • **backgroundColor:** `{colors.cream}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.button-md}`
  • **rounded:** `{rounded.md}`
  • **padding:** `10px 20px`
  • **border:** `1px solid {colors.beige-deep}`

    • button dark

    **Role:** button dark component

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

    • button secondary

    **Role:** button secondary component

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

    • button on cream

    **Role:** button on cream component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.button-md}`
  • **rounded:** `{rounded.md}`
  • **padding:** `10px 20px`
  • **border:** `1px solid {colors.beige-deep}`

    • button link

    **Role:** button link component

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

    • card base

    **Role:** card base component

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

    • card feature

    **Role:** card feature component

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

    • card cream

    **Role:** card cream component

  • **backgroundColor:** `{colors.cream}`
  • **textColor:** `{colors.ink}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `{spacing.xxl}`
  • **border:** `1px solid {colors.beige-deep}`

    • card cream soft

    **Role:** card cream soft component

  • **backgroundColor:** `{colors.surface-cream-soft}`
  • **textColor:** `{colors.ink}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `{spacing.xxl}`

    • card feature product

    **Role:** card feature product component

  • **backgroundColor:** `{colors.canvas}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `{spacing.xxl}`
  • **border:** `1px solid {colors.hairline-soft}`
  • **shadow:** `rgba(0, 0, 0, 0.04) 0px 4px 12px`

    • card photographic

    **Role:** card photographic component

  • **backgroundColor:** `{colors.surface-code}`
  • **textColor:** `{colors.on-dark}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `0`

    • pricing card

    **Role:** pricing card component

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

    • pricing card featured

    **Role:** pricing card featured component

  • **backgroundColor:** `{colors.cream}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `{spacing.xxl}`
  • **border:** `2px solid {colors.primary}`

    • 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-strong}`
  • **height:** `44px`

    • text input focused

    **Role:** text input focused component

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

    • text area

    **Role:** text area component

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

    • contact form panel

    **Role:** contact form panel component

  • **backgroundColor:** `{colors.cream}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `{spacing.xxl}`
  • **border:** `1px solid {colors.beige-deep}`

    • pill tab

    **Role:** pill tab component

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

    • pill tab active

    **Role:** pill tab active component

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

    • 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.primary}`
  • **typography:** `{typography.body-sm-medium}`
  • **border:** `0 0 2px {colors.primary} solid`

    • badge orange

    **Role:** badge orange component

  • **backgroundColor:** `{colors.primary}`
  • **textColor:** `{colors.on-primary}`
  • **typography:** `{typography.caption-bold}`
  • **rounded:** `{rounded.full}`
  • **padding:** `4px 10px`

    • badge cream

    **Role:** badge cream component

  • **backgroundColor:** `{colors.cream-deeper}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.caption-bold}`
  • **rounded:** `{rounded.full}`
  • **padding:** `4px 10px`

    • badge dark

    **Role:** badge dark component

  • **backgroundColor:** `{colors.ink}`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.caption-bold}`
  • **rounded:** `{rounded.full}`
  • **padding:** `4px 10px`

    • promo banner

    **Role:** promo banner component

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

    • hero band sunset

    **Role:** hero band sunset component

  • **backgroundColor:** `{colors.sunshine-700}`
  • **textColor:** `{colors.ink}`
  • **rounded:** `0`
  • **padding:** `{spacing.hero}`

    • sunset stripe band

    **Role:** sunset stripe band component

  • **backgroundColor:** `{colors.primary}`
  • **textColor:** `{colors.on-primary}`
  • **rounded:** `0`
  • **padding:** `{spacing.lg} 0`

    • cta banner cream

    **Role:** cta banner cream component

  • **backgroundColor:** `{colors.cream}`
  • **textColor:** `{colors.ink}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `{spacing.section}`

    • 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 rgba(255,255,255,0.08) solid`

    • feature icon tile

    **Role:** feature icon tile component

  • **backgroundColor:** `{colors.cream}`
  • **rounded:** `{rounded.md}`
  • **padding:** `{spacing.md}`
  • **border:** `1px solid {colors.beige-deep}`

    • industry tile

    **Role:** industry tile component

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

    • stat cell

    **Role:** stat cell component

  • **backgroundColor:** `transparent`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.stat-display}`
  • **padding:** `{spacing.lg}`

    • customer testimonial card

    **Role:** customer testimonial card component

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

    • 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:** `0 0 1px {colors.hairline} solid`

    • footer region

    **Role:** footer region component

  • **backgroundColor:** `{colors.footer-cream}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-sm}`
  • **padding:** `{spacing.section} {spacing.xxl}`

    • footer link

    **Role:** footer link component

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

    • app store badge

    **Role:** app store badge component

  • **backgroundColor:** `{colors.ink}`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.caption-bold}`
  • **rounded:** `{rounded.md}`
  • **padding:** `{spacing.sm} {spacing.md}`

    • 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 Mistral-AI website](https://mistral.ai/).

    • 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://mistral.ai/).

    同类品牌推荐

    Claude

    Light UI · Editorial

    Cohere

    Light UI · Editorial

    ElevenLabs

    Light UI · Editorial

    Mistral-AI 设计系统 | 品牌模板 · ViboDesign