A door standing ajar beside the name set in three stacked lines. It is one drawing: the door and the wordmark are a single compound path, so the lockup can never come apart or drift.
The frame is the doorway; the opening is the panel swung aside. The panel's two left corners are square, the two right corners round. That asymmetry is the mark: it is what makes it a door and not a phone.
Dorm, Room, Fund on three lines, drawn as outlines at the size and spacing of the lockup. It does not appear without the door, and it is not reset in Satoshi: the letterforms are the logo's own.
Keep a margin equal to the width of the door's panel on every side. Nothing enters it: not type, not a photograph's edge, not another logo.
One drawing, one colour at a time: lavender on dark grounds, ink on light ones. The kit derives every version from the same file, so there is nothing to keep in sync.
This was the old mark. The panel's left corners are square now; anything rounded is out of date.
Scale proportionally, always.
One colour per lockup. The door and the name are the same ink.
The door stands upright and solid. No strokes, no shadows, no effects.
Below that the panel's opening closes up. Use the mark alone when the lockup would have to go smaller.
Every variation is below, generated from the one drawing: the lockup and the mark on every ground as SVG, PNG and PDF, one-colour files on transparent, squares for favicons and social, and covers for every platform.
Favicon, web clip and social square, the mark at 55% of the side on each ground.
Platform sizes with the art centred in each platform's safe area (dashed in the preview, not in the file). Pick the art and the ground.
PNGs render at 2048 wide (variations) or at exact size (squares, covers). PDF needs a network connection for the exporter.
Ink is the ground and lavender is the voice on it. Purple is the signature: the hero card, the company cards, the link colour, the one bright band on a page. Elevated is the surface that sits on ink without leaving it. Orange is action and the founder's own position in a graphic, so it appears once per moment and never as a ground for reading. The two paler purples exist only inside purple, for a hover or a ring.
The site is built from bands. Each carries its own text colour and its own idea of a button, so orange is the action on ink and elevated, and ink is the action on purple and lavender. No two neighbouring sections share a ground.
The default. Most of every page.
Hero, closing ask, the one bright band.
Plates and graphics on ink.
The conversion moment, the brightest text band.
Secondary cards, the FAQ.
Three groups, measured live. The first works for anything, including small body copy. The second holds only at headline sizes. The third is never for words: shapes and fills only. Each tile shows the pairing at the size it is allowed, with its contrast ratio.
These are the Webflow variables, one to one. Design in these names and the handoff is already done.
A geometric grotesk with warmth in the round letters and a slightly narrow set that lets headlines run long without shouting. It does everything: display, body, labels, numbers. One family means every surface, from the site to a deck to a social cover, is recognisably the same hand.
Regular for reading. Medium for headlines, buttons, and emphasis. That is the whole system: the build serves exactly these two, so there is no bold and no light. When something needs more weight, give it more size or more room, not a heavier face.
Display sizes are Medium at 1.1 line height, tracked minus four percent; the biggest two tighten to minus five. Body sizes are Regular at 1.5. Labels of 14 pixels and under may run in capitals, tracked slightly open; nothing larger ever does.
We back founders still in school or just out while the idea is taking shape, then stay useful as the company does.
Apply for FundingThere is no full-bleed section. The page is ink, and each section is a rounded card sitting on it with a 12 pixel margin on every side, which is also the gap to the next card. Cards run the full width of the page; their content sits in a 1280 pixel container.
The one number the whole page hangs on. Cards never touch the viewport edge or each other by more or less.
Desktop, tablet, phone. It is the hero's padding, so every card's copy starts on the same vertical line as the hero's headline.
Desktop, tablet, phone. Generous on purpose: four big sections beat ten thin bands.
Content width inside a card at the three breakpoints. Cards themselves are always full width.
The gap between columns in a grid, and the padding inside a small card such as a company tile.
Tiles, stat cards and quote cards sit 8 apart: tight enough to read as one object, open enough to count.
20 for a card or a section. 12 for a button, a nav tile, a numeral chip, a plate's inner panel. 999 for a pill label. Nothing is square, and nothing is rounder than its size deserves.
Down a page the cards alternate: purple hero, then ink or elevated, then lavender for the moment that matters most, muted for the FAQ, elevated for the closing ask. The lavender card is the brightest text band on the page, so there is exactly one per page and it carries the conversion. Orange is never a section ground; it is a card inside one.
Primary is orange with ink type. Light is lavender-lightest with ink type, for purple and lavender grounds. Large is 56 tall with 32 of side padding, medium 44 and 16, small 32 and 12; 12 radius throughout, Medium weight, sentence case. Every button wipes on hover: the colour slides out toward the top-right and leaves the outline, on the .85 second curve. There is no ghost button and no bold.
Purple with an ink numeral. Marks an ordered step; never used on the three pillars, which are reasons, not steps.
Plate-coloured, so it knocks a line out where it sits. The only place type runs in capitals.
The nav is three 80 pixel tiles, 4 apart: logo on muted, orange Apply, ink menu with a 10% lavender edge. The footer is the same tile language at card scale.
Copy left, graphic right, 20 radius, 80 padding. The plate on elevated is the same card on a dark ground.
Rows on the muted card, 12 radius, 32 side padding; the open row goes lavender-lightest; one open at a time; the icon is a 28 pixel plus that rotates to a minus.
Once DRF invests, you also gain the support of the DRF team and a wider community of founders, operators, and investors.
Everything opens. That is the whole motion language. New colour arrives from a corner and slides home; a number climbs to its value; a line draws itself and a dot rides its tip. One curve, one duration, and the founder's position is always the orange thing. The door itself moves in exactly one place, the footer, and that is the footer's job, not a motion device to borrow.
A layer of the arriving colour waits off the bottom-left corner and slides to cover the button over .85 seconds, the label crossfading over .35 as the ground changes under it. Orange things wipe to ink, ink things wipe to orange, and the purple call to action wipes out toward the top-right, leaving an outline. Nothing else on the site is a hover.
cubic-bezier(.22, 1, .36, 1) over .85 seconds. Fast out of the gate, then a long settle with no bounce. The same curve moves the wipes, the hero door, the labels, and the count-ups; springs are reserved for the door panel alone.
A statistic counts up from zero when it scrolls into view, on the same decelerating curve, over about 1.4 seconds. Once. Tabular figures so nothing jitters.
The How We Work graphics follow one colour contract so they read as one instrument. Purple is what DRF already believes, and it never moves. Lavender is what the founder can show today, thin and partial. Orange appears exactly once per graphic, always on the founder's own position: the dot that leaves the dotted circle and rides the curve off the top of the card; the pulse at the origin. When a new graphic is needed, it inherits this contract before it inherits anything else.
The lockup and the mark as SVG, one colour, ready to recolour. The panel's left corners are square: if yours are round, it is the old file.
Both marks on every ground as SVG, PNG and PDF, one-colour files on transparent, favicons and web clips, and social covers for LinkedIn, Facebook, X, YouTube and link previews.
Satoshi by the Indian Type Foundry, free for commercial use through Fontshare. Regular and Medium only.
The eleven values as CSS variables, plus the token names the build uses.
Wireframes, the design system, and this book live together and update as the brand does.
