SaaS Mobile (High-Tech Boutique)

Also called: Premium fintech app, Neobank UI, High-tech boutique

Midnight navy, one electric-blue gradient and glossy metal-card surfaces — the polished feel of a premium neobank app.

“Electric blue card”Mobile‑first StylesEra: 2020s (neobank era)LuxuryTechyTrustworthyBold

saas-mobile-high-tech-boutique / landingEN

saas-mobile-high-tech-boutique / 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 lg22pxRadius xl28pxDensity×1.05Display size×1Latin headingLatin bodyThai headingThai body

Colours · Dark

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.

electric blue gradientmidnight navyglossy card sheenmetal payment cardblue under-glowbig tabular numbersfloating tab barone-hue palette

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)

Not to be confused with

Glassmorphism →Glassmorphism shows a multi-colour backdrop through frosted, blurred panels; High-Tech Boutique uses opaque glossy navy cards and a single electric-blue gradient.Linear-style Dark SaaS →Linear-style dark SaaS is grey, flat and hairline-thin; High-Tech Boutique is saturated blue, glossy and mobile-first with big rounded cards.Bitcoin DeFi →Bitcoin/DeFi leans on orange-gold and crypto motifs; High-Tech Boutique is a cool blue, regulated-bank premium look.

On mobile

The style is native here: the hero card on Home becomes an electric-blue metal payment card, lists sit on glossy navy sheets, and a floating pill tab bar glows under the active icon. Drop the under-glow on long lists to keep scrolling cheap.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinSora · 500/600/700

The quick brown fox

Heading · ThaiK2D · 500/600/700

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

Body · LatinInter · 400/500/600

Clear words make shared decisions.

Body · ThaiNoto Sans Thai · 400/500/600

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

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.

Colour palette

Light

Dark

Design tokens

Radius	`sm 10px · md 14px · lg 22px · xl 28px · pill 999px`
Border	`1px`
Shadow	`0 14px 32px rgba(0,6,30,0.45)`
Display	`clamp(2.6rem, 5.6vw, 4.6rem)`
Motion	`240ms cubic-bezier(.2,.8,.2,1)`
Density	`×1.05`

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 · SaaS Mobile (High-Tech Boutique) (saas-mobile-high-tech-boutique) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is dark: add class="dark" to <html>.
 * 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=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
 */
:root {
  --radius: 22px;
  --background: #F2F5FF;
  --foreground: #0A1230;
  --card: #FFFFFF;
  --card-foreground: #0A1230;
  --popover: #FFFFFF;
  --popover-foreground: #0A1230;
  --primary: #2A5CFF;
  --primary-foreground: #FFFFFF;
  --secondary: #00A9D6;
  --secondary-foreground: #03122E;
  --muted: #E6ECFF;
  --muted-foreground: #4A5578;
  --accent: #E6ECFF;
  --accent-foreground: #0A1230;
  --destructive: #D93556;
  --border: #D3DCF7;
  --input: #D3DCF7;
  --ring: #2A5CFF;
  --chart-1: #2A5CFF;
  --chart-2: #00A9D6;
  --chart-3: #7E96F0;
  --chart-4: #0E9F6E;
  --chart-5: #9AA6C7;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #0A1230;
  --sidebar-primary: #2A5CFF;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #E6ECFF;
  --sidebar-accent-foreground: #0A1230;
  --sidebar-border: #D3DCF7;
  --sidebar-ring: #2A5CFF;
}

