Guidelines on how to implement the Alpha Station visual brand system for cross media applications.
The identity leads with the wordmark. The circled A stands alone as a mark wherever the full lockup will not fit, and both come in full color and monochrome for light and dark surfaces. There is no stacked lockup.
Core logo.
The mono variants are for monotone output: black-and-white print, a single-colour stencil, engraving or embossing, or anywhere the full-colour logo cannot be reproduced.
Clear space.
Give it room
Keep clear space around the wordmark equal to the height of its capitals. Set it on a solid surface. Where the background is busy, change the surface rather than adding an outline, a shadow or a container.
Paper and ink carry the layout; the orange is the interruption. It lands on the things meant to move you, and on nothing else. The deep char black is the counterweight, used for full-bleed panels rather than as a second accent.
Visual balance.
Each part of the circle represents how much of this colour should roughly be used in the system. Creativity is encouraged for special use-cases (promo, posters, etc.) but clean branded work should respect it.
- Signal Orange13%
- Ember9%
- Bone Paper30%
- Ink Black21%
- Char Black15%
- Warm Sand13%
Used as a central fade at any size, to fill dark voids creatively without occupying a true page element.
Inter Tight throughout, weighted at 600 almost everywhere. The system gets its range from size and tracking rather than from switching families, and it opens loud: the display step runs to 160px with the letterspacing pulled tight.
Hero typeface — display/headline.
Body typeface.
Every step in the system.
Headings
- H1Display heading set in the hero face.160px
- Font
- Inter Tight SemiBold 600
- Desktop
- 160 / 152 px
- Tracking
- -4.0%
- Case
- Normal case
- H2Section title built from the same hierarchy.60px
- Font
- Inter Tight SemiBold 600
- Desktop
- 60 / 63 px
- Tracking
- -3.0%
- Case
- Normal case
- H3Body face at the largest editorial step. Use it for opening passages and emphatic statements.44px
- Font
- Inter Tight SemiBold 600
- Desktop
- 44 / 48 px
- Tracking
- -3.0%
- Case
- Normal case
- H4Body face at the mid-editorial step. Used for sub-headings and lede paragraphs.26px
- Font
- Inter Tight SemiBold 600
- Desktop
- 26 / 31 px
- Tracking
- -2.0%
- Case
- Normal case
- H5Caption-style heading20px
- Font
- Inter Tight SemiBold 600
- Desktop
- 20 / 26 px
- Tracking
- -2.0%
- Case
- Normal case
- H6Smallest heading18px
- Font
- Inter Tight SemiBold 600
- Desktop
- 18 / 25 px
- Tracking
- -2.5%
- Case
- Normal case
Body
- Body BaseBody face at the running text scale. Comfortable for paragraphs of up to 70 characters per line.16px
- Font
- Inter Tight Regular 400
- Desktop
- 16 / 26 px
- Tracking
- 0.0%
- Case
- Normal case
- Body SmallBody face at the small annotation scale. Captions, footnotes, table cells.15px
- Font
- Inter Tight Regular 400
- Desktop
- 15 / 24 px
- Tracking
- 0.0%
- Case
- Normal case
Labels / Accent
- CaptionBrand guide / Version 1.013px
- Font
- Inter Tight Regular 400
- Desktop
- 13 / 20 px
- Tracking
- 0.0%
- Case
- Normal case
- ButtonTake action16px
- Font
- Inter Tight SemiBold 600
- Desktop
- 16 / 16 px
- Tracking
- 0.0%
- Case
- Normal case
- Usage
- Typography pointers for button text.
- LabelSection label14px
- Font
- Inter Tight SemiBold 600
- Desktop
- 14 / 20 px
- Tracking
- 7.7%
- Case
- All caps
Every button on every colour of the palette. Each background gets its own set, so contrast holds wherever a button lands. Hover and press to try them live.
Two sets. Marketing icons carry the brand's message; functional icons do the everyday work. Both come in three colours, each matched to its surface.
For interfaces and labels, use the brand’s functional icons.
- Stroke1.5 px
- Grid24 × 24
- Caps & joinsRound
- 162440SizesS · M · L px
Need help implementing this brand?
