# Dark Mode (OLED) > True #000 black canvas, hairline-defined surfaces, crisp off-white text and one desaturated accent — pixels off, content on. - Nickname: True black - Also called: OLED dark, Pure black UI, AMOLED theme - Category: Minimal & Clean - Moods: Calm, Techy, Serious, Luxury - Industries: Media & Entertainment, Gaming, AI Products, Fintech & Banking, SaaS - Style page: https://uilingo.dev/styles/dark-mode-oled/ Built for OLED screens where black pixels are switched off: the page is pure #000000 and surfaces barely lift (#0A0A0A–#141414) or stay black and are drawn with 1px #232323 hairlines instead of fills. Text is high-contrast off-white with a clear grey hierarchy; colour is reserved for one desaturated pastel accent (a soft mint) used on the primary action, the active state and chart line. Glow is minimal — a faint halo on focus and live indicators only — so the screen reads as calm, inky and battery-friendly. ## Best for - Video, music and podcast apps - Night-time reading and long sessions - Phone-first products on OLED devices - Photography and media galleries ## Avoid for - Daytime productivity tools used in bright offices - Long light-reading articles for older audiences - Brands whose identity is a bright colour ## Do - Use #000000 for the page and full-bleed sections - Lift surfaces with 1px #232323 hairlines (#333 for input and button hairlines) or ≤ #141414 fills, not shadows - Desaturate accents to pastel (e.g. #8FD1C8) so they do not vibrate on black - Use off-white #EDEDED for body text and #FFFFFF only for headings ## Don't - No dark-grey #121212 page backgrounds — that is Material dark, not OLED - No saturated neon or big glows (that turns cyberpunk) - No drop shadows — they are invisible on black - Don’t use thin 300-weight body text; it blooms and smears ## Audit Passed after 2 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, dark mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Dark Mode (OLED)" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: dark ## The style in one line True #000 black canvas, hairline-defined surfaces, crisp off-white text and one desaturated accent — pixels off, content on. Design keywords: true black #000, OLED battery saver, hairline borders, desaturated pastel accent, off-white text, minimal glow, no decorative gradients, inky contrast. ## Visual language A true-black OLED interface: the page is #000000 and almost everything stays black, with surfaces drawn by 1px #232323–#333333 hairlines rather than lifted fills. Text is crisp off-white (#EDEDED body, #FFFFFF headings) with a clear grey ladder (#9A9A9A, #6E6E6E). Colour is rationed to one desaturated pastel — a soft mint #8FD1C8 — on the primary action, active states and the main chart line, and glow appears only as a faint halo on focus, live indicators and a single thin 'eclipse' horizon. The mood is calm, inky, clinical and battery-friendly. ## Signature details (must be visible) - Page, sections, regular cards, inputs, sidebar and tab bar all on #000000; elevation shown by hairlines, never by shadow. Hairline ladder (declare next to the tokens): --hair #232323 (= border token: cards, dividers, nav/tab-bar edges), --hair-2 #333333 (inputs, secondary buttons, icon wells, chips), hover border #3A3A3A, strong hover #4A4A4A - One desaturated accent #8FD1C8 with #000 text on the primary pill button; secondary accents only as pastel #C3B5E8 / #E3C58A in charts - Glow is always rgba(143,209,200,0.28) at 6–22px blur and appears ONLY on: primary button hover, focus rings, the active rail item, live/status dots, the eyebrow dot, the main chart line (drop-shadow 4px), progress fills, the active tab icon, the 1px mint rings in feature art and the featured card, the hero eclipse rim and the CTA top light-leak. Nothing else glows - Immersive hero: black void, centred 600-weight headline; min-height min(82vh, 780px) with 200px bottom padding. The eclipse is a #000 circle 140vw wide, centred, whose top rim sits 130px above the hero's bottom hairline; the 1px rim is rgba(143,209,200,0.55) with the glow above. CTAs and copy never overlap the rim - Off-white text hierarchy: headings #FFFFFF, body #EDEDED/#D6D6D6, muted #9A9A9A, disabled #6A6A6A - Eyebrows: JetBrains Mono uppercase with 0.16em tracking applies to Latin eyebrows only. Thai eyebrows use the body font (Noto Sans Thai) at 0.85rem, no tracking, and keep the 6px glowing mint dot - Surface tokens have fixed jobs: regular cards, inputs, sidebar and tab bar are #000. #0A0A0A only for the highlighted pricing card and art-panel centres; #141414 only for avatar fills, switch/progress tracks and donut tracks - Pill-shaped buttons (999px), 14px card radius, 1px borders everywhere - No decorative gradients on surfaces. Allowed exceptions: the CTA 1px top light-leak = linear-gradient(90deg, transparent, #8FD1C8, transparent) at 60% width with an 18px glow, and art panels = radial-gradient(closest-side, #0A0A0A, #000) ## Design tokens — use these exact values Colours (dark mode): - background #000000 - surface #0A0A0A - surface-2 #141414 - text #EDEDED - text-muted #9A9A9A - primary #8FD1C8 (text on it #000000) - secondary #1C1C1C (text on it #EDEDED) - accent #C3B5E8 - border #232323 - success #86D0A0 · warning #E3C58A · danger #EE9A9A - chart series #8FD1C8, #C3B5E8, #E3C58A, #8FB4E3, #5E5E5E Radius: sm 6px, md 10px, lg 14px, xl 20px, pill 999px Border width: 1px Shadows: sm `none`, md `none`, lg `none` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1 density Motion: 200ms cubic-bezier(.2,.7,.2,1) ## Typography (Latin + Thai) - Headings: Manrope 500/600/700 with Thai fallback Anuphan 500/600/700 - Body: Inter 400/500/600 with Thai fallback Noto Sans Thai 400/500/600 - Mono: JetBrains Mono - Google Fonts URL: https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Anuphan:wght@500;600;700&family=Noto+Sans+Thai:wght@400;500;600&display=swap - CSS stacks: heading `"Manrope", "Anuphan", system-ui, sans-serif`; body `"Inter", "Noto Sans Thai", system-ui, sans-serif`; mono `"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, "Noto Sans Thai", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Noto Sans Thai — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.75rem, 6.5vw, 5.5rem), heading weight 600, heading tracking -0.035em (Latin only), uppercase small labels (Latin only). - 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: Anuphan’s open, loopless geometry matches Manrope’s modern grotesque; Noto Sans Thai has the sturdy strokes and large x-height that stay crisp in light-on-black text, like Inter. ## Components - Primary button: #8FD1C8 fill, #000 text, pill; hover = slightly lighter #A9DDD6 plus 4px rgba(143,209,200,0.12) ring and a 22px soft glow; no translate - Secondary button: #000 fill, 1px #333 border, #EDEDED text; hover = #0F0F0F fill, #4A4A4A border - Cards: #000 fill, 1px #232323 border, 14px radius, hover border #3A3A3A; featured/pricing highlight = #0A0A0A fill, mint-tinted border and a 1px mint ring with the standard glow - Inputs: #000 fill, 1px #333 border, 10px radius, #6A6A6A placeholder; focus = mint border + 3px 12% mint ring + 16px faint glow - Badges/chips: black with 1px #333 hairline and coloured text (pastel success/warning/danger); active chip = solid #FFFFFF with #000 text - Switch: #1A1A1A track with grey knob → mint track with black knob; progress bars are 4px on a #141414 track with a mint glowing fill - Dashboard: icon rail on black, active item outlined in mint with a soft halo; KPIs in 500-weight tabular white numerals - Charts: #1E1E1E solid gridlines, mint line with 4px drop-shadow glow, secondary series a #5E5E5E line (its legend dot is #5E5E5E too), heatmap from #0D0D0D to mint, only the latest bar highlighted - Mobile tab bar: #000 with a 1px #232323 top hairline, grey icons, active icon mint with a 6px glow - Mobile sticky CTA: solid #000 bar with a 1px #232323 top hairline — never a gradient fade ## 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 → logos → features → showcase → stats → testimonials → faq → cta. Feature section as alternating. Minimal transparent nav over black with a hairline bottom. Immersive centred hero with the eclipse horizon, followed by a muted grey logo row between hairlines. Features alternate left/right: each art panel is a black box (radial #0A0A0A→#000 centre) with a thin glowing mint ring around a single icon. Showcase (media scenario): a tabbed panel with a mint underline on the active tab, holding hairline cards such as an episode or article list with 4px mint progress bars and a now-playing card. Stats: numerals at 500 weight (the lightest allowed; never 300), −0.04em Latin tracking, tabular figures, 1px #333 left hairline per stat. Testimonials and FAQ are hairline cards/rows; the CTA is a black card with a 1px mint light-leak along its top edge. Dashboards use the icon rail, black widgets with #232323 hairlines and one mint data series. ## Content Use realistic product copy (fictional brand) suited to: Video, music and podcast apps. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Use #000000 for the page and full-bleed sections - Lift surfaces with 1px #232323 hairlines (#333 for input and button hairlines) or ≤ #141414 fills, not shadows - Desaturate accents to pastel (e.g. #8FD1C8) so they do not vibrate on black - Use off-white #EDEDED for body text and #FFFFFF only for headings ## Don't - No dark-grey #121212 page backgrounds — that is Material dark, not OLED - No saturated neon or big glows (that turns cyberpunk) - No drop shadows — they are invisible on black - Don’t use thin 300-weight body text; it blooms and smears - Dark grey (#121212, #18181B) page backgrounds — that is Material dark or Linear-style SaaS, not OLED - Saturated neon, multiple glow colours or heavy bloom (reads as cyberpunk) - Decorative gradients, film grain, vignettes or atmospheric lighting (reads as dark cinema) — only the CTA light-leak and radial art-panel centres are allowed - Drop shadows for elevation — they disappear on black; use hairlines - Thin 300-weight or small grey body text that smears on OLED - Large filled grey cards that waste the true-black effect ## Stack notes One self-contained HTML file with a