Dark
/Northstar/Forest
rgba(32, 61, 50, 1)
Dark: rgba(184, 217, 189, 1)
--sp-northstar-forest-t3fynbBrand essentials / 2026S
Northstar Studio
Your visual language.
Ready for its next chapter.
Studio North4 colors · 2 text styles
01
Color, with purpose.
Saved color styles, with light and dark values together.
/Northstar/Lime
rgba(221, 241, 143, 1)
One color across themes
--sp-northstar-lime-cyymujDark
/Northstar/Paper
rgba(244, 242, 232, 1)
Dark: rgba(24, 40, 32, 1)
--sp-northstar-paper-15bif21Dark
/Northstar/Iris
rgba(101, 124, 179, 1)
Dark: rgba(168, 183, 224, 1)
--sp-northstar-iris-1bbniyf02
A type system that scales.
Font families, sizes and spacing at every saved width. Specimens use the guide’s system font; the table is the source for your brand’s exact type settings.
/Northstar/Display
H1Inter 700 · normal
The details make the difference.
| From width | Size | Line height | Tracking | Paragraph |
|---|---|---|---|---|
| Base · 0px | 36px | 1.1em | -0.04em | 0px |
| 810px | 48px | 1.1em | -0.04em | 0px |
| 1200px | 64px | 1.1em | -0.04em | 0px |
.sp-northstar-display-ygalqq
/Northstar/Body
PInter 400 · normal
The details make the difference.
| From width | Size | Line height | Tracking | Paragraph |
|---|---|---|---|---|
| Base · 0px | 16px | 1.6em | -0.02em | 20px |
.sp-northstar-body-1xn97x1
03
Make it yours.
Everything needed to carry the saved styles into the next build.
Built with care. Ready for your next chapter.
Your handoff files
styles.cssColor variables + responsive type classes
styles.jsonStructured values + breakpoint specifications
README.txtQuick start for the next designer or developer
Use the class names shown under each type style. Set data-theme="dark" on the document to switch the exported dark values. Add your licensed font files separately. Browser Print → Save as PDF creates a portable copy of this guide.