Drams - Framer

Why it works

The layout strips away decoration entirely — breathing room and typography do all the talking. A high-contrast monochrome palette creates instant legibility while reinforcing the less-is-more philosophy. Functional spacing between components mirrors physical design principles, making every pixel feel intentional rather than decorative.

Who should look at this

Founders building design system brands or tool products who want to prove sophistication through subtraction, not features.

Signature technique

Use negative space as visual hierarchy — let gaps between sections replace visual separators entirely, forcing visitors to slow down and read with intention.

How the page is built

1. Minimal header. A small orange logo sits top-left, with About, Journal and Contact centred and a light and dark toggle top-right.
2. Orange-tinted portrait. A huge photograph, tinted completely in bright orange, fills the first screen, with a small 'Find us on Product Hunt' badge and vote count in the corner.
3. Headline. 'Framer components inspired by Dieter Rams' design principles' is set in big black type beside the photo, naming exactly what is for sale and what inspired it.
4. Filterable gallery. Tabs for All, Buttons, Switches, Sliders, Dials and Other sit above named pieces such as a rotary radio player and a digital clock radio, ending in a 'Load more' button.
5. Ten principles. A list under 'Good design is' runs from innovative and useful to honest, long-lasting and environmentally friendly, giving the brand a point of view.
6. Remix section. An invitation to remix a component and submit it to be featured, with numbered pieces labelled 'New'.
7. Updates and journal. A sign-up with a count of subscribers, a short journal and clear rules on how the assets may be used and remixed close the page.

Look and feel

A clean white page with heavy dark lettering and one saturated signal orange, used to tint the whole opening photograph so the first screen reads as a single block of colour. The restraint echoes the industrial design the components are inspired by.

Where it might not fit

A huge tinted portrait fills the first screen, so visitors scroll before they see a single component, and a cookie box sits over part of the area below it. A very strong single colour can also become tiring over a long page.

What to borrow

• Pick one saturated colour and tint your opening photograph with it, so the whole first screen feels like one deliberate block.
• Organise a collection with plain filter tabs, such as Buttons, Switches and Sliders, so visitors find what they need without using a search box.
• Print your guiding principles as a list, so the brand has a point of view that also explains the work.

Brief your developer

“I want a white page with a small orange logo and three centred links, a huge photograph tinted entirely in one bright colour, a big black headline beside it, and a row of filter tabs above a gallery of our work.”

Want a full version for your own site? Get the brief.

How can a collection of small items be easy to browse?

Drams offers plain filter tabs, All, Buttons, Switches, Sliders, Dials and Other, above a gallery with a 'Load more' button. Visitors narrow the collection in one click instead of scrolling through everything. Use short, concrete category names that match how people think about the items.

How can I show what my brand stands for?

Drams prints a list of ten guiding principles under the phrase 'Good design is', including innovative, useful and honest. It gives the work a point of view and tells visitors what the items are inspired by. A short list of principles can give your own brand the same backbone.