Branding Studio Template
An editorial one-page site for a brand and identity studio: a contents index of typographic plates you throw sideways with a finger, display headings cut in a variable serif that arrive light and set themselves once as they come into view, and a featured project laid out as a proper article with a drop cap, marginalia and numbered notes. Four measured palettes ship.
About This Template
A production-ready one-page site for a brand and identity studio: naming, identity systems, typography, packaging, editorial design and the guidelines that hold it all together. It ships as a finished site for a fictional eight-person studio, PLINTH, with real disciplines, honest timelines and actual deliverables already written, so what you open reads as a working practice rather than a grid of placeholder headings.
Read the full template overview
It is set rather than laid out. A pale sage ground, a serif that does both the display and the reading through its optical size axis, folios and hairline rules, marginalia in the outer column, small caps for furniture, and a measured reading column of about sixty-six characters. The oxblood accent is treated as a second ink rather than a button colour: it clears the AA floor on every light surface here, so it sets folios, the drop cap, small-caps labels, links and the pull quote, which is what an editorial page actually needs.
Two things carry it. The contents index is a horizontal run of numbered typographic plates that you throw sideways with momentum, the way you flick through a magazine's contents page, with a progress rail, keyboard access and a native scrolling strip underneath as the fallback. And the type sets itself: every display heading arrives a little light and settles to its resting weight once as it comes into view, then stays put. Nothing on the page follows the scroll, which is deliberate on a layout whose whole argument is that it has been properly set.
Four palettes ship, not one. Sage is the default; Press, Slate and Night are alternate token blocks you switch on with a single attribute on the html element, or copy into place and delete the rest. All four were measured on the same pairs, and Night inverts the page entirely, which is the case that proves why the type colour sitting on an accent fill is its own token.
There is no bundled photography and none is wanted: every plate and mark is set type on a colour field, which is what a branding studio's work actually is. Each plate carries a documented image swap point if you would rather use a photograph. Every section is found by a data attribute and separately guarded, so delete the contents index, the feature, the practice list, the quotes or the enquiry block and the rest keeps running.
What's Included
- A contents index of numbered typographic plates that you drag and throw with real momentum, bounded and with a progress rail, which falls back to a native scrolling strip with no JavaScript and under reduced motion
- Display headings cut in a variable serif that arrive light and settle to their resting weight once as they come into view, reading as type being set rather than as motion that follows the reader down the page
- A featured project set as a genuine article: drop cap, a measured column of about sixty-six characters, marginalia in the outer column, a pull quote that breaks the measure, and numbered notes with back-links
- Four measured palettes shipping as token blocks, switched by one attribute, with the type colour that sits on an accent fill kept as its own token because a light accent needs dark type on it and a dark one needs light
- An accent treated as a second ink rather than a button colour, measured past the AA floor on every light surface so it can set folios, labels, links and the drop cap, and explicitly barred from the dark band where it fails
- A practice list of six disciplines set as editorial rows with timings and deliverables, not as a grid of cards
- Text reveals built from clip-path and masked line transforms rather than a text-splitting plugin, so the markup stays plain and readable with no JavaScript
- Touch handled properly on the index: coordinates read from the raw event, movement rather than press committing the gesture, and a direction test so a vertical swipe that starts on the strip still scrolls the page
- One named custom ease used consistently across every reveal, wipe and settle, with a graceful fallback if the plugin does not load
- Every measured contrast ratio written into the stylesheet header, including the two pairs that are banned and why one of them fails silently on a reskin
- Accessible throughout: a complete static document with no JavaScript, a full page under reduced motion with the type axes at rest, a blocked CDN that degrades to the plain document, and keyboard access to every plate that brings the focused one into view
Perfect For
- Brand and identity studios presenting naming, identity, packaging and guidelines work
- Design studios and consultancies whose output is typographic rather than photographic
- Editorial and print designers who need a site that looks set rather than templated
- Type foundries and lettering practices showing specimens and commissions
- Any studio that sells taste and wants a page that demonstrates it rather than claiming it
- Small practices that need a work index, a case study and an enquiry form on one page
How It Works
Structure
One script initialises every section inside a single gsap.context, with one gsap.matchMedia whose condition sets cover coarse pointers as well as desktop, so exactly one branch runs on every device. Each block is found by a data attribute and returns early if it is absent, so deleting any section leaves the others working. The footer sits outside the enquiry section, so removing that section does not take the colophon with it.
The contents index
The default is a native horizontally scrolling strip with scroll snapping, which is swipeable, keyboard reachable and works with no JavaScript at all. Only when motion is allowed and both Draggable and the inertia plugin have loaded does the script upgrade it to a thrown, bounded track. Coordinates come from the raw pointer event rather than a cached pointer, nothing commits on a press, and the gesture has to prove itself more horizontal than vertical before it takes over, so a finger that lands on a plate and swipes up still scrolls the page.
Type that sets itself
Each display heading is found by a data attribute and given one ScrollTrigger that fires a single time as it enters. Its resting cut, optical size and width included, is read back out of the stylesheet at start-up, so restyling a heading in CSS cannot leave the script disagreeing with it. Only the weight moves: changing width would change how much room the words take and reflow the line under the reader. The axes are written by tweening a plain object and setting font-variation-settings from an update callback, naming all three axes, because writing that property wholesale overrides the font weight and optical sizing that CSS set.
Type reveals without a plugin
Headline lines are wrapped in overflow-hidden masks and moved on both yPercent and y together, because a CSS percentage start state is parsed into pixels and would otherwise leave a stale offset behind. Section titles wipe in on clip-path. Nothing depends on a text-splitting plugin, so the markup you read is the markup that ships and a reader with no JavaScript gets ordinary headings.
Without JavaScript
The gating class goes on in the head before first paint, so reveal start states apply to the very first frame and nothing is painted visible and then hidden; the script removes that class when GSAP is missing, so a blocked CDN degrades to the plain document. With scripting off the contents index is a scrolling strip, the headline sits at its resting weight and width, the article is a plain article, and every note and back-link still works.
:root.
Try them in the preview above.