Tuwa Sjöberg

Generated Nov 2, 2026

DESIGN.md for app.dust.tt

app.dust.tt/w/L9mVlO5aEj/pods/vlt_9UFRqFzGtAlKUNVwgPot#conversations6 colors3 componentsinterFont

Remix

2 screenshots captured· app.dust.tt

1 / 2 · Dust · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: App
description: |
  Dust presents a clean, minimal authentication interface centered on clarity
  and trust. The visual language is contemporary and approachable, using a
  bright primary blue as the sole accent against a neutral monochromatic
  foundation. The design favors whitespace and geometric simplicity, with soft
  curves applied selectively to interactive elements. The overall mood is
  professional yet welcoming—the interface feels modern without being excessive,
  and the generous spacing and legible typography invite confidence in the
  authentication flow. The brand's colorful, playful mark at the top anchors the
  identity, contrasting sharply with the understated surrounding interface.
source:
  url: "https://app.dust.tt/w/L9mVlO5aEj/pods/vlt_9UFRqFzGtAlKUNVwgPot#conversations"
  pagesAnalyzed: 1
  extractedAt: 2026-11-02
  tokensMeasured: true
colors:
  primary: "#1C91FF"
  canvas: "#FFFFFF"
  on-primary: "#FFFFFF"
  ink: "#000000"
  body: "#111418"
  neutral-1: "#E5E7EB"
  neutral-2: "#202020"
typography:
  heading:
    fontFamily: interFont
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.15px
  body:
    fontFamily: interFont
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  button:
    fontFamily: interFont
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  label-md:
    fontFamily: interFont
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label-sm:
    fontFamily: interFont
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.43
    letterSpacing: 0px
  caption:
    fontFamily: interFont
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0.03px
rounded:
  none: 0px
  xs: 8px
  sm: 12px
spacing:
  xxs: 8px
  xs: 12px
  sm: 16px
  md: 20px
  lg: 24px
  xl: 64px
elevationStrategy: color-blocking
themes:
  derived: dark   # the other theme is the site's measured palette
  light:
    bg: "#FFFFFF"
    surface: "#F7F7F7"
    surfaceRaised: "#EDEDED"
    text: "#000000"
    textMuted: "#111418"
    border: "#E0E0E0"
    accent: "#1C91FF"
    accentFg: "#000000"
    focusRing: "#1C91FF"
    elevation: shadow
  dark:
    bg: "#090F15"
    surface: "#181D23"
    surfaceRaised: "#24292F"
    text: "#F6FBFF"
    textMuted: "#9CA1A6"
    border: "#30353A"
    accent: "#1C91FF"
    accentFg: "#0B0B0C"
    focusRing: "#1C91FF"
    elevation: "border+surface"
components:
  button-primary:
    typography: "{typography.button}"
    textColor: "{colors.on-primary}"
    height: 40px
    padding: "0px 16px 0px 16px"
    rounded: "{rounded.sm}"
    backgroundColor: "{colors.primary}"
  button-filled:
    typography: "{typography.button}"
    textColor: "{colors.neutral-2}"
    height: 40px
    padding: "0px 8px 0px 8px"
    boxShadow: "rgba(0, 0, 0, 0.192) 0px 0px 0px 1px inset"
    rounded: "{rounded.sm}"
    backgroundColor: "rgba(255, 255, 255, 0.8)"
  card:
    typography: "{typography.label-md}"
    textColor: "{colors.neutral-2}"
    padding: "0px 19px 0px 19px"
  link:
    typography: "{typography.body}"
    textColor: "{colors.primary}"
states:
  other-focus:
    target: other
    state: focus
    outline: none
  other-active:
    target: other
    state: active
    boxShadow: none
  link-focus-visible:
    target: link
    state: focus-visible
    outlineWidth: 2px
  other-focus-visible:
    target: other
    state: focus-visible
    outlineWidth: 2px
breakpoints:
  - width: 375
    containerWidth: 375
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 24
    bodyPx: 16
    sectionPaddingX: 0
  - width: 768
    containerWidth: 768
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 24
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1024
    containerWidth: 1024
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 24
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1280
    containerWidth: 1280
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 24
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1440
    containerWidth: 1440
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 24
    bodyPx: 16
    sectionPaddingX: 0
coverage:
  statesFound: 69
  gradientsFound: 0
  rolesUnassigned: 2
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: false
  semanticRampDeclared: false

