Brand

Of course, our brand isn't our colours — our brand is our mission and how we go about it. But wordmarks, logos, and colours do certainly help bring it all together.

Etymology

We weren’t always known as Literal Labs. Originally spun out of Newcastle University, we began life as Mignon AI, a name that has since been repurposed for our series of AI accelerators. But now that we are Literal Labs, you might well wonder ‐ why “literal”?

Our first innovation was the Tsetlin Machine ‐ a cutting-edge AI framework that powers our solutions with unparalleled speed and clarity, perfectly suited for edge computing. Central to Tsetlin Machines is the concept of literals ‐ input variables, and their negations ‐ which play a pivotal role in the machine's decision-making process. These literals give our brand its name and embody the precision and binary nature of our approach. Our engineers, the lifeblood of our labs, continually refine and elevate this technology, pushing the boundaries of what Tsetlin Machines, and platforms such as ModelMill which offer it, can accomplish.

Wordmark

Literal Labs wordmark logo
Literal Labs wordmark logo

Logomark

For use with logo-only layouts that do not provide adequate space for the full Literal Labs wordmark to be used. Use sparingly ‐ the wordmark is far more recognisable.

Colours

Each family shows the 500 swatch by default, though the 500 shade is not necessarily the primary shade we utilise of any colour. Hover or focus any shade chip to preview that tone and update HEX/CMYK values.

Accessibility Contrast Audit — Light Mode

Accessibility Contrast Audit — Dark Mode

Light Mode

Literal Labs — Design system preview

Secondary text demonstrates var(--text-secondary) on var(--surface-primary).

Muted caption text uses var(--text-tertiary) for less prominent information.

✓ Success: Operation completed via --success tokens.
× Error: Something went wrong via --danger tokens.
⚠ Warning: Please review via --warning tokens.
ℹ Info: For your information via --info tokens.

Dark Mode

Literal Labs — Dark mode preview

Secondary text demonstrates var(--text-secondary) on var(--surface-primary).

Muted caption text keeps using var(--text-tertiary) in dark mode.

✓ Success: Operation completed via --success tokens.
× Error: Something went wrong via --danger tokens.
⚠ Warning: Please review via --warning tokens.
ℹ Info: For your information via --info tokens.

Typography

Literal Labs uses F37 Jan as its primary typeface across headings and body copy, available in Regular (400) and Bold (700) weights. The OpenType stylistic set ss01 is enabled on all headings. A serif stack (Georgia, Times New Roman, Times, serif) is used as an alternate for long-form body copy via the .in-serif class.

The type scale follows a modular ratio. Sizes reduce at tablet (≤1024px) and mobile (≤768px) breakpoints.

And gentlemen in England now a-bed shall think themselves accursed they were not here

h1.title · 5.61rem · F37 Jan · 400 · line-height: 1 · letter-spacing: −0.06em

And gentlemen in England now a-bed shall think themselves accursed they were not here

h1 · 4.5rem · F37 Jan · 400 · line-height: 1 · letter-spacing: −0.06em

And gentlemen in England now a-bed shall think themselves accursed they were not here

h2.title · 4.209rem · F37 Jan · 400 · line-height: 1 · letter-spacing: −0.06em

And gentlemen in England now a-bed shall think themselves accursed they were not here

h3.title · 3.157rem · F37 Jan · 400 · line-height: 1 · letter-spacing: −0.06em

And gentlemen in England now a-bed shall think themselves accursed they were not here

h4.title · 2.369rem · F37 Jan · 400 · line-height: 1

And gentlemen in England now a-bed shall think themselves accursed they were not here

h5.title · 1.777rem · F37 Jan · 400 · line-height: 1

And gentlemen in England now a-bed shall think themselves accursed they were not here

h6.title · 1.333rem · F37 Jan · 400 · line-height: 1

And gentlemen in England now a-bed shall think themselves accursed they were not here

Body (p) · 1rem (16px base) · F37 Jan · 400 · line-height: 1.4 · letter-spacing: −0.02em

And gentlemen in England now a-bed shall think themselves accursed they were not here

Body bold · 1rem (16px base) · F37 Jan · 700

And gentlemen in England now a-bed shall think themselves accursed they were not here

Large text (.lg) · 1.333rem · F37 Jan · 400

And gentlemen in England now a-bed shall think themselves accursed they were not here

Small text (.small) · 0.75rem

And gentlemen in England now a-bed shall think themselves accursed they were not here

Extra-small text (.xsmall) · 0.663rem

And gentlemen in England now a-bed shall think themselves accursed they were not here

Serif alternate (.in-serif) · Georgia, Times New Roman, Times, serif · Used for long-form body copy and editorial content

Sans-serif stack

"F37 Jan", BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif

Serif stack

Georgia, 'Times New Roman', Times, serif

Buttons

Buttons use the primary font, var(--rounded-corners) (0.5rem) border-radius, and a subtle −1px lift on hover. Each brand colour has a corresponding button variant, plus a .is-light modifier.

Patterns & motifs

These visual treatments recur across the site and should be applied consistently.

Stacked-card CTA

Layered borders using .cta-stack-wrapper and .cta-stack-layer. Borders fan out on hover. The default stack colour sits in the deep blue family and steps down in opacity per layer.

Blockquote

Left border uses the brand family, while the italic text sits on the secondary text token.

The precision and binary nature of our approach.

Text selection

Selected text uses the lighter brand tint with primary text for contrast. Try selecting the text below.

Select this text to see the branded highlight colour in action across any body copy on the site.

Rounded corners

Standard border-radius is var(--rounded-corners) = 0.5rem, used on buttons, cards, navbar, and dropdowns.

Navbar icon badges

Product items in the navbar use 18×18px brand-colour rounded squares with inverse icons.

18px · 4px radius · var(--brand)

Use

Literal Labs' name, branding, and marks are our IP and are, accordingly, protected by intellectual property laws. Please utilise these solely for the purposes of Literal Labs' needs or coverage of Literal Labs. Please don't use them for any commercial or non-press activities without express permission. Kindly note that fonts utilised by Literal Labs have been strictly licensed for our own use and permission is not granted for use, whether for Literal Labs' needs, coverage or otherwise.