.dark {
  --background: #050A1C;
  --foreground: #F2F5FF;
  --card: #0D1631;
  --card-foreground: #F2F5FF;
  --popover: #0D1631;
  --popover-foreground: #F2F5FF;
  --primary: #2A5CFF;
  --primary-foreground: #FFFFFF;
  --secondary: #00D1FF;
  --secondary-foreground: #03122E;
  --muted: #131F44;
  --muted-foreground: #A3AECF;
  --accent: #131F44;
  --accent-foreground: #F2F5FF;
  --destructive: #FF5C7A;
  --border: #22305C;
  --input: #22305C;
  --ring: #2A5CFF;
  --chart-1: #3D7BFF;
  --chart-2: #00D1FF;
  --chart-3: #8FA9FF;
  --chart-4: #2EE59D;
  --chart-5: #5A6A99;
  --sidebar: #0D1631;
  --sidebar-foreground: #F2F5FF;
  --sidebar-primary: #2A5CFF;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #131F44;
  --sidebar-accent-foreground: #F2F5FF;
  --sidebar-border: #22305C;
  --sidebar-ring: #2A5CFF;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · SaaS Mobile (High-Tech Boutique) (saas-mobile-high-tech-boutique) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is dark: add class="dark" to <html>.
 * 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=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
 */
@theme {
  --color-bg: #F2F5FF;
  --color-surface: #FFFFFF;
  --color-surface-2: #E6ECFF;
  --color-text: #0A1230;
  --color-text-muted: #4A5578;
  --color-primary: #2A5CFF;
  --color-on-primary: #FFFFFF;
  --color-secondary: #00A9D6;
  --color-on-secondary: #03122E;
  --color-accent: #1E3FCC;
  --color-border: #D3DCF7;
  --color-success: #0E9F6E;
  --color-warning: #B86E00;
  --color-danger: #D93556;
  --color-chart-1: #2A5CFF;
  --color-chart-2: #00A9D6;
  --color-chart-3: #7E96F0;
  --color-chart-4: #0E9F6E;
  --color-chart-5: #9AA6C7;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(0,8,40,0.35);
  --shadow-md: 0 14px 32px rgba(0,6,30,0.45);
  --shadow-lg: 0 28px 70px rgba(20,60,255,0.30);
  --font-heading: "Sora", "K2D", system-ui, sans-serif;
  --font-body: "Inter", "Noto Sans Thai", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, "Noto Sans Thai", monospace;
}

.dark {
  --color-bg: #050A1C;
  --color-surface: #0D1631;
  --color-surface-2: #131F44;
  --color-text: #F2F5FF;
  --color-text-muted: #A3AECF;
  --color-primary: #2A5CFF;
  --color-on-primary: #FFFFFF;
  --color-secondary: #00D1FF;
  --color-on-secondary: #03122E;
  --color-accent: #7EA2FF;
  --color-border: #22305C;
  --color-success: #2EE59D;
  --color-warning: #FFB547;
  --color-danger: #FF5C7A;
  --color-chart-1: #3D7BFF;
  --color-chart-2: #00D1FF;
  --color-chart-3: #8FA9FF;
  --color-chart-4: #2EE59D;
  --color-chart-5: #5A6A99;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · SaaS Mobile (High-Tech Boutique) (saas-mobile-high-tech-boutique). Default mode: dark. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.9608,
            1
          ],
          "hex": "#f2f5ff"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.902,
            0.9255,
            1
          ],
          "hex": "#e6ecff"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.0706,
            0.1882
          ],
          "hex": "#0a1230"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2902,
            0.3333,
            0.4706
          ],
          "hex": "#4a5578"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.3608,
            1
          ],
          "hex": "#2a5cff"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0.6627,
            0.8392
          ],
          "hex": "#00a9d6"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0118,
            0.0706,
            0.1804
          ],
          "hex": "#03122e"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1176,
            0.2471,
            0.8
          ],
          "hex": "#1e3fcc"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8275,
            0.8627,
            0.9686
          ],
          "hex": "#d3dcf7"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0549,
            0.6235,
            0.4314
          ],
          "hex": "#0e9f6e"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7216,
            0.4314,
            0
          ],
          "hex": "#b86e00"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.851,
            0.2078,
            0.3373
          ],
          "hex": "#d93556"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.3608,
            1
          ],
          "hex": "#2a5cff"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0.6627,
            0.8392
          ],
          "hex": "#00a9d6"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4941,
            0.5882,
            0.9412
          ],
          "hex": "#7e96f0"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0549,
            0.6235,
            0.4314
          ],
          "hex": "#0e9f6e"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6039,
            0.651,
            0.7804
          ],
          "hex": "#9aa6c7"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0196,
            0.0392,
            0.1098
          ],
          "hex": "#050a1c"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.051,
            0.0863,
            0.1922
          ],
          "hex": "#0d1631"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0745,
            0.1216,
            0.2667
          ],
          "hex": "#131f44"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.9608,
            1
          ],
          "hex": "#f2f5ff"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6392,
            0.6824,
            0.8118
          ],
          "hex": "#a3aecf"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.3608,
            1
          ],
          "hex": "#2a5cff"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0.8196,
            1
          ],
          "hex": "#00d1ff"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0118,
            0.0706,
            0.1804
          ],
          "hex": "#03122e"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4941,
            0.6353,
            1
          ],
          "hex": "#7ea2ff"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1333,
            0.1882,
            0.3608
          ],
          "hex": "#22305c"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1804,
            0.898,
            0.6157
          ],
          "hex": "#2ee59d"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7098,
            0.2784
          ],
          "hex": "#ffb547"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3608,
            0.4784
          ],
          "hex": "#ff5c7a"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2392,
            0.4824,
            1
          ],
          "hex": "#3d7bff"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0.8196,
            1
          ],
          "hex": "#00d1ff"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5608,
            0.6627,
            1
          ],
          "hex": "#8fa9ff"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1804,
            0.898,
            0.6157
          ],
          "hex": "#2ee59d"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3529,
            0.4157,
            0.6
          ],
          "hex": "#5a6a99"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 10,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 14,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 22,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 28,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0.0314,
              0.1569
            ],
            "hex": "#000828",
            "alpha": 0.35
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 2,
            "unit": "px"
          },
          "blur": {
            "value": 8,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0.0235,
              0.1176
            ],
            "hex": "#00061e",
            "alpha": 0.45
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 14,
            "unit": "px"
          },
          "blur": {
            "value": 32,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0784,
              0.2353,
              1
            ],
            "hex": "#143cff",
            "alpha": 0.3
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 28,
            "unit": "px"
          },
          "blur": {
            "value": 70,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Sora",
        "K2D",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Inter",
        "Noto Sans Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "JetBrains Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Noto Sans Thai",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 600
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 240,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.2,
      0.8,
      0.2,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.05
  }
}

Prompt builder

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

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 3
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!