Skip to content

Design resources

The L21 system.

Everything you need to represent L21 Labs consistently: the mark, the palette, type, spacing and core components.

02

Color

  • Ink

    #232A33

    Headings, logo

    --ink · on white 14.5:1 AA · on dark 1.3:1

  • Body

    #3C4049

    Paragraph text

    --body · on white 10.4:1 AA · on dark 1.9:1

  • Subtle

    #6B6F77

    Captions, meta

    --subtle · on white 5.0:1 AA · on dark 3.9:1

  • Roof

    #8A8D91

    Logo roof, decoration only

    --roof · on white 3.3:1 · on dark 5.8:1 AA

  • Accent

    #0066CC

    Links, primary actions

    --accent · on white 5.6:1 AA · on dark 3.5:1

  • Accent (dark)

    #2997FF

    Accent on dark bands

    --accent-on-dark · on white 3.0:1 · on dark 6.5:1 AA

  • Background

    #FBFBFD

    Page

    --bg · on white 1.0:1 · on dark 18.8:1 AA

  • Muted

    #F2F2F5

    Tiles, sections

    --muted · on white 1.1:1 · on dark 17.4:1 AA

  • Dark

    #0B0D10

    Hero, footer

    --dark · on white 19.5:1 AA · on dark 1.0:1

03

Typography

Inter for everything we say; JetBrains Mono for labels, codes and data.

  • Display / H1Technology for what's next.
  • H2Products we're building.
  • H3Experiments in progress
  • LedeA lab and product incubator.
  • Body · 16/1.6We design, build and ship our own products, from first experiment to production.
  • Overline · monoBuilt at L21

04

Spacing

An 8px rhythm with a 4px half-step. Sections use 64px on mobile and 96px on desktop.

  • 4px
  • 8px
  • 12px
  • 16px
  • 24px
  • 32px
  • 48px
  • 64px
  • 96px

05

Components

Tags & status

AIWebGLLiveBetaPrototypeResearch

Card

LiveAISaaS

MLO AI

Intelligence that works the way your team does.