Visual — identity

Visual Identity

Foundation, mark, color, typography, and usage principles for the Lintel identity system.

01 — Foundation

Lintel is a design studio that builds software for companies navigating complex industries. The name is structural: a lintel is the horizontal beam that spans an opening in a wall, carrying load so passage is possible. That's the studio's function — design that carries intelligence so people can move through it.

The concept
The opening
Complex industries create friction. The studio's products create openings — paths through complexity that feel natural to use.
The lintel
Design carries intelligence. Not the other way around. The human-centered process is the beam that makes the opening hold.
The material
A lintel can be stone, wood, steel, or concrete. The name doesn't lock the studio to one material — it describes a structural role.
Studio value

Considered to the last detail.

02 — Mark

An inverted U. No container. The horizontal beam spans two vertical supports — the lintel itself, abstracted into geometry. Structural without being pictorial. It scales cleanly from favicon to display size and carries no borrowed form.

Primary lockup
Horizontal · on dark
LINTEL
Horizontal · on light
LINTEL
Mark anatomy
The beam
The horizontal top bar is the lintel — a structural span carrying load. It is the widest element and defines the mark's proportion.
The supports
Two equal vertical legs drop from the beam ends. Together they imply a passage — an opening that the lintel makes possible.
The void
The negative space between the supports is as important as the mark itself. Do not fill it, enclose it, or place elements inside it.
Spec
Width:height ratio 1.8:1. Stroke 3px, equal weight throughout. Square terminals — no round caps. No container. No fill.
Wordmark
DM Sans 500, all-caps. Tracking 0.2em. Mark sits at 80% of cap height, optically centered. Gap between mark and wordmark ≈ one letter width.
Clearspace

Minimum clearspace on all sides equals the height of the mark. This is the "x" unit for all spacing rules.

x x x x
Scale
96px wide
64px wide
48px · min lockup
32px · mark only
Favicon · 20px
Don't
Don't add a container
The mark has no container. Never place it inside a box, circle, or square.
Don't use round caps
Terminals are always square. Round caps soften the structural reading.
Don't distort proportions
Width:height is locked at 1.8:1. Do not stretch or compress.
Don't drop the tracking
LINTEL
Wordmark tracking is 0.2em — always
03 — Color

The palette is built on pure grey neutrals — no warmth or coolness baked into the base. Slate carries the studio's character. Copper is a secondary accent, retained for warmth in specific contexts.

Neutral ramp — pure grey

R=G=B throughout. No tint. This gives product UIs built on the system maximum flexibility — dark mode and light mode both read clean.

50#F5F5F5
100#E6E6E6
200#D0D0D0
300#ABABAB
400#8A8A8A
500#6E6E6E
600#525252
700#383838
750#282828
800#1C1C1C
900#0C0C0C

The mark has no fill. The new mark is a pure outline form — it carries no background. On dark surfaces, the stroke is cream (#F5F0E8). On light surfaces, the stroke is charcoal (#0C0C0C). The mark inherits context rather than imposing color.

Slate ramp — primary accent
50#EEF4F9
100#D6E6F2
200#AECDE5
300#83B1CF
400 ★#6895B4
500#4E7A96
600#3E6480
700#2B4D63
800#213649
Accent palette
Slate#6895B4
Copper#C9885A
Cream#F5F0E8
Charcoal#0C0C0C

Slate is primary. It carries primary interactive elements and key UI signal. Copper is secondary — it brings warmth to specific surfaces and moments but does not define the identity. Cream is the light surface. Use sparingly in digital — white (#FFFFFF) is preferred for pure UI contexts.

Color in context
Dark surface

Design that carries intelligence.

Primary body copy on charcoal. Clean separation at all sizes.

Slate tag Cream tag
Light surface

Design that carries intelligence.

Primary body copy on cream. Warm and readable.

Slate tag Copper tag
Contrast ratios — WCAG
Pair Preview Ratio Grade Use for
Cream on Charcoal
Aa
16.8:1 AAA All text on dark surface
Charcoal on Cream
Aa
16.8:1 AAA All text on light surface
Slate on Charcoal
Aa
4.6:1 AA Links, tags, interactive on dark
Slate on White
Aa
3.1:1 AA-LG Large text only on white
Charcoal on Slate
Aa
4.6:1 AA Text on slate surface
Copper on Charcoal
Aa
4.9:1 AA Copper accents on dark
04 — Typography

Two typefaces. Arno Pro is the display voice — editorial, considered, humanist. DM Sans is the functional layer — clear, neutral, modern. They don't compete. Each has a role.

Arno Pro — display
Arno Pro
Display · Headlines · Pull quotes · Brand voice
Adobe Fonts · typekit embed
blu4smp
Weights: 400 · 400i · 600 · 700 · 700i
Design that
carries intelligence.

Arno Pro is named after the Arno River in Florence — a choice that speaks to the humanist tradition of Italian Renaissance letterforms. It has the warmth and optical precision of a true text face, but scales up beautifully for display use.

Hero56–72px / 400
Aa
Display36–48px / 400
Heading
Subhead24–32px / 400
Subheading text
Pull quote18–22px / 400i
Considered to the last detail.
DM Sans — body & UI
DM Sans
Body · UI labels · Wordmark · Captions
Google Fonts
Weights: 300 · 400 · 500 · 600 · 700
Fallback: Avenir Next, Avenir
Lintel builds software for companies navigating complex industries. Our process starts with people.

DM Sans was designed by Colophon Foundry for Deepmind — a typeface built for readability at small sizes in complex interfaces. It carries a geometric clarity without feeling cold.

Large body18px / 400 / lh 1.6
The structure behind every opening.
Body15px / 400 / lh 1.65
Design-led. Intelligence-enhanced. Built for people navigating complexity.
Small13px / 400 / lh 1.6
Supporting copy, metadata, secondary labels at readable scale.
Label / UI10–11px / 600 / ls 0.1em
Section label · Eyebrow · Tag
Wordmarkvar / 500 / ls 0.2em
LINTEL
Type pairing in use

Case study

Designing for the advisor who's seen everything.

Financial advisors carry 20 years of pattern recognition in their heads. The product had to respect that intelligence while making the work faster — not by simplifying it, but by removing friction from what they already knew.

RFG · Fintech · 2025
05 — Usage

The brand operates primarily on dark surfaces — charcoal is the default canvas. Light surfaces are used for documents, proposals, and contexts that require print-legibility or formal register.

Principles

Dark-first

Charcoal (#0C0C0C) is the primary canvas. Website, presentations, decks, and digital product contexts default to dark. Light is a deliberate choice, not the fallback.

Slate as signal

Slate (#6895B4) marks interactive elements, links, tags, and key callouts in the UI. It is not a background color in most contexts. Use it to direct attention, not to decorate.

Copper as warmth

Copper (#C9885A) is a secondary accent. Use it for warmth, not structure — pull quotes, illustrative elements, specific brand moments. Never as a primary action color.

Typography hierarchy

Arno Pro for headlines and brand voice moments. DM Sans for everything functional. Never mix them within the same text block — their roles are separate.

Intelligence in context

Not every product the studio ships contains AI. The brand does not stamp "intelligence" as a feature. It describes a philosophy about how design and intelligence relate.

Considered to the last detail

Every brand application reflects this value. Inconsistent spacing, wrong weights, or shortcut decisions undermine the message before a word is read.

Application examples
LINTEL

Studio

Design that carries intelligence.

We design products people reach for.

LINTEL

Proposal

Design that carries intelligence.

We design products people reach for.