Design System Inspired by Dust

1. Visual Theme & Atmosphere

Dust presents a clean, minimal authentication interface centered on clarity and trust. The visual language is contemporary and approachable, using a bright primary blue as the sole accent against a neutral monochromatic foundation. The design favors whitespace and geometric simplicity, with soft curves applied selectively to interactive elements. The overall mood is professional yet welcoming—the interface feels modern without being excessive, and the generous spacing and legible typography invite confidence in the authentication flow. The brand's colorful, playful mark at the top anchors the identity, contrasting sharply with the understated surrounding interface.

Key Characteristics

Single-accent design system anchored on a vibrant primary blue ({colors.primary} — #1C91FF)
Clean neutral surfaces using near-black ink on pure white canvas
Minimal shadow/elevation—depth comes primarily from color and spacing, not layering
Soft rounded corners on interactive elements; sharp corners on containers
Large, generous touch targets and whitespace for breathing room
Contemporary sans-serif typography with precise hierarchy
Flat visual language with one inset border on buttons as the primary detail

2. Color Palette & Roles

Primary

Primary / Brand ({colors.primary} — #1C91FF): Primary call-to-action buttons, brand accent, active states, and hyperlinks. Core interactive color signaling the user's next action.

Neutral Scale

Canvas ({colors.canvas} — #FFFFFF): Default page background and card surfaces. Also serves as label text color when placed over brand-colored surfaces.
Ink ({colors.ink} — #000000): Headings and primary text, reserved for highest contrast and emphasis.
Body ({colors.body} — #111418): Body copy, general text content, and secondary text layers.

Decorative / Unassigned

Neutral-1 ({colors.neutral-1} — #E5E7EB): Light neutral, no specific semantic role assigned in the current interface.
Neutral-2 ({colors.neutral-2} — #202020): Dark neutral, no specific semantic role assigned in the current interface.

3. Typography Rules

Font Family

Primary: Inter (fallback: system sans-serif stack). Font serves all text roles across the interface.

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Heading	Inter	24px	600	1.25	−0.15px	Page titles and primary headings; measured on `<h1>`
Label (large)	Inter	16px	400	1.5	0px	Form labels and field descriptions
Button	Inter	16px	500	1.5	0px	All button text; measured on `<button>`
Label (small)	Inter	14px	600	1.43	0px	Emphasized labels and secondary headings
Body	Inter	14px	400	1.43	0px	Body copy and general text content
Caption	Inter	12px	400	1.33	0.03px	Fine print, helper text, and footnotes

Principles

Hierarchical contrast achieved through weight (400 vs. 600) and size steps rather than color shifts.
Negative letter-spacing on headings (−0.15px) creates visual tightness and confidence at larger sizes.
Generous line-height across all sizes (minimum 1.25) ensures readability and accessibility.
Button and label weights (500–600) create clear distinction from body text (400).

4. Component Stylings

Buttons

Primary Button

Background: {colors.primary} (#1C91FF)
Text Color: {colors.canvas} (#FFFFFF)
Padding: 0px 16px
Height: 40px
Font: {typography.button} (16px, weight 500, line-height 1.5)
Border Radius: {rounded.sm} (12px)
Border: none
Box Shadow: rgba(0, 0, 0, 0) 0px 0px 0px 1px inset (minimal inset outline for definition)
Width: Full width (402px in measured context)

Secondary Button (Filled Alternative)

Background: rgba(255, 255, 255, 0.8) (white with 80% opacity)
Text Color: {colors.neutral-2} (#202020)
Padding: 0px 8px
Height: 40px
Font: {typography.button} (16px, weight 500, line-height 1.5)
Border Radius: {rounded.sm} (12px)
Border: none
Box Shadow: rgba(0, 0, 0, 0.192) 0px 0px 0px 1px inset
Width: Full width (402px in measured context)

Inputs & Forms

Email Input

Background: {colors.canvas} (#FFFFFF)
Text Color: {colors.body} (#111418)
Placeholder Color: #9CA3AF (inferred from visual)
Padding: Varies by field; measured as standard form input padding
Height: Standard input height matching button (40px contextually)
Font: {typography.label-md} (16px, weight 400, line-height 1.5)
Border Radius: {rounded.xs} (8px)
Border: Subtle hairline on blur; blue border on focus
Box Shadow: None at rest; standard browser focus outline on focus-visible

Cards & Containers

Default Card

Background: rgba(0, 0, 0, 0) (transparent)
Text Color: {colors.neutral-2} (#202020)
Padding: 0px 19px
Border Radius: {rounded.none} (0px, sharp corners)
Border: None
Box Shadow: None
Font: {typography.label-md} (16px, weight 400, line-height 1.5)

5. Layout Principles

Spacing System

Base unit: 8px. All spacing values scale from this foundation in consistent increments.

{spacing.xxs} = 8px — Tight spacing between related elements, internal padding on small components
{spacing.xs} = 12px — Small gaps between sections or inputs
{spacing.sm} = 16px — Standard padding around form elements and sections
{spacing.md} = 20px — Medium gaps between major sections
{spacing.lg} = 24px — Large gaps separating distinct content blocks
{spacing.xl} = 64px — Extra-large spacing for major vertical breaks or hero sections

Grid & Container

The measured page renders at full viewport width with consistent horizontal padding. The form container centers on the page with fixed width (approximately 402px for input/button components). No multi-column grid structure is present; layout is single-column with centered content. Section padding on left/right: 0px at all breakpoints (content handles its own padding internally).

Whitespace Philosophy

Whitespace is generous and intentional. The login form floats in the center of the screen with significant breathing room on all sides, creating a sense of focus and calm. Vertical rhythm is maintained through consistent spacing between input, button, divider text ("OR"), and secondary actions. This spacing reinforces the logical flow of the authentication sequence.

Border Radius Scale

{rounded.none} = 0px — Applied to cards and containers for sharp, minimal appearance
{rounded.xs} = 8px — Applied to input fields for subtle softness
{rounded.sm} = 12px — Applied to buttons for noticeable but not extreme rounding

Border Widths

The system uses minimal borders. Interactive elements (buttons, inputs) feature a subtle 1px inset border (rgba(0, 0, 0, 0) 0px 0px 0px 1px inset on buttons) for definition without visual weight. Input focus states apply browser-default outlines or custom blue outlines.

6. Depth & Elevation

Level	Treatment	Use
Flat	No shadow; color only	Cards, backgrounds, neutral surfaces
Minimal	`rgba(0, 0, 0, 0) 0px 0px 0px 1px inset`	Button inset definition; subtle visual anchor

Shadow Philosophy: This is a flat, color-blocking system. Depth comes from contrast of surface colors (white on light gray, primary blue on white), spacing, and typography rather than shadows. The single inset border on buttons serves as a visual detail to prevent buttons from appearing floating or poorly defined. No drop shadows, no layered elevation table—just flat planes with 1px visual refinement.

Opacity Levels

90% (0.90) — Used on secondary button background (rgba(255, 255, 255, 0.8) approximates this) to create visual distinction from true white while maintaining lightness

7. Do's and Don'ts

Do

Use the primary blue (#1C91FF) for all primary CTAs and interactive affordances. It is the sole accent; overuse will dilute its signal.
Maintain large touch targets (40px minimum height) for all buttons and interactive inputs.
Stack inputs and buttons vertically with consistent spacing ({spacing.sm} or {spacing.md} between them).
Center authentication forms on the page with generous surrounding whitespace.
Apply soft rounding ({rounded.sm} or {rounded.xs}) only to interactive elements (buttons, inputs); keep containers sharp.
Use Inter or approved system sans-serif at the specified weights (400, 500, 600) to maintain hierarchy.
Preserve the negative letter-spacing on headings (−0.15px) for brand consistency.
Apply the inset border detail on all buttons for visual coherence, even secondary buttons.

Don't

Do not introduce drop shadows or complex elevation states. This system is flat.
Do not use neutral colors for primary CTAs. Always reserve the primary blue for the strongest call-to-action.
Do not reduce the form's whitespace or center margin to fit more content; respacing is a signal that layout needs redesign.
Do not apply border-radius to card or container elements. Sharp corners define their minimal, neutral role.
Do not mix font families. Inter is the sole typeface.
Do not use colors outside the defined palette without explicit design review.
Do not remove the inset border on buttons or replace it with a drop shadow.
Do not create intermediate button states (e.g., disabled, loading) without explicit design guidance; no semantic status colors exist yet.

8. Responsive Behavior

Breakpoints

The extracted data shows that at all measured breakpoints (375px, 768px, 1024px, 1280px, 1440px), the page maintains identical layout and typography sizes. No breakpoint-driven changes are currently implemented.

Breakpoint	Width	Heading Size	Body Size	Layout Changes	Notes
Mobile	375px	24px	16px	Single column, centered form	No nav collapse observed
Tablet	768px	24px	16px	Single column, centered form	Identical to mobile
Desktop	1024px	24px	16px	Single column, centered form	No multi-column grid
Large	1280px	24px	16px	Single column, centered form	Consistent throughout
XL	1440px	24px	16px	Single column, centered form	Full-width page applies same rules

Key Observation: The form stays visually centered with consistent sizing across all viewports. The system relies on whitespace (not responsive resizing) to adapt to larger screens.

Touch Targets

Buttons: Minimum 40px height, full width (402px in measured form context), with 16px horizontal padding for comfortable tap zones
Inputs: Minimum 40px height to match button sizing for consistent vertical rhythm
Links: Standard text link sizing (14px) with adequate line-height (1.43) and surrounding whitespace for comfortable clicking

Collapsing Strategy

No collapsing strategy is currently observed. Form width, typography, and layout remain constant across all breakpoints. This suggests the page is either fixed-width or the measured authentication flow does not include responsive breakpoints. The system should maintain the centered form pattern and ensure adequate margins on ultra-wide screens.

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Primary Blue ({colors.primary} — #1C91FF) — all primary actions, links, active states
Background / Canvas: White ({colors.canvas} — #FFFFFF) — page background, input surfaces
Heading / Ink: Black ({colors.ink} — #000000) — highest-contrast text
Body Text: Near-Black ({colors.body} — #111418) — standard body copy
Decorative Neutrals: Light Gray ({colors.neutral-1} — #E5E7EB), Dark Gray ({colors.neutral-2} — #202020) — no assigned role; use sparingly

Iteration Guide

All primary buttons use #1C91FF with white text. No exceptions; this is the sole brand accent.
Button height is always 40px; padding is 0px 16px for primary buttons, maintaining consistent touch targets across the interface.
Button border-radius is always 12px ({rounded.sm}). Input fields use 8px ({rounded.xs}). Cards remain sharp (0px).
Every form input must have 40px height and 8px border-radius to match button proportions and maintain visual cohesion.
Typography hierarchy is enforced through weight (600 for emphasis, 400 for body) and size, never color shifts.
The inset border (rgba(0, 0, 0, 0) 0px 0px 0px 1px inset) is applied to all buttons for definition; never remove it.
Vertical spacing between form elements is controlled by {spacing.sm} (16px) or {spacing.md} (20px). Maintain rhythm.
The page background is pure white (#FFFFFF). Secondary surfaces (cards, overlays) remain transparent or white unless explicitly specified.
No shadows, no gradients, no decorative effects. Depth comes from color, spacing, and 1px strokes only.
Center-align authentication forms and provide ample margin on all sides. Responsiveness is achieved through whitespace, not layout reflow.

10. Known Gaps

No semantic status colors. The site does not declare or use error, success, warning, or info colors in its measured markup. Any error messaging, validation states, or success confirmations are outside the scope of this extraction. Do not invent a semantic ramp; design these states with client input if needed.
No interaction states beyond those documented in the extraction. Hover, active, focus-visible, and disabled states were extracted from the stylesheet; any other states (e.g., loading, invalid, checked) are not observed and should not be assumed.
No gradients or decorative treatments. The system is entirely flat; any patterns, meshes, or gradients present on the full site were not captured in the measured component styles.
Two colors have no assigned semantic role: {colors.neutral-1} and {colors.neutral-2} appeared in the extracted palette but have no measured usage in the current interface. Treat them as decorative or future-reserved unless their role is clarified.
Responsive behavior is static. All measured breakpoints (375px to 1440px) show identical typography, spacing, and layout. No genuine responsive changes were observed; the system relies on centered, fixed-width forms and ample whitespace to scale visually across devices. Confirmation of desired mobile, tablet, and desktop strategies is recommended.
Only one page analyzed. The extraction covers the authentication landing page only. Surfaces behind login, dashboards, or authenticated flows were not visited and are outside this system's scope.
No component states beyond button/card basics. Tabs, modals, tooltips, popovers, and other advanced components are not present in the measured page and are not documented here.

Want a DESIGN.md like this for your own website?

Remixes of app.dust.tt

Latest remixes

No public remixes yet. Be the first to make one.

Remix it