# atstratus identity — asset usage
## Master selection by rendered symbol height
Selection follows the logo's ACTUAL rendered symbol height — never the viewport width.
- 24px and above: standard 4e master (symbol.svg / lockup-primary.svg)
- 20-23px: 5a micro master (symbol-micro-20.svg / lockup-small-20.svg)
- 16-19px: 5c micro master (symbol-micro-16.svg / lockup-small-16.svg)
- below 16px: do not use the mark
## Lockups
- lockup-primary.svg — default compact lockup, standard master, outlined kerned wordmark with stratum cut. Use at 24px symbol height and up.
- lockup-header-86x32.svg — the 86x32 website header slot. Correct at ALL viewport sizes while the logo stays 86x32; do not swap assets on viewport breakpoints.
- lockup-small-20.svg / lockup-small-16.svg — only when the interface intentionally renders the logo at that smaller physical size. Never scale these to other sizes.
- lockup-reversed.svg — orange symbol + off-white wordmark, for deep stone (#1C1917) or imagery darker than 40% grey.
- lockup-mono.svg — single-color deep stone, for print, engraving, one-color contexts.
## Website header implementation
Default — one asset, all viewports (86x32 stays 86x32):
Optional — only if mobile genuinely renders a physically smaller logo (e.g. 16px tall):
.brand-sm { display: none }
@media (max-width: 640px) { /* legitimate ONLY because the design spec
renders the logo at 16px on mobile — the media query implements the
size change; the 5c master follows from the 16px height */
.brand-lg { display: none }
.brand-sm { display: block }
}
Always set explicit width and height attributes to prevent layout shift.
## Backgrounds
- Default: off-white #FAFAF9 or white.
- Dark: deep stone #1C1917 with lockup-reversed. Symbol-only stays orange on dark; use symbol-offwhite.svg where orange lacks contrast.
- Never place the orange symbol on orange or on mid-tone imagery.
## Clear space and minimums
- Clear space: 0.25 x symbol height on all sides.
- Inside the predefined lockups only, internal spacing is pre-set at the tighter 0.16x.
- Minimum lockup height 20px (use lockup-small-20). Below 20px symbol only. Absolute floor 16px.
## Favicons
favicon.ico contains native 16 (5c micro), 32, and 48 px (standard master) frames.
apple-touch-icon.png is an opaque full-bleed 180x180 square (off-white standard symbol on orange); iOS applies the corner mask.
## PWA (OPTIONAL — only if the site ships as an installable app)
- icon-192.png / icon-512.png — purpose "any": opaque full-bleed squares, OS shapes corners.
- icon-maskable-512.png — purpose "maskable": complete symbol inside the central safe area on opaque orange.
The manifest declares regular and maskable icons separately; never reuse one padded file for both.
If the site is not installable, omit the manifest and all three PWA icons.
## Wordmark
Space Grotesk Medium 500, converted to true vector outlines in every lockup SVG (no font dependency of any kind). Optical kerning and the stratum cut are baked into the paths. Do not redraw or re-typeset the wordmark; edit only from the master files.
.brand-sm { display: none }
@media (max-width: 640px) { /* legitimate ONLY because the design spec
renders the logo at 16px on mobile — the media query implements the
size change; the 5c master follows from the 16px height */
.brand-lg { display: none }
.brand-sm { display: block }
}
Always set explicit width and height attributes to prevent layout shift.
## Backgrounds
- Default: off-white #FAFAF9 or white.
- Dark: deep stone #1C1917 with lockup-reversed. Symbol-only stays orange on dark; use symbol-offwhite.svg where orange lacks contrast.
- Never place the orange symbol on orange or on mid-tone imagery.
## Clear space and minimums
- Clear space: 0.25 x symbol height on all sides.
- Inside the predefined lockups only, internal spacing is pre-set at the tighter 0.16x.
- Minimum lockup height 20px (use lockup-small-20). Below 20px symbol only. Absolute floor 16px.
## Favicons
favicon.ico contains native 16 (5c micro), 32, and 48 px (standard master) frames.
apple-touch-icon.png is an opaque full-bleed 180x180 square (off-white standard symbol on orange); iOS applies the corner mask.
## PWA (OPTIONAL — only if the site ships as an installable app)
- icon-192.png / icon-512.png — purpose "any": opaque full-bleed squares, OS shapes corners.
- icon-maskable-512.png — purpose "maskable": complete symbol inside the central safe area on opaque orange.
The manifest declares regular and maskable icons separately; never reuse one padded file for both.
If the site is not installable, omit the manifest and all three PWA icons.
## Wordmark
Space Grotesk Medium 500, converted to true vector outlines in every lockup SVG (no font dependency of any kind). Optical kerning and the stratum cut are baked into the paths. Do not redraw or re-typeset the wordmark; edit only from the master files.