Studio Herrstrom
www.studioherrstrom.comPure-black editorial portfolio for a culture-shaping design studio, anchored by an uppercase serif display headline, four-pole nav chrome with a diacritic-stroke logomark, and a 2x2 grid of category-tagged case study tiles separated by hairline white rules.
Design tokens
- display
- SH-MIX (Season Mix Medium, Times-class serif, custom-named)
- body
- SH-SANS (Season Sans Medium, geometric sans, custom-named)
- mono
- (none - no monospace font in use)
Do / Don't
Reference it for
- Pure rgb(0, 0, 0) black canvas with no near-black softening, full editorial commitment
- Mid-grey rgb(90, 90, 90) for category eyebrows and metadata, the only intermediate value in the palette
- Monochrome-only palette, three values total (white / grey / black), no chromatic accent
- --color-black-transparent: #000000ec for overlay surfaces (black at 92% alpha)
- Two-typeface bespoke system: SH-MIX serif (display) + SH-SANS geometric sans (body)
- 63.9px uppercase serif H1 with tight 57.5px line-height and -1% tracking
- Weight 550 as body default, unusual variable-axis bespoke weight
- Four-pole nav layout (Process | Work | LOGOMARK | About | Contact), symmetric four-corner anchoring
Do not copy
- The STUDIO HERRSTRÖM wordmark itself, or the H / Ö overscore-stroke ligature
- The SH-MIX / SH-SANS / SeasonSans / SeasonMix font names and the Season-family typefaces (likely Herrström-licensed)
- The "A design studio for brands who move culture" H1 phrasing
- The "The Echo" trademark for the three-step process model
- The Spotify / Ray-Ban Meta / Back Market / Discord / Filmhub client logo set
- The exact mid-grey rgb(90, 90, 90) if the brand has any chromatic palette, it reads as deliberate Herrström restraint, not neutral
- The "Erik Herrström" / "Kara Griffin Cushman" press copy
- The double-arrow ↗ ↗ outbound-link pattern as a brand-voice signature
Signature moves
monochrome editorial canvas
a pure rgb(0,0,0) black canvas runs a three-value monochrome palette (white / grey rgb(90,90,90) / black) with no chromatic accent, mid-grey reserved for category eyebrows and metadata
four-pole nav with 2x2 hairline grid
a four-pole nav layout (Process | Work | LOGOMARK | About | Contact) anchors symmetric four-corner chrome, and a 2x2 case-study grid uses hairline white rules forming visible quadrants with category eyebrows and an inline ↗ link glyph
single-workhorse transition with clamp spacing
an all 0.25s ease-in-out workhorse transition (64 hits) carries most motion, with directional fade-in/out keyframes and staggered index-row reveals, on clamp-fluid spacing via calc() vars interpolating 400 to 1920px
Related references
Abhishek Jha
nicheDesign Portfolio
Indian designer personal portfolio — 4-font system (DM Sans + thunder + editorial + playground), 17-step scale up to 288px, dark plum + pink palette, 9-keyframe marquee/cloud motion.
Alche
strongCreative Studio
The reference for Japanese virtual-character + immersive experience studios — Astro v5 build, neon yellow-green accent, 5-font multi-language system, KizunaAI case study.
Alejandro Mejias
nicheDesign Portfolio
A Melbourne solo UX designer's Framer-built portfolio in a brutalist bracket-wrapped monospace voice — black-on-white chrome punctuated by a single neon-yellow accent, dotted-grid hero, and full-bleed yellow about page.
Analogue
strongCreative Studio
a "seriously playful" brand-and-motion studio that wears its personality as type, a wonky multi-alternate ANALOGUE wordmark, emoji and icon glyphs set inline in the copy, a candy-pink accent on white, and a GSAP-driven box of tricks (mexican-wave letters, glitches, bounce, float) kept just on the right side of chaos.