Portal One
www.portalone.studioA Framer-built creative studio site where Inktrap display type, monochrome pure-black canvas, and large geometric SVG portals (tracks, wells, vortexes) carry the entire brand: a "creative gateway" rendered as actual gateways on every scroll.
Design tokens
- displayItalic
- PP Neue Machina Inktrap Light Italic
- displayPlain
- PP Neue Machina Plain Regular
- displayHeavy
- PP Neue Machina Inktrap Ultrabold (900)
- body
- Inter
- mono
- Press Start 2P (pixel)
- monoSans
- Pixelify Sans (pixel)
- condensed
- Big Shoulders
- classical
- Times (italic, pull-quotes only)
Do / Don't
Reference it for
- Pure black rgb(0,0,0) + near-black rgb(17,16,16) surfaces as the only dark tones — no greys in between
- Off-white rgb(217, 217, 217) panels for inverted sections — not pure white, slightly warm grey
- Browser-default-blue rgb(0, 0, 238) as the only chromatic accent — nostalgic, deliberate, almost 1996-era
- PP Neue Machina Inktrap Light Italic as the display headliner for "creative" moments (200px scale)
- PP Neue Machina Plain Regular as the geometric-sans counterpoint (118px / 96px / 88px)
- Press Start 2P + Pixelify Sans pixel fonts for retro chrome strips, secret-code blocks, and CTA labels (Scroll to continue...)
- 15-step type scale (11-200px) — unusually granular for a small studio
- Two-weight system (400 / 900) only — no mid-weights
Do not copy
- The PORT|UJF glitched logomark and the rocket-icon mark
- The exact CREATIVE + GATEWAY and WHY PORTAL-1? hero copy
- The 4T4*AL-1 and Book A Call nav phrasing
- The PP Neue Machina Inktrap family in italic light specifically (Pangram Pangram-licensed; use the regular Inktrap or substitute)
- The athletics-track / vortex-well / orbital-ring SVG illustrations themselves (commissioned to Portal One's brand world)
- The browser-default-blue rgb(0,0,238) accent if the brand is post-2010 in tone — it reads as deliberate retro
- The pseudo-leetspeak $|). / L&s_0 / ]d,8!> text blocks unless the brand has a real reason to look glitchy
- The QR code in the chrome unless it actually resolves to something useful
Signature moves
Inktrap-italic display over pure-black contrast slabs
an Inktrap display italic at up to 200px headlines 'creative' moments over a 9627px page divided into hard black (#000) / off-white (rgb(217,217,217)) contrast slabs, with a browser-default-blue (#0000ee) as the only chromatic accent.
marquee tickertape brand-promise strips
marquee tickertape strips carry brand-promise text between sections, with numbered [03] mono section labels and a pixel-font 'Scroll to continue...' cue as chapter markers for the long scroller.
oversized geometric SVG portals on a huge radius scale
oversized geometric SVG illustrations (track ovals, vortex grids, orbital rings) anchor sections, with a radius scale (33/54/99/966px) used only on these portal/pill shapes, never on cards.
Related references
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.
Bindery
nicheFilm Production
The reference for boutique NYC production studios — full-bleed video tile mosaic on warm off-white, condensed black serif wordmark, GSAP+Lenis scroll choreography over a soft pastel palette that cycles per section.
Brand Appart
strongCreative Studio
The reference for Paris startup design agencies — Youth chunky-sans display, cream parchment paper, orange ©-superscript wordplay, live Paris clock, Webflow + Lenis + Splitting.js stack.
Dverso
strongCreative Studio
a Milan "immersive" studio that builds its homepage like a technical drawing, a warm cream canvas with a blueprint grid, mono-everything UI, a giant outlined "dverso" wordmark, and the team rendered as stylised 3D avatars standing inside the letters, with a pixel display font and scramble text for character.