Brand Kit — Placeholder

Built square.
Finished clean.

Ironline is a general-contracting identity built on jobsite signage: safety orange, hazard yellow, and a lot of unglamorous grey. Every corner is square, every rule is load-bearing, and nothing on this page has a blur shadow.

Start with colour See the blocks

The palette

Load-bearing rule: safety orange marks the one action that matters. Hazard yellow marks a caution or a status. Neither is decoration.

01 — Colour

Grey does the work, orange does the pointing

Roughly 85% of any Ironline surface should be concrete, fog, or white. The brights are signage.

Concrete

#E8E6E1

Page ground. Warm-grey so the whole system reads as site, not software.

Text: Iron

White

#FFFFFF

Card and table interiors. The only true white in the system.

Text: Iron

Fog

#D6D3CC

Photo slots, inset panels, disabled fills, zebra table rows.

Text: Iron

Iron

#16191C

All body text, every heavy border, and the inverted CTA band.

On iron: Concrete

Steel

#3A3F44

Secondary structure — rules on dark, icon fills, chart bars.

On steel: White

Slate

#6B7178

Secondary copy and all-caps labels. Never a border colour.

On concrete: 4.3:1

Safety

#FF6B1A

Primary action, active nav underline, section rules, stat markers.

Text on safety: Iron — 6.2:1

Safety Dark

#E55A0E

Hover and pressed state for safety. Never used as a fill on its own.

Text: Iron

Hazard

#FFC300

Status badges, the stripe, and caution states. Pairs with iron at 11:1.

Text on hazard: Iron — 11:1

Do

Keep brights under 15% of surface area. They stop working when everything is orange.
Use hazard for state (scheduled, delayed, permitted) and safety for action.
Let the grey scale carry hierarchy before reaching for colour.

Don't

Set white on safety orange — it lands at 2.9:1 and fails AA. Orange always carries iron.
Use orange and hazard adjacent as equals; one leads, the other supports.
Add a blue. There is no blue in this system, and it will read as a different company.

02 — Typography

Condensed for volume, regular for detail

One superfamily. Barlow Condensed shouts, Barlow explains — so they never fight.

Display / SignageBarlow Condensed 600 / 700

Concrete, framing,
and finish carpentry

All headings, the wordmark, buttons, stat numerals, table row keys. Always uppercase. Tighten to -0.005em at display sizes — condensed faces gap up when large.

Body / DetailBarlow 400 / 500 / 600

Crews are scheduled in two-week blocks, and we hold a standing Friday walkthrough on every active job. If a change order moves the critical path, you hear about it that day — not at the next invoice.

Paragraphs, form fields, table data, captions. Never uppercase at body size.

Label / CapsBarlow 600 · .12em

Scope · Schedule · Permit Status 03 — Sitework

Labels are Barlow 600 / 11px / .12em in slate. Kickers are Barlow Condensed 600 / 13px / .14em in safety. Tracking is mandatory — untracked caps at 11px are unreadable.

Type scale

Role	Face	Size
Display	`Cond 700`	`58 / 1.02`
H1	`Cond 700`	`42 / 1.04`
H2	`Cond 700`	`32 / 1.06`
H3	`Cond 600`	`21 / 1.15`
Body	`Barlow 400`	`16 / 1.55`
Small	`Barlow 400`	`14 / 1.5`
Button	`Cond 700`	`16 / 1`
Kicker	`Cond 600`	`13 / 1`
Label	`Barlow 600`	`11 / 1`

Rules of thumb

Headlines run two lines maximum, broken by hand with <br>.
Never set condensed below 13px — it collapses.
Numbers in tables use tabular figures so columns align.
Sentence case does not exist in headings here. Caps or body, nothing between.

03 — Shape & Depth

Square corners, weighted rules, zero blur

The whole depth system is border weight. If you find yourself reaching for a box-shadow, use a heavier rule instead.

Border weights

1px hairline

2px standard

4px section

1px separates rows inside a container. 2px is the container itself. 4px in safety orange opens a section or flags a card. There is no fourth weight.

Corners & the stripe

0px — everything

0px — no exceptions

The hazard stripe is the one ornament: repeating-linear-gradient(45deg, hazard 0 12px, iron 12px 24px). Use it at the top of the page, above a footer, or as a divider before a CTA — never more than twice per screen.

04 — Components

The parts you'll reach for

Buttons

One orange button per view. Solid iron is the neutral alternative; outline is tertiary. No rounded corners, no shadow, no transform on press — only a colour shift.

Badges & status

Permitted In progress Scheduled Delayed

Hazard = approved or caution. Iron = neutral state. Outline = not yet started. Safety orange on a badge means something needs a decision.

Stats

24

Years

6

Crews

410

Projects

Condensed 700 numerals with a 4px safety rule on the left. Label sits under, tracked.

Form fields

Project address

Scope

Notes

Focus swaps the border to safety orange. No glow ring.

05 — Blocks

Layout blocks

Project cardPermitted

Commercial

Third Ward mixed-use shell

42,000 sq ft core and shell with structural steel, curtain wall, and a two-level parking podium. Delivered four weeks ahead of the contract date.

Duration	14 months
Value	$8.4M
Delivery	Design-build

01

Sitework

Excavation, utilities, grading, and site concrete.

02

Structure

Steel erection, framing, decking, and envelope.

03

Finish

Interior build-out, millwork, and closeout.

Estimate — line itemsRev. 03

Item	Scope	Qty	Amount
01-100	Mobilization & temp facilities	1 LS	$42,000
03-300	Cast-in-place concrete	380 CY	$318,400
05-120	Structural steel	62 TN	$496,000
07-400	Roofing & envelope	18,200 SF	$214,600

Ready to price the job?

Send drawings and we'll return a line-item estimate in five business days.

Request a bid

Built square.Finished clean.

Grey does the work, orange does the pointing

Do

Don't

Condensed for volume, regular for detail

Type scale

Rules of thumb

Square corners, weighted rules, zero blur

Border weights

Corners & the stripe

The parts you'll reach for

Buttons

Badges & status

Stats

Form fields

Layout blocks

Third Ward mixed-use shell

Sitework

Structure

Finish

Ready to price the job?

Built square.
Finished clean.