Broken Grid Site
The whole Broken Grid kit as one studio site on one rule: a drawn-lattice hero, an inverting headline, work and clients that reflow and hand the break on, practices across three layouts, engagements that re-order, and a run-off footer.
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.
The gridholds,exceptevery third.
We build identities and sites on a strict grid, then break it by one rule, the same way, everywhere. It is the difference between a system and a style.
We break the grid by exactly as much as makes it look right.
Selected work
Eight projects. Every third one leans.
Clients, by sector
Practice
Four practices. Three layouts. One rule.
Identity
Names, marks and the grid everything else stands on.
Type
Faces chosen or drawn, and one scale to set them.
Motion
How the layout moves when the content does.
Web
Sites built on the same rule, in React.
Layout 01 / 03 · Line · Motion is third, so it breaks
Engagements
Two ways to work with us.
A fixed project with a start and an end, or a monthly retainer with a standing team. Same people, same rule.
Identity
€24kfrom, per project
- Strategy and naming
- Logo, type and grid
- Guidelines as a site
Website
€38kfrom, per project
- Design on the rule
- Built in React
- Handover and training
Sprint
€9kfrom, per project
- Two weeks, one problem
- A prototype you can ship
- A written next step
Placeholder prices, excluding VAT.
Props
This entry takes no configurable props.
"use client";
import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, FormEvent, KeyboardEvent as ReactKeyboardEvent, MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent, ReactNode, RefObject } from "react";
/**
* BrokenGridSite — the site for Overshoot, a fictional brand and digital
* studio, set in the Broken Grid register: a visible grid that holds, and one
* rule that breaks it, the same way, everywhere.
*
* The rule is "The Third". In every run of modules (cards, plans, nav items,
* footer columns, form rows), module 3, 6, 9 and so on leaves the lattice at
* its leading edge by two gutters, overlapping its neighbour by exactly one,
* one layer above it, and wears the acid bracket. The ends of a run never
* break. The break belongs to the position, not the module: reorder the run
* and the break passes to whichever module is now third.
*
* - A numbered nav whose third item hangs below the bar.
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this page template
The whole kit as one site for Overshoot, a fictional brand and digital studio in Antwerp, built on one rule: every third module breaks the grid by exactly one gutter of overlap, and the break belongs to the position. A numbered nav whose third item hangs below the bar follows the section crossing the middle of the view; the hero is set on the drawn lattice with a plate you can move by the rule and a grid inspector; the rule itself is a headline that inverts under the plates; the selected work reflows by filter and hands the break on, over the lattice's ticks, and clients do the same through the flip primitive; four practices re-lay across three layouts at scroll checkpoints; engagements re-order with a toggle; the contact form's labels hang off the grid; and the footer's name runs off the edge. Field and paper sections alternate. Every word, figure and link comes from one typed content prop, placeholders by default.
Curator’s note
The Broken Grid kit site (slot 12): every asset in the kit composed around one typed content object, OVERSHOOT_DEMO, for a fictional brand and digital studio. The assets above are cut from this file, byte for byte.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Overshoot Lattice Hero
heroesA first screen on a drawn lattice whose caps headline breaks it by rule, and a plate you drag to any free cell: drop it on column 3, 6 or 9 and it overshoots, wears the bracket, and the hairlines bend to make room.
Seventeen — Creative Studio
site templatesA print-spread studio site where photographs crop into a giant numeral and sit inline inside the sentence.
Yielding Hairline Field
backgroundsA background that is the lattice itself: twelve-column hairlines with crosses where they meet, bending one gutter around every module the rule breaks and leaning away from the pointer, drawn on a canvas that sleeps when still.