Ledgerline — Deep-Teal + Mint Fintech Startup (Dashboard Hero)

{"summary": "A trustworthy fintech-startup landing page in a calm deep-teal world with a mint accent and cream text. Top-down: a sticky blurred teal nav, a split hero (left: a NEW-yield pill, a big 'Finance built for the speed of a startup' headline with the last word in mint, sub-copy, dual CTAs and a trust row; right: a glassy product dashboard mock showing an operating-account balance, a mint area chart and auto-categorized transactions, with a tilted virtual-card chip floating off the corner), a centered 'trusted by' compliance logo strip, a bento feature grid mixing wide and tall cards with inline product mocks (send-money, receipt-matching, per-card controls, accounting sync), a stats / traction band of four big mint figures plus a pull-quote, a security & compliance section with a certifications badge grid (SOC 2 / PCI / GDPR / ISO), a glowing centered CTA, and a four-column footer. A soft mint radial 'grain' glow sits behind the hero, traction band and CTA.", "style": {"description": "Calm, premium fintech aesthetic built on deep teal surfaces, a single mint accent, and warm cream text. The whole page lives on teal-900 #0f3d3e with darker teal-950 #0a2a2b panels and lighter teal-800 #134847 / teal-700 #1b5a58 card fills; the one accent is mint #4fd1c5 (used for the logo mark, primary buttons, the chart line, positive numbers, check marks, eyebrows and tinted icon tiles), and all text is cream #eef5f0 at varying opacities. Surfaces read as soft frosted glass via thin inset cream hairline 'rings' (inset 0 0 0 1px rgba(238,245,240,0.08)) and deep ambient drop shadows rather than hard borders. A reusable mint 'grain' backdrop (layered radial mint glows + a subtle top vertical wash) sits behind the hero, traction band and CTA. Trust, calm, and clarity over flash: lots of breathing room, tabular-numeric figures for money, gentle hover tints, no harsh contrast.", "prompt": "Build a calm, trustworthy fintech look. Background is teal-900 #0f3d3e; panels and the darkest surfaces use teal-950 #0a2a2b, card fills use teal-800 #134847 and the floating card chip uses a teal-700 #1b5a58 -> teal-800 gradient. The single accent is mint #4fd1c5: use it for the logo mark, primary pill buttons (mint fill, teal-950 #0a2a2b text), the area-chart stroke and gradient, positive/credit amounts, check marks, eyebrow labels, tinted icon tiles (mint at ~12-15% opacity behind a mint glyph) and 'Live' status dots. All text is cream #eef5f0: headings at full strength, body at ~65-70% (cream/65-70), muted meta at ~60%. Treat every surface as soft frosted glass: instead of hard borders use a 1px inset cream hairline ring `box-shadow: inset 0 0 0 1px rgba(238,245,240,0.08)` plus deep ambient shadows (cards: 0 24px 60px -28px rgba(0,0,0,0.7); the dashboard mock: 0 40px 90px -40px rgba(0,0,0,0.75)); primary buttons get a soft mint glow `0 10px 30px -10px rgba(79,209,197,0.5)`. Reusable 'grain' backdrop = layered radial gradients: a strong mint bloom rgba(79,209,197,0.18) at 82% -12%, a faint mint bloom rgba(79,209,197,0.07) at 6% 4%, over a subtle top-down teal wash; reuse it behind the hero, the traction band (at ~70% opacity) and the CTA (plus a big mint blur orb). Typography: Inter only (with optical sizing, weights 400-800; enable ss01/cv11), very tight tracking on display headings (letter-spacing ~ -0.045em) and generous line-height on body; money and stats use tabular-nums. Radii: rounded-2xl cards, rounded-xl inner mocks, rounded-full pills. Mood = composed, premium, reassuring; mint is the only color that ever 'pops'."}, "layout_and_structure": {"description": "A single frameless, fully responsive web page (not a fixed-size mockup), centered in a max-w-7xl container with px-6/lg:px-8 gutters. Vertical flow: sticky blurred nav -> split hero (copy left, dashboard mock right) -> centered 'trusted by' compliance strip -> a bento feature grid (wide + tall cards with inline mocks) -> a stats/traction band (4 figures + pull-quote) -> a security & compliance section (copy + certifications badge grid) -> a glowing centered CTA -> a 4-column footer. The hero is the centerpiece: a two-column grid (lg:[1.04fr_1fr]) that stacks on mobile, with the product dashboard mock and a tilted floating virtual-card chip on the right. The nav stays pinned and frosted while the mint grain sections scroll beneath. Responsive: the hero, feature bento and traction grids collapse to one column, the cert grid goes 2->1, the floating card chip and some trust items hide on small screens, and headline sizes clamp down.", "prompts": [{"part": "Sticky nav", "prompt": "A fixed top-0 full-width header with a frosted teal bar: background teal-900/85 (#0f3d3e at 85%), backdrop-blur-md, 1px bottom border via cream/10. Inside a max-w-7xl row (h-16, px-6/lg:px-8): left = a mint rounded-lg logo square (bg mint, teal-950 icon, a ph:wave-sine glyph) + 'Ledgerline' wordmark in bold tight tracking, followed (hidden on mobile) by text links Platform / Security / Customers / Pricing / Docs in 13.5px cream/70 that brighten to cream on hover; right = a ghost 'Sign in' text link (hidden on small) and a mint rounded-full pill button 'Open an account' with a trailing arrow icon (mint fill, teal-950 text)."}, {"part": "Hero (split)", "prompt": "A two-column hero (lg grid-cols-[1.04fr_1fr], gap-12) on the mint 'grain' backdrop, pt-16/lg:pt-24 pb-16/lg:pb-24, stacking on mobile. LEFT copy: a ring-outlined glass pill containing a small mint 'NEW' chip + 'Yield on idle cash, now at 4.18% APY'; a huge Inter-extrabold headline 'Finance built for / the speed of a / startup.' (clamp ~42px mobile -> ~60px desktop, leading ~1.04, tracking -0.045em) where the final word 'startup.' is mint; a ~16px cream/70 sub-paragraph (max-w-md) about corporate cards, banking and spend controls in one account; a button row with a mint pill 'Open an account' (with arrow, mint glow) and a glass ring 'See it in motion' (with a mint play-circle icon); and a trust row of three small cream/70 items with mint icons ('FDIC-insured to $3M', 'Live in 10 minutes', 'No monthly fees', the last hidden on small). RIGHT: the product dashboard mock (see component) with a soft mint blur halo behind it and a tilted floating virtual-card chip off the bottom-left corner."}, {"part": "Trusted-by compliance strip", "prompt": "A full-width band with top+bottom cream/10 borders and a teal-950/40 fill. Centered: a thin cream gradient rule, then 'Trusted by 26,000+ ambitious teams' in 12px uppercase cream/65 with 0.18em tracking, then a wrapped, centered row of ~6 invented company wordmarks at cream/70 (each a Phosphor outline icon — orbit, hexagon, triangle, square, diamonds-four, circle-half — plus a 16px semibold name; the last hidden below md)."}, {"part": "Feature bento grid", "prompt": "A features section (py-20/lg:py-28). Header (max-w-2xl): a mint 13px uppercase eyebrow 'The account that does the busywork', an Inter-extrabold 'One place for every dollar you move.' heading, and a cream/65 intro. Below, a bento grid (md:2 / lg:3, gap-5, items-stretch) of teal-800/60 glass cards (ringline + softcard shadow): (1) a WIDE card (md/lg col-span-2) 'Pay anyone, in seconds' with a mint lightning icon tile and an inline 'outgoing wire' mock (an Approved status row, a To/Amount row with a mint arrow, a mint progress bar at 88%, 'arrives in ~8 seconds'); (2) 'Receipts that catch themselves' with a mint receipt icon and a '412 matched today / 0 needing review' mini-stat with a mint check tile; (3) 'Controls, per card' with a mint sliders icon and two limit rows (SaaS budget $5,000/mo, Travel Auto-approve in mint); (4) a WIDE card (md col-span-2) 'Close the books in a day, not a week' with a mint books icon and a row of four integration chips (QuickBooks, Xero, NetSuite, Slack alerts), each a glass pill with a mint plugs-connected icon."}, {"part": "Stats / traction band", "prompt": "A bordered band (top+bottom cream/10) on teal-950/55 with the mint grain at ~70% opacity behind it. Inside max-w-7xl, a 2-col grid (lg:[0.9fr_1.1fr]): LEFT = a mint eyebrow 'Traction', an extrabold 'Founders move faster on Ledgerline.' heading, a cream/65 line, and a glass ring 'Read the customer stories' link; RIGHT = a 2x2 grid of stat cells separated by cream/10 hairlines (teal-900 cells), each a big tabular-num mint-or-cream figure with a small unit and a cream/65 caption: '$14B' (mint) processed for startups, '11 hrs' saved on close monthly, '4.18%' (mint) APY on idle cash, '99.99%' uptime. Below, a centered max-w-3xl pull-quote: a big Inter-semibold blockquote with mint opening/closing quote marks about switching the whole company over in an afternoon, and a figcaption with a mint avatar chip (initials), a bold name and a cream/70 role."}, {"part": "Security & compliance", "prompt": "A two-column section (lg grid-cols-[1fr_1.05fr], py-20/lg:py-28). LEFT copy: a mint eyebrow 'Security & compliance', an extrabold 'Bank-grade by default, audited continuously.' heading, a cream/65 paragraph, and a 3-item list (mint lock-key / fingerprint / bank icons) covering AES-256 encryption, SSO/SCIM/roles, and FDIC insurance to $3M. RIGHT: a teal-800/50 glass card titled 'Certifications' with a mint 'All current' seal pill, then a 2x2 grid of cert tiles (each a teal-950/60 glass row with a mint tinted icon tile + label + sub): 'SOC 2 Type II / Renewed 2026', 'PCI DSS / Level 1', 'GDPR / EU & UK ready', 'ISO 27001 / Certified', and a full-width 'Trust center' row beneath with a mint file-lock icon and an arrow."}, {"part": "CTA + footer", "prompt": "A full-bleed CTA on teal-950 with the mint grain plus a large mint blur orb glowing from the bottom center. Centered max-w-2xl: a glass ring pill 'Approved in minutes, not weeks' (mint clock icon), an extrabold two-line headline 'Give your money the account it deserves.', a cream/70 paragraph, a button row (mint pill 'Open an account' with arrow + glow, glass ring 'Talk to sales'), and a cream/65 'Member FDIC' disclosure line. Then a footer on teal-950 (top cream/10 border): a 4-column grid (md:[1.4fr_1fr_1fr_1fr]) with a wide brand column (mint logo mark + 'Ledgerline', a short cream/70 description, and X / LinkedIn / GitHub glass icon buttons that turn mint on hover) plus three link columns (Product, Company, Trust) with 12px uppercase cream/65 headings and cream/65 links; a top-bordered bottom bar splits the © + 'Member FDIC' line from Privacy / Terms / Disclosures links."}]}, "special_ui_components": [{"component": "Product dashboard mock", "description": "The hero's right-side product proof: a glassy operating-account dashboard with a balance, a mint area chart and auto-categorized transactions, sitting on a soft mint halo.", "prompt": "Build a rounded-2xl teal-950/80 card with the inset cream hairline ring + a deep dash-shadow, and place a blurred mint glow (-inset-6, bg mint/10, blur-3xl) behind it. Inside, top-down: (1) a top bar (border-b cream/10) with a mint wallet icon tile, an 'Operating account' label + masked number '•••• 4471 · USD', and a mint 'Live' status pill with a dot; (2) a balance block — an uppercase cream/60 'Available balance' label, a big tabular-num '$2,841,205.60' (the cents in cream/40) with a mint '+6.4%' trend chip; (3) a ~68px inline SVG area chart with a mint stroke (#4fd1c5, 2px, round caps) over a vertical mint gradient fill (0.32 -> 0 opacity); (4) three transaction rows (hover tint cream/4) each with a square icon tile, a merchant + auto-category caption, and a right-aligned tabular-num amount — AWS -$8,420.00, a mint Stripe payout +$41,910.18 (credit in mint with a mint down-left arrow tile), United Airlines -$1,204.40."}, {"component": "Floating virtual-card chip", "description": "A tilted mini credit-card that floats off the dashboard mock's bottom-left corner to sell the 'cards' product.", "prompt": "An absolutely-positioned ~214px card (hidden on small) at -bottom-10 -left-7/lg:-left-12, rotated -6deg, z-10, filled with a teal-700 -> teal-800 gradient and the inset cream ring + softcard shadow. Inside: a 'Ledgerline' label + a mint ph:wave-sine glyph on the top row, a spaced masked number '•••• •••• 4471' in tabular-nums, and a bottom row with 'VALID 08/29' and a mint 'VIRTUAL' label."}, {"component": "Frosted teal glass surface", "description": "The repeating card/pill/row treatment — frosted teal with a thin cream inset hairline ring instead of a hard border.", "prompt": "Compose surfaces from a teal fill (teal-800/60 for feature cards, teal-950/60-70 for inner mocks/rows, teal-950/80 for the dashboard) plus `box-shadow: inset 0 0 0 1px rgba(238,245,240,0.08)` as the 'ringline' and a deep ambient drop shadow ('softcard' = 0 1px 0 rgba(238,245,240,0.06) inset, 0 24px 60px -28px rgba(0,0,0,0.7)). Use rounded-2xl for cards, rounded-xl for inner mocks, rounded-lg/full for pills and chips, with gentle cream/4 -> cream/8 hover tints."}, {"component": "Mint grain backdrop", "description": "The soft multi-bloom mint glow field reused behind the hero, traction band and CTA.", "prompt": "A `.grain` layer = background-image of stacked radial-gradients: rgba(79,209,197,0.18) at 82% -12% (size 120% 90%), rgba(79,209,197,0.07) at 6% 4% (90% 70%), over a linear-gradient top wash from rgba(10,42,43,0.55) -> transparent. Reuse it absolutely-positioned behind the hero, at ~70% opacity behind the traction band, and on the CTA together with a large mint/12 blurred orb (h-72 w-[680px], blur-[120px]) glowing up from the bottom center."}, {"component": "Mint pill button + glow", "description": "The signature primary CTA reused in the nav, hero, traction and CTA sections.", "prompt": "A rounded-full button filled with mint #4fd1c5 and teal-950 #0a2a2b text, semibold, with a soft mint glow `box-shadow: 0 10px 30px -10px rgba(79,209,197,0.5)`; brighten slightly (mint/90) on hover, usually with a trailing ph:arrow-right-bold icon. Pair it with a 'glass ring' secondary button: transparent cream/4 fill + the inset cream hairline ring, cream text, cream/8 on hover."}], "special_notes": "Frameless, fully responsive web page (not a fixed-size artboard); dark/teal color-scheme only. Built with Tailwind (CDN) + a small custom-CSS layer for the grain backdrop, the inset-ring 'ringline'/'softcard'/'dash-shadow' shadows, the mint glow and tabular-nums; typography is Inter only (optical-sizing 14..32, ss01/cv11, weights 400-800) from Google Fonts, with Iconify Phosphor icons. There is no JS — every 'interactive' element (status pills, progress bar, togg'd states) is static. Key responsive behavior: the hero and traction grids collapse to one column, the feature bento wide cards drop their col-span, the certifications grid goes 2->1, the floating virtual card and the third hero trust item hide on small screens, and the nav center links collapse on mobile while the bar stays sticky/frosted. To rebrand, keep the frosted-teal-glass + single-mint-accent system and the grain backdrop, and swap the deep-teal surface ramp (#0a2a2b/#0f3d3e/#134847/#1b5a58) and the mint accent #4fd1c5."}

---
"Ledgerline — Deep-Teal + Mint Fintech Startup (Dashboard Hero)" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/ledgerline-deep-teal-mint-fintech-startup-dashboard-hero @ 6c6090694520.
powered by Styledex — https://styledex.dev

Tokens

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Ledgerline — Deep-Teal + Mint Fintech Startup (Dashboard Hero). \"Ledgerline — Deep-Teal + Mint Fintech Startup (Dashboard Hero)\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/ledgerline-deep-teal-mint-fintech-startup-dashboard-hero @ 6c6090694520.",
  "$extensions": {
    "dev.styledex": {
      "id": "superdesign-ledgerline-deep-teal-mint-fintech-startup-dashboard-hero",
      "license": "CC0-1.0",
      "attribution": "\"Ledgerline — Deep-Teal + Mint Fintech Startup (Dashboard Hero)\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/ledgerline-deep-teal-mint-fintech-startup-dashboard-hero @ 6c6090694520.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#eef5f0"
    },
    "foreground": {
      "$type": "color",
      "$value": "#0f3d3e"
    },
    "card": {
      "$type": "color",
      "$value": "#eef5f0"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#0f3d3e"
    },
    "primary": {
      "$type": "color",
      "$value": "#0f3d3e"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#0a2a2b"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#0f3d3e"
    },
    "accent": {
      "$type": "color",
      "$value": "#0a2a2b"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#e0e6e2"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#638182"
    },
    "border": {
      "$type": "color",
      "$value": "#cdd3ce"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#0f3d3e"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0.5rem"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
    }
  }
}

/* powered by Styledex — https://styledex.dev */
/* "Ledgerline — Deep-Teal + Mint Fintech Startup (Dashboard Hero)" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/ledgerline-deep-teal-mint-fintech-startup-dashboard-hero @ 6c6090694520. */
:root {
  --background: #eef5f0;
  --foreground: #0f3d3e;
  --card: #eef5f0;
  --card-foreground: #0f3d3e;
  --primary: #0f3d3e;
  --primary-foreground: #fafaf9;
  --secondary: #0a2a2b;
  --secondary-foreground: #0f3d3e;
  --accent: #0a2a2b;
  --accent-foreground: #fafaf9;
  --muted: #e0e6e2;
  --muted-foreground: #638182;
  --border: #cdd3ce;
  --destructive: #dc2626;
  --ring: #0f3d3e;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

/* powered by Styledex — https://styledex.dev */
/* "Ledgerline — Deep-Teal + Mint Fintech Startup (Dashboard Hero)" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/ledgerline-deep-teal-mint-fintech-startup-dashboard-hero @ 6c6090694520. */
/** Tailwind theme extend for Ledgerline — Deep-Teal + Mint Fintech Startup (Dashboard Hero) (superdesign-ledgerline-deep-teal-mint-fintech-startup-dashboard-hero) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#eef5f0",
        "foreground": "#0f3d3e",
        "card": "#eef5f0",
        "primary": "#0f3d3e",
        "primary-foreground": "#fafaf9",
        "secondary": "#0a2a2b",
        "accent": "#0a2a2b",
        "muted": "#e0e6e2",
        "border": "#cdd3ce",
        "destructive": "#dc2626",
        "ring": "#0f3d3e"
      },
      "borderRadius": {
        "lg": "0.5rem"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
      }
    }
  }
};

/* powered by Styledex — https://styledex.dev */
/* "Ledgerline — Deep-Teal + Mint Fintech Startup (Dashboard Hero)" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/ledgerline-deep-teal-mint-fintech-startup-dashboard-hero @ 6c6090694520. */
@layer base {
:root {
  --background: #eef5f0;
  --foreground: #0f3d3e;
  --card: #eef5f0;
  --card-foreground: #0f3d3e;
  --primary: #0f3d3e;
  --primary-foreground: #fafaf9;
  --secondary: #0a2a2b;
  --secondary-foreground: #0f3d3e;
  --accent: #0a2a2b;
  --accent-foreground: #fafaf9;
  --muted: #e0e6e2;
  --muted-foreground: #638182;
  --border: #cdd3ce;
  --destructive: #dc2626;
  --ring: #0f3d3e;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}