Skip to content
Book my free diagnostic (30 min)Free diagnostic

Log'in Line / Identity


A cobalt that acts, a violet that underlines, plenty of air around them. Everything you need to talk about us in the same voice as the site.

Download the logoSee the colors

Version 2 · October 2026

Cobalt#0354E7
Deep cobalt#0048B6
Navy#003285
Orchid#F7CAF7
Night#090B20
Mist#F2F3FB

02 · Colors

Six colors carry the identity. Cobalt acts, violet underlines, mist breathes. Click a color to copy its code.

  • HEX
    #0354E7
    RGB
    3 84 231

    Acts: buttons, links, focus.

  • HEX
    #0048B6
    RGB
    0 72 182

    The header and hero block.

  • HEX
    #003285
    RGB
    0 50 133

    The closing call.

  • HEX
    #F7CAF7
    RGB
    247 202 247

    Emphasis on cobalt and navy.

  • HEX
    #090B20
    RGB
    9 11 32

    Text and dark bands.

  • HEX
    #F2F3FB
    RGB
    242 243 251

    The ground of every page.

The proportions of a page

Mostly mist and ink. Cobalt and navy stay rare, which is what gives them weight.

Supporting colors

For secondary text, hairlines and states. A state always comes with a word.

Checked contrasts

  • Aa17.6:1AAANight on mist
  • Aa6.1:1AAWhite on cobalt
  • Aa5.7:1AAOrchid on deep cobalt
  • Aa11.7:1AAAWhite on navy
  • Aa6.5:1AAText violet on mist
  • Aa7.6:1AAALight cobalt on night

Computed with WCAG 2.2 from the site's colors.

03 · Typography

A single weight of PolySans for headlines, tight and calm. Inter for everything else, readable at every size.

Headlines

PolySans

PolySans Neutral, weight 400. Tight tracking, short leading.

Licensed typeface (Gradient): files on request

Text

Inter

Inter, 400 to 600. Tabular figures for prices and response times.

Download Inter from Google Fonts

Try itThe text is editable.

The infra team for startups without Ops.

The scale

  1. display-xlPolySans · 112 px

    The infra team for startups without Ops

  2. display-lPolySans · 72 px

    Does this speak to you?

  3. display-mPolySans · 48 px

    A dedicated DevOps team

  4. display-sPolySans · 32 px

    Critical 24/7

  5. headingPolySans · 22 px

    We handle your incidents 24/7

  6. ledeInter · 20 px

    A stable, optimized, secure infrastructure that belongs to you.

  7. bodyInter · 16 px

    Senior engineers respond within minutes to critical incidents.

  8. proseInter · 17 px

    Over-provisioning is the chronic disease of Kubernetes.

  9. smallInter · 14 px

    CVE watch, patches and updates applied without pulling in your developers.

  10. labelInter · 12 px

    MANAGED KUBERNETES

The character set

The emphasis rule

Your infra, kept calm.

In a headline, one or two words turn violet: the ones that carry the promise. Never a whole sentence, never twice in one headline.

04 · Color blocks

A page alternates four grounds. Each switches all its colors at once: text, action and emphasis stay readable everywhere.

  • Header and hero

    We look after your infra.

    Let's talkCobalt#0048B6
  • Working sections

    The math, in plain sight.

    Let's talkPeriwinkle#E2E6FC
  • Closing call

    Does this speak to you?

    Let's talkNavy#003285
  • Offers and footer

    Three offers, one handover.

    Let's talkNight#090B20

05 · Shapes

Structure comes from one-pixel hairlines, not boxes. Corners stay soft, and shadows exist only for what floats.

Radii

4 pxTags
8 pxButtons, inputs
12 pxCards, panels
16 pxLarge blocks
∞Dots

Spacing

A scale from 4 to 192 px. Sections breathe wide, components stay tight.

  1. 4
  2. 8
  3. 12
  4. 16
  5. 24
  6. 32
  7. 48
  8. 64
  9. 96
  10. 128
  11. 192

06 · Motion

Elements ease in as you scroll, controls react at once. Nothing bounces, nothing blinks.

Enter

Reveals, menus, reactions. Starts fast so it feels immediate.

700 ms

Cross

What moves from one point of the screen to another.

1200 ms

Slide

Panels arriving from an edge.

700 ms
  • Interface under 300 ms
  • An exit faster than its entrance
  • Reduced motion respected

07 · Icons

Lucide, drawn at the system's fine stroke, in text or action color. Never filled, never in a decorative color.

  • Activity
  • AlertTriangle
  • ArrowDown
  • ArrowLeft
  • ArrowRight
  • ArrowUpRight
  • BarChart3
  • Bell
  • Building2
  • Calendar
  • Check
  • ChevronDown
  • ChevronRight
  • Clock
  • Cloud
  • Code2
  • Coins
  • Copy
  • Database
  • Euro
  • FileText
  • Gauge
  • GitBranch
  • Globe
  • GraduationCap
  • Layers
  • LifeBuoy
  • LineChart
  • Linkedin
  • Lock
  • Mail
  • MapPin
  • Menu
  • MessageSquare
  • Minus
  • Phone
  • Plus
  • RefreshCw
  • Rocket
  • Search
  • Server
  • Settings
  • Shield
  • ShieldCheck
  • Terminal
  • Timer
  • TrendingDown
  • TrendingUp
  • Users
  • Workflow
  • X
  • Zap

08 · Principles

We do

Flat, confident color blocks

One-pixel hairlines for structure

One or two violet words per headline

Real figures, set large

Slow, gentle reveals

Plenty of space around

We avoid

Gradients and glows

Frosted glass and depth shadows

Emoji and 3D illustrations

Visuals that imitate code

Mosaics of cards

Text in decorative colors

A deck, an event, a partner article: write to us and we'll send the right files.

Write to the team
infra@loginline.com
Reply within 48 hSource files