Design System
Square format
1080 × 1080 brand directions for avatars, signatures, and social crops.
On this page
Five canonical square layouts at 1080 × 1080. The first two are mark-only (avatar, profile picture); the next two are full stacked compositions (signature, identity sheet); the last is the OG headline re-cropped to square. All five use the same construction system - navy-900 ground or fog-100 ground, mark in the opposite tone, optional grid + electric-blue glow.
When to use each
| Direction | Surface | Notes |
|---|---|---|
01a · mark · dark |
Profile pictures, avatars on dark or branded surfaces | Default. Reads at 24×24 in a follower list. |
01b · mark · light |
Profile pictures on light surfaces, print marks, embossing references | Inverts only the ground; mark geometry is unchanged. |
02 · stacked · dark |
LinkedIn / X / Mastodon signature image, slide endcaps | Mark + FRONTIER + DEFENSE TECH + eyebrow. |
03 · stacked · light |
Press packets, partner-deck identity slides on light surfaces | Same composition as 02, light ground. |
04 · typographic |
Square OG re-crop (Slack unfurls, Telegram previews), 1:1 social cards | Mirrors the wide OG headline in a square frame. |
Construction notes
- Grid + glow are scoped to dark variants. Light variants use a flat
fog-100ground - the glow doesn’t read at low contrast and the grid would muddy the page. - Mark scale on
01a/bis 2.6×. Mark scale on02/03is 1.6× because the wordmark + eyebrow take the lower two-thirds. Mark scale on04is 0.32× and corner-anchored - the headline is the focus. - Eyebrow color shifts with ground.
electric-500(#1D6EF5) on dark,electric-700(#1456C7) on light, both at the same letter-tracking and weight. - Never resize past 1080. Below 1080, fall back to the standalone primary mark - the wordmark and eyebrow lose legibility. Above 1080, re-render from the source SVG, not a raster scale.