Foundations

The colours, the fonts and the name with its icon, the base of every page.

Colours

Soft black on white, a few grays and a red for what needs attention. Each colour is a custom property in assets/css/style.css.

--color-primary#101010

Soft black

The bar, buttons, logo and headings
--color-text#202124

Text

Body text
--color-muted#5f6368

Muted

Secondary text, answers, kickers
--color-faint#9aa0a6

Faint

Placeholders, disabled fields
--color-border#dadce0

Border

Every line, around fields, cards and code, between rows and collapses
--color-bg#f1f3f4

Gray

Hover, selected items, app background
--color-band#fafafa

Band

The gray bands of the homepage
--color-fieldrgba(0,0,0,.02)

Field

The hint of gray in a field
--color-white#fff

White

Pages and cards
--color-red#e5322d

Red

Errors, danger, badges, annotations
--color-orange#f29900

Orange

Missed, warnings
--color-green#1e8e3e

Green

Succeeded
--color-accent#2e3192

Accent

Emphasis in a display heading

Typography

Geist for everything. The text is 16px, on the homepage 17px and in the footer 15px; the fields are 16px, the buttons 16px in 600 and 15px in the top bar.

For website owners

Free lightweight
point-of-sale

No terminal. No contract. No cut. That’s just how we do things around here.

Heading 1

Heading 2

Heading 3

Heading 4

A paragraph with a link, bold text and code. A muted sentence for what matters less.

HTML

<p class="kicker">For website owners</p>
<h1 class="display">Free lightweight<br>point-of-sale</h1>
<p class="lead">No terminal. No contract. No cut. That’s just how we do things around here.</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p>A paragraph with <a href="#typography">a link</a>, <strong>bold text</strong> and <code>code</code>. <span class="muted">A muted sentence for what matters less.</span></p>

Brand

A black geometric icon and the name: the brand in bold, the product in regular. Each product has its own shape; set it with logo in hugo.toml. A domain ending is joined to the name with domain. Every page has the black bar on the left, without a class: 12px wide and 4px below 960px.