Back to Gallery

Clone comparison

Range Field Guide · Bento layout DESIGN.md

A field guide organized as a bento grid with practical content blocks, environmental color cues, and an optional dark theme.

Updated:

What this example demonstrates

  • Bento layout
  • Theme switch
  • Content hierarchy

DESIGN.md

The design rules extracted from the same page as this preview.

YAML contains exact design values · Markdown explains how to use them

Read the Google Labs format specification
Colors4
Typography7
Layout and responsive6
Components3

Foundations

The palette, type hierarchy, spacing, corners, and depth recorded in this file.

Colors

4
Surface Canvas
#f2f4ef
Surface Raised
#ffffff
Surface Raised Foreground
#f2f4ef
Accent 1
#c8f55b

Typography

2
Body
fontSize: 15pxlineHeight: 1.45

Build from the page's own design language

Arial,sans-serif

Display
lineHeight: .9letterSpacing: -.06em

Build from the page's own design language

Arial,sans-serif

Samples use fonts available in your browser. Exact values remain in the file.

Typography by region

5
PatternGuidance
Level 1 headingUse background `#172019`; color `#f2f4ef`; font-family `Arial,sans-serif`; font-size `clamp(42px,6vw,82px)`; letter-spacing `-.06em`; line-height `.9`; margin `30px 0`.
Level 2 headingUse background `#fff`; color `#172019`; font-family `Arial,sans-serif`.
PageUse font-family `Arial,sans-serif`; font-size `15px`; font-stretch `normal`; font-style `normal`; font-variant `normal`; font-weight `normal`; line-height `1.45`.
ParagraphUse font-family `Arial,sans-serif`. Observed alternatives: - Use background `#172019`; color `#f2f4ef`. - Use background `#c8f55b`; color `#172019`. - Use background `#fff`; color `#172019`.
Strong textUse color `#172019`; font-family `Arial,sans-serif`. Observed alternatives: - Use background `#c8f55b`; display `block`; font-size `74px`; line-height `1`; margin-top `36px`. When viewport width <= 760px, use font-size `56px`. - Use background `#fff`; font-size `42px`.

Layout and responsive

Layout and viewport rules appear here only when the DESIGN.md contains matching evidence.

PatternGuidance
ArticleUse border `1px solid #d4d9d1`; border-radius `18px`; font-family `Arial,sans-serif`; overflow `hidden`; padding `24px`. When viewport width <= 760px, use grid-column `1`; grid-row `auto`. Observed alternatives: - Use background `#172019`; color `#f2f4ef`; display `flex`; flex-direction `column`; grid-column `span 8`; grid-row `span 2`; justify-content `space-between`. When viewport width <= 760px, use min-height `430px`. - Use background `#c8f55b`; color `#172019`; grid-column `span 4`. - Use background `#fff`; color `#172019`; display `grid`; gap `30px`; grid-column `span 8`; grid-template-columns `1fr 1fr`. When viewport width <= 760px, use grid-template-columns `1fr`. - Use background `#fff`; color `#172019`; grid-column `span 4`. - Use background `linear-gradient(135deg,transparent 48%,#d4d9d1 49% 51%,transparent 52%),#fff`; color `#172019`; grid-column `span 4`; grid-row `span 2`. When viewport width <= 760px, use min-height `280px`.
Flex containerUse color `#172019`; display `flex`; font-family `Arial,sans-serif`. Observed alternatives: - Use align-items `center`; gap `20px`. - Use border-top `1px solid #d4d9d1`; justify-content `space-between`; padding `12px 0`.
HeaderUse align-items `center`; color `#172019`; display `flex`; font-family `Arial,sans-serif`; justify-content `space-between`; margin `auto`; max-width `1280px`; padding-bottom `22px`.
Main contentUse background `#f2f4ef`; color `#172019`; font-family `Arial,sans-serif`; min-height `100vh`; padding `24px`. When viewport width <= 760px, use padding `14px`.
PageUse margin `0`.
SectionUse color `#172019`; display `grid`; font-family `Arial,sans-serif`; gap `14px`; grid-auto-rows `minmax(150px,auto)`; grid-template-columns `repeat(12,1fr)`; margin `auto`; max-width `1280px`. When viewport width <= 760px, use grid-template-columns `1fr`.

Components and states

Component facts group the properties and states that were traced to the same page capture.

Components

2

Main Content

backgroundColor
{colors.surface-canvas}
textColor
#172019
padding
24px

Main Content Viewport Width At Most 760px

padding
14px
PatternGuidance
CheckboxUse color `#172019`; font `inherit`; font-family `Arial,sans-serif`.

What is included

See which parts of the website style are included in this file.

What could not be captured

  • The capture does not establish every font-size, font-weight, letter-spacing, line-height, opaque-background value.
  • Some page-specific relationships and generated decorations could not be summarized as reusable element styles. Use the accompanying source project for those details.

Recreation challenge

Cards of different size need a stable hierarchy on wide screens and a natural sequence when the grid becomes one column.

Limits of this example

Guidance and conditions are illustrative, not safety advice. A real field product needs verified data, offline behavior, and location-aware states.

DESIGN.md

Design facts from the same capture

Download DESIGN.md
  • Section: Use color `#172019`; display `grid`; font-family `Arial,sans-serif`; gap `14px`; grid-auto-rows `minmax(150px,auto)`; grid-template-columns `repeat(12,1fr)`; margin `auto`; max-width `1280px`. When viewport width <= 760px, use grid-template-columns `1fr`.
  • Main content: Use background `#f2f4ef`; color `#172019`; font-family `Arial,sans-serif`; min-height `100vh`; padding `24px`. When viewport width <= 760px, use padding `14px`.
  • Strong text: Use color `#172019`; font-family `Arial,sans-serif`. Observed alternatives: - Use background `#c8f55b`; display `block`; font-size `74px`; line-height `1`; margin-top `36px`. When viewport width <= 760px, use font-size `56px`. - Use background `#fff`; font-size `42px`.
  • Checkbox: Use color `#172019`; font `inherit`; font-family `Arial,sans-serif`.
  • Surface Canvas: #f2f4ef
  • Level 1 heading: Use background `#172019`; color `#f2f4ef`; font-family `Arial,sans-serif`; font-size `clamp(42px,6vw,82px)`; letter-spacing `-.06em`; line-height `.9`; margin `30px 0`.

Use this workflow for your own page

Turn your public webpage into a project, then give the source and DESIGN.md to your coding tool. These guides walk through the steps.

More from Gallery

Orbit DeskA space-operations console with light and dark themes, dense system readings, and navigation that contracts cleanly on smaller screens.Workshop ManualA technical workshop manual with blueprint styling, numbered procedures, CSS diagrams, and responsive reference panels.

Extract your own webpage

Enter a public page you own or have permission to use. Get a Tailwind CSS v4 project and DESIGN.md. Your URL is kept when you sign in.