styrar.
Brand Guidelines · v 1.0
Build with it.
Don't break it.
The principles, marks, palette, type, and tone that make Styrar feel like Styrar — across product, marketing, and every surface we build.
Color system
Three colors do almost all the work.
Typography
Funnel Sans is the voice of every surface.
Funnel
Display168px / 700Clarity.Title72px / 600Plan, publish, measure.Subtitle44px / 500Your workspace, inside AI.Body30px / 400Links, calendar, composer and analytics.Small24px / 400Sample data from dev fixtures.FamilyFunnel Sans
Fallbacksystem-ui, sans-serif
Tracking−4.5% wordmark · −2.5% titles · 0 body
CaseSentence case · never ALL CAPS
Sourcefonts.google.com/specimen/Funnel+Sans
Logo & mark
Lowercase wordmark, terminated by an Iris-violet period.
styrar.
Dark surface
styrar.
Light surface
styrar.
Iris surface
Six things never to do to the mark
DON'TStretch or distort the wordmark
DON'TRotate, tilt, or skew
DON'TRecolor outside the palette
DON'TOutline or hollow out
DON'TPlace on low-contrast grounds
DON'TCapitalize the wordmark
Social templates
Five formats, one consistent visual language.
Every template uses the same mark, wordmark, color system, and Funnel Sans. One Iris per post. Copy in sentence case.
Square · 1:1
1080 × 1080
Instagram · Facebook · LinkedIn
styrar.
Clarity,
not clutter.
not clutter.
styrar.comVOL. 01
Square · 1:1 (Quote)
1080 × 1080
Instagram · Twitter
Stories · 9:16
1080 × 1920
Instagram · TikTok · YouTube Shorts
Landscape · 16:9
1920 × 1080
X · LinkedIn · YouTube
Carousel · 5 cards
1080 × 1350 per card
Instagram · LinkedIn
GRIDSafe area 120 px (square) · 220–250 px (stories)
LOCKUPTop-left, mark + wordmark, always same colorway
CTAOne per post — one Iris element per composition
CAPTIONAlways burn subtitles on video/reel content
Brand contact
Questions about the brand?
Reach out to the team before shipping anything that carries the Styrar mark.
Contact
Open support form