by Proxy
Design that acts for you.
The DBP brand, built the way DBP builds for clients: as a system. Workhorse utility with an edge. Modern, bold, and unafraid to say the point first.
Workhorse
Utility comes first. Every element earns its place by making the work easier to read, scan, or act on. Nothing on the page exists to decorate it.
With an edge
Condensed caps at full volume, hard contrast, warm cream on near-black, and red held back for the moment something actually breaks.
Bold and unafraid
Claims come first and come big. The page states the point, then shows the evidence. Play turns up in small places for anyone curious enough to poke at it.
How to read it
Top to bottom for the reasoning. Each section makes a claim, explains why, shows the system working, and ends in rules. Agents can jump to the rules blocks, and anything the rules don't cover goes to Rolf as a question. Every value on this page comes from tokens.json.
Give it room.
Here's the mark. Grab the files, then read the rules before you place it.
Stacked lockup
Wordmark
Square icon
Circle icon
What you get
Copy puts the SVG code on your clipboard. SVG and PNG ask before saving a file.
The story of the mark
Minimum sizes
Below these, strokes thin past what a screen can draw cleanly. Favicons start from a 32px or larger source.
Clear space · stacked
X equals a quarter of the icon height. Nothing else enters that box: no text, no edge, no other mark.
Clear space · wordmark
X equals the cap height. In the nav, the wordmark keeps the full X from the page edge and the first link.
Cream on ground
The default. 15.6:1.
Dark on cream
For light grounds and print. 15.6:1.
Over imagery
Only on a solid scrim where the mark sits. The image never shows through behind it.
Assemble
The pieces slide in from their corners while the frame draws itself. Hover the mark and it parts, then closes when you leave.
Flip
The d flips on its edge to become the b, then flips down to become the p, while the cursor and pencil arrive up and to the right.
Motion spec
Crop it big
At hero scale the icon can bleed off an edge as a graphic layer, as long as the full lockup sits in the same view and no running text sits on top of it.
Circle, only where it's cropped
It fills the crop edge to edge. Everywhere else, the square icon leads.
Rules#brand
Say the precise thing.
Communication is the most important element of design. No amount of design can fix content that fails, so the words get the same care as the type, the color, and the motion. The tone is a professional, chronically playful leader in design: precise first, and playful whenever it sharpens the point.
Tone dials
Reading the dials
Say this
In components
Quiet ground, loud work.
The ground recedes so the work leads. Near-black and warm cream carry every page, and neither one is pure. Pure black crushes detail on screen and pure white glares against it. Warm cream reads like paper under a desk lamp, which suits pages people read closely and come back to.
Warm ramp
Built in OKLCH along cream's own hue, so every grey on the page belongs to the same light. Text steps show contrast on the ground (G) and on a surface (S), with a dot marking pass or fail. Steps 600 and darker never carry text.
Rules#ground
- The ground is
#0a0a0a. Never use#000. Ink is cream 100. Never use#fff. - Ink holds everything at rest. Light marks reach: hover, focus, press, and the current item. Never set static text in light.
- Body copy uses text2 (300). Meta uses 400 on surfaces and 500 only on the ground, where it holds 4.55:1. On a surface, 500 drops below AA.
- Hairlines use 850 on the ground and 800 on surfaces, and step to 700 on hover.
- No accent hue, no gradients, and no opacity on text.
Color tells the truth.
Color in DBP work carries meaning, and the meaning is state. When a form, a video, or an experiment goes wrong, red says so every time. Warning, success, and info hold red's lightness at each role, so the four read as one family where only the hue moves. Red stays the anchor, which is why warning lands on ochre.
Rules#state
- Color carries state only. Never use a state color for decoration, emphasis, or brand.
- Each state has three roles. Deep fills chips, borders, and solid controls, with ink text on top. Light colors icons and marks only. Tint grounds banners and rows, with a deep border.
- State color never colors text. Words stay in ink or text2, and the icon, border, chip, or fill carries the state.
- Reserve state color for something that needs flagging as clearly good or clearly bad. A metric that went up stays neutral.
- Pair every state color with an icon and a word. Color never travels alone.
- An error says what failed, then how to fix it, and the fix appears as an action.
Claim. Evidence. Explanation.
Three families, each with one job. Big Shoulders states the claim: the problem, the outcome, the number that matters. Fira Mono records the evidence: labels, IDs, timestamps, table cells, the spec sheet of an operation. Fira Sans explains the reasoning at reading weight, in a column narrow enough to follow.
The one thing the reader should leave with.
ROLE · DIRECTOR
TEAM · 1 → 5
Roles, years, and figures. Anything a reader might scan, compare, or check.
Partners renewed once they could see their own results. The number moved when the waiting stopped.
Weight 300 for reading, 400 on surfaces and in small sizes.
One family, two drawings
Why opsz stays automatic
Big Shoulders carries an optical size axis from 10 to 72. Small sizes get open spacing, wider counters, and sturdier strokes. Display sizes tighten into the condensed shape. font-optical-sizing: auto matches the axis to the pixel size, so one family covers buttons and headlines.
Scale
Rules#type
- Load the family as
Big Shoulderswithfont-optical-sizing: auto. Never pin opsz, and never load Big Shoulders Display or Big Shoulders Text. - Display type runs uppercase at 700 or 800. One display-xl claim per page.
- Never set a paragraph in Big Shoulders.
- The mono floor is 12px and the body floor is 13px. Nothing goes smaller.
- Running text stops at 65 characters.
- Mono labels run uppercase and tracked. Mono data runs in sentence case with tabular numbers.
Dense, never crowded.
Case studies carry a lot of evidence: screens, numbers, process, and the reasoning that ties them together. Structure keeps it readable. A twelve-column bento grid places blocks by importance. Base-8 spacing holds the rhythm. Hairlines separate rows, and whitespace separates everything else. A box shows up only when something is a distinct object.
Bento spans
Spacing on 8
Radius follows size
Corners round just enough to read as intentional, and bigger elements get bigger corners.
Rules#structure
- Place blocks on the bento spans: feature 8, wide 6, standard 4, compact 3. Below 760px, everything stacks.
- Space on base 8. Use 4 only inside a component.
- Sections pad 128px on desktop and 64px on mobile.
- Radius scales with the element: 2 for tags, 4 for buttons and banners, 6 for blocks, 8 for media. An inner radius equals the outer radius minus the gap, with 2 as the floor.
- No shadows. Elevation steps from ground to surface to raised.
Every action lands.
People trust interfaces that behave like objects. Every curve here comes from a spring simulation, defined by response and damping and compiled to CSS linear(), so it runs anywhere, Framer included. Weight signals consequence. A small control moves fast and stops clean. A lifted card settles with a little weight. A block arrives heavy and lands soft. Every press compresses, and an interrupted transition picks up from wherever it is.
Three springs
Press
Hold the button. It gives a little, then springs back the moment you let go.
Settle
Hover the card. It lifts and settles with a little weight.
Reduced motion
Turn motion off and everything here holds still. Fades stay, so changes still register.
Rules#motion
Go ahead. Play with it.
Good work goes beyond the requirements and rewards curiosity.
Pluck the rule
Sweep across the hairline. It catches, stretches, and rings out when it slips free.
Press the key
Visible travel. The key drops 5px while its bottom edge thins, so the base stays put, then springs back on release.
Throw the puck
Drag it anywhere and let go. It keeps your speed, then settles home with a little weight.
Tilt the card
The card leans toward your pointer, 8 degrees at most, and settles flat when you leave. Case study heroes use it. On touch, it leans under your finger.
Grain
A fine noise layer sits over everything at 8%. Flat fills pick up tooth, the way a matte print does, and the dark ground stops reading as a void. The sample magnifies it three times.
Rules#play
Show what can be touched.
States invite the interaction. Rest, hover, focus, and press each show what can be acted on, whether someone arrives with a mouse, a finger, or a keyboard.
Actions
Primary fills with ink and brightens to light. Secondary holds a 700 border and brightens its text.
Focus
Tab through this page to see it.
Links
Running-text links underline in 700 and brighten to light on hover. Read the state rules.
Rules#interaction
Built for whoever isn't in the room.
Acting for users starts with the people reading DBP work. The hiring manager skimming a case study on a phone between interviews. The reader who zooms to 200%. The one who turns motion off. These floors hold on every page.
Minimum contrast for any text, measured against the surface it actually sits on.
The mono floor. Body text stops at 13px.
The smallest touch target, including icon buttons.
Zoom with no sideways scroll. Blocks stack and type reflows.
States that rely on color alone. Every state carries an icon and a word.
The only motion left under reduced motion.
One page, every decision.
The system on a DBP case study opener. Each marker traces a decision back to the section that made it.
I turn the work your team does by hand into the product your customers run themselves.
The claim sits in Big Shoulders, so the point lands before any detail.
TypeRole, company, and years run in Fira Mono. Facts look like facts.
TypeHairlines divide the outcomes, and the deltas stay in neutral text. A number going up doesn't need a color to say so.
StructureThe form error names what's missing and how to fix it, in error light beside the field.
StateCards lift and brighten on hover, and show their arrows at rest on touch.
InteractionGrain sits over all of it, so the flat ground reads as a surface.
Play