Zero Interface

Also called: Zero UI, Invisible interface, Ambient UI

Almost no chrome: one calm sentence, one input, and soft context cards that surface only when they are needed.

“No-UI”Interaction‑ledEra: 2017 → today (AI era)CalmLuxuryDreamySerious

zero-interface / landingEN

zero-interface / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm10pxRadius md14pxRadius lg20pxRadius xl28pxDensity×1.25Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

one sentence per screensingle inputno visible chromeambient context cardslight serif on paperbreathing presence glowborderless fieldsprogressive disclosure

Zero Interface removes everything that is not the conversation. A screen is a single sentence set in a light serif on warm paper, one borderless input with a blinking caret, and a faint breathing glow that signals the system is present. Navigation shrinks to a wordmark; tab bars, sidebars and borders disappear. When context matters — a waiting chat, a number, a suggestion — it arrives as a small, soft, shadow-only card at the edge of attention, then fades away. The interface is the intent, not the furniture.

Best for

AI assistants and agent products
Smart-home, wearable and car companion apps
Concierge, booking and “just ask” services
Calm wellness and focus tools

Avoid for

Dense data tools and admin back-offices
E-commerce catalogues that need browsing
First-time users who need visible navigation

✓ Do

Keep one primary sentence and one input per screen
Show context only when it changes a decision, then let it fade
Make the input obvious: large type, caret, a one-line hint

✕ Don't

Don’t add borders, sidebars or tab bars “just in case”
Don’t hide critical actions with no way to discover them
Don’t use more than one accent colour

Not to be confused with

AI-Native UI →AI-Native UI shows the chat transcript, agent cards and sparkle gradients; Zero Interface hides almost everything and shows one sentence and one input.Minimal & Direct →Minimal Direct is a landing-page pattern with one CTA button; Zero Interface removes chrome across the whole product and replaces navigation with an input.Voice-First Multimodal →Voice-First puts a glowing orb, waveform and captions at the centre; Zero Interface is quieter — text first, with only a faint presence glow.

On mobile

The home screen is a greeting sentence, at most one context card and a single input pinned above the keyboard. No tab bar: navigation is by asking. Use haptics and a soft glow for “listening/thinking” instead of spinners.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinNewsreader · 300/400

The quick brown fox

Heading · ThaiNoto Serif Thai · 300/400

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinInter · 400/500

Clear words make shared decisions.

Body · ThaiAnuphan · 300/400/500

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Noto Serif Thai at a light weight has the same quiet, bookish contrast as Newsreader Light, while Anuphan’s loopless, open shapes stay invisible beside Inter.

Colour palette

Light

Dark

Design tokens

Radius	`sm 10px · md 14px · lg 20px · xl 28px · pill 999px`
Border	`0px`
Shadow	`0 12px 32px -14px rgba(31,29,26,0.18)`
Display	`clamp(2.4rem, 5vw, 4.2rem)`
Motion	`600ms cubic-bezier(.2,.7,.2,1)`
Density	`×1.25`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Zero Interface (zero-interface) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Newsreader:wght@300;400&family=Inter:wght@400;500&family=Noto+Serif+Thai:wght@300;400&family=Anuphan:wght@300;400;500&display=swap
 */
:root {
  --radius: 20px;
  --background: #F4F2EE;
  --foreground: #1F1D1A;
  --card: #FBFAF8;
  --card-foreground: #1F1D1A;
  --popover: #FBFAF8;
  --popover-foreground: #1F1D1A;
  --primary: #1F1D1A;
  --primary-foreground: #F4F2EE;
  --secondary: #AE4F28;
  --secondary-foreground: #FFFFFF;
  --muted: #EDEAE4;
  --muted-foreground: #6A655D;
  --accent: #EDEAE4;
  --accent-foreground: #1F1D1A;
  --destructive: #B23A3A;
  --border: #E2DED6;
  --input: #E2DED6;
  --ring: #1F1D1A;
  --chart-1: #1F1D1A;
  --chart-2: #AE4F28;
  --chart-3: #A39E95;
  --chart-4: #D3CEC5;
  --chart-5: #6A655D;
  --sidebar: #FBFAF8;
  --sidebar-foreground: #1F1D1A;
  --sidebar-primary: #1F1D1A;
  --sidebar-primary-foreground: #F4F2EE;
  --sidebar-accent: #EDEAE4;
  --sidebar-accent-foreground: #1F1D1A;
  --sidebar-border: #E2DED6;
  --sidebar-ring: #1F1D1A;
}

