# SaaS Mobile (High-Tech Boutique) > Midnight navy, one electric-blue gradient and glossy metal-card surfaces — the polished feel of a premium neobank app. - Nickname: Electric blue card - Also called: Premium fintech app, Neobank UI, High-tech boutique - Category: Mobile‑first Styles - Moods: Luxury, Techy, Trustworthy, Bold - Industries: Fintech & Banking, SaaS, Startup & Tech, AI Products - Style page: https://uilingo.dev/styles/saas-mobile-high-tech-boutique/ Born on the phone, this style dresses a fintech or SaaS app like a boutique: a deep midnight canvas, a single electric-blue-to-cyan gradient for every primary action, and cards that look like glossy payment cards — dark enamel with a diagonal specular sheen, a hairline top highlight and soft blue under-glow. Numbers are big, tabular and confident; everything is rounded (14–28px), spaced generously and limited to one hue family so it feels expensive rather than playful. ## Best for - Neobank, wallet and card apps - Premium subscription SaaS mobile apps - Investment and payments dashboards - Product launch pages for app-first startups ## Avoid for - Government or public-service forms - Kids and education products - Content-heavy reading sites ## Do - Keep to one hue family: navy surfaces, the electric gradient #1B3DFF → #2A5CFF → #00C2FF for every primary action - Use the sheen (155° white 10% → 0) on cards, not on text - Set balances and KPIs in large tabular figures with a muted currency unit - Use a floating, rounded tab bar with a glowing active icon ## Don't - Don’t add a second bright hue (purple/pink blobs read as glassmorphism or aurora) - Don’t use backdrop-filter or see-through panels; surfaces are opaque enamel. A soft glow blob behind the hero is fine. - Don’t use thin hairline-only cards with no gloss (that is Linear-style SaaS) ## Audit Passed after 3 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 "SaaS Mobile (High-Tech Boutique)" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: dark ## The style in one line Midnight navy, one electric-blue gradient and glossy metal-card surfaces — the polished feel of a premium neobank app. Design keywords: electric blue gradient, midnight navy, glossy card sheen, metal payment card, blue under-glow, big tabular numbers, floating tab bar, one-hue palette. ## Visual language A premium neobank app: a deep midnight-navy canvas (#050A1C) lit by one soft electric-blue glow from the top-right, opaque enamel cards with a diagonal specular sheen and a 1px white rim highlight, and a single electric-blue → cyan gradient (#1B3DFF → #2A5CFF → #00C2FF) that marks every primary action and the hero 'metal card'. Everything is rounded (14–28px), generously spaced and confined to one cool hue family, with big confident tabular numbers in a wide geometric sans. It should feel expensive, precise and calm — boutique, not gamer. ## Signature details (must be visible) - Electric gradient linear-gradient(135deg, #1B3DFF 0%, #2A5CFF 42%, #00C2FF 100%) on primary buttons, active nav/tab items, chips, toggles and progress - Glossy enamel cards: background linear-gradient(155deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.025) 36%, transparent 37%) over a navy surface #0D1631, 1px #22305C border, inset 0 1px 0 rgba(255,255,255,.09) rim, drop shadow = shadow.md (0 14px 32px rgba(0,6,30,.45)) - Metal payment card: the mobile home hero, highlighted pricing plan, first dashboard KPI and CTA panel are the electric gradient with a diagonal light stripe (115deg, rgba(255,255,255,.16) between 46% and 52%) - Gold EMV chip (38x28px, radius 6px, linear-gradient(135deg,#F5E6B8,#C9A24E)) appears only on payment-card mocks (the mobile home hero card and the mini card in the web bento tile); never on KPI, pricing or CTA panels - Blue under-glow: 0 10px 30px rgba(42,92,255,.45) under primary buttons and active icons; chart line 1 has a 6px blue drop-shadow glow - Headline gradient text from #F2F5FF to #8FB4FF to #00D1FF on the hero's key phrase; wrap the gradient phrase in white-space:nowrap or give it its own line so Thai never breaks inside it. Below 560px drop white-space:nowrap and keep the gradient phrase on its own line with display:block. Apply the -0.03em heading tracking only under html[lang=en]; on Thai pages headings use letter-spacing:0. Do not wrap Latin runs in spans - Eyebrows: 0.72rem uppercase Latin with 0.16em tracking in #8FB4FF, led by an 18×6px glowing gradient capsule. Thai eyebrow 0.8rem, weight 500, letter-spacing 0, colour #8FB4FF, no case; an optional Latin prefix (e.g. 'NEW · …') stays 0.72rem with 0.16em tracking - Floating pill tab bar (mobile screens only; on a web landing page show it only inside a phone mock, never as a stand-alone bar under the hero) in solid navy (#121D42 → #0A1230) whose active icon sits in a 42px electric-gradient circle with glow - JetBrains Mono 500 only for card numbers (•••• 4417), IBAN/account digits and table amounts; everything else is Sora/Inter (K2D/Noto Sans Thai) - Decorative extras allowed outside the tokens (and only these): gradient stops #1B3DFF and #00C2FF, headline gradient tint #8FB4FF, tab bar fill #121D42 → #0A1230, focus border #4D7BFF, card chip gold #F5E6B8 → #C9A24E, logo-row grey #7C88B0; glows rgba(42,92,255,.45) under-glow (0 10px 30px), rgba(20,60,255,.28) card hover (0 18px 44px), rgba(42,92,255,.6) primary hover (0 14px 36px, with inset 0 1px 0 rgba(255,255,255,.4)), rgba(42,92,255,.28) focus ring (0 0 0 4px) plus rgba(0,194,255,.25) focus glow (0 0 24px), rgba(42,92,255,.8) chart line glow ## Design tokens — use these exact values Colours (dark mode): - background #050A1C - surface #0D1631 - surface-2 #131F44 - text #F2F5FF - text-muted #A3AECF - primary #2A5CFF (text on it #FFFFFF) - secondary #00D1FF (text on it #03122E) - accent #7EA2FF - border #22305C - success #2EE59D · warning #FFB547 · danger #FF5C7A - chart series #3D7BFF, #00D1FF, #8FA9FF, #2EE59D, #5A6A99 Radius: sm 10px, md 14px, lg 22px, xl 28px, pill 999px Border width: 1px Shadows: sm `0 2px 8px rgba(0,8,40,0.35)`, md `0 14px 32px rgba(0,6,30,0.45)`, lg `0 28px 70px rgba(20,60,255,0.30)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.05 density Motion: 240ms cubic-bezier(.2,.8,.2,1) ## Typography (Latin + Thai) - Headings: Sora 500/600/700 with Thai fallback K2D 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=Sora:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&family=K2D:wght@500;600;700&family=Noto+Sans+Thai:wght@400;500;600&display=swap - CSS stacks: heading `"Sora", "K2D", 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.6rem, 5.6vw, 4.6rem), heading weight 600, heading tracking -0.03em (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: K2D shares Sora’s wide geometric, slightly techno construction; Noto Sans Thai is the neutral loopless partner to Inter, so Thai balances and labels stay crisp at small sizes. ## Components - Primary button: pill, electric gradient, white 600 label, inset 0 1px 0 rgba(255,255,255,.35) and under-glow 0 10px 30px rgba(42,92,255,.45); hover brightness 1.08, lift 1px and box-shadow inset 0 1px 0 rgba(255,255,255,.4), 0 14px 36px rgba(42,92,255,.6); press scale .98 - Secondary button: pill, navy surface-2 with the gloss layer and a 1px #22305C border; ghost is muted text only - Cards: 22px radius enamel with sheen; hover lifts 3px, the border turns blue-tinted and the shadow becomes 0 18px 44px rgba(20,60,255,.28) - Inputs: 14px radius, #131F44 fill, 1px border, faint inner shadow; focus = border #4D7BFF + box-shadow 0 0 0 4px rgba(42,92,255,.28), 0 0 24px rgba(0,194,255,.25) - Badges: pill, 18% blue tint with a 25% blue border; status badges use the same recipe in mint #2EE59D, amber #FFB547 and coral #FF5C7A - Navigation: a floating rounded pill with the enamel recipe; logo tile is the electric gradient with glow - Dashboard: icon rail on the left with the active item as a glowing gradient square; the first KPI card is the metal card (no chip), the rest are enamel; charts in blue/cyan only, drawn as inline SVG paths, line 1 with filter: drop-shadow(0 0 6px rgba(42,92,255,.8)), area fill fading to transparent - Segmented control and chips: navy pill track, selected item filled with the gradient and glowing - Checkbox/radio: 7px radius navy box, checked = gradient fill with a blue glow - Landing stats: bare numbers on the canvas, Sora 600, clamp(2.2rem,4vw,3.2rem), filled with the electric gradient via background-clip:text, with no card behind them. The first-KPI-as-metal-card rule applies to dashboards only - Logo row: 6 fictional wordmarks in Sora 600 at #7C88B0, plus an optional short caption on the left in text-muted ## 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: two columns — copy left, product visual right. Navigation: pill style. Sections in order: hero → logos → features → showcase → stats → pricing → cta. Feature section as bento. Split hero: left a large gradient-text headline, short lead and two pill buttons; right a product shot made of enamel cards floating on a decorative glow blob (a div with radial-gradient(closest-side, rgba(42,92,255,.45), transparent) or filter: blur(60px)); never use backdrop-filter or see-through panels. One of the hero cards is a gradient balance card. Then a muted single-line logo row (justify space-between, no wrap on desktop), a 4-column bento feature grid with no empty cells whose large 2×2 tile is the metal card holding a mini payment card mock (gold chip, •••• 4417 in JetBrains Mono) and a balance pill, a tabbed showcase, bare gradient-filled stats, pricing with the featured plan as the metal card and a gradient CTA panel. The tabbed showcase may use CSS-only radio inputs with :checked or no more than 20 lines of vanilla JS. Mock KPI cards must never overflow their panel: give grid children min-width:0 and shrink values with clamp(); stack them one per row under 560px. Sections stay on the same midnight canvas — separated by 96px of space and a full-width 1px hairline linear-gradient(90deg, transparent, #22305C, transparent), never by colour blocks. Dashboards use a slim icon rail. ## Content Use realistic product copy (fictional brand) suited to: Neobank, wallet and card 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 - Keep to one hue family: navy surfaces, the electric gradient #1B3DFF → #2A5CFF → #00C2FF for every primary action - Use the sheen (155° white 10% → 0) on cards, not on text - Set balances and KPIs in large tabular figures with a muted currency unit - Use a floating, rounded tab bar with a glowing active icon ## Don't - Don’t add a second bright hue (purple/pink blobs read as glassmorphism or aurora) - Don’t use backdrop-filter or see-through panels; surfaces are opaque enamel. A soft glow blob behind the hero is fine. - Don’t use thin hairline-only cards with no gloss (that is Linear-style SaaS) - Orange/gold crypto accents beyond the card chip - Sharp corners, heavy black outlines or playful illustrations - Letter-spacing or uppercase on Thai labels - backdrop-filter anywhere ## Stack notes One self-contained HTML file with a