Bento Grids (Apple Breeze):Bento Grids

The Bento Grids style is a visual design style characterized by minimalism, clarity and a high degree of organization, commonly found in modern web and mobile app interfaces. It is achieved by dividing content into neat grid modules, each containing icons, headings, and short descriptions, creating a layout that resembles the compartmentalized arrangement of food in a bento box. This style emphasizes white space, alignment and consistency, using soft background colors contrasted with sharp foreground elements to create a clean, comfortable reading experience. For example, on a personal blog or portfolio page, Bento Grids would display project profiles, article summaries, or skill labels on cards of different sizes, creating an overall visual effect of order and beauty.

Cue word reference

Design a modern, minimalist, high-end product/service launch page with a Bento Grid style layout that presents all key information compactly within a single screen.

Content highlights: [fill in content highlights here

Design Requirements:
1. Bento Grid layout: create a grid of different sized cards, each containing a specific category of information, with a compact but not overcrowded layout.
2. Card design: all cards should have clear rounded corners (20px border radius), white/light gray background, subtle shadow effect, and a slight upward floating effect when hovering.
3. Color scheme: Minimalist color scheme, mainly white/light grey background with gradient colors as accent colors (specific colors can be specified, e.g. from light purple #C084FC to dark purple #7E22CE).
4. Typographic hierarchy:
   - Large bold numbers/headings: use gradient color to emphasize key data points and main headings
   - Medium-large and small headings: used for card headings to clearly indicate content category
   - Small text: use gray to present supporting descriptive text
5. Content organization:
   - Top row: main announcements, product features, performance indicators or key selling points
   - Middle row: product specifications, technical details, and functional features
   - Bottom row: User guide and conclusion/call to action
6. Visual elements:
   - Use simple icons to represent features
   - Progress bars or charts to show comparative data
   - Grids and card layouts create visual rhythm
   - Tabs to display categorized information in small capsules
7. Responsive design: pages should be able to adapt to different screen sizes and maintain good readability on mobile devices.

Design style reference:
- The overall design style is similar to the product specification page on Apple's website.
- Use a lot of white space and simple visual elements.
- Emphasize figures and key features, and reduce lengthy text.
- Use gradient colors to highlight important data
- Appropriate spacing between cards to create clear visual separation

Case Studies

Figma fine-tuned design draft

Official tutorials on how to use it:Figma Learning Path - Basic Introduction, Chinese Tutorial - Figma Chinese Community

Browser plugin Chinese plugin installation and download:FigmaCN - Chrome Web Store

Client (recommended):‍ ‍ Figma Chinese + Installation Tutorial - Flying Book Cloud Documents

First we need to find the core Figma plugin we're going to use this time, html.to.design. Simply search for it by clicking on the icon circled by the Tab bar at the bottom of any Figma file.

Then we enter the URL of the page we want to import, if you don't have it you can deploy it with Youware and click the Import button.

First of all, we want to give the header of the title is also added to the card, at this time we chose to find the header Header width than the following all the cards add up to the width of the card is wider, so first of all, their width is unified to 1472px.

After we want to copy the style of the following gray card without his content, just pick a random gray card below, and then right-click - Copy and Paste as - Copy Properties on the line, Paste is the same as selecting on the Header card select Paste Properties, you will find that the title of the card also has a card.

Next we fix the problem that the cards here in Model Scale don't take up all the space, by selecting the Model Scale card and holding down the Option button we find that his width to the bimodal training card is 398 and then they need to be spaced 24px apart.

So the width of the card for the model scale should be 350+398-24, you can write the math formula directly in the width input box, Figma will do the math for you, now isn't it OK?

Finally we do the last step before export, the whole card around the margins of some problems, left and right is very wide up and down is very narrow, we want them to be the same, this time we just need to select the html-Body layer, and then the red box part of the spacing are changed to a uniform 32 on it.

If you want to add a gradient border to the image like I did in the showcase image above you can use postspark (https://postspark.app/screenshot) such tools.