IronArch TechnologyBrand System
IronArch Technology

Brand System

Your go-to resource for everything you need to bring the IronArch Technology brand to life with clarity, confidence, and consistency.

Concept
Elements
Color
Typography
In practice

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.

The Entrepreneurial Citizen
The Entrepreneurial Citizen
Altruistic and a steward of respect, fairness, and accountability. A good listener and hard worker with a talent for innovation — a high tolerance for ambiguity and complexity, and the confidence to be led by a vision.
The Hero
The Hero
Admired by those who appreciate self-sacrifice. The Hero acts to redeem society by overcoming great odds through faith, strength, and stamina. The essence lies in the sacrifice required to achieve the goal of transformation.
The Pioneer
The Pioneer
Likes to be first — first to discover a new technology, concept, or art form. Takes initiative to innovate, creating the path rather than looking for it. Full of enthusiasm and a potent zest for life, exuding energy and creative potential.

Brand values

Our brand values are the north to our visual brand and help define how IronArch operates and fulfills its mission.

Radical Quality
Good is not enough — customer satisfaction is our priority, and we are not afraid to say no to clients. We believe in creating strong relationships rooted in trust and mutual growth, working hard so our reputation inspires our audiences to reach out to us for more support.
People First
We take care of our people and lead through compassion, understanding, and empathy. We step up for each other and put others before ourselves — selfless collaborators and team players. No one is above anyone else: we are a diverse team of equals who lead by serving our Veterans and our community.
Positive Impact
We help people fulfill promises and believe in creating something new that makes a positive difference in the lives of others. Mission-focused on doing the right thing, we don't settle — we find new paths to unique, innovative solutions. We lean forward and stay ahead of the curve.

Elements

The Arch

The arch standing on its own — our brand mark apart from the wordmark. Guidance for when to use it alone, at what sizes, and in which color treatments is still being written.

IronArch arch mark Arch mark — light surfaces
add_photo_alternate Arch mark — dark surfaces placeholder
Partial section — dark-surface arch mark, clear-space rules, and minimum sizes still to be added.

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

TIER 1

Default

Straight from the website in the Sharp style, no customization. This is the everyday workhorse — anyone can download exactly what they need.

home
search
settings
folder
bolt
shield
analytics
cloud
TIER 2

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.

Backup
Bookmark
Browse gallery
Check circle
Lock
Print
Settings voice
Support
TIER 3

Multi-color

not yet ready

Custom-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.

palette
auto_awesome
brush
layers

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.

Photo mask, off-edge
Crop a photo into a circle and let it bleed off the edge.
Thick stroke
Use a thick ring as a photo mask, or fill it as a solid accent — let it bleed off the edge.
Smaller text could go here if needed.
Overlap cluster
Chain photo, tint, and solid circles in a row — each can carry its own text.
“Could be a quote that goes here.”
Three-part cluster
Tonal circles in a single hue make a quiet backdrop for text or stats.
1983Something happened
1999Something happened
2026Something happened
Timeline circles
Photo rings with a white center mark points on a timeline, joined by a connecting line.
“A short quote lives here.”
Quote container
A solid circle holds a quote, stat, or portrait against a color field.
1Section titleDescription if needed
Split circle
Half photo, half solid color — a bold way to open a numbered section.
Photo & accent
A large photo anchored by a small inset photo and a soft accent circle.
Text here
Dot marker
A solid dot sits behind a heading; a faint open ring anchors the corner.
Keep circles on the palette — blue, navy, yellow, verdigris, pink. Overlap them for depth and let them bleed off the edge, but never outline them in off-brand colors.

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.

{{ g.label }} {{ g.desc }}
{{ c.name }}
{{ c.note }}
{{ c.hex }}{{ c.icon }}

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.
{{ a.cat }}
{{ a.pair }}
{{ a.use }}
{{ s.n }}
{{ s.hex }}{{ s.icon }}

Color usage

Four principles keep the palette calm and consistent across everything the brand touches.

01 Blue leads
Blue is the dominant color across communications and branded materials. Accents support — they never take over.
02 One accent at a time
Limit accent usage to one or two colors per composition. Avoid overcrowding layouts with competing brights.
● People ◆ Ideas
03 Color is never the only signal
Support communication with color, don't replace it. Pair it with labels, icons, or patterns so meaning survives without it.
04 Decorative gets more freedom
Backgrounds, textures, icons, and charts may use the broader palette more freely — as long as clarity and balance hold.

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.

{{ bg.token }} {{ bg.name }}
Aa {{ pr.token }}{{ pr.hex }}{{ pr.icon }}
{{ pr.ratio }} {{ pr.level }}
Accent colors Safe pairings for secondary hues

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.

{{ bg.token }} {{ bg.name }}
Aa {{ pr.token }}{{ pr.hex }}{{ pr.icon }}
{{ pr.ratio }} {{ pr.level }}

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.

{{ g.label }} {{ g.note }}
{{ tk.name }} {{ tk.role }} {{ tk.hex }}{{ tk.icon }}

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.

Aa
Merriweather Serif · Display

Display headlines and presentation title slides. Never below ~24px.

Light 300 Regular 400 Bold 700 Black 900
Precision engineering, at every scale.
open_in_newGet on Google Fonts
Aa
Inter Sans · Everything else

All product, UI, and body copy — legible from captions to large text.

Regular 400 Medium 500 Semibold 600 Bold 700
Clear, quiet, and dependable at every size.
open_in_newGet on Google Fonts

Type scale

Sizes are defined in ratios of body, not fixed pixels — so the hierarchy stays consistent whatever the medium.

{{ t.sample }}
{{ t.ratio }}
{{ t.name }} · {{ t.note }}
Proportional, not fixed. Body = 100%; every step is a ratio of it. Anchor body to the medium and the whole scale follows — so slides, docs, and web stay visually consistent without hard-coding pixels.
Website — body 16px Slides — body 18–20pt Docs — body 11pt

In practice

In use

Category color, type ratios, tokens, and the circle motif working together.

Company · Now hiring
We're building the team behind the work.
Open roles across engineering, design, and delivery.
See open roles
background-strong · text-accent (large only) · Blue 60 body
Project Atlas People

A Verdigris badge signals a people-related item at a glance — color reinforces meaning, never carries it alone.

Primary Secondary
Ideas & Innovation
Inside the IronWorks lab

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.

✓ Do
✕ Don't
Precision at scale
Merriweather for display headlines and title slides.
Merriweather set small — the fine serifs smear together and legibility drops off fast in running body text.
Never set Merriweather below ~24px.
Inter runs all product, UI, and body copy — clean and legible from captions up to large text.
Inter for all product, UI, and body copy.
This yellow body text sits far below contrast minimums on a light surface and is nearly impossible to read.
No accent tints (yellow / pink / green) as small body text.
A bright idea
text-accent (yellow) for large text on dark surfaces only.
A faint idea
Yellow on white fails — reserve it for dark backgrounds.
Overview Getting started
Heading 4 / 5 carry the blue accent to signal hierarchy.
Overview Getting started
Without the accent, the levels flatten into one.
Stay within the 100 / 60 / 30 tint system.
Don't invent new tints or introduce off-brand colors.
Before you ship: check any new color pairing against AA Large (3:1) minimum — use the approved combinations in section A5 as your baseline.