InternalDesign System

v2.0 / 2026

Style guide.

The source of truth for every pattern on displace.agency. Built around the signature project card, the component that defines how we show our work.

Card anatomy parts

Reusable components

Foundation tokens

Total sections

Contents

01The Signature

The Project Card.

This is the component that represents Displace. Every piece of the design system exists to serve it. Study this card. Everything else in the guide is built from its parts.

Full cardAs seen on /work and homepage

theoffsiteagency.com

Live site

01 / 04

Drag, scroll or click

01 / HERO

The Offsite Agency

Design excellence deserves technical excellence

The Offsite Agency is our design partner with 80K+ Instagram followers and world-class creative output. We built them a high-performance portfolio platform that showcases their design excellence with technical precision.

80K+

Instagram

Post-Launch Updates

Animation FPS

IndustryDesign Studio

LocationRemote

Timeline4 weeks

Stack

Webflow Vercel Google Tag Manager GSAP GSAP ScrollTrigger

View case study Visit live

02Breakdown

Anatomy.

Nine elements make up the project card. Each one is a reusable primitive documented in this guide.

Numbered mono label

Small accent category tag with an index number. Always monospaced, always uppercase. Sets the tone.

Large project name

The title. Light-weight sans at 2xl-4xl with tight tracking.

Tagline (muted)

Single-line descriptor. Larger than body, light weight, muted color.

Description paragraph

3-4 lines of body copy, `text-sm text-muted`, line-clamped.

Metric boxes

3 inline numerical highlights separated by space. No borders, just numbers + mono caps labels.

Meta rows

Key-value pairs (Industry, Location, Timeline). Mono caps key, regular value, hairline dividers.

Stack pills

Clickable tech tags with hairline border and mono font. Accent on hover.

Browser frame

The image container with a fake Chrome-style header, URL pill, letterboxed image, live pill, and carousel counter.

CTAs

Solid pill primary (`View case study`) + text link with arrow (`Visit live`).

03Component 01

Numbered mono label.

Top of every project card. A small accent index + category tag that sets the visual tone.

Variants

01 / HERO

02 / FEATURE

03 / STANDARD

Spec

FontDM Mono, 500

Size10px

Tracking0.2em

Caseuppercase

Colortext-accent

Structure{number} / {category}

04Component 02

Meta rows.

Key-value pairs for project metadata. Used for Industry, Location, Timeline, Services, any structured data.

Three rows

IndustryDesign Studio

LocationRemote

Timeline4 weeks

05Component 03

Metric boxes.

Inline numerical highlights at the top of project content. No borders, no background. Just large numbers with mono caps labels.

3 inline metrics

80K+

Instagram

Post-Launch Updates

Animation FPS

06Component 04

Tech pills.

Stack indicators. Each pill links to /stack/[slug]. Square 4px corners, hairline borders, mono font. Accent on hover.

Default

WebflowVercelGoogle Tag ManagerGSAPGSAP ScrollTrigger

Over dark background

2024Design Studio

07Component 05

Browser frame.

The signature image container. Chrome-style header with 3 dots and a URL pill. Inside: letterboxed image on a neutral background, live pill bottom-left, carousel counter bottom-right.

Frame structure

theoffsiteagency.com

Image area

object-contain, letterboxed on neutral bg

Live site

01 / 07

Carousel controls

Drag or click dots

08Component 06

Buttons.

Solid for primary CTAs. Text link for secondary. Arrow slides on hover, 200ms.

Primary, View case study

View case study

Text, Visit live

Visit live

Outline fallback

View work

09Component 07

Live pill.

Floating status badge with pulsing accent dot. Used on images, hero CTAs, and any production-live indicator.

Full pill (as shown in browser frame)

Live site

Naked, just the dot

Live / Production

Large

Compact

10Foundations

Color.

Neutral base, restrained accent. Click any swatch to copy the hex.

Brand

Surface & Text

11Foundations

Typography.

Outfit for display and body, DM Mono for labels and data. Light weights, tight tracking.

Card typography (in context)

01 / HERO

The Offsite Agency

Design excellence deserves technical excellence

The Offsite Agency is our design partner with 80K+ Instagram followers. Body copy is `text-sm text-muted leading-relaxed`.

80K+

Instagram

Updates

FPS

Type spec

Mono label10px / 500 / 0.2em tracking / uppercase

Project nameclamp(1.75rem, 3vw, 2.5rem) / 500

Tagline18px / 300 / leading-snug / muted

Body14px / 400 / leading-relaxed / muted

Metric value24px / 500 / tabular-nums

Metric label9px / mono / uppercase / tracking-wider

Meta key10px / mono / 0.12em / uppercase

Meta value14px / 400

12Foundations

Motion.

Restrained. Arrow slides on hover, carousel fades between frames, image scales on card hover.

Durations

Button hover200ms

Carousel fade350ms

Image scale on hover700ms ease-out

Card reveal on scroll800ms [0.16, 1, 0.3, 1]

Easing tokens

// Emphasized (card reveal, section animations)
[0.16, 1, 0.3, 1]

// Standard (hover states, button transitions)
ease-out, 200-300ms

// Scale on hover
duration-700 ease-out

13Foundations

Mobile.

Ten rules that turn the desktop pattern into something easy to read on a phone. Every rule is a Tailwind utility, no new components.

Type scale

Mono labelstext-[11px] md:text-[10px]

Body copytext-base md:text-sm

Hero h1text-[clamp(2.5rem,8vw,7.5rem)]

Section h2text-[clamp(2rem,5.5vw,4.5rem)]

Layout

Section min heightmd:min-h-[calc(100svh-65px)] xl:min-h-0

Section paddingpy-12 md:py-24

Metric gridsgrid-cols-2 md:grid-cols-4

Stack on mobilegrid-cols-1 md:grid-cols-12

Force min-w-0 on grid kidsmin-w-0 md:col-span-N

Targets

Touch targetmin-h-[44px] min-w-[44px]

Carousel dotsmin-h-[24px] min-w-[24px]

CTA primary on mobilew-full md:w-auto

Hide on mobile (decorative chrome)

Carousel hint copyhidden md:inline

Section meta stripshidden md:inline-flex

Browser-frame top barhidden md:flex

Counter pills (01 / 05)hidden md:inline-flex

DoMobile snapshot

01Studio

We build platforms.

Engineering studio. Madrid + Miami. Same stack across every industry.

50+

Lifetime

Active

Start a project

Don'tDesktop pattern collapsed onto phone

01StudioAvailable

Drag scroll click

We build platforms.

Engineering studio. Madrid + Miami. Same stack across every industry.

50+

Projects

Clients

Industry

Years

Start

Checklist when shipping a new section

1. No 9px or 8px text on phones. Bump to 11-12px or hide.
2. Drop 100svh on mobile. Use md:min-h instead.
3. Section padding: py-12 md:py-24.
4. Metric grids: max 2 columns on mobile.
5. Touch targets: 44 by 44 minimum for primary actions.
6. Hide chrome bars, hint copy, counter pills below md.
7. Primary CTA goes full-width on mobile.
8. Stack md:grid-cols-N children with min-w-0 to kill overflow.
9. Body copy: text-base on mobile, text-sm on desktop.
10. Open the page at 375px before merging.

End of specification

The project card is the source of truth. When in doubt, look at it.

Back to the pattern