Showcase
Light grey and Apple blue, the app's features in cards of different sizes and a phone in the big one.
Inter Tight · Inter
Bento
A grid of cards in different sizes
The page is a bento box: rounded cards of different sizes sitting side by side in one grid, each holding a single idea (a number, a photo, a feature, an address). Calm and orderly in the manner of Apple's pages, and a good fit for apps, products and modern cafés.
12 designs
What defines this style
- Typography
- A clean sans in heavy weights for headings and very large numbers inside the cards, with small quiet grey text.
- Colour
- A very light grey page (#F5F5F7 or close) or a very dark one, white or slightly darker cards, and one brand colour that fills only one or two cards.
- Layout
- A four-column CSS grid with varied spans (grid-column/grid-row: span), a large 2×2 card opening each grid, and fixed gaps of 12–16px; even the figures and the contact details become cards.
- Shapes
- Large rounded corners (24px), a very soft shadow, no heavy borders, pill buttons.
- Imagery
- Product or place photos that fill their card completely (object-fit: cover), and simple line icons.
- Motion
- Quiet: a card grows slightly on hover (scale 1.02) and the cards appear one after another on scroll.
- Details
- Small labels at the top of each card, huge numbers, a pill badge for status, a small arrow in the corner of clickable cards.
- Avoid
- Cards all the same size, heavy shadows, many colours, long text inside cards.
12 designs
Dashboard
Deep black, dark grey cards and mint green, as if the page were the budget app's own dashboard: big numbers and clear envelopes.
Sora · Inter
Roastery
Cream, coffee brown and amber; the beans, the numbers and the address each in its own card.
Bricolage Grotesque · DM Sans
Floorplan
White, olive and stone; desks, offices and meeting rooms in a grid of cards like rooms on a floor plan.
Manrope
Gears
Charcoal and neon orange; bikes, rides and figures in bold cards like the screen of a bike computer.
Archivo
Agenda
White, violet and lime; speakers, sessions and the countdown in one tidy grid.
Plus Jakarta Sans
Setlist
Pure white and tomato red; instruments, lessons and the week in big and small cards, like a setlist taped to the stage.
Syne · Inter
Itinerary
Sand and sea blue; trips, steps and photos in cards like the pages of a well-planned itinerary.
Fraunces · DM Sans
Checkup
White and a calm teal; services, hours and doctors in clear, easy-to-read cards.
Outfit
Shelves
White pages, highlighter yellow and blue, a bookshop sorted like a tidy shelf: the new titles in cards of different sizes and a collage of books up top.
Lexend
Capsule
Ivory, dusty pink and black; the exhibitions in cards like a tidy capsule collection, under a magazine-cover headline.
Instrument Serif · DM Sans
Star Chart
Black and the red of an observer's torch; the sky photos in cards of different sizes like a star chart.
Space Grotesk · Inter