← Figma

Guidelines deck

7 boards · page order preserved

  1. design software2012

    Figma

    Nothing great is made alone.

    FigmaFigma — Brand
    01Figma — Brandcover
  2. Identity · Marks

    Logo

    primaryclear 0.5× mark widthmin 96px · screen
    Figma
    light
    Figma
    dark
    Figma
    brand
    markclear 0.5× mark widthmin 24px · screen
    FI
    light
    FI
    dark
    FI
    brand
    wordmarkclear 1× cap heightmin 72px · screen
    Figma
    light
    Figma
    dark
    Figma
    brand
    monoclear 0.5× mark widthmin 20px · screen
    Figma
    light
    Figma
    dark
    Figma
    brand
    favicon
    FI
    light
    FI
    dark
    FI
    brand
    Favicon legibilityfavicon · at native px
    FI
    16px
    FI
    20px
    FI
    24px
    FigmaLogo
    02Logologo-suite
  3. Tokens · Color

    Color

    Figma Red
    primary#F24E1E
    50950
    AA-lg 3.6
    Figma Blue
    accent#0D99FF
    50950
    fail 3.0
    text
    text#1E1E1E
    50950
    AA 16.7
    surface
    surface#FFFFFF
    50950
    logoOrange
    logoOrange#FF7262
    50950
    logoPurple
    logoPurple#A259FF
    50950
    FigmaColor
    03Colorcolor-system
  4. Tokens · Typography

    Typography

    Aa
    Whyte InktrapDinamo · licensed

    Design, together.

    Medium500Bold700
    Aa
    WhyteDinamo · licensed

    Design, together.

    Regular400Medium500
    FigmaTypography
    04Typographytype-specimen
  5. Identity · Voice

    Voice

    playful·inclusive·bold·creative·encouraging
    Sample · headline
    “Design, together.”
    Do
    • +Celebrate collaboration and the people doing the work
    • +Be bold and a little joyful — it's okay to have fun
    • +Invite everyone in; design isn't just for designers
    • +Show the craft
    Don't
    • –Don't gatekeep with insider design jargon
    • –Avoid cold, corporate distance
    • –Don't take yourself too seriously
    FigmaVoice
    05Voicevoice
  6. Assets · Imagery

    Imagery

    Photography

    Bright, candid shots of people creating together — hands, screens, sticky notes, real teams mid-collaboration. Warm, saturated, joyful.

    Illustration

    Bold geometric shapes echoing the mark, using the five logo colors. Playful, dimensional, generous with color.

    colorfulplayfulcollaborativebold
    The Config keynote stage awash in the five brand colors.event · colorful · energetic
    Geometric composition built from the five logo colors.illustration · geometric · colorful
    FigmaImagery
    06Imageryimagery
  7. Board · Custom HTML

    Logo Construction

    The mark

    Five shapes, five colors — red, orange, purple, blue, green — locked in fixed relationship. The mark's composition is token-linked via the primary logo's colorRefs; this board walks through the geometry.

    FigmaLogo Construction
    07Logo Constructioncustom-html