Skip to content

Seventeen — Creative Studio

A print-spread studio site where photographs crop into a giant numeral and sit inline inside the sentence.

Proeditorialbrutalistminimal
Category
Site Templates
Added
2026-09-20
Deps
none
Updated
2026-09-20

This is a viberdy Pro component

The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.

Preview
715TM
Identity · Campaign · 2026

Norr Atelier

We shot for eleven days in Lisbon and came back with a campaign.

Selected work

2024 — 2026
01 / Frame
02 / Frame
03 / Frame
04 / Frame
05 / Frame
06 / Frame
Founded
2017
Based
Lisbon / London
Services
Direction, photo, film
Availability
Q1 2027
SEVENTEEN
hello@seventeen.studio© 2026 — all rights reserved

Props

Inline-image paragraph
No runtime dependencies
"use client";

import { useState } from "react";

const PAPER = "#e9e9e4";
const INK = "#0d0d0c";
const DEFAULT_SIGNAL = "#ff2d00";

export function SeventeenStudioSite({
  accent = DEFAULT_SIGNAL,
  studio = "SEVENTEEN",
  showInline = true,
  projects,
}: {
  accent?: string;
  studio?: string;
  /** The paragraph that sets images inline as words. */
  showInline?: boolean;

  // ---------------------------------------------------------------
  // Full source available with a viberdy Pro subscription.
  // https://viberdy.dev/pricing
  // ---------------------------------------------------------------
}
Notes

About this site template

This is the light, typographic member of the template set — paper rather than ink, and composed as a print spread instead of a landing page. Three devices do the work, and all three come from print. The first is the numeral: one enormous red figure with photographs absolutely positioned into its negative space at overlapping depths, so the digits crop the images and a flat number becomes a composition. It is structure rather than ornament, because the figure is the project number and the switcher changes it. The second is the paragraph with photographs set inline — not beside the text but inside the sentence, as inline-block elements on the middle baseline, so the line box still resolves and the words wrap around them. The picture becomes a word, which is rarely attempted on the web and is the single reason the section reads as a magazine rather than a text block with a gallery underneath. The third is the wordmark: a black slab with a quarter-circle bitten out by a radial-gradient mask, vector and exact at any scale with no asset to ship. Every photograph is forced to greyscale so that the only colour anywhere is the signal red.

Curator’s note

Built for viberdy 2.2 at true page scale. The inline-image paragraph is the piece worth lifting — it is rarely done on the web and it instantly reads as art direction.

Related

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

Featured
NewPro

A dense spec table with real header association, a focusable scroll region, and a sticky head that keeps its rule.

tablespeceditorial
Featured
NewPro

An editorial index with sticky year headers, and a switch that demonstrates the overflow ancestor that breaks them.

indexstickyeditorial
Featured
NewPro

A headline that inverts the photograph beneath it, with a scrim that keeps it legible.

knockoutinvertblend-mode