Secure Finance Flat Design demo
Secure Finance Flat Design

A clean flat-design landing page style for personal finance apps, using simple shapes, solid colors, and trustworthy professional visuals to convey security and efficiency.
Category: Corporate & SaaS
Era: 2010s Modern
Prompt: 18.0 KB · 2429 words
# CODING-AI SYSTEM PROMPT — "Secure Financial Flat Design" Landing Page

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-ready landing page on the first attempt — every section, every component state, both color themes, fully responsive. Output category: **Corporate & SaaS**.

## 0. DESIGN BRIEF

**Theme:** Secure Financial Flat Design — *Secure, Efficient, Intuitive.*
**Keywords:** personal finance, money management, flat design, secure, efficient, intuitive, clean, modern, trustworthy, organized.
**Era:** 2026+ Personal Finance.
**Visual direction:** Flat UI elements with clear data charts; status-indicating colors (green = positive, red = negative); legible sans-serif typography; simple security icons; balance-feedback micro-interactions; fast, functional transitions (0.2s ease-in-out). No gradients, no glows, no skeuomorphism — trust is conveyed through crisp flat surfaces, disciplined color blocking, and generous whitespace.

**Required sections, in order:** Sticky site header → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA → Footer with secondary links.

### 0.1 Color Palette → Token Map (Light theme — default)

- `--primary`: **#2ECC40** (Emerald Green) — brand accent, positive status, chart gains.
- `--secondary`: **#005691** (Deep Blue) — primary CTA fills, headers, trust accents.
- `--bg-primary`: **#fefefe** — page background. *(Exception: the source spec listed #FFFFFF; pure white is disallowed — use #fefefe.)*
- `--bg-secondary`: **#F0F0F0** (Light Gray) — alternating sections and card surfaces.
- `--text-primary`: **#333333** (Dark Gray).
- `--text-secondary`: **#55677A** — muted gray-blue (verify ≥ 4.5:1 on both backgrounds).
- `--text-success`: **#187A28** — darkened emerald for text/icons on light surfaces. *(#2ECC40 fails text contrast on light backgrounds — reserve the bright emerald for fills, charts, and large graphics.)*
- `--text-error`: **#C0392B** — flat red for negative status.
- `--border-default`: #E1E6EA · `--border-error`: #C0392B · `--border-success`: #187A28.
- Accents: `--accent-gold`: **#FFD700** (star ratings, badges) · `--accent-orange`: **#FF8C00** (emphasis/warnings) · `--accent-purple`: **#9370DB** (chart series and decorative shapes ONLY — it fails 4.5:1 with both #FFFFFF and #333333, so never use it for text or small icons).
- `--focus-ring`: derived from `--secondary` (light) / `--primary` (dark).