.dark {
  --background: #141312;
  --foreground: #EFECE6;
  --card: #1C1B19;
  --card-foreground: #EFECE6;
  --popover: #1C1B19;
  --popover-foreground: #EFECE6;
  --primary: #EFECE6;
  --primary-foreground: #141312;
  --secondary: #E58A5E;
  --secondary-foreground: #1A0C05;
  --muted: #191816;
  --muted-foreground: #A29D94;
  --accent: #191816;
  --accent-foreground: #EFECE6;
  --destructive: #E07A7A;
  --border: #2A2826;
  --input: #2A2826;
  --ring: #EFECE6;
  --chart-1: #EFECE6;
  --chart-2: #E58A5E;
  --chart-3: #77726A;
  --chart-4: #4A4743;
  --chart-5: #A29D94;
  --sidebar: #1C1B19;
  --sidebar-foreground: #EFECE6;
  --sidebar-primary: #EFECE6;
  --sidebar-primary-foreground: #141312;
  --sidebar-accent: #191816;
  --sidebar-accent-foreground: #EFECE6;
  --sidebar-border: #2A2826;
  --sidebar-ring: #EFECE6;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Zero Interface (zero-interface) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Newsreader:wght@300;400&family=Inter:wght@400;500&family=Noto+Serif+Thai:wght@300;400&family=Anuphan:wght@300;400;500&display=swap
 */
@theme {
  --color-bg: #F4F2EE;
  --color-surface: #FBFAF8;
  --color-surface-2: #EDEAE4;
  --color-text: #1F1D1A;
  --color-text-muted: #6A655D;
  --color-primary: #1F1D1A;
  --color-on-primary: #F4F2EE;
  --color-secondary: #AE4F28;
  --color-on-secondary: #FFFFFF;
  --color-accent: #AE4F28;
  --color-border: #E2DED6;
  --color-success: #3F7A52;
  --color-warning: #9A6410;
  --color-danger: #B23A3A;
  --color-chart-1: #1F1D1A;
  --color-chart-2: #AE4F28;
  --color-chart-3: #A39E95;
  --color-chart-4: #D3CEC5;
  --color-chart-5: #6A655D;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(31,29,26,0.04);
  --shadow-md: 0 12px 32px -14px rgba(31,29,26,0.18);
  --shadow-lg: 0 30px 70px -30px rgba(31,29,26,0.28);
  --font-heading: "Newsreader", "Noto Serif Thai", system-ui, sans-serif;
  --font-body: "Inter", "Anuphan", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Anuphan", monospace;
}

.dark {
  --color-bg: #141312;
  --color-surface: #1C1B19;
  --color-surface-2: #191816;
  --color-text: #EFECE6;
  --color-text-muted: #A29D94;
  --color-primary: #EFECE6;
  --color-on-primary: #141312;
  --color-secondary: #E58A5E;
  --color-on-secondary: #1A0C05;
  --color-accent: #E58A5E;
  --color-border: #2A2826;
  --color-success: #7DBB8E;
  --color-warning: #D9A44A;
  --color-danger: #E07A7A;
  --color-chart-1: #EFECE6;
  --color-chart-2: #E58A5E;
  --color-chart-3: #77726A;
  --color-chart-4: #4A4743;
  --color-chart-5: #A29D94;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Zero Interface (zero-interface). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Newsreader:wght@300;400&family=Inter:wght@400;500&family=Noto+Serif+Thai:wght@300;400&family=Anuphan:wght@300;400;500&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9569,
            0.949,
            0.9333
          ],
          "hex": "#f4f2ee"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.9804,
            0.9725
          ],
          "hex": "#fbfaf8"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9294,
            0.9176,
            0.8941
          ],
          "hex": "#edeae4"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1216,
            0.1137,
            0.102
          ],
          "hex": "#1f1d1a"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4157,
            0.3961,
            0.3647
          ],
          "hex": "#6a655d"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1216,
            0.1137,
            0.102
          ],
          "hex": "#1f1d1a"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9569,
            0.949,
            0.9333
          ],
          "hex": "#f4f2ee"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6824,
            0.3098,
            0.1569
          ],
          "hex": "#ae4f28"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6824,
            0.3098,
            0.1569
          ],
          "hex": "#ae4f28"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8863,
            0.8706,
            0.8392
          ],
          "hex": "#e2ded6"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2471,
            0.4784,
            0.3216
          ],
          "hex": "#3f7a52"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6039,
            0.3922,
            0.0627
          ],
          "hex": "#9a6410"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.698,
            0.2275,
            0.2275
          ],
          "hex": "#b23a3a"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1216,
            0.1137,
            0.102
          ],
          "hex": "#1f1d1a"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6824,
            0.3098,
            0.1569
          ],
          "hex": "#ae4f28"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6392,
            0.6196,
            0.5843
          ],
          "hex": "#a39e95"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8275,
            0.8078,
            0.7725
          ],
          "hex": "#d3cec5"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4157,
            0.3961,
            0.3647
          ],
          "hex": "#6a655d"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.0745,
            0.0706
          ],
          "hex": "#141312"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1098,
            0.1059,
            0.098
          ],
          "hex": "#1c1b19"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.098,
            0.0941,
            0.0863
          ],
          "hex": "#191816"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9373,
            0.9255,
            0.902
          ],
          "hex": "#efece6"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6353,
            0.6157,
            0.5804
          ],
          "hex": "#a29d94"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9373,
            0.9255,
            0.902
          ],
          "hex": "#efece6"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.0745,
            0.0706
          ],
          "hex": "#141312"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.898,
            0.5412,
            0.3686
          ],
          "hex": "#e58a5e"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.0471,
            0.0196
          ],
          "hex": "#1a0c05"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.898,
            0.5412,
            0.3686
          ],
          "hex": "#e58a5e"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.1569,
            0.149
          ],
          "hex": "#2a2826"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4902,
            0.7333,
            0.5569
          ],
          "hex": "#7dbb8e"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.851,
            0.6431,
            0.2902
          ],
          "hex": "#d9a44a"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8784,
            0.4784,
            0.4784
          ],
          "hex": "#e07a7a"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9373,
            0.9255,
            0.902
          ],
          "hex": "#efece6"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.898,
            0.5412,
            0.3686
          ],
          "hex": "#e58a5e"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4667,
            0.4471,
            0.4157
          ],
          "hex": "#77726a"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2902,
            0.2784,
            0.2627
          ],
          "hex": "#4a4743"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6353,
            0.6157,
            0.5804
          ],
          "hex": "#a29d94"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 10,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 14,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 20,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 28,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 0,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1216,
              0.1137,
              0.102
            ],
            "hex": "#1f1d1a",
            "alpha": 0.04
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1216,
              0.1137,
              0.102
            ],
            "hex": "#1f1d1a",
            "alpha": 0.18
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 12,
            "unit": "px"
          },
          "blur": {
            "value": 32,
            "unit": "px"
          },
          "spread": {
            "value": -14,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1216,
              0.1137,
              0.102
            ],
            "hex": "#1f1d1a",
            "alpha": 0.28
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 30,
            "unit": "px"
          },
          "blur": {
            "value": 70,
            "unit": "px"
          },
          "spread": {
            "value": -30,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Newsreader",
        "Noto Serif Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Inter",
        "Anuphan",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Anuphan",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 300
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 600,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.2,
      0.7,
      0.2,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.25
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 1
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!