Tomato Lab Graphic Standards

Ask hello@tomatolab.org for access.
Tomato Lab Graphic Standards

Getting started

Roma

Edit this page

Roma is the interface layer of the Tomato Lab brand: the tokens and components behind Tomato Lab's sites and apps, from tomatolab.org to Almanac and fffflatfile. It takes the logo, color and type from the brand guide and turns them into things you can build with.

Color tokensLight and dark color roles built on the brand palette. Type scaleInterface sizes for Neue Haas Grotesk and Libre Baskerville. LayoutA 4-point spacing scale, square corners, control heights. ComponentsButtons, inputs, selection controls, tags and badges.

Principles

  1. Swiss, not sterile. Hairline rules, square panels and flat color come from the print brand. Circles are the playful exception, saved for badges, knobs and stickers.
  2. Tomato is a signal. It marks the one thing that matters most on a screen. It is never small text, because Lab Coat on Tomato only passes contrast at large, bold sizes.
  3. Readable before decorative. Every text and color pairing meets WCAG AA. State never relies on color alone.
  4. One source. Values live in Figma and tokens.json. Sites and apps consume them; nobody types a hex code by hand.

Using Roma on a site

Load the Adobe Fonts kit, the tokens, then the component styles. The site’s domain must be listed in the kit’s settings for the fonts to load. Everything else is plain HTML with tl- classes.

<link rel="stylesheet" href="https://use.typekit.net/hha1ptx.css">
<link rel="stylesheet" href="https://brand.tomatolab.org/tokens/tokens.css">
<link rel="stylesheet" href="https://brand.tomatolab.org/assets/roma.css">

<button class="tl-button">Subscribe</button>

Light is the default and dark follows the visitor’s system setting. To force one, put data-theme="light" or data-theme="dark" on <html> or on any section.

Downloads: tokens.css · tokens.json (W3C design-tokens format, for iOS and other platforms) · roma.css

Status

Version 0.1 is a first draft. Still open:

  • iOS tokens (Swift colors and fonts) will be generated from tokens.json.

The Figma source is the UI Design System page of the Tomato Lab Branding file. Roma is a working name and may change; class names use the tl- prefix so a rename won't break anything.