# UI Lingo

> A shared vocabulary of UI styles — so owners, designers and developers mean the same thing. 97 UI styles, each with its generation prompt that recreates it in any coding agent, with Thai and English content.

How to use a prompt:
1. Pick a style below by name, nickname or summary; its .md file has the full description, do's and don'ts, audit result and a ready prompt.
2. Copy the prompt in the .md file's "Prompt" section into your coding agent as is. It is composed for a landing page in Plain HTML + CSS, with Thai + English content, in the style's default mode.
3. For another page (landing, dashboard, form, article, onboarding, home, booking form, profile, sign in, settings, states, chat, components), stack (HTML + Tailwind CSS, React + Tailwind CSS, Next.js + shadcn/ui, Vue 3 / Nuxt, Plain HTML + CSS, Flutter, React Native (Expo), SwiftUI, Jetpack Compose, HTML mobile mockup (390×844)), language or mode, use the prompt builder on the style page (https://uilingo.dev/styles/<slug>/).
4. The prompt carries exact tokens, fonts and Thai typography rules: ask the agent to keep those values.

## Minimal & Clean
- [Bento Box Grid](https://uilingo.dev/styles/bento-box-grid.md): "Bento tiles". Everything is a tile: a modular, asymmetric grid of rounded boxes in mixed sizes and a few flat tints, held together by one tight, even gutter.
- [Bento Grids (Apple-style)](https://uilingo.dev/styles/bento-grids.md): "Keynote bento". The Apple keynote slide as a web page: big 28–32px rounded white tiles on a #F5F5F7 grey canvas, huge tight headlines and studio-lit product renders.
- [Dark Mode (OLED)](https://uilingo.dev/styles/dark-mode-oled.md): "True black". True #000 black canvas, hairline-defined surfaces, crisp off-white text and one desaturated accent — pixels off, content on.
- [E-Ink / Paper](https://uilingo.dev/styles/e-ink-paper.md): "Kindle page". Matte grey-white paper, ink-black book serif, pixel-dithered greys and zero animation — an interface that reads like an e-reader page.
- [Exaggerated Minimalism](https://uilingo.dev/styles/exaggerated-minimalism.md): "Giant type, empty page". Headlines blown up to poster size on an almost empty page — no boxes, no icons, one electric-blue accent.
- [Flat Design](https://uilingo.dev/styles/flat-design.md): "Flat UI". Pure 2D: solid colour blocks, no shadows, no gradients, no borders on cards — just bright flat fills, simple icons and clean type.
- [Minimalism & Swiss Style](https://uilingo.dev/styles/minimalism-swiss.md): "Swiss grid". A strict grid, a neutral grotesque, black on white and one signal red — clarity as the aesthetic.
- [Minimalist Monochrome](https://uilingo.dev/styles/minimalist-monochrome.md): "Black & white editorial". Pure #000 on #FFF, a high-contrast didone display, hairline rules and whole sections flipped to black — fashion-editorial austerity with zero colour.
- [Quiet Luxury](https://uilingo.dev/styles/quiet-luxury.md): "Old money". Warm stone and cream, a light Garamond, tiny tracked capitals and wide margins — luxury that whispers, with no logos or loud colour.

## Soft & Dimensional
- [3D & Hyperrealism](https://uilingo.dev/styles/3d-hyperrealism.md): "Rendered 3D". UI that looks rendered in a 3D studio: glossy spheres and slabs, thick bevelled buttons, deep perspective and dramatic spotlight on a dark stage.
- [Claymorphism](https://uilingo.dev/styles/claymorphism.md): "Puffy clay". Chunky pastel shapes that look squeezed from modelling clay: huge radii, a bright inner highlight and a soft coloured shadow underneath.
- [Dimensional Layering](https://uilingo.dev/styles/dimensional-layering.md): "Stacked sheets". Crisp cards stacked at clear elevations, with offset sheets peeking out underneath and a gentle 3D tilt on hover.
- [Glassmorphism](https://uilingo.dev/styles/glassmorphism.md): "Frosted glass". Translucent frosted panels floating over vivid colour blobs — depth through blur, not shadow.
- [Kawaii / Cute](https://uilingo.dev/styles/kawaii-cute.md): "Candy mascot". Pastel candy colours, everything round, little mascot faces and die-cut stickers — UI that smiles back.
- [Liquid Glass](https://uilingo.dev/styles/liquid-glass.md): "Thick lens glass". Thick, clear glass capsules with bright specular rims that float over vivid photography and bend the light behind them.
- [Neumorphism](https://uilingo.dev/styles/neumorphism.md): "Soft extrude". Everything is moulded from one soft grey-blue sheet: raised with a light and a dark shadow, pressed in with inset shadows.
- [Skeuomorphism](https://uilingo.dev/styles/skeuomorphism.md): "Real materials". Interfaces dressed in real materials — stitched leather, brushed metal, linen, paper and glossy buttons — so every control looks like the object it replaces.
- [Soft UI Evolution](https://uilingo.dev/styles/soft-ui-evolution.md): "Accessible soft". Neumorphism grown up: the same gentle dual-shadow depth, but on white cards with real borders, solid colour buttons and visible focus.
- [Tactile Digital / Deformable UI](https://uilingo.dev/styles/tactile-digital-deformable-ui.md): "Jelly buttons". Glossy jelly controls with chrome rims that squash and stretch under your finger — UI that feels like a soft toy.

## Bold & Expressive
- [Acid Graphics](https://uilingo.dev/styles/acid-graphics.md): "Rave flyer". Rave-flyer energy on black: liquid chrome type, neon acid green, warped fisheye grids and spiky starbursts.
- [Anti-Polish / Raw Aesthetic](https://uilingo.dev/styles/anti-polish-raw-aesthetic.md): "Photocopy zine". A photocopied zine: grainy recycled paper, masking tape, marker scribbles, rubber stamps and cut-out scraps placed slightly off-grid.
- [Bauhaus](https://uilingo.dev/styles/bauhaus.md): "Circle, square, triangle". Primary red, yellow and blue with black on paper — circles, squares and triangles composed like a 1920s school poster.
- [Brutalism](https://uilingo.dev/styles/brutalism.md): "Raw HTML". The browser’s defaults on purpose: Times and Arial, blue underlined links, 1px black boxes, grey bevel buttons and zero polish.
- [Dopamine Design](https://uilingo.dev/styles/dopamine-design.md): "Happy brights". Saturated orange, hot pink and lime on warm cream — squishy blob shapes, pill buttons and bouncy micro-animations that feel like a mood boost.
- [Gen Z Chaos / Maximalism](https://uilingo.dev/styles/gen-z-chaos-maximalism.md): "Sticker collage". A loud collage of tilted cards, stickers, emoji, scrolling marquees and clashing fonts on graph paper — clutter on purpose.
- [Kinetic Brutalism](https://uilingo.dev/styles/kinetic-brutalism.md): "Brutalism on loop". Raw brutalist structure that never sits still: huge condensed caps, scrolling ticker bands, acid accents and hard-cut inversions.
- [Memphis Design](https://uilingo.dev/styles/memphis-design.md): "Squiggles & confetti". Black squiggles, confetti triangles, terrazzo dots and striped shadows over clashing pastels — the 80s Memphis Group as UI.
- [Neubrutalism](https://uilingo.dev/styles/neubrutalism.md): "Sticker-bold". Thick black outlines, hard offset shadows and loud flat colours — brutalism made friendly.
- [Vibrant & Block-based](https://uilingo.dev/styles/vibrant-block-based.md): "Colour blocks". Every section is a full-bleed slab of saturated colour — tomato, mustard, green, pink, cobalt — with big geometric shapes and chunky type.

## Retro & Nostalgia
- [Chromatic Aberration / RGB Split](https://uilingo.dev/styles/chromatic-aberration-rgb-split.md): "RGB glitch". White type on near-black, with every edge split into red and cyan ghosts — scanlines, slice glitches and misaligned colour channels.
- [Frutiger Aero](https://uilingo.dev/styles/frutiger-aero.md): "Glossy sky". Mid-2000s glossy optimism: sky blue and grass green, water bubbles, aqua gel buttons, lens flares and a friendly humanist sans.
- [Pixel Art](https://uilingo.dev/styles/pixel-art.md): "8-bit". A console game as an interface: pixel fonts, notched pixel borders, a 16-colour palette, chunky bevels and blocky sprites on a sky-blue level.
- [Retro-Futurism](https://uilingo.dev/styles/retro-futurism.md): "Chrome sunset". The future as the 80s imagined it: chrome lettering, a striped sunset over a neon grid, and glowing outline panels on a midnight sky.
- [Risograph Print](https://uilingo.dev/styles/risograph-print.md): "Riso zine". Two inks only — fluoro pink and blue — on off-white paper, with grain, halftone dots, overprint and slightly misregistered layers.
- [Vaporwave](https://uilingo.dev/styles/vaporwave.md): "Aesthetic 95". A dreamy pastel sunset, Windows-95 windows with candy title bars, marble statues on a grid floor and wide-spaced capitals.
- [Vintage Analog / Retro Film](https://uilingo.dev/styles/vintage-analog-retro-film.md): "Film camera". Faded warm film colour, grain, polaroid frames, orange date stamps and cassette-label stripes — a UI that feels developed, not rendered.
- [Y2K Aesthetic](https://uilingo.dev/styles/y2k-aesthetic.md): "Bubblegum chrome". Millennium pop: bubblegum pink, liquid chrome, holographic foil, twinkling star sparkles and glossy candy pills.

## Futuristic & Tech
- [AI-Native UI](https://uilingo.dev/styles/ai-native-ui.md): "Prompt-first". The prompt bar is the hero: a calm white canvas, a glowing composer, streaming answers, sparkle accents and agent cards.
- [Aurora UI](https://uilingo.dev/styles/aurora-ui.md): "Northern lights". Slow, blurred ribbons of green, teal and violet light drift behind a calm night-sky UI — the background is the brand.
- [Bitcoin DeFi](https://uilingo.dev/styles/bitcoin-defi.md): "Digital gold". Bitcoin orange on deep warm black: glowing gold numbers, coin-shaped icons, candlestick charts and trust badges everywhere.
- [Cyberpunk UI](https://uilingo.dev/styles/cyberpunk-ui.md): "Night City". Acid-yellow and hot-magenta neon on near-black, chamfered corners, glitch-split headlines and terminal labels — high-tech, low-life.
- [Gradient Mesh / Aurora Evolved](https://uilingo.dev/styles/gradient-mesh-aurora-evolved.md): "Grainy mesh". Multi-point mesh gradients with film grain, poured into cards, headlines and payment cards on a calm paper-white page.
- [HUD / Sci-Fi FUI](https://uilingo.dev/styles/hud-scifi-fui.md): "Cockpit HUD". Thin cyan wireframes, corner brackets, tick-mark rulers and live mono readouts on deep blue-black — a film-prop cockpit display.
- [Linear-style Dark SaaS](https://uilingo.dev/styles/linear-dark-saas.md): "Linear look". Precise near-black product UI: hairline borders, a faint indigo spotlight, gradient-edged highlights and tight medium-weight Inter.
- [Modern Dark (Cinema)](https://uilingo.dev/styles/modern-dark-cinema.md): "Movie night". A dark theatre for content: full-bleed key art, colour that bleeds from imagery onto the page, film grain, subtle glass and tall poster type.
- [Spatial UI (visionOS)](https://uilingo.dev/styles/spatial-ui-visionos.md): "Floating windows". Neutral frosted-glass windows floating in a real environment, with huge rounded corners, capsule controls and detached ornaments.
- [Terminal CLI](https://uilingo.dev/styles/terminal-cli.md): "Green screen". Monospace everything, phosphor green and amber on black, prompt symbols, bracketed buttons and ASCII-boxed panels with a blinking cursor.

## Organic & Natural
- [Biomimetic / Organic 2.0](https://uilingo.dev/styles/biomimetic-organic-2.md): "Living cells". Cell-like surfaces with double membranes that slowly breathe, glowing bioluminescent teal and violet on a deep-sea dark ground.
- [Japandi](https://uilingo.dev/styles/japandi.md): "Oat & charcoal calm". Japanese restraint meets Scandinavian warmth: oat paper, charcoal ink, muted sage, hairlines, enso circles and slatted wood — balanced off-centre, with lots of air.
- [Nature Distilled](https://uilingo.dev/styles/nature-distilled.md): "Clay & sand". Nature reduced to calm earth tones — clay, sand, olive and terracotta on grainy paper, with a soft serif and abstract sun-and-dune forms.
- [Organic Biophilic](https://uilingo.dev/styles/organic-biophilic.md): "Leafy & alive". Leaf greens, blob shapes and petal-cornered cards on a fresh, lightly textured ground — interfaces that feel planted, not built.
- [Scandinavian Nordic](https://uilingo.dev/styles/scandinavian-nordic.md): "Hygge". Bright birch-white rooms, muted pastel accents and friendly rounded type — simple, functional cards that feel cosy rather than clinical.
- [Sketch / Hand-Drawn](https://uilingo.dev/styles/sketch-hand-drawn.md): "Notebook doodles". Wobbly pencil outlines, handwriting fonts, ruled notebook paper, highlighter marks and doodled arrows — UI that looks drawn by hand in class.

## Editorial & Typographic
- [Academia (Scholarly)](https://uilingo.dev/styles/academia-scholarly.md): "Dark academia". A lamp-lit library: mahogany and parchment, gold-leaf rules, classic Garamond, footnotes, roman numerals and library catalogue cards.
- [Bold Typography (Poster)](https://uilingo.dev/styles/bold-typography-poster.md): "Big-word poster". Every screen is a printed poster: one enormous condensed word, black ink on newsprint, a yellow highlight and almost no imagery.
- [Editorial Grid / Magazine](https://uilingo.dev/styles/editorial-grid-magazine.md): "Magazine spread". A printed magazine on screen: big serif headlines, drop caps, pull quotes, captions, column rules and asymmetric lead-story grids.
- [Kinetic Typography](https://uilingo.dev/styles/kinetic-typography.md): "Moving type". Type is the moving image: headlines reveal letter by letter, weights breathe on a variable font and marquee bands scroll — with a calm static fallback.
- [Swiss Modernism 2.0](https://uilingo.dev/styles/swiss-modernism-2.md): "Swiss, turned up". The Swiss grid with the volume up: flat fields of ultramarine, orange and yellow, giant tight grotesque, rotated labels and off-axis layouts.

## Interaction‑led
- [3D Product Preview](https://uilingo.dev/styles/3d-product-preview.md): "Turntable studio". The product spins on a lit studio turntable you can drag, zoom and switch angles on, with hotspots that explain each detail.
- [Interactive Cursor Design](https://uilingo.dev/styles/interactive-cursor-design.md): "Cursor-as-character". The pointer becomes the star: an inverting cursor blob that grows and labels what it touches, magnetic buttons and spotlight reveals.
- [Micro-interactions](https://uilingo.dev/styles/micro-interactions.md): "Delightful feedback". A calm, clean interface where every control answers back: ripples, drawn checkmarks, bouncy toggles, pinging dots and gentle hover lifts.
- [Motion-Driven](https://uilingo.dev/styles/motion-driven.md): "Choreographed UI". Animation is the structure: content rises in staggered, springy waves, sections reveal on scroll and keyframe marks show the choreography.
- [Parallax Storytelling](https://uilingo.dev/styles/parallax-storytelling.md): "Layered scroll story". A story told by scrolling: full-bleed layered scenes drift at different speeds while the page unfolds in numbered chapters.
- [Voice-First Multimodal](https://uilingo.dev/styles/voice-first-multimodal.md): "Talk-to-it UI". A glowing voice orb and live waveform at the centre, big captions of what was heard, and thumb-sized buttons so speaking, tapping and reading all work.
- [Zero Interface](https://uilingo.dev/styles/zero-interface.md): "No-UI". Almost no chrome: one calm sentence, one input, and soft context cards that surface only when they are needed.

## Accessible & Inclusive
- [Accessible & Ethical](https://uilingo.dev/styles/accessible-ethical.md): "AAA plain". Black-on-white at AAA contrast, 18px+ type, thick yellow focus rings and underlined links — an interface that never tricks or squints.
- [Inclusive Design](https://uilingo.dev/styles/inclusive-design.md): "Made for everyone". Warm, rounded and multi-coloured with a colour-blind-safe palette, icons that always carry a label, a text-size control and people of every skin tone.

## Landing Page Patterns
- [Conversion-Optimized](https://uilingo.dev/styles/conversion-optimized.md): "Sign-up machine". One goal per page: the sign-up form sits in the hero, trust badges sit next to the button, and the same bright CTA repeats down the page.
- [Feature-Rich Showcase](https://uilingo.dev/styles/feature-rich-showcase.md): "Feature tour". A long, organised product tour: a feature index, an overview grid, alternating deep-dive rows, tabbed screenshots and a plan comparison table.
- [Hero-Centric Design](https://uilingo.dev/styles/hero-centric-design.md): "Big hero". One full-screen scene, one giant headline and one CTA carry the page — everything below the fold is short and quiet.
- [Interactive Product Demo](https://uilingo.dev/styles/interactive-product-demo.md): "Try-it-live hero". The hero is the product: a full, live-looking app window with real data, clickable tabs, hotspots and a guided cursor, framed on a calm technical page.
- [Minimal & Direct](https://uilingo.dev/styles/minimal-direct.md): "One sentence, one button". The whole landing page is one screen: one plain sentence that says what it does, one button, and nothing else.
- [Social Proof-Focused](https://uilingo.dev/styles/social-proof-focused.md): "Wall of love". A landing page that lets other people do the selling: star ratings, review cards, avatar stacks, logo walls and big numbers fill the page.
- [Storytelling-Driven](https://uilingo.dev/styles/storytelling-driven.md): "Brand story in chapters". A landing page read like a short book: an opening line, numbered chapters, a founder’s or customer’s story, a journey timeline and a quiet ending with one ask.
- [Trust & Authority](https://uilingo.dev/styles/trust-authority.md): "Navy & seals". A conservative navy-and-white landing page that leads with credentials: accreditation seals, licences, expert names, guarantees and hard numbers.

## Dashboards & Data
- [Comparative Analysis Dashboard](https://uilingo.dev/styles/comparative-analysis-dashboard.md): "This vs that". Every number has a partner: solid cobalt for this period, hatched slate for the last, an amber “vs” between them and a ▲▼ delta badge on everything.
- [Data-Dense Dashboard](https://uilingo.dev/styles/data-dense-dashboard.md): "Trading desk". Compact, hairline-gridded panels packed with small condensed type, tabular numbers, zebra tables and a sparkline on every figure.
- [Drill-Down Analytics](https://uilingo.dev/styles/drill-down-analytics.md): "Click to dig". Breadcrumbed hierarchy, removable filter chips and expandable rows: start at the total, click a funnel step and dig down to the table that explains it.
- [Executive Dashboard](https://uilingo.dev/styles/executive-dashboard.md): "Boardroom view". Four huge numbers, one trend line and a one-paragraph story on lots of warm white air — the dashboard you can read in five seconds.
- [Financial Dashboard](https://uilingo.dev/styles/financial-dashboard.md): "Ledger navy". A P&L statement, a cash-flow waterfall and right-aligned tabular figures on serious navy — red and green mean good and bad, nothing else.
- [Heat Map Dashboard](https://uilingo.dev/styles/heatmap-dashboard.md): "Heat grid". Colour-intensity grids lead the page: a warm sequential ramp from pale butter to deep plum turns every number into a tile you read by heat.
- [Predictive Analytics](https://uilingo.dev/styles/predictive-analytics.md): "Forecast fan". The future is drawn as a widening violet fan of confidence bands right of a “Today” line — with scenario toggles, driver bars and model-confidence meters on every prediction.
- [Real-Time Monitoring](https://uilingo.dev/styles/realtime-monitoring.md): "Ops wall". A dark ops-room console: status tiles first, pulsing live dots, a ticking clock and red/amber/green reserved for health status.
- [Sales Intelligence Dashboard](https://uilingo.dev/styles/sales-intelligence-dashboard.md): "Quota scoreboard". A revenue scoreboard: a thick quota bar with commit markers, chevron pipeline stages, a ranked rep leaderboard and a deal table in ink, paper and signal orange.
- [User Behavior Analytics](https://uilingo.dev/styles/user-behavior-analytics.md): "Funnel & cohort lab". A dark plum lab for how people move: a sentence-style event query, a step funnel with hatched drop-off, a magenta-to-amber retention triangle and flowing journey paths.

## Platform Design Systems
- [Adobe Spectrum](https://uilingo.dev/styles/adobe-spectrum.md): "Pro tool dark". The classic Creative Cloud workspace: dark charcoal panels, compact 32px controls, 4px corners, outlined pill buttons, blue focus and a canvas you work on.
- [Enterprise SaaS](https://uilingo.dev/styles/enterprise-saas.md): "Navy B2B". Professional B2B software: navy shell, indigo actions, IBM Plex, dense zebra tables, uppercase labels, approval badges and role-aware layouts.
- [Fluent 2](https://uilingo.dev/styles/fluent-2.md): "Windows 11 look". Microsoft-inspired calm productivity UI: light grey Mica canvas, frosted acrylic bars, 4px corners, brand blue #0F6CBD and pill selection indicators.
- [Material 3 Expressive](https://uilingo.dev/styles/material-3-expressive.md): "Material You, turned up". Google’s tonal Material You, made bolder: lilac tonal containers, scalloped and clover shapes, springy morphing corners and big FABs.
- [Shopify Polaris](https://uilingo.dev/styles/shopify-polaris.md): "Merchant admin". Shopify’s merchant admin: a grey canvas, dense white cards, black bevelled buttons, a black top bar and green for every success.
- [Spectrum 2](https://uilingo.dev/styles/spectrum-2.md): "Friendly Adobe". Adobe’s friendlier system: light canvas, rounder 8–24px corners, filled pill buttons, heavy 800 headlines and confident pastel-plus-saturated colour.

## Mobile‑first Styles
- [Gamified Playful](https://uilingo.dev/styles/gamified-playful.md): "Streak & XP". Bright green chunky buttons with a 3D bottom edge, streak flames, XP bars, lesson paths and a friendly mascot — learning that feels like a game.
- [SaaS Mobile (High-Tech Boutique)](https://uilingo.dev/styles/saas-mobile-high-tech-boutique.md): "Electric blue card". Midnight navy, one electric-blue gradient and glossy metal-card surfaces — the polished feel of a premium neobank app.

## Thai & Regional
- [Lanna Craft](https://uilingo.dev/styles/lanna-craft.md): "Indigo & tin chok". Hand-dyed indigo, lacquer red and teak on unbleached cotton, edged with woven tin chok hem bands and running-stitch outlines — calm Northern Thai craft.
- [Thai Modern Heritage](https://uilingo.dev/styles/thai-modern-heritage.md): "Gold & lacquer". Ivory paper or lacquer black, temple red and leaf gold, framed with Prajam Yam motifs and pointed-arch shapes — Thai craft in a clean modern layout.
- [Thai Pop Market](https://uilingo.dev/styles/thai-pop-market.md): "Talad neon". A Bangkok night market on screen: hot-pink, lime and orange plastic colours, marker-lettered signs on fluoro card, price tags, striped awnings and sticker badges.
- [Thai Retro Poster](https://uilingo.dev/styles/thai-retro-poster.md): "Old cinema poster". Hand-painted 60s–70s Thai movie poster: fat high-contrast Thai display type with outlined drop shadows, red-yellow-teal on aged paper, halftone and starbursts.

## Optional
- [All styles in one file](https://uilingo.dev/llms-full.txt): every style's .md, concatenated.