Style Guide

A central guide for common components and styles used in Openlane.

Colors

Primaries and grays controlled by the Global Swatch feature.
Brand 1
Brand 2
Brand 3
Dark Background
Headings Colour
Body Text Colour
White
Light / Offset
Border

Typography

Headings, body and other common text elements.
Display

Heading One

Large

Heading Two

Medium
Medium - Sans

Heading Three

Heading Four

Heading Five
Heading Six
Large Text    Large Link
Body Text    Body Link
Small Text    Small Link

Buttons

Component, text style and size variations

Form Inputs

General style and state variations for text inputs.
Inputs
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Labelled Input
This is some text inside of a div block.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Text Area
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Form Selectables

Styling for checkboxes, selects and radios.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Company and Product Name Reference

How to refer to the company and product

Always:
- Use a single word
- Keep the "L" lower case (as a full singular word, so do not use OpenLane)

When referring to the company, use as a proper noun, so capitalize in the beginning of a sentence or inside of a sentence, e.x. "The company Openlane is a great place to work! Openlane is always looking out for it's employees."

When referring to the product, only capitalize when used as the first word of a sentence, otherwise use as all lower-case and typically not used as a possessive. Our github repositories, produced artifacts / binaries, etc., will always be lower case singular, e.g. "openlane-cli, openlane-server, openlane-plugin"