Remixes of finzai.webflow.io
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Finzai
description: |
Finzai presents a bold, contemporary fintech aesthetic that balances technical
confidence with approachability. The design is driven by high-contrast
typography, a vibrant lime-green accent against crisp neutrals, and generous
whitespace that conveys clarity and trust. The system prioritizes legibility
through a carefully measured type scale and deliberately sharp corners (0px
radius on buttons and containers), creating a modern, no-nonsense personality.
Imagery is used strategically in hero sections and feature blocks with
dramatic diagonal overlays in the primary accent color, adding visual energy
and movement. This is a design language built for SaaS
transparency—straightforward, unadorned, and confidence-forward.
source:
url: "https://finzai.webflow.io/"
pagesAnalyzed: 1
extractedAt: 2026-10-30
tokensMeasured: true
colors:
primary: "#E5F788"
canvas: "#FFFFFF"
on-primary: "#080808"
ink: "#080808"
body: "#4E4E4E"
muted: "#D4D4D4"
accent-1: "#0000EE"
neutral-1: "#333333"
neutral-2: "#F0F0F0"
typography:
display-xl:
fontFamily: Hanuman
fontSize: 68px
fontWeight: 300
lineHeight: 1.2
letterSpacing: 0px
display-xl-strong:
fontFamily: Hanuman
fontSize: 68px
fontWeight: 700
lineHeight: 1.2
letterSpacing: 0px
display-lg:
fontFamily: Hanuman
fontSize: 48px
fontWeight: 300
lineHeight: 1.2
letterSpacing: 0px
display-lg-strong:
fontFamily: Hanuman
fontSize: 48px
fontWeight: 700
lineHeight: 1.2
letterSpacing: 0px
heading-md:
fontFamily: Hanuman
fontSize: 30px
fontWeight: 400
lineHeight: 1.2
letterSpacing: 0px
textTransform: capitalize
heading-sm:
fontFamily: Hanuman
fontSize: 20px
fontWeight: 400
lineHeight: 1.2
letterSpacing: 0px
body-lg:
fontFamily: Hanuman
fontSize: 18px
fontWeight: 400
lineHeight: 1.2
letterSpacing: 0px
body-md:
fontFamily: Clashgrotesk
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0.32px
body-md-tight:
fontFamily: Clashgrotesk
fontSize: 16px
fontWeight: 400
lineHeight: 1.6
letterSpacing: 0px
body-md-strong:
fontFamily: Clashgrotesk
fontSize: 16px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 0px
body-md-capitalize:
fontFamily: Clashgrotesk
fontSize: 16px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 0.32px
textTransform: capitalize
button:
fontFamily: Clashgrotesk
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
textTransform: capitalize
rounded:
none: 0px
xs: 4px
spacing:
xxs: 8px
xs: 12px
sm: 16px
md: 20px
lg: 24px
xl: 32px
xxl: 36px
xxxl: 40px
section: 44px
band: 48px
shadows:
sm: "rgba(0, 0, 0, 0.05) 0px 20px 55px 0px"
elevationStrategy: single-tier
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FFFFFF"
surface: "#F7F7F7"
surfaceRaised: "#EDEDED"
text: "#080808"
textMuted: "#4E4E4E"
border: "#E1E1E1"
accent: "#7E950A"
accentFg: "#000000"
focusRing: "#E5F788"
elevation: shadow
dark:
bg: "#11110D"
surface: "#1F1F1C"
surfaceRaised: "#2B2B28"
text: "#FEFFFA"
textMuted: "#A4A5A0"
border: "#373734"
accent: "#E5F788"
accentFg: "#080808"
focusRing: "#E5F788"
elevation: "border+surface"
components:
button-primary:
typography: "{typography.body-md-strong}"
textColor: "{colors.ink}"
border: "1px solid {colors.primary}"
height: 54px
padding: "14px 24px 14px 24px"
rounded: "{rounded.xs}"
backgroundColor: "{colors.primary}"
button-text:
typography: "{typography.body-md}"
textColor: "{colors.ink}"
height: 24px
button-outline:
textColor: "rgb(218, 218, 218)"
border: "1px solid rgb(218, 218, 218)"
height: 30px
fontSize: 12px
fontFamily: "Fa brands 400"
fontWeight: 400
lineHeight: 1.67
rounded: "50%"
navigation:
textColor: "{colors.neutral-1}"
height: 54px
fontSize: 16px
fontFamily: Clashgrotesk
fontWeight: 400
lineHeight: 1.25
link:
textColor: "{colors.neutral-1}"
fontSize: 16px
fontFamily: Clashgrotesk
fontWeight: 400
lineHeight: 1.25
link-sm:
typography: "{typography.body-md-strong}"
textColor: "{colors.muted}"
states:
other-focus:
target: other
state: focus
outline: none
breakpoints:
- width: 375
containerWidth: 345
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: true
headingPx: 42
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 738
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: true
headingPx: 42
bodyPx: 16
sectionPaddingX: 0
- width: 1024
containerWidth: 994
gridColumns: 0
navLinksVisible: 4
menuToggleVisible: false
headingPx: 48
bodyPx: 16
sectionPaddingX: 0
- width: 1280
containerWidth: 1250
gridColumns: 0
navLinksVisible: 4
menuToggleVisible: false
headingPx: 48
bodyPx: 16
sectionPaddingX: 0
- width: 1440
containerWidth: 1350
gridColumns: 0
navLinksVisible: 4
menuToggleVisible: false
headingPx: 48
bodyPx: 16
sectionPaddingX: 0
coverage:
statesFound: 1
gradientsFound: 0
rolesUnassigned: 3
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
Finzai presents a bold, contemporary fintech aesthetic that balances technical confidence with approachability. The design is driven by high-contrast typography, a vibrant lime-green accent against crisp neutrals, and generous whitespace that conveys clarity and trust. The system prioritizes legibility through a carefully measured type scale and deliberately sharp corners (0px radius on buttons and containers), creating a modern, no-nonsense personality. Imagery is used strategically in hero sections and feature blocks with dramatic diagonal overlays in the primary accent color, adding visual energy and movement. This is a design language built for SaaS transparency—straightforward, unadorned, and confidence-forward.
Key Characteristics
{colors.primary} — #E5F788) paired with pure white and deep neutrals{colors.primary} — #E5F788): Primary CTAs, button fills, active states, hero accent bands, and brand mark background. High saturation, electric lime-green that commands attention on white surfaces.{colors.accent-1} — #0000EE): No measured role in the component system; appears decorative only. Reserve for special emphasis or future semantic expansion.{colors.canvas} — #FFFFFF): Default page background, card surfaces, and container fills. Creates breathing room and emphasizes content hierarchy.{colors.on-primary} — #080808): Primary text color for headings and labels on brand surfaces. Deep near-black for maximum contrast and readability.{colors.body} — #4E4E4E): Body copy and paragraph text. Mid-tone gray for comfortable reading at length.{colors.muted} — #D4D4D4): Captions, secondary text, and de-emphasized labels. Light gray for subtle hierarchy.{colors.neutral-1} — #333333): Alternative dark neutral for specialized text roles or borders.{colors.neutral-2} — #F0F0F0): Light surface alternative for subtle backgrounds and subtle section dividers.No error, success, warning, or info colors were extracted from the site. The design does not declare a semantic color ramp.
Primary (Display & Headings): Hanuman (serif, from Google Fonts)
Fallback stack: Hanuman, 'Times New Roman', serif
Secondary (Body & UI): Clashgrotesk (sans-serif, from Google Fonts)
Fallback stack: Clashgrotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XL Strong | Hanuman | 68px | 700 | 1.2 | 0px | Hero headlines; use for maximum impact |
| Display XL | Hanuman | 68px | 300 | 1.2 | 0px | Display role, lighter weight option |
| Display LG Strong | Hanuman | 48px | 700 | 1.2 | 0px | Section headings; high contrast emphasis |
| Display LG | Hanuman | 48px | 300 | 1.2 | 0px | Display role, lighter weight option |
| Heading MD | Hanuman | 30px | 400 | 1.2 | 0px | Subsection headings; capitalize |
| Heading SM | Hanuman | 20px | 400 | 1.2 | 0px | Tertiary headings and card titles |
| Body LG | Hanuman | 18px | 400 | 1.2 | 0px | Large body prose and feature descriptions |
| Body MD Strong | Clashgrotesk | 16px | 500 | 1.5 | 0px | Navigation links and emphasis text |
| Body MD | Clashgrotesk | 16px | 400 | 1.5 | 0.32px | Standard body copy; default paragraph text |
| Body MD Capitalize | Clashgrotesk | 16px | 500 | 1.5 | 0.32px | Body text with capitalization; capitalize text-transform |
| Body MD Tight | Clashgrotesk | 16px | 400 | 1.6 | 0px | Compact body text with tighter line spacing |
| Button | Clashgrotesk | 16px | 400 | 1.5 | 0px | Interactive button labels; capitalize |
| Link Default Small | Clashgrotesk | 16px | 500 | 1.5 | 0px | Secondary links and captions |
text-transform: capitalize to denote semantic emphasis (headings, buttons).background-color: #E5F788
color: #080808
font-family: Clashgrotesk
font-size: 16px
font-weight: 500
line-height: 24px
padding: 14px 24px
border: 1px solid #E5F788
border-radius: 4px
box-shadow: none
text-transform: capitalize
width: 162.844px
height: 54px
Used for primary CTAs ("Buy Now", "Download App"). High-contrast lime-green fill with dark text. Sharp 4px corners align with brand brutalism.
background-color: rgba(0, 0, 0, 0)
color: #080808
font-family: Clashgrotesk
font-size: 16px
font-weight: 400
line-height: 24px
padding: 0px
border: none
border-radius: 0px
box-shadow: none
width: 68px
height: 24px
Minimal, transparent button for secondary actions. No padding, no border, no radius—pure text on transparent ground.
background-color: rgba(0, 0, 0, 0)
color: #DADADA
font-family: Font Awesome (Brands)
font-size: 12px
font-weight: 400
line-height: 20px
padding: 0px
border: 1px solid #DADADA
border-radius: 50%
box-shadow: none
width: 30px
height: 30px
Circular icon button for social links. 50% radius creates perfect circle; light gray border and transparent fill for minimal visual weight.
font-family: Clashgrotesk
font-size: 16px
font-weight: 400
line-height: 20px
color: #333333
background-color: rgba(0, 0, 0, 0)
border: none
padding: 0px
border-radius: 0px
height: 54px
box-shadow: none
Horizontal navigation bar with transparent background. Links render flush left or center-aligned in the header. No visible border or shadow; relies on type color and positioning for hierarchy.
font-family: Clashgrotesk
font-size: 16px
font-weight: 400
line-height: 20px
color: #333333
background-color: transparent
border: none
padding: 0px
border-radius: 0px
height: 50px
Inline and standalone links. Neutral dark gray ({colors.neutral-1}). No underline by default (check stylesheet for hover state decoration).
Small Variant Link
font-family: Clashgrotesk
font-size: 16px
font-weight: 500
line-height: 24px
color: #D4D4D4
background-color: transparent
border: none
padding: 0px
border-radius: 0px
height: 24px
Secondary or footer links in muted gray. Slightly heavier weight (500) for emphasis despite lighter color.
background-color: #FFFFFF
border: none
border-radius: 0px
box-shadow: none
padding: 20px to 24px (varies by context)
Cards use flat white surfaces with no shadow. Sharp corners (0px) align with brand character. Padding follows the spacing scale ({spacing.md} or {spacing.lg}). Distinction comes from color blocking, not depth.
Diagonal or full-width accent band in {colors.primary} (#E5F788) overlays or separates content sections. Used as a visual divider and motion element. Often contains hero imagery or tilted containers for dynamic effect.
No detailed input styling was extracted from the page. Treat this as a Known Gap—form controls may exist in deeper pages or authentication surfaces not analyzed.
Base unit: 4px
Scale (multiples of 4px):
{spacing.xxs} = 8px (tight margins, icon spacing){spacing.xs} = 12px (small gaps, internal padding){spacing.sm} = 16px (standard margin){spacing.md} = 20px (card padding, medium gaps){spacing.lg} = 24px (larger padding, section separation){spacing.xl} = 32px (section margins){spacing.xxl} = 36px (large layout gaps){spacing.xxxl} = 40px (extra-large margins){spacing.section} = 44px (section block spacing){spacing.band} = 48px (full-width band top/bottom padding)Usage Context:
{spacing.band} (48px) top and bottom{spacing.md} to {spacing.lg} (20–24px){spacing.xxs} or {spacing.xs} (8–12px){spacing.md} (20px) below each paragraphMax Width: Approximately 1350px at 1440px viewport (measured content column = 1350px)
Responsive Container Widths:
| Viewport | Content Width | Padding Left/Right |
|---|---|---|
| 375px | 345px | 0px (edge-to-edge) |
| 768px | 738px | 0px (edge-to-edge) |
| 1024px | 994px | 0px (edge-to-edge) |
| 1280px | 1250px | 0px (edge-to-edge) |
| 1440px | 1350px | 0px (edge-to-edge) |
Section Pattern: Full-width container with horizontal padding applied to inner content wrapper or direct to sections. Sections stack vertically with {spacing.section} or {spacing.band} separations. No multi-column grid detected on homepage; content flows single-column on mobile and remains largely single-column at desktop, with occasional side-by-side image/text blocks handled via flexbox.
Generously distributed whitespace creates an airy, premium feel. The design avoids cramped layouts; negative space around headings, between sections, and above/below CTAs is deliberate and breathing. This reflects fintech's positioning as transparent and accessible—not cluttered or overwhelming. Hero sections use vertical whitespace to showcase typography and featured imagery.
{rounded.none} = 0px — Applied to: buttons, overlays, images, most containers. Sharp corners are the system default and brand signature.{rounded.xs} = 4px — Applied to: buttons (primary, secondary), form inputs if present. Subtle softening without sacrificing angularity.No other radius values exist in the system. The brand is deliberately sharp; pill-shaped or highly rounded components are absent.
| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, solid color surface | Default cards, buttons, backgrounds, most UI |
| Raised | rgba(0, 0, 0, 0.05) 0px 20px 55px 0px | Dropdown menus, modal overlays, floating UI (minimal use) |
Shadow Philosophy:
The system employs a single-tier shadow strategy with flat as default and one raised level. This reinforces the color-blocking design ethos; depth is conveyed through surface color shifts (#F0F0F0 vs. #FFFFFF) rather than shadows. When elevation is necessary (dropdowns, modals), a subtle, diffused shadow (rgba(0, 0, 0, 0.05)) is applied with a generous blur (55px) and vertical offset (20px) for a barely-there lift. This maintains the clean, modern aesthetic while signaling interactivity.
z-index: 1 — Default stacking for normal content flowz-index: 900 — Navigation headers, sticky sections (stay above scrolling content)z-index: 9999 — Full-screen overlays, modal dialogs, topmost layer#E5F788) strategically for high-priority CTAs and hero sections. It commands attention and reads as action-oriented.{spacing.band} (48px) vertical spacing. Avoid cramping content.#F0F0F0) to separate zones; reserve shadows for rare elevation needs.#0000EE) without explicit purpose. It has no measured semantic role and appears decorative.| Breakpoint Name | Viewport Width | Content Column | Nav Links Visible | Menu Toggle | Heading Size | Body Text | Section Padding |
|---|---|---|---|---|---|---|---|
| Mobile | 375px | 345px | 0 | Yes | 42px | 16px | 0px |
| Tablet | 768px | 738px | 0 | Yes | 42px | 16px | 0px |
| Desktop (1024) | 1024px | 994px | 4 | No | 48px | 16px | 0px |
| Desktop (1280) | 1280px | 1250px | 4 | No | 48px | 16px | 0px |
| Desktop (1440) | 1440px | 1350px | 4 | No | 48px | 16px | 0px |
Key Behavior Changes:
{typography.display-lg-strong} remains 48px but context sizing may adjust.{spacing.md} gaps. Sufficient for reliable touch interaction.{colors.primary} — #E5F788). High saturation lime-green. Use for buttons, hero bands, active states.{colors.on-primary} — #080808). Near-black for maximum contrast.{colors.body} — #4E4E4E). Mid-tone gray for comfortable reading.{colors.canvas} — #FFFFFF). Default surface.{colors.muted} — #D4D4D4). Light gray for captions and de-emphasized labels.#333333) for borders; Light (#F0F0F0) for subtle section backgrounds.#FFFFFF to #F0F0F0), not shadows. Reserve the single shadow for rare dropdowns.{spacing.band} (48px) for section separation.#E5F788 on #080808 text.#333333 neutral on transparent background. Hover states not extracted; implement underline or color shift as appropriate.4px radius if inputs appear; apply primary accent for focus states.:focus with outline: none was found. Other interaction states (hover, active, visited) are not present in extracted stylesheets, possibly due to cross-origin CSS limitations. Implement reasonable defaults (e.g., button hover = 10% darker fill or slight scale).#0000EE) and two neutral variants (#333333, #F0F0F0) appear in components but have no explicit semantic role. Treat them as decorative or apply per context.<code>, <pre>, or monospace typography was measured.