**Mandatory contrast pairings (every theme):** Deep Blue fills (#005691) pair with **#FFFFFF text** (≈7.7:1) — use for `.btn--primary`. Emerald fills (#2ECC40) pair with **#333333 text** (≈5.9:1) — never white text on emerald. Gold and Orange fills pair with **#333333 text**. Light background tokens always pair with dark text tokens and vice versa — re-verify every pairing in dark mode.

### 0.2 Dark Theme Tokens (mandatory — see Rule 1.3)

- `--bg-primary`: #0D1B26 · `--bg-secondary`: #16283A (deep blue-tinted darks).
- `--text-primary`: #F0F0F0 · `--text-secondary`: #A9BCCB.
- `--primary`: #2ECC40 (passes on dark) · `--secondary`: #4DA3D8 for text/accents (#005691 remains valid as a fill under white text).
- `--text-success`: #4CD964 · `--text-error`: #FF6B6B · `--border-default`: #24435C.
- Positive green and negative red must remain clearly distinguishable from each other in dark mode.

### 0.3 Typography & Icons

- **Text:** Google Font **Inter** (weights 400–800) via `<link>` with `preconnect`; bind to `--font-base`. Fluid sizes with `clamp()`; hierarchy through weight and size, not color tricks.
- **Icons:** **Google Material Symbols (Outlined)** for every icon. Raw inline SVGs, local icon files, and emoji are forbidden.
- **Icon vocabulary:** security — `lock`, `shield`, `verified_user`, `security`, `key`; finance — `savings`, `account_balance`, `wallet`, `payments`, `trending_up`, `trending_down`, `pie_chart`, `bar_chart`, `receipt_long`; UI — `check_circle`, `cancel`, `arrow_forward`, `expand_more`, `close`, `star`, `light_mode`, `dark_mode`, `progress_activity`.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in `style.css`. The `style="..."` attribute is forbidden anywhere in `index.html`.
- All design properties, layout rules, and states are targeted via class/ID selectors only.
- HTML remains semantic and style-agnostic: retheming the page must require editing `style.css` only, never the markup.
- The spec's utility classes `.data-chart-flat`, `.status-indicator`, and `.security-icon-simple` must be defined in `style.css` and used for the flat data chart, status chips, and trust-badge icons respectively.

**1.2 CSS Variables & Theme Tokens**
- Define the full token set in `:root` (light) and override for dark (Rule 1.3). Required tokens: `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`, `--radius-sm` (4px), `--radius-md` (8px), `--radius-lg` (16px), `--shadow-sm`, `--shadow-md`, `--spacing-gap` (1.5rem), `--transition-fast` (0.2s), `--transition-normal` (0.3s), `--ease-standard` (ease-in-out), `--z-dropdown` (100), `--z-modal` (1000), `--z-toast` (1100), plus `--font-base` and the accent/focus tokens from Section 0.
- **Flat-design exception:** `--shadow-sm`/`--shadow-md` must exist but resolve to `none` or ultra-subtle values (e.g., `0 1px 2px rgba(0,0,0,0.06)`); hover/active feedback must come from color, border, and transform shifts — never elevation or glow.
- **Border exception:** per the flat spec, surfaces use color blocking without decorative borders by default; borders are reserved for communicating state (focus, error, success, hover accent) and separating the sticky header/footer.
- All state transitions use `var(--transition-fast) var(--ease-standard)` (0.2s ease-in-out, per the source spec).
- The sticky header must stack below `--z-dropdown`, `--z-modal`, and `--z-toast`.

**1.3 Mandatory Dark Mode Support**
- *Exception clause: although the source style specification disabled dark mode, dark mode is architecturally mandatory — implement it fully, with the light "Secure Flat" theme as the default.*
- Provide dark tokens via `@media (prefers-color-scheme: dark)` (no-JS fallback) **and** a `.dark` class on `<html>` (authoritative switch applied by JS; the class must win over the media query via source order/specificity). Switching must require zero HTML restructuring.
- Persist the user's choice in `localStorage` (key `theme`), falling back to `prefers-color-scheme` on first visit.
- Visible toggle in the sticky header: Material Icon (`light_mode`/`dark_mode`), minimum 44×44px touch target, correct `aria-pressed` state and `aria-label` ("Switch to dark theme" / "Switch to light theme").
- Status colors must remain distinguishable and all text pairings must hold ≥ 4.5:1 in dark mode.

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build every layout structure with Flexbox (`display: flex` / Tailwind flex utilities).
- Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment (e.g., `stretch` for equal-height pricing cards — allowed when documented).
- Mobile-first: all rows collapse to columns on small viewports; no horizontal scrolling at any width (test from 320px up); fluid typography via `clamp()`.

**1.5 Framework Default & Tailwind CSS Integration**
- Use Tailwind CSS (CDN) for layout/spacing utilities, or clean custom CSS organized with `@layer`/`@apply`. All utilities must map back to CSS variables or generic reusable classes (`.btn`, `.card`, `.input-group`, `.data-chart-flat`, `.status-indicator`, `.security-icon-simple`).
- Component styling lives in BEM classes (Section 5); Tailwind is limited to layout/spacing — never mix conventions for the same concern.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Inter via Google Fonts `<link>` (with `preconnect`), bound to `--font-base`; single family, weight-based hierarchy.
- Google Material Symbols for every icon; icons inherit `currentColor`; forbid raw inline SVGs, local icon files, and emoji.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component** (base `.btn` + BEM modifiers; all states as CSS classes)
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target; flat solid fills only. Variants: `.btn--primary` (Deep Blue fill, #FFFFFF text), `.btn--accent` (Emerald fill, #333333 text), `.btn--ghost` (transparent, Deep Blue text, flat border on hover), `.btn--danger` (flat red fill or red border + red text — visually distinct in BOTH themes).
- **Hover:** brightness shift (`filter: brightness(1.06)` or a darker flat token) + `cursor: pointer`. No elevation.
- **Focus:** distinct ring via `box-shadow: 0 0 0 3px var(--focus-ring)`; visible in both themes; never remove outlines without replacement.
- **Active/Pressed:** `transform: scale(0.97)` with `var(--transition-fast)`.
- **Loading (`.is-loading`):** disables interaction (`pointer-events: none`, `aria-busy="true"` via JS), prevents double-clicks/double submission, and renders a CSS spinner (border-based) or rotating Material Icon (`progress_activity`) that occupies the icon slot without changing button dimensions.
- **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`.
- **Success/Error:** temporary feedback styles driven by `--text-success` / `--text-error` (used on the Final CTA submit and modal actions).

**2.2 Card Component** (base `.card` + modifiers)
- **Default:** flexible Flexbox layout, color-blocked surfaces (`--bg-secondary` on `--bg-primary` sections and vice versa), `--radius-md`, borders only for state/separation per Rule 1.2.
- **Hover (interactive cards — Features, Pricing):** `transform: translateY(-2px)` plus a flat accent shift (border-color → `--primary` or deepened icon-tile color).
- **Focus-within:** card border/outline highlights when a child link or button receives focus.
- **Loading (Skeleton):** `.skeleton` shimmer (subtle opacity pulse — flat-compatible) with fixed dimensions to prevent layout shift; apply to Pricing/Testimonials containers during any simulated loading.
- **Empty State:** structured fallback with a Material Icon, clear guidance text, and an action — required pattern for any dynamic area that can be empty.

**2.3 Form & Input Requirements** (`.input-group`)
- **States:** Empty, Focused (ring), Filled, Valid (`--border-success` + `check_circle` icon), Invalid (`--border-error`, red text, error icon, message), Disabled, Read-only.
- **Structure:** flex container wrapping a `<label>` (explicit `for`), the input, and a dedicated error-feedback element linked via `aria-describedby`, inside a container with `aria-live="polite"`.
- **Concrete implementation:** the Final CTA email capture — client-side email validation, inline errors, loading submit, success feedback.

**2.4 Modal / Popup Requirements** (`.modal`)
- **States:** Opening, Open, Loading, Success/Error, Closing — all animated via CSS transitions (`var(--transition-fast)` / `var(--transition-normal)`).
- **UX:** centered flex overlay (`align-items: center; justify-content: center`), solid dark backdrop tint (no blur required), Material Icon close button (`close`), keyboard focus trap (Tab/Shift+Tab cycle inside), close via `Esc` and backdrop click, focus returns to the trigger on close; `role="dialog"`, `aria-modal="true"`, `aria-labelledby`.
- **Use case:** Pricing tier CTAs and the Final CTA submit open a "Confirm your plan" modal that demonstrates loading → success states.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid sizing and breakpoints with zero horizontal overflow; verify at 320px, 768px, 1024px, 1440px.
- **Smooth animations:** every state change transitions at `var(--transition-fast) var(--ease-standard)`; wrap all motion in `@media (prefers-reduced-motion: reduce)` to disable transforms and animations (including the smooth `scroll-behavior`).
- **Balance-feedback micro-interactions:** every interactive element acknowledges input instantly — buttons press (`scale(0.97)`), cards lift (`translateY(-2px)`), chart bars grow on load, status chips pulse on change. Feedback is always flat: color/transform shifts, never glow or elevation.
- **Accessibility (a11y):** WCAG AA contrast in both themes; never rely on color alone — pair green/red with icons (`trending_up`/`trending_down`), explicit signs (+/−), or text labels; semantic HTML5 (`header`, `nav`, `main`, `section`, `article`, `figure`, `footer`); correct ARIA on custom widgets (FAQ `aria-expanded` + regions, toggle `aria-pressed`, modal roles, `aria-live` for form errors/toasts/loading); logical DOM/focus order; full keyboard operability; a skip-to-content link; `scroll-margin-top` on anchor targets to offset the sticky header.
- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
- **Destructive actions:** `.btn--danger` must be visually distinct in both light and dark themes.

---

## 4. LANDING PAGE SECTION SPECIFICATIONS

**4.0 Sticky Site Header** (required chrome for the theme toggle): logo (Material Icon `savings` or `account_balance` + wordmark), anchor nav (Features, How It Works, Pricing, FAQ), theme toggle (Rule 1.3), compact `.btn--primary` "Start Free". Color-blocked, sticky, stacked below all z-index tokens. On mobile, nav links collapse behind an accessible menu button (`aria-expanded`, keyboard operable) or hide non-critical links — no horizontal scroll.

**4.1 Hero:** two-column flex (stacks below ~900px). Left: eyebrow badge, H1, subheadline, dual CTAs (`.btn--primary` "Start Free" + `.btn--ghost` "See How It Works" anchoring to How It Works), trust row of `.security-icon-simple` badges (`lock` "256-bit encryption", `shield` "Bank-level security", `verified_user` "Read-only access"). Right: flat dashboard mockup `.card` — balance summary, `.data-chart-flat` bar chart (flex bars; green for gain months, red for loss months), `.status-indicator` chips ("+12.5% this month" with `trending_up` / "−3.2% dining out" with `trending_down`, explicit signs included), mini transaction list with Material Icons. The mockup is illustrative: `aria-hidden="true"` with a screen-reader-only text summary; bars animate height on load (reduced-motion aware).

**4.2 Features — 3 cards:** section header (eyebrow + H2 + subtitle), then 3 `.card` components in a flex row (column on mobile). Each: flat icon tile (Material Icon on a solid color block — emerald, deep blue, gold), H3, description. Suggested features: "Smart Budgets" (`savings`), "Bank-Grade Security" (`lock`), "Clear Insights" (`pie_chart`). Full card state set per 2.2.

**4.3 How It Works — 3 steps:** numbered 01/02/03 with a connecting line built in pure CSS (hidden or vertical on mobile). Steps: 1 "Connect your accounts" (`lock`), 2 "Set your budget" (`tune`), 3 "Watch it grow" (`trending_up`). Each step: icon, H3, short copy.

**4.4 Testimonials:** 3 `.card` testimonials in a responsive flex row. Each: flat avatar (initials in a colored circle — no external images), 5-star rating (`star` icons in `--accent-gold`; container carries `aria-label="Rated 5 out of 5 stars"`, icons `aria-hidden`), `<blockquote>` quote, `<figcaption>` name + role. Realistic persona copy.

**4.5 Pricing — 3 tiers:** 3 `.card` tiers (Free / Pro / Family). Middle tier `.card--featured`: "Most Popular" badge (`--accent-gold` or emerald), stronger flat treatment (Deep Blue header block or primary border), slightly larger on desktop. Each tier: name, price + "/month", feature list with `check_circle` icons, CTA (`.btn--primary` on featured, `.btn--ghost` elsewhere). CTAs open the confirmation modal (2.4). Equal-height cards via flex `stretch` (documented `align-items` exception per Rule 1.4).

**4.6 FAQ:** accessible accordion, 5–6 items. Each item: `<button aria-expanded aria-controls>` question + `expand_more` icon (rotates 180° on open) + collapsible region (`role="region"`, `aria-labelledby`). Height transition via CSS (`grid-template-rows: 0fr → 1fr` or equivalent). Native-button keyboard operability. Real Q&A covering security, pricing, data export, and cancellation.

**4.7 Final CTA:** full-width flat band (Deep Blue fill, #FFFFFF text — verify contrast), centered flex column: H2, subcopy, `.input-group` email form (full state set per 2.3, loading submit, success feedback), reassurance row with `.security-icon-simple` (`lock` "Free 30-day trial • No credit card required • Cancel anytime").

**4.8 Footer with secondary links:** top area as a wrapping flex row: brand block (logo, one-line tagline) + link columns — Product (Features, Pricing, FAQ), Company (About, Careers, Contact), Resources (Blog, Help Center, Security), Legal (Privacy Policy, Terms of Service). Bottom bar: copyright and an "All systems operational" `.status-indicator` (green dot + text). Real link labels; `href="#"` is acceptable only for genuinely unspecified destinations.

---

## 5. DELIVERABLE & OUTPUT FORMAT

- **File structure:** separate `index.html`, `style.css`, `script.js`. `index.html` references `style.css` and exactly one deferred entry point (`<script src="script.js" defer>`). No inline `<script>` blocks, no inline styles, no inline event handlers (`onclick` etc. forbidden — use `addEventListener`).
- **Naming convention:** BEM throughout (`.card__title`, `.card--featured`, `.btn--primary`, `.faq__button`…). Named exceptions: the source spec's utility classes `.data-chart-flat`, `.status-indicator`, `.security-icon-simple`. Never mix conventions.
- **`script.js` scope:** theme toggle + `localStorage` persistence, FAQ accordion, modal logic (open/close/focus trap/Esc/focus restore), form validation with loading/success states, button loading helper, optional count-up/reveal animations (reduced-motion aware). No JS frameworks.
- **Copy:** all user-facing copy in **English**, Corporate & SaaS tone, realistic personal-finance content — no lorem ipsum. Use one consistent product brand name (e.g., "FinVault") throughout.
- **Completeness:** deliver the entire landing page — all sections, all component states, both themes, responsive from 320px up — in a single first attempt.