astertaste

Stripe

英文

https://stripe.com/

白底上斜斜劃過一道橘、粉、紫的大漸層色帶。大標題用細字重、字距收緊，一句話前半深藍黑、後半灰藍；按鈕是藍紫色的小圓角長方形，背景有淡淡的直線。

產業
科技・軟體・AI
金融・保險・專業服務
網站類型
產品・服務網站
主色系
橘
紫
粉紅
配色印象
鮮豔
漸層
設計風格
極簡
俐落時尚
線條・格線

顏色

  • primary

    #533AFD

  • on-primary

    #FFFFFF

  • ink

    #061B31

  • text

    #50617A

  • input-border

    #D4DEE9BF

  • gradient-orange

    #FF8F1F

  • primary-subtle

    #E2E4FF

  • primary-border

    #B9B9F9

  • primary-deep

    #2E2B8C

  • navy

    #0A2540

  • legacy-blurple

    #635BFF

  • text-secondary

    #64748D

  • text-muted

    #7D8BA4

  • text-legacy

    #425466

  • surface

    #FFFFFF

  • surface-alt

    #F8FAFD

  • surface-legacy

    #F6F9FC

  • surface-blue

    #E5EDF5

  • surface-dark

    #0D1738

  • on-dark

    #FFFFFF

  • gradient-coral

    #FF6453

  • gradient-magenta

    #F96BEE

  • gradient-violet

    #8661F2

  • grid-line

    #E5EDF5

  • primary-hover

    #4032C8

  • focus-ring

    #5452FBBF

  • error

    #D8351E

字級

  • display-lg · Söhne · 56px

    Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示

    The quick brown fox 敏捷的狐狸

  • display-md · Söhne · 48px

    Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示

    The quick brown fox 敏捷的狐狸

  • legacy-display · Söhne · 56px

    Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示

    The quick brown fox 敏捷的狐狸

  • headline-md · Söhne · 32px

    Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示

    The quick brown fox 敏捷的狐狸

  • headline-sm · Söhne · 26px

    Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示

    The quick brown fox 敏捷的狐狸

  • title-sm · Söhne · 22px

    Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示

    The quick brown fox 敏捷的狐狸

  • body-md · Söhne · 16px

    Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示

    The quick brown fox 敏捷的狐狸

  • legacy-body · Söhne · 15px

    Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示

    The quick brown fox 敏捷的狐狸

  • button-md · Söhne · 16px

    Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示

    The quick brown fox 敏捷的狐狸

  • label-md · Söhne · 14px

    Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示

    The quick brown fox 敏捷的狐狸

  • nav-label · Söhne · 14px

    Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示

    The quick brown fox 敏捷的狐狸

  • caption · Söhne · 10px

    Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示

    The quick brown fox 敏捷的狐狸

圓角

  • sm

    4px

  • md

    6px

  • lg

    8px

  • pill-legacy

    17px

  • xl

    16px

間距

  • xs

    8px

  • sm

    12px

  • md

    16px

  • lg

    24px

  • xl

    48px

  • xxl

    96px

  • content-width

    1232px

元件

  • button-primary
  • button-primary-hover
  • button-primary-focus
  • button-primary-small
  • button-secondary
  • button-secondary-hover
  • button-legacy
  • button-legacy-hover
  • button-icon
  • button-outline-border
  • nav
  • nav-link-hover
  • text-link
  • text-link-hover
  • breadcrumb
  • input-field
  • input-field-border
  • input-field-placeholder
  • input-field-focus
  • input-field-error
  • input-label
  • select-trigger
  • form-card
  • hero-headline
  • hero-subline
  • section-title
  • case-study-title
  • section-lead
  • feature-card
  • case-study-card
  • stat
  • dark-section
  • logo-strip
  • body-copy
  • footnote
  • focus-outline
  • hero-ribbon-start
  • hero-ribbon-middle
  • hero-ribbon-pink
  • hero-ribbon-end
  • grid-rule