← Vercel

Guidelines deck

6 boards · page order preserved

  1. cloud platform / frontend infrastructure2015

    Vercel

    Develop. Preview. Ship.

    VercelVercel — Brand
    01Vercel — Brandcover
  2. Identity · Marks

    Logo

    primaryclear 0.5× logo heightmin 80px · screen
    Vercel
    light
    Vercel
    dark
    Vercel
    brand
    markclear 0.5× mark widthmin 16px · screen
    VE
    light
    VE
    dark
    VE
    brand
    inverseclear 0.5× logo heightmin 80px · screen
    Vercel
    light
    Vercel
    dark
    Vercel
    brand
    favicon
    VE
    light
    VE
    dark
    VE
    brand
    monoclear 1× logo heightmin 24px · screen
    Vercel
    light
    Vercel
    dark
    Vercel
    brand
    Favicon legibilityfavicon · at native px
    VE
    16px
    VE
    20px
    VE
    24px
    VercelLogo
    02Logologo-suite
  3. Tokens · Color

    Color

    primary
    primary#000000
    50950
    AA 21.0
    Vercel Blue
    accent#0070F3
    50950
    AA 4.5
    text
    text#111111
    50950
    AA 18.9
    surface
    surface#FFFFFF
    50950
    danger
    danger#EE0000
    50950
    VercelColor
    03Colorcolor-system
  4. Tokens · Typography

    Geist

    Aa
    GeistVercel · commissioned · variable

    Develop. Preview. Ship.

    Regular400Medium500Semibold600Bold700
    Aa
    Geist MonoVercel · commissioned · variable

    Develop. Preview. Ship.

    Regular400Medium500
    VercelGeist
    04Geisttype-specimen
  5. Product · buttons

    Buttons

    primary
    Get startedDefault
    Get startedHover
    Get startedDisabled
    secondary
    Get startedDefault
    Get startedHover
    Get startedDisabled
    ghost
    Get startedDefault
    Get startedHover
    Get startedDisabled
    VercelButtons
    05Buttonsui-preview
  6. Board · Custom HTML

    Layout Grid

    12-column grid

    Content aligns to a 12-column grid with a 24px gutter and 1280px max width.

    VercelLayout Grid
    06Layout Gridcustom-html