Monocle Guidelines

Digital intelligence for the physical world.

Introduction

Monocle creates digital twins of complex industrial environments, transforming physical spaces into intelligent, queryable and simulation-ready digital environments.

The identity is built on deep industrial neutrals and one restrained accent. Dark and Light carry every surface. Blue is used selectively to highlight key elements.

Voice

We sound like

Make complex environments feel clear. Monocle turns complex industrial systems, spatial data and AI capabilities into language that feels understandable and actionable, without losing the technical depth behind the technology.

Audiences

Same intelligence. Different emphasis.

One consistent voice across every audience. Depth, terminology and priorities adapt. The brand stays clear, confident, intelligent and grounded in the physical world.

Messaging

Click to copy

Headlines set the key phrase apart in Instrument Serif Italic, often in Blue. One emphasized phrase per line. Never an exclamation mark.

The Monocle mark

Two strong diagonal forms create structure, direction and movement, and together frame an abstract “M”. The circle is the single lens of the monocle, built into the symbol rather than set apart as an icon.

The lens stands for a focused field of view and scanning area. The layered forms connect a physical environment to its digital twin. Hover a label to isolate its part.

Logotype construction

Clearspace equals the height of one lens, marked x. Keep it free on all four sides so the logo stays clean and recognizable in every application.

Logotype scale

The symbol and wordmark always scale together. Sizes refer to logo height. The logo never runs below 16px.

Color versions

The primary logo is the main representation across core brand communications and official touchpoints. Use the symbol alone where a compact form is needed, and the digital icon where the full logo cannot be used effectively.

Co-branding

Misuse

Not how we look

Core palette

The palette is built around deep industrial neutrals with one restrained accent. The combination stays professional and sophisticated without feeling overly corporate or sterile.

Shades

Click to copy

Gradients

Click to copy CSS

Gradients add subtle depth and feel atmospheric and spatial, like the transition between a physical environment and its digital representation. Keep transitions soft and contrast controlled. Avoid bright or highly saturated effects. A gradient supports the composition and never becomes the primary visual element.

Color proportions

Neutrals carry the system. Blue stays rare so it keeps its weight.

Accessibility

WCAG 2.2 · normal text

Text sits on light surfaces in Dark, Blue or Blue 600, and on dark or blue surfaces in Light or White. Blue 300 is never a text background.

Type system

Type to edit

Type scale

Base size
16px
Ratio

The Monocle preset follows the guideline hierarchy, where body text sets at 24px on a 1920px canvas. All levels track at -3% with 130% line height.

Hugeicons is the icon library. Line icons with consistent proportions, stroke weights and rounded geometry. Use them for clear communication across interfaces, presentations, diagrams and brand communications, never as decoration. Click an icon to copy its SVG.

Imagery

Photography explores the space between the physical world and its digital counterpart: industrial environments, architecture, machinery, infrastructure and spatial forms. Images feel immersive, structured, atmospheric and slightly futuristic, never overly sci-fi or artificial.

Mockups

Imagery connects the real world to its digital representation. Photography never stands alone as decoration: overlays, spatial data and geometric forms tie each photo to the idea of a digital twin. Each mockup keeps the logo, colors, typography and graphic elements in focus.

Export assets

For AI agents

Give DESIGN.md to your coding agent (Claude Code, Cursor, v0, Framer AI) with your UI or website task. It holds every token, type rule, component spec and copy rule in one file.

Symbol
Logo
Profile pictures
Digital icon and favicons
Imagery
Mockups
Made by