# Zero Interface > Almost no chrome: one calm sentence, one input, and soft context cards that surface only when they are needed. - Nickname: No-UI - Also called: Zero UI, Invisible interface, Ambient UI - Category: Interaction‑led - Moods: Calm, Luxury, Dreamy, Serious - Industries: AI Products, Fitness & Wellness, SaaS, Luxury & Premium, Healthcare - Style page: https://uilingo.dev/styles/zero-interface/ 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 ## Audit Passed after 1 round · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Zero Interface" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Almost no chrome: one calm sentence, one input, and soft context cards that surface only when they are needed. Design keywords: one sentence per screen, single input, no visible chrome, ambient context cards, light serif on paper, breathing presence glow, borderless fields, progressive disclosure. ## Visual language An interface that has almost disappeared. Each screen is warm paper (#F4F2EE) holding one sentence set large in a light serif, one borderless pill input with a blinking ember caret, and a faint ember glow behind the centre that slowly breathes to show the system is present. There is no visible navigation, no sidebar, no tab bar and no borders; context arrives only when it matters, as small shadow-only paper cards that drift in late at the edges of attention and could leave again. Calm, confident, almost luxurious emptiness — the input is the navigation. ## Signature details (must be visible) - One sentence per screen in Newsreader Light 300 (Thai: Noto Serif Thai 300), 2.4–4.2rem, centred, generous line-height - A single pill input: white #FBFAF8, no border, a deep soft shadow (0 30px 70px -30px rgba(31,29,26,.28)), 1.3rem serif placeholder, ember caret, round ink send/mic button at the right - A 12px ember presence dot inside the input with a 6px glow halo that breathes (scale 1→1.35 over 3.6s); a matching soft radial ember glow behind the page centre - Ambient context cards: 250px, 20px radius, no border, 82% surface with blur, shadow-only, fading and un-blurring in 0.9–1.9s after load, placed off-axis around the sentence - Chrome removed: nav is a wordmark + quiet 'Sign in'; dashboards use a faint icon rail; mobile has no tab bar - Borderless fields: inputs are a single 1px hairline underline that turns ember on focus - Only one accent: ember #AE4F28, used for the caret, presence, active states and numbering ## Design tokens — use these exact values Colours (light mode): - background #F4F2EE - surface #FBFAF8 - surface-2 #EDEAE4 - text #1F1D1A - text-muted #6A655D - primary #1F1D1A (text on it #F4F2EE) - secondary #AE4F28 (text on it #FFFFFF) - accent #AE4F28 - border #E2DED6 - success #3F7A52 · warning #9A6410 · danger #B23A3A - chart series #1F1D1A, #AE4F28, #A39E95, #D3CEC5, #6A655D Radius: sm 10px, md 14px, lg 20px, xl 28px, pill 999px Border width: 0px Shadows: sm `0 1px 2px rgba(31,29,26,0.04)`, md `0 12px 32px -14px rgba(31,29,26,0.18)`, lg `0 30px 70px -30px rgba(31,29,26,0.28)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.25 density Motion: 600ms cubic-bezier(.2,.7,.2,1) ## Typography (Latin + Thai) - Headings: Newsreader 300/400 with Thai fallback Noto Serif Thai 300/400 - Body: Inter 400/500 with Thai fallback Anuphan 300/400/500 - Google Fonts URL: 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 - CSS stacks: heading `"Newsreader", "Noto Serif Thai", system-ui, sans-serif`; body `"Inter", "Anuphan", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.4rem, 5vw, 4.2rem), heading weight 300, heading tracking -0.015em (Latin only), sentence-case labels. - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: 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. ## Components - Primary button: ink pill #1F1D1A with paper text, no shadow; hover turns ember - Secondary button: plain underlined text with a hairline underline, no box - Ask bar: pill, presence dot, serif placeholder, 48px round ink send button (mic on mobile), one-line muted hint below ('Press Enter to send') - Suggestions: muted text links with a hairline underline, never chips or buttons - Context card: shadow-only paper card with a small status dot, a serif title and one muted meta line; on mobile it carries one primary action and a ghost 'Later' - Badges: no fill — a 6px dot plus coloured text - Dashboard: borderless KPI numbers in light serif, a thin 1.5px line chart, faint grid, icon-only rail with an ember active icon, search field styled as a serif sentence - Lists: transparent with hairline separators and ember outline icons ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: full-viewport immersive hero with centred copy over the background effect. Navigation: minimal style. Sections in order: hero → features → cta. Feature section as list. The landing page is a single full-height stage: the sentence and the ask bar sit dead centre with three suggestion links, while two or three ambient cards (a case that needs a human, a key number, a resolved chat) float at the edges and arrive late. Below the fold there are only a few numbered serif sentences describing what it does, then a one-line footer. No logo walls, no feature grids, no pricing tables. Inner pages keep the same quiet: forms are hairline fields, articles are wide-margin serif, dashboards float a handful of numbers on paper. ## Content Use realistic product copy (fictional brand) suited to: AI assistants and agent products. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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 - Visible chrome added 'just in case': tab bars, sidebars, menus, borders, dividers everywhere - Chat transcripts, sparkle gradients and agent cards — that is AI-Native UI - A big glowing orb and waveform as the hero — that is Voice-First - Grids of feature cards, logo walls or pricing tables on the landing page - More than one accent colour or any saturated background - Hiding critical actions with no discoverable path (always offer suggestions or a hint) ## Stack notes One self-contained HTML file with a