Brand System
Your go-to resource for everything you need to bring the IronArch Technology brand to life with clarity, confidence, and consistency.
Concept
Our personality
Three archetypes shape how IronArch shows up in the world. Together they describe our character — altruistic and accountable, self-sacrificing in service of others, and always the first to forge a new path.
Brand values
Our brand values are the north to our visual brand and help define how IronArch operates and fulfills its mission.
Elements
Logo
The primary lockup in its two core forms — full-color for light surfaces and the reversed (KO) version for dark surfaces.
Full-color · light surfaces
Reversed (KO) · dark surfaces
The Arch
The arch mark in its two core forms — full-color for light surfaces and the reversed (KO) version for dark surfaces.
Full-color · light surfaces
Reversed (KO) · dark surfaces
Icons
We use Material Symbols (the newer generation of Google's icon library). This open-source library provides access to hundreds of icons at no charge.
Our default settings: style sharp · weight 400 · grade 0 · optical size 24
Default
Straight from the website in the Sharp style, no customization. This is the everyday workhorse — anyone can download exactly what they need.
Duotone
A two-tone treatment available through the Figma plugin (not the website). A nice in-between — more depth than the default while staying on-system. Contact the Experience Team if you'd like custom duotone icons.
Multi-color
not yet readyCustom-designed, more dynamic icons living in a shared folder. Built on Material as inspiration — and extended beyond its default style, or drawn from scratch, when a moment calls for more complexity.
Circles
The circle is IronArch's signature graphic device. Use it to frame imagery, carry accents, and add depth — always filled or outlined in brand colors, never a stray hue.
Color
Primary palette
Blue is the dominant brand color. Navy is the ink for text and dark surfaces. Tints (60 / 30) carry surfaces and quiet backgrounds.
Secondary palette
Yellow, verdigris, and pink are supporting accents — each tied to a content category, not used interchangeably. Pair blue with one accent at a time, chosen by what the content is about.
Color usage
Four principles keep the palette calm and consistent across everything the brand touches.
Accessible pairings
Every pairing below meets WCAG AA Large (3:1) at minimum. Use these as-is; don't introduce a new text-on-background combination without a contrast check.
Accents are too light for text on white or light surfaces (all fail contrast there). They pass — and pass well — as backgrounds with navy text, or as large text and icons on navy. Even so, usage rules keep them to large / decorative use, never small body text.
Semantic tokens
Design and build with roles, not raw hex — it keeps usage consistent as the palette evolves. Click any row to copy its value.
Accent tokens (accent-blue / -yellow / -pink / -green, each with -light and -lightest steps) draw from the same primitives and are used for decorative fills, icons, and illustration — not small body text.
Typography
Typefaces
Merriweather carries display headlines; Inter runs everything else. Two roles, kept strictly separate.
Display headlines and presentation title slides. Never below ~24px.
All product, UI, and body copy — legible from captions to large text.
Type scale
Sizes are defined in ratios of body, not fixed pixels — so the hierarchy stays consistent whatever the medium.
In practice
In use
Category color, type ratios, tokens, and the circle motif working together.
A Verdigris badge signals a people-related item at a glance — color reinforces meaning, never carries it alone.
Pink cues experimental work on dark surfaces; yellow stays reserved for large text only.
Usage rules
Each rule, shown both ways. The left column is the intended use; the right is what to avoid.