v0.1 — Brand Guidelines

Magnus

Design System

The visual language, components, and principles behind Magnus — a unified intelligence platform where connected data, AI, and integrated tools work as one system. Built so every product in the ecosystem feels like it came from the same hand.

Mission

One platform. Connected data. Smarter work.

Audience

Project teams, leadership, and partners — from the office to the field.

Approach

Tightly integrated. AI-native. Expanding one tool at a time.

Try toggling the color theme

01

Principles

The rules that govern every design decision across the Magnus ecosystem.

Clarity over decoration

Every element earns its place. If removing it loses no information, it shouldn't exist. Color is semantic — never decorative in product UI.

Density with legibility

Teams manage dozens of active projects at once. Show 50 items in a viewport, distinguished by status and hierarchy — not padding.

Speed is a feature

Product transitions complete in 100ms. State changes are instant. No animation exists that doesn't communicate a state change.

Trust through restraint

The work is serious. The design should feel serious and capable — never playful in operational contexts.

Marketing vs. Product

Same system, different expression.

Marketing
Inspires confidence and communicates vision.

• Display serif, generous whitespace

• Atmospheric backgrounds, noise texture

• Real product screenshots

Product
Fast, exact, and operationally honest.

• System sans + monospace for data

• Dense layouts, collapsible sidebars

• Semantic color only

03

Color

A neutral-first palette with semantic accents. Color communicates state, intent, and meaning.

Foundation

base

Background

--background

16.8:1

Foreground

--foreground

surface

Card

--card

surface

Muted

--muted

Magnus Accent

4.6:1 AA

Steel

--mg-steel

AAA

Safety

--mg-safety

7.2:1 AAA

Primary

--primary

surface

Secondary

--secondary

Semantic status

4.5:1 AA

Critical

--mg-critical

AA large

Warning

--mg-warning

4.5:1 AA

Success

--mg-success

4.6:1 AA

Info

--mg-info

Texture

Steel gradient + noise — marketing and brand surfaces only

Color rules

  • Color in product UI is functional — it signals status, not style
  • Red is reserved for critical or blocking states
  • Gradients and textures live in marketing, not product
04

Typography

Three typefaces, strict role boundaries. Each has a defined purpose across the ecosystem.

DisplayInstrument Serif

Connected data.
Smarter decisions.

Intelligence across every tool.

Usage: Marketing headlines, brand moments, hero sections. Never in product UI. Italic available for subtitles and editorial emphasis.

SansInter Sans

Active Projects

Schedule Risk Analysis

Magnus connects your data, tools, and AI into one platform that keeps every team aligned and moving.

Secondary body text with reduced emphasis for supporting information and labels.

Usage: Product headings, body copy, UI labels, documentation. The workhorse.

MonoGeist Mono

TASK-2847

2026-02-23 08:00 AM CST

42°21'29.5"N 71°03'29.2"W

$1,247,850.00

200 POST /api/v1/projects/create — 47ms

Usage: Task IDs, timestamps, coordinates, budgets, code, system output. Implies truth.

Type scale

36/40
Connected Intelligence
30/36
Platform Overview
24/32
Active Projects
20/28
Client Lifecycle Status
18/28
Milestone review completed
16/24
Magnus connects your data and tools into one intelligent system.
14/20
Secondary body text with reduced emphasis for supporting information.
12/16
UPDATED 2 MIN AGO — J. MARTINEZ
See type system in context
05

Spacing

An 8px base scale used ecosystem-wide. Marketing gravitates to the larger end, product to the tighter end.

4px
micro
8px
xs
16px
sm
24px
md
32px
lg
48px
xl
64px
2xl
96px
3xl
06

Surfaces

How the design adapts across different product surfaces.

Marketing

Confidence, vision

Display serif + sans

Dark bg, white text, accent sparingly

Product

Focus, control, speed

System sans + mono for data

Light + dark mode, semantic only

Documentation

Precision, trust

Sans + mono

Light bg, clean hierarchy

Brand guidelines

Authority, craft

Full type stack

Showcase palette

07

Ecosystem

Magnus is a growing family of tools — each one tightly integrated, sharing the same data layer and design language.

Magnus Chat
Live
The conversational AI that started it all.

Connects to company data, surfaces answers, and takes action — all through natural language. Chat is the front door to the entire Magnus ecosystem.

Magnus Client
In progress
The full lifecycle of a client relationship.

From starting point to launch, through the build, and into long-term maintenance — Client tracks the entire journey in one place.

More tools are coming. The ecosystem grows as we find new ways to connect our data and put AI to work across the business.

Magnus & Brasfield & Gorrie

Magnus is a Brasfield & Gorrie intelligence platform. It carries BG's core values — precision, trust, and professionalism — but has its own identity, its own visual language, and its own audience.

The two brands share a commitment to quality and restraint. Magnus extends that into software — AI-native, data-dense, and built for the people doing the work.

Browse components
Magnus Design System — v0.1

© 2026 Magnus — a Brasfield & Gorrie intelligence platform