Skip to main content
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.

9

Card anatomy parts

6

Reusable components

3

Foundation tokens

12

Total sections

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
The Offsite Agency screenshot 1
Live site
01 / 04

01 / HERO

The Offsite Agency logoThe 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

12

Post-Launch Updates

60

Animation FPS

IndustryDesign Studio
LocationRemote
Timeline4 weeks
02Breakdown

Anatomy.

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

01

Numbered mono label

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

02

Large project name

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

03

Tagline (muted)

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

04

Description paragraph

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

05

Metric boxes

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

06

Meta rows

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

07

Stack pills

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

08

Browser frame

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

09

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

12

Post-Launch Updates

60

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
Text, Visit live
Outline fallback
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

12

Updates

60

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

12

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

12

Clients

8

Industry

3

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