Back to Gallery

Clone comparison

Relay Mailroom · Three-pane mail DESIGN.md

A three-pane email workspace that balances folder navigation, message scanning, and a focused reading surface.

Updated:

What this example demonstrates

  • Three-pane mail
  • Message hierarchy
  • Mobile reading

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
Colors17
Typography9
Layout and responsive10
Components9

Foundations

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

Colors

17
Action Background
#f1f2f4
Action Background Dark
#242831
Action Foreground
rgb(255, 255, 255)
Action Foreground Dark
#f4f6f8
Control Background
#ffffff
Control Background Dark
#191c22
Surface Canvas
#f7f7f8
Surface Canvas Dark
#111318
Surface Raised
#ffffff
Surface Raised Dark
#191c22
Surface Raised Foreground
#747780
Surface Raised Foreground Dark
#9ca3af
Text Body
#17181b
Text Body Dark
#f4f6f8
Accent 1
rgb(52, 65, 86)
Accent 2
#16885c
Accent 3
#55c995

Typography

4
Body
fontSize: 14px

Build from the page's own design language

Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif

Display
fontSize: 20px

Build from the page's own design language

Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif

H2
fontSize: 26px

Build from the page's own design language

Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif

Body Text
fontSize: 14pxlineHeight: 1.7

Build from the page's own design language

Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif

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

Text and surface colors

1
PatternGuidance
PageUse color `#17181b`. When dark mode, use background `#111318`; color `#f4f6f8`.

Typography by region

5
PatternGuidance
Level 1 headingUse font-size `20px`; margin `0px 0px 12px`. When dark mode, use background `#111318`.
Level 2 headingUse font-size `26px`; margin `0px 0px 16px`. When dark mode, use background `#191c22`.
PageUse font-family `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`; font-size `14px`.
ParagraphUse color `rgb(66, 69, 77)`; line-height `1.7`. When dark mode, use background `#191c22`; color `#f4f6f8`.
Strong textObserved alternatives: - Use color `inherit`. When dark mode, use background `#111318`. - Use color `inherit`. When dark mode, use background `#191c22`. - When dark mode, use background `#111318`. - When dark mode, use background `#191c22`.

Spacing

5
Step 1
4px
Step 2
8px
Step 3
12px
Step 4
20px
Step 5
28px

Corner radius

6
Step 1
8px
Step 2
9px
Step 3
10px
Step 4
11px
Step 5
12px
Step 6
14px

Shadows

1
rgba(0, 0, 0, 0.2) 0px 8px 24px

Layout and responsive

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

PatternGuidance
ArticleUse max-width `760px`; padding `38px 42px`. When viewport width <= 900px, use padding `28px 22px`.
Complementary contentUse background `#fff`; border-right `1px solid #e3e4e8`; padding `18px 12px`. When dark mode, use background `#191c22`. When viewport width <= 900px, use display `none`.
Flex containerUse display `flex`. Observed alternatives: - Use align-items `center`; background `#f7f7f8`; border `1px solid #e3e4e8`; border-radius `12px`; justify-content `space-between`; margin-top `28px`; padding `14px`. When dark mode, use background `#111318`. - Use align-items `center`; color `inherit`; gap `9px`. - Use align-items `center`; font-weight `750`; gap `10px`. When dark mode, use background `#191c22`. - Use align-items `center`; gap `11px`; margin `22px 0px`. - Use align-items `center`; gap `8px`; margin-left `auto`. - Use border-bottom `1px solid #e3e4e8`; gap `8px`; padding `16px 22px`.
Grid containerUse display `grid`; grid-template-columns `208px 330px minmax(0px, 1fr)`; min-height `100vh`. When viewport width <= 900px, use grid-template-columns `1fr`.
HeaderUse border-bottom `1px solid #e3e4e8`; padding `18px`.
Main contentUse background `#fff`; min-width `0px`. When dark mode, use background `#191c22`. When viewport width <= 900px, use min-height `100vh`.
NavigationUse display `grid`. Observed alternatives: - Use only the common rules above. - Use gap `4px`.
Page rootUse margin `0px`; min-height `100%`.
PageUse margin `0`; min-height `100%`.
SectionUse background `rgb(251, 251, 252)`; border-right `1px solid #e3e4e8`; min-width `0px`. When dark mode, use background `#111318`. When viewport width <= 900px, use display `none`.

Components and states

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

Components

6

Paragraph

textColor
rgb(66, 69, 77)

Paragraph Dark Mode

textColor
{colors.action-foreground-dark}

Section

backgroundColor
rgb(251, 251, 252)

Section Dark Mode

backgroundColor
{colors.surface-canvas-dark}

Header

padding
18px

Text Input

rounded
{rounded.step-3}
PatternGuidance
ButtonUse font `inherit`. Observed alternatives: - Use background `#17181b`; border `0px`; border-radius `11px`; color `rgb(255, 255, 255)`; font-weight `750`; margin `18px 0px`; padding `11px`; width `100%`. When dark mode, use background `#f4f6f8`. - Use background `#f1f2f4`; border `0px`; border-radius `10px`; color `#17181b`; font-family `inherit`; font-feature-settings `inherit`; font-size `inherit`; font-stretch `inherit`; font-style `inherit`; font-variant `inherit`; font-variation-settings `inherit`; font-weight `650`; line-height `inherit`; min-height `34px`; padding `0px 12px`. When dark mode, use background `#242831`; color `#f4f6f8`. - Use background `#f1f2f4`; border `0px`; border-radius `10px`; font-family `inherit`; font-feature-settings `inherit`; font-size `inherit`; font-stretch `inherit`; font-style `inherit`; font-variant `inherit`; font-variation-settings `inherit`; font-weight `650`; line-height `inherit`; min-height `34px`; width `34px`. When dark mode, use background `#242831`. - Use background `#fff`; border `1px solid #e3e4e8`; border-radius `999px`; bottom `14px`; box-shadow `rgba(0, 0, 0, 0.2) 0px 8px 24px`; color `#17181b`; display `grid`; height `36px`; place-items `center`; position `fixed`; right `14px`; width `36px`; z-index `20`. When dark mode, use background `#191c22`; color `#f4f6f8`.
Navigation linkUse color `inherit`. Observed alternatives: - Use background `#f1f2f4`; border-radius `8px`; display `flex`; font-weight `700`; justify-content `space-between`; padding `9px 10px`. When dark mode, use background `#242831`. - Use background `#fff`; border-bottom `1px solid #e3e4e8`; box-shadow `inset 3px 0 #087cf0`; display `grid`; gap `7px`; padding `15px 18px`. When dark mode, use background `#191c22`; box-shadow `inset 3px 0 #55a7ff`. - Use border-bottom `1px solid #e3e4e8`; display `grid`; gap `7px`; padding `15px 18px`. - Use border-radius `8px`; display `flex`; justify-content `space-between`; padding `9px 10px`.
Text inputUse background `#fff`; border `1px solid #e3e4e8`; border-radius `10px`; font `inherit`; padding `10px 12px`; width `100%`. When dark mode, use background `#191c22`.

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 combinations of layout, theme and interaction states could not be established from this capture.
  • Some conditional styles are not described because their affected elements could not be established.
  • 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

Desktop depends on three coordinated columns, while small screens need a useful reading order instead of a squeezed version of the same layout.

Limits of this example

Message actions are visual examples only. Keyboard shortcuts, search, and mail synchronization are outside the static result.

DESIGN.md

Design facts from the same capture

Download DESIGN.md
  • Grid container: Use display `grid`; grid-template-columns `208px 330px minmax(0px, 1fr)`; min-height `100vh`. When viewport width <= 900px, use grid-template-columns `1fr`.
  • Article: Use max-width `760px`; padding `38px 42px`. When viewport width <= 900px, use padding `28px 22px`.
  • Level 1 heading: Use font-size `20px`; margin `0px 0px 12px`. When dark mode, use background `#111318`.
  • Text input: Use background `#fff`; border `1px solid #e3e4e8`; border-radius `10px`; font `inherit`; padding `10px 12px`; width `100%`. When dark mode, use background `#191c22`.
  • Action Background: #f1f2f4
  • Spacing: 4px · 8px · 12px · 20px · 28px

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

Range Field GuideA field guide organized as a bento grid with practical content blocks, environmental color cues, and an optional dark theme.Block AssemblyA studio portfolio driven by asymmetric blocks, sharp geometry, primary colors, and a deliberately unconventional reading path.

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.