Back to Gallery

Clone comparison

Fieldnote Assistant · Long-form chat DESIGN.md

A long-form assistant workspace with conversation history, evidence cards, and a composer that stays available as the transcript grows.

Updated:

What this example demonstrates

  • Long-form chat
  • Evidence panels
  • Sticky composer

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
Colors16
Typography9
Layout and responsive10
Components5

Foundations

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

Colors

16
Action Background
#17181b
Action Background Dark
#f4f6f8
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
#087cf0
Accent 2
#55a7ff

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: 18px

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.65

Build from the page's own design language

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

H2
fontSize: 18pxlineHeight: 1.65

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 `18px`; margin `0px`. When dark mode, use background `#191c22`.
Level 2 headingObserved alternatives: - Use font-size `14px`. When dark mode, use background `#191c22`. - Use font-size `18px`; line-height `1.65`; margin `0px 0px 10px`. When dark mode, use background `#111318`.
PageUse font-family `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`; font-size `14px`.
ParagraphUse line-height `1.65`; margin `0px 0px 12px`. Observed alternatives: - When dark mode, use background `#111318`. - When dark mode, use background `#242831`.
Strong textObserved alternatives: - Use color `inherit`. When dark mode, use background `#191c22`. - Use color `inherit`. When dark mode, use background `#242831`. - Use display `block`; margin-bottom `5px`. When dark mode, use background `#191c22`. - Use line-height `1.65`. When dark mode, use background `#111318`. - Use line-height `1.65`. When dark mode, use background `#242831`.

Spacing

3
Step 1
12px
Step 2
20px
Step 3
28px

Corner radius

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

Shadows

2
rgba(0, 0, 0, 0.2) 0px 8px 24px
rgba(25, 29, 41, 0.125) 0px 12px 35px

Layout and responsive

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

PatternGuidance
ArticleObserved alternatives: - Use border `1px solid #e3e4e8`; border-radius `10px`; margin-top `10px`; padding `12px`. - Use display `grid`; gap `12px`; grid-template-columns `36px minmax(0px, 1fr)`; margin-bottom `28px`.
Complementary contentUse background `#fff`; padding `18px 14px`. When dark mode, use background `#191c22`. Observed alternatives: - Use border-left `1px solid #e3e4e8`; border-right `0px`. When viewport width <= 900px, use display `none`. - Use border-right `1px solid #e3e4e8`.
Flex containerUse display `flex`. Observed alternatives: - Use align-items `center`; font-weight `750`; gap `10px`. When dark mode, use background `#191c22`. - Use align-items `center`; line-height `1.65`. - Use justify-content `space-between`.
Grid containerUse display `grid`; grid-template-columns `220px minmax(0px, 1fr) 292px`; min-height `100vh`. When viewport width <= 900px, use grid-template-columns `1fr`.
HeaderUse background `#fff`; border-bottom `1px solid #e3e4e8`; padding `16px 24px`. When dark mode, use background `#191c22`.
Main contentUse display `grid`; grid-template-rows `auto 1fr auto`; height `100vh`; min-width `0px`. When viewport width <= 900px, use height `100vh`.
NavigationUse display `grid`; gap `5px`; margin-top `20px`.
Page rootUse margin `0px`; min-height `100%`.
PageUse margin `0`; min-height `100%`.
SectionUse overflow `auto`; padding `28px max(24px, 8vw)`. When viewport width <= 900px, use padding `22px 18px`.

Components and states

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

Components

1

Form

rounded
{rounded.step-5}
padding
10px
PatternGuidance
ButtonUse font `inherit`. Observed alternatives: - Use background `#087cf0`; border `0px`; border-radius `10px`; color `white`; 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 14px`. When dark mode, use background `#55a7ff`. - 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 `#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`.
FormUse background `#fff`; border `1px solid #e3e4e8`; border-radius `14px`; box-shadow `rgba(25, 29, 41, 0.125) 0px 12px 35px`; margin `0px max(20px, 8vw) 22px`; padding `10px`. When dark mode, use background `#191c22`. When viewport width <= 900px, use margin `0px 16px 16px`.
Multiline inputUse background `#fff`; border `0px`; color `#17181b`; display `block`; font `inherit`; min-height `62px`; width `100%`. When dark mode, use background `#191c22`; color `#f4f6f8`.
Navigation linkUse border-radius `9px`; color `inherit`; display `grid`; gap `3px`; padding `10px`. Observed alternatives: - Use only the common rules above. - Use background `#f1f2f4`. When dark mode, use background `#242831`.

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

The clone has to preserve readable measure, evidence hierarchy, and sticky composer behavior across a tall, content-heavy page.

Limits of this example

The assistant does not generate responses and cited material is sample content. Connect your own model, streaming states, and source validation.

DESIGN.md

Design facts from the same capture

Download DESIGN.md
  • Grid container: Use display `grid`; grid-template-columns `220px minmax(0px, 1fr) 292px`; min-height `100vh`. When viewport width <= 900px, use grid-template-columns `1fr`.
  • Article: Observed alternatives: - Use border `1px solid #e3e4e8`; border-radius `10px`; margin-top `10px`; padding `12px`. - Use display `grid`; gap `12px`; grid-template-columns `36px minmax(0px, 1fr)`; margin-bottom `28px`.
  • Level 1 heading: Use font-size `18px`; margin `0px`. When dark mode, use background `#191c22`.
  • Form: Use background `#fff`; border `1px solid #e3e4e8`; border-radius `14px`; box-shadow `rgba(25, 29, 41, 0.125) 0px 12px 35px`; margin `0px max(20px, 8vw) 22px`; padding `10px`. When dark mode, use background `#191c22`. When viewport width <= 900px, use margin `0px 16px 16px`.
  • Action Background: #17181b
  • Spacing: 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

Atlas DispatchA dense dispatch dashboard with status cards, an operational table, restrained color roles, and compact responsive navigation.Orbit DeskA space-operations console with light and dark themes, dense system readings, and navigation that contracts cleanly on smaller screens.

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.