Brand System

March 2026

Logo System

The Margin identity comprises three elements: a full lockup, a standalone icon mark, and a wordmark. Each exists in three contextual variants.

Full Logo

Light Mode

Dark Mode

Highlight

Icon Mark

Light Mode

Dark Mode

Highlight

Wordmark

Light Mode

Dark Mode

Highlight

Icon Construction

Two parallel 45° bars with rounded terminals and two circular dots. Bar width equals the dot diameter (2r). The left bar carries a gradient from 100% to 30% opacity.

Icon Animation

The icon mark animates for load-in, load-out, and looping states. Click each to replay.

Load In

Load Out

Logo Animation

The full logo builds in sequence: icon mark animates first, then the wordmark letters reveal left to right. Click to replay.

Full Logo — Load In

Color Palette

Four calibrated scales. Ink for neutrals, Violet as the primary accent, Amber and Scarlet for utility states. The 500 step anchors each scale.

Ink Primary Neutral

Violet Primary Accent

Amber Utility / Warning

Scarlet Utility / Danger

Semantic Tokens

Semantic tokens map to scale values per mode. All text tokens are WCAG AA contrast-tested against their surface.

Surfaces

Token	Light	Dark	Role
surface-page	ink-50	ink-900	Page background
surface-raised	ink-100	ink-800	Cards, panels
surface-overlay	ink-50	ink-700	Modals, popovers

Text

Token	Light	Dark	Contrast	Role
color-heading	ink-900	ink-50	15.5 / 15.2	Headlines, titles
color-body	ink-800	ink-200	11.6 / 10.3	Body text, descriptions
color-muted	ink-500	ink-400	4.8 / 4.7	Nav links, captions, secondary
color-faint	ink-300	ink-600	2.3 / 2.0	Decorative only, not for text

Accent

Token	Light	Dark	Role
color-accent	violet-600	violet-400	Links, labels, interactive
color-accent-hover	violet-700	violet-300	Hover / pressed state
color-accent-subtle	violet-50	violet-900	Tinted backgrounds

Borders

Token	Light	Dark	Role
border	ink-200	ink-700	Default dividers
border-strong	ink-300	ink-600	Emphasized dividers

Highlight Mode

For content on a violet-500 surface. Dark ink content, identical in both light and dark themes.

Token	Value	Contrast	Role
hl-surface	violet-500	--	Background
hl-heading	ink-50	4.2 : 1	Headlines on violet
hl-body	ink-800	5.6 : 1	Body text on violet
hl-muted	ink-500	2.7 : 1	Labels on violet (large text only)
hl-border	violet-300	--	Borders on violet

Typography

Three typefaces, each with a distinct role. Every text element on the page maps to a named style with prescribed family, size, weight, line-height, and tracking.

Typefaces

Newsreader

Display — Serif

Know your margins.

Headlines, titles, blockquotes. Editorial weight and brand personality.

Plus Jakarta Sans

Body — Sans-serif

Ag300

Ag400

Ag500

Ag600

Ag700

Body copy, UI text, buttons. Clarity and readability at every size.

JetBrains Mono

Data — Monospace

$48,600 Revenue

$31,400 Cost

34.2% Margin

Financial figures, labels, navigation, code. Precision and technical authority.

Styles

Each style defines family, size, weight, line-height, tracking, and color. Applied via .t-* classes.

Hero

.t-hero -- Newsreader / clamp(3rem, 8vw, 6rem) / 400 / 0.9 / -0.03em

Landing page hero headlines. One per page.

Display

.t-display -- Newsreader / clamp(2.5rem, 6vw, 4rem) / 400 / 0.95 / -0.03em

Page-level titles and large feature text.

Heading 1

.t-h1 -- Newsreader / clamp(2rem, 3.5vw, 2.5rem) / 500 / 1.0 / -0.02em

Section titles, primary content headings.

Heading 2

.t-h2 -- Plus Jakarta Sans / 1.5rem / 600 / 1.1 / 0.04em

Subsection titles, card headings.

Heading 3

.t-h3 -- Plus Jakarta Sans / 1.125rem / 600 / 1.2 / 0

Group headings, card titles, tertiary headings.

Body text for paragraphs and descriptions. Margin gives finance teams real-time visibility into pricing, costs, and profitability.

.t-body -- Plus Jakarta Sans / 1rem / 400 / 1.6 / 0

Primary readable text. Max width: 65ch.

Small text for secondary content, sidebar copy, and compact layouts.

.t-small -- Plus Jakarta Sans / 0.875rem / 400 / 1.5 / 0

Secondary body text, table cells, compact UI.

Caption text for hints, timestamps, and supplementary info.

.t-caption -- Plus Jakarta Sans / 0.75rem / 400 / 1.4 / 0.03em

Captions, input hints, image credits.

SECTION LABEL

.t-label -- JetBrains Mono / 0.75rem / 500 / 1.4 / 0.08em / uppercase

Section numbers, category labels, overline text.

META -- NAV LINKS, TABLE HEADERS, TIMESTAMPS

.t-meta -- JetBrains Mono / 0.6875rem / 400 / 1.4 / 0.06em

Navigation, table headers, auxiliary metadata.

MICRO -- SWATCH LABELS, TINY CHROME

.t-micro -- JetBrains Mono / 0.625rem / 400 / 1.3 / 0.04em

Color swatch labels, step indicators, minimal UI chrome.

$48,600

.t-data -- JetBrains Mono / 1.5rem / 400 / 1.1

Financial figures, statistics, KPI values.

Where profit lives.

.t-blockquote -- Newsreader / h1 size / 400 / 1.0 / -0.02em

Pull quotes, editorial callouts.

Where profit lives.

.t-tagline -- Newsreader / h1 size / 400 / 1.0

Brand tagline. Always follows "Margin."

Token Scale

Raw size, line-height, and tracking values. Each style class above composes these tokens with family and weight.

Token	Size	Line Height	Tracking
hero	clamp(3rem, 8vw, 6rem)	0.9	-0.03em
display	clamp(2.5rem, 6vw, 4rem)	0.95	-0.03em
h1	clamp(2rem, 3.5vw, 2.5rem)	1.0	-0.02em
h2	1.5rem	1.1	0.04em
h3	1.125rem	1.2	0
body	1rem	1.6	0
small	0.875rem	1.5	0
caption	0.75rem	1.4	0.03em
label	0.75rem	1.4	0.08em
meta	0.6875rem	1.4	0.06em
micro	0.625rem	1.3	0.04em

UI Components

Reusable interface elements built from the type and color token system. Every component inherits its appearance from semantic tokens, adapting automatically across light, dark, and highlight modes.

Buttons

Pill-shaped with three variants (primary, secondary, ghost) and three sizes. Primary uses the accent color; secondary is outlined; ghost is minimal.

Form Inputs

Text inputs with labels and hints. Focus state uses the accent color. Placeholder text uses the faint token.

Company Name

The legal entity name on your invoices.

Target Margin

Badges

Compact labels for status, categories, and metadata. Mono typeface at meta size with uppercase tracking.

Active v2.4 Draft Archived

Code

Inline code for references within body text, and code blocks for multi-line snippets. Both use JetBrains Mono with accent-subtle tinting.

Use the --color-accent token for interactive elements. The surface token --surface-raised applies to cards and panels.

:root {
    --color-heading: var(--ink-900);
    --color-body: var(--ink-800);
    --color-muted: var(--ink-500);
    --color-accent: var(--violet-600);
}

Tooltips

Contextual hints that invert the surface color. Dark tooltip on light mode, light tooltip on dark mode.

Cards & Surfaces

Layered surfaces using three elevation levels. Each card variant inherits its appearance from semantic surface tokens, transitioning automatically across themes.

Default

Content Panel

The baseline surface. Sits on the page with a subtle border. Use for content groups, sidebars, and static information.

.card

Elevated

Featured Metric

Shadow-based depth lifts content off the page. Hover to see the shadow deepen. For pricing cards, key stats, and featured content.

.card .card-elevated

Interactive

Selectable Option

Hover reveals a violet accent border and gentle lift. For clickable items — nav cards, selectable options, dashboard widgets.

.card .card-interactive

Glass

Floating Toolbar

Translucent surface with backdrop blur. The gradient behind shows through, proving the frosted effect. For nav bars, toolbars, and floating panels.

.card .card-glass

Highlight

Brand Moment

Violet surface using highlight tokens. For brand-forward moments — logo showcases, CTAs, and accent panels. Stays vibrant across themes.

.card .card-highlight

Overlay

Modal Dialog

Highest elevation surface with strong shadow. Visually separates from everything beneath. For modals, popovers, and dropdown menus.

.card .card-overlay

Surface Hierarchy

Cards nest on progressively elevated surfaces. Each level uses its own semantic token.

surface-page

surface-raised

surface-overlay