Skip to main content

Design System Guidelines

Our Brand guidelines and UI guides are housed in Lingo, not in Figma.

Lingo is a tool that combines the power of a digital asset manager with the context of a style guide. It allow us to organize all our visual assets in one place, creating and sharing living brand style guides, digital asset libraries and more. All while ensuring brand consistency.

So, what's in Lingo and what's in Figma?​

In Lingo you'll find:​

  • The source of style knowledge is Lingo, never Figma.
  • The use of these components is documented in Lingo, not in Figma.
  • Visual language is documented in Lingo, not Figma.
  • Design patterns are documented in Lingo, not Figma.
  • Writing guidelines are documented in Lingo, not Figma.

Lingo structure:​

For each Brand / Marketplace you'll find a common Guideline Structure:

  • Guidelines Index
  • Brand (Mission, Vission, Identity, Brand Manual)
  • Foundations (Logos, Color, Typography, Grid, Layout, Illustration, Iconography, Photography)
  • Writing (How we write for the Brand)
  • Components (Core Components and pairing with Native components)
  • Templates (Landings, Emails, Advertising)

In Figma you'll find:​

  • In Figma there are the UI Kits, which have styles and components.
  • In Figma there are the Component's Specs.

FAQ​

Do you want to know when to use a color?

  • Go to Lingo, Color Foundation.

Do you want to know how a typeface is used?

  • Go to Lingo, Typography Foundation.

Do you want to know how to write for your brand?

  • Go to Lingo, Writing Guides.

Do you want to create or iterate a component? Are you defining it or do you want to pass the specs to your Dev?

  • The specs are made with the Figma new component template.
  • The final component is added into the Figma UIKit.
  • Guidance on when and how to use it is written at Lingo.

Does an external have to design for us?

  • We share with her/him a Figma UI kit so she/he doesn't have to build or design from scratch.
  • We share with her/him the Lingo link so you know how we designed for the Brand.

What if I'm a developer and I want to know what the states of a component are?

  • If the component is already in SUI, you should look at the SUI Code.
  • If the component is new, we have to share the Specs to it using the Figma template.
  • Specs about states are not documented in Lingo.

What if you don't use SUI to develop? (landings, providers with other technology, etc.)

  • The brand code theme remains valid regardless of technology.