---
version: alpha
name: "Graphic design studio template by 8B"
description: "A graphic design studio with a risograph print room: two inks on yellow paper, giant extruded lowercase words and prints that fall into register. Free HTML template by 8B, MIT."
colors:
  primary: "#17423a"
  secondary: "#5b9a7e"
  neutral: "#f2d27c"
  surface: "#ebc568"
typography:
  headline-display:
    fontFamily: Schibsted Grotesk
    fontSize: 140px
    fontWeight: 800
    lineHeight: 0.88
    letterSpacing: -0.045em
  headline-lg:
    fontFamily: Schibsted Grotesk
    fontSize: 116px
    fontWeight: 800
    lineHeight: 0.88
    letterSpacing: -0.045em
  headline-md:
    fontFamily: Schibsted Grotesk
    fontSize: 44px
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: -0.025em
  headline-sm:
    fontFamily: Schibsted Grotesk
    fontSize: 30px
    fontWeight: 800
    lineHeight: 1.05
    letterSpacing: -0.025em
  body-md:
    fontFamily: Schibsted Grotesk
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
  aside:
    fontFamily: Schibsted Grotesk
    fontSize: 22px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: -0.01em
  label-sm:
    fontFamily: Schibsted Grotesk
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.005em
  button:
    fontFamily: Schibsted Grotesk
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.005em
rounded:
  none: 0px
  full: 999px
spacing:
  gutter: 40px
  section-padding: 168px
  column-gap: 44px
  control-height: 48px
  rule: 2px
  plate-offset: 5px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: "13px 23px"
    height: "{spacing.control-height}"
  button-secondary:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: "13px 23px"
    height: "{spacing.control-height}"
  nav-pill:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    height: "{spacing.control-height}"
  sticker-tag:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    typography: "{typography.aside}"
    rounded: "{rounded.full}"
    padding: "9px 17px"
  rates-row:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "14px 8px 14px 0"
  portrait-proof:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.none}"
    padding: 12px
  input-field:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    rounded: "{rounded.none}"
    padding: "9px 0 10px"
---

# Graphic design studio template by 8B

## Overview

The template is a one-page site for a graphic design studio that also runs a risograph print room: identities, posters, books, packaging and signage, printed two inks at a time. The one idea is a print that is allowed to be a little off. Yellow paper with a faint grain carries deep pine text and lines, and a second green ink lands slightly out of register behind headings, photos and giant extruded words. It is for studios, poster and book designers and anyone who rents out presses. Studio, jobs, rates and people in the demo are invented.

## Colors

Two inks and two papers. The page never uses a fifth colour.

- **Primary (#17423a):** the first ink, a deep pine. All text, the 2px rules between rows, outlines, primary buttons, the full-screen menu, the tags and the dark second screen of the opening when scroll motion is off.
- **Secondary (#5b9a7e):** the second ink, a mid green. The giant word faces, plates behind the work photos, heading and quote shadows, one disc, the hard shadow under primary buttons and the open question sign. Large shapes only: its contrast on the yellow is low.
- **Neutral (#f2d27c):** the paper. The page ground, nav pills, the secondary button, the sheet over the opening and the text on pine surfaces.
- **Surface (#ebc568):** a deeper paper for alternate rate rows, the process sheet, the portrait proofs and the contact form.

## Typography

One family, Schibsted Grotesk, loaded as a variable font from 400 to 900 in normal and italic.

- **Headings** are lowercase at weight 800, line height 0.88, tracking -0.045em, each with a second-ink shadow. Section headings run up to 116px and the page title up to 140px, fluid down to about 44px on phones.
- **Statements** are weight 700 at 24px to 44px; item titles (jobs, steps, names, questions) are lowercase 800 at 20px to 30px.
- **Body** is 16px to 18px at weight 400 and 1.5 line height. Small print, captions and form labels are 14px at weight 600.
- **Giant words:** the extruded SVG words (the opening word, the question mark, the footer wordmark) are lowercase italic 800; the five discipline words are upright lowercase 800. The opening word, the discipline words, the footer wordmark and the contact email are sized from their character count through a `--len` property, so each fills its row; the question mark has a fixed size. Change the number whenever the text changes.

## Layout

Sections are full-width with vertical padding of 88px to 168px and a gutter of up to 40px. There is no content wrapper: the work row is a strip wider than the screen, while the method and print room use a 12-column grid with a gap of up to 44px.

At 900px the nav folds into a menu button and a full-screen overlay; at 800px grids stack, the portraits go two by two, the rates table drops its middle column and the process sheet sticks to the top under the nav, its paper about 30% of the screen tall. The work cards become 76% of the screen wide.

## Elevation & Depth

Depth is made of print devices, not blur. The giant words are SVG text with eight stacked copies, each shifted a few pixels, plus a drifting outline. The five work photos have a plate of the second ink offset behind them. Sheets, proofs, the form and the process paper carry a blurless shadow 5px right and down, in green or pine.

## Shapes

Buttons, nav pills, tags and step numbers are pills (999px); the question signs are circles. Everything else is square: sheets, proofs, photos, fields and the rate table. Photos are greyscaled with raised contrast, blended onto pine and tinted yellow, so any colour photo reads as a two-ink print. The ink discs and the process poster are CSS and SVG, not images.

## Components

- **button-primary:** a pine pill at least 48px high with a paper label and a green hard shadow. On hover, with a mouse, it moves 5px down and right and the shadow disappears, so it sinks into its plate.
- **button-secondary:** the paper pill with a pine outline and shadow; it sinks the same way.
- **nav-pill:** the wordmark, the arrows mark and the links each sit in a bordered paper pill; the bar hides on a downward scroll.
- **sticker-tag:** a pine pill with an italic lowercase label beside the giant word.
- **rates-row:** rows with 2px rules; odd rows are filled with the deeper paper and prices are bold and right aligned.
- **portrait-proof:** a deeper-paper card with a 2px outline, the photo, a name and a role.
- **input-field:** a borderless field with a 2px pine underline and 20px semibold text, in a deeper-paper form.

## Motion

The page loads no animation library. Scroll scenes are CSS scroll-driven animations (`animation-timeline` with named view timelines), written per section in `data-8b-part="scene:..."` style blocks. A small inline motion kit at the end of the body measures distances into CSS variables, numbers `data-8b-items` groups as `--i`, adds `is-in` to `data-8b-motion` elements as they arrive, pauses loops that are off screen and smooths the mouse wheel on fine pointers. A gate script in the head sets `data-8b-live` on the root only when the browser supports `animation-timeline` and the visitor has no reduced-motion preference; every scroll rule is scoped to it. The one idea is misregistration falling into place.

- **Opening:** on load the headline lines rise (0.95s), the buttons lift and the eight depth layers of the giant word pull into place; the outline drifts and the "on purpose" tag swings in loops. With scroll motion live, the studio photo opens on load inside the counter of the letter whose index `data-focus` gives (counted from 0: here the second "o"), and during the first screen of scroll you dive through that counter: the word swells, carries the photo to the centre and the headline rises away.
- **Work:** the section is held by a sticky stage while the track slides sideways for as long as it overflows the screen; each plate drops into register as its card crosses the middle.
- **Method, print room, quotes and contact:** headings register (the shadow settles from .22em to .045em), photos wipe in from the top in 1.1s, and list rows feed in from the left with a skew, 70ms apart.
- **Make:** the five words start off to the left or right, alternating, and slide into a justified column.
- **Process:** the sheet is sticky; sketch lines draw, the green plate drops in, the dark plate follows, crop marks are cut and the paper straightens from -4deg. The current step number is inked.
- **Studio:** four proofs start piled and deal out to their places.
- **Question mark and footer wordmark:** their depth swings or pulls out as the sections pass.

With reduced motion, and in browsers without CSS scroll-driven animations (Firefox today), `data-8b-live` is not set. The smooth wheel, registers, wipes and scroll scenes are off: the opening is two plain screens without the photo, the work row is an ordinary sideways-scrolling strip and every section shows its finished layout. The headline load-in and the loops are CSS keyframes under `prefers-reduced-motion: no-preference`, so they still play in Firefox and stop with reduced motion. Button hover and nav hiding remain. If a scene's script throws, only that scene's styles switch off.

## Do's and Don'ts

- Do use only the two inks and the two papers; recolour through the four `--color` variables.
- Do keep the second ink for large shapes and shadows only.
- Do print every new photo through the same greyscale and yellow blend.
- Do set `--len` to the character count of each giant or justified line when its text changes.
- Do keep the gate script, the inline kit, `data-8b-motion` and `data-8b-items`; build new motion as CSS scroll-driven animation scoped to `[data-8b-live]`.
- Don't add GSAP, Lenis or any other animation library.
- Don't add gradients, soft shadows, a third ink colour or stock icons.
- Don't round sheets, photos or fields.