Lucen

version: alpha
name: Lucen-design-analysis
description: A light, warm fintech system where one typographic gesture — a sans line answered by a Playfair italic line — carries every headline. White canvas washed with lavender-to-peach pastel gradients, near-black pill buttons, hairline-bordered bento cards, and pastel feature panels in lavender and sky blue. Inter Tight at 500 with serif-italic accents keeps it elegant; phone mockups and stat rings supply the product density.

colors:
  canvas: "#ffffff"
  hero-glow-lavender: "rgba(216, 182, 255, 0.35)"
  hero-glow-peach: "rgba(255, 234, 211, 0.45)"
  heading: "#151515"
  text-nav: "#222222"
  text-body: "#505050"
  text-muted: "#6b6b6b"
  text-disabled: "#aaa9b0"
  amber-deep: "#603c08"
  border: "#e7e7e7"
  border-soft: "#e8e8e8"
  white: "#ffffff"
  dark-surface: "#2c2c2c"
  dark-card-from: "#151515"
  dark-card-to: "#2e2d2d"
  accent-orange: "#f59546"
  accent-orange-bright: "#f5a23f"
  accent-orange-deep: "#e58b3e"
  accent-purple: "#6f5dd8"
  accent-blue: "#267ad3"
  accent-plum: "#81568e"
  panel-lavender: "#e9dcf8"
  panel-blue: "#dce9fb"
  panel-peach: "#fdeedd"
  grad-btn-from: "#b3d0ff"
  grad-btn-lavender: "#dec1ff"
  grad-btn-peach: "#ffcfaa"
  grad-btn-to: "#dfc0ff"
  cashback-green: "#1d9a6c"

typography:
  hero-display:
    fontFamily: "'Inter Tight', sans-serif"
    fontSize: 60px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -1px
  hero-display-italic:
    fontFamily: "'Playfair Display', serif"
    fontSize: 60px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: 0
    fontStyle: italic
  display-lg:
    fontFamily: "'Inter Tight', sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -1px
  display-lg-italic:
    fontFamily: "'Playfair Display', serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: 0
    fontStyle: italic
  display-md:
    fontFamily: "'Inter Tight', sans-serif"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.5px
  card-title:
    fontFamily: "'Inter Tight', sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.5px
  stat-numeral:
    fontFamily: "'Inter Tight', sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -1px
  body:
    fontFamily: "Inter, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-strong:
    fontFamily: "Inter, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0
  caption:
    fontFamily: "Inter, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0
  button:
    fontFamily: "'Inter Tight', sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0
  nav-link:
    fontFamily: "Inter, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0

rounded:
  xs: 3px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  xxl: 24px
  nav-pill: 48px
  pill: 100px
  circle: 100%

spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 40px
  xxl: 64px
  section: 120px

components:
  button-primary-dark:
    backgroundColor: "{colors.heading}"
    textColor: "{colors.white}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    padding: 16px 24px
    trailingIcon: "↗"
  button-secondary:
    backgroundColor: "{colors.white}"
    textColor: "{colors.heading}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    borderWidth: 1px
    borderColor: "{colors.border}"
    padding: 16px 24px
    trailingIcon: "↗"
  button-gradient:
    backgroundImage: "linear-gradient(90deg, {colors.grad-btn-from}, {colors.grad-btn-lavender} 36%, {colors.grad-btn-peach} 74%, {colors.grad-btn-to})"
    textColor: "{colors.heading}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    padding: 16px 24px
  nav-contact:
    backgroundColor: "{colors.dark-surface}"
    textColor: "{colors.white}"
    typography: "{typography.body-strong}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  nav-link-pill:
    backgroundColor: transparent
    textColor: "{colors.text-nav}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.nav-pill}"
    padding: 8px 12px
  trust-pill:
    backgroundColor: "{colors.white}"
    textColor: "{colors.text-body}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    borderWidth: 1px
    borderColor: "{colors.border-soft}"
    padding: 6px 16px 6px 6px
  bento-card:
    backgroundColor: "{colors.white}"
    textColor: "{colors.heading}"
    typography: "{typography.card-title}"
    rounded: "{rounded.md}"
    borderWidth: 1px
    borderColor: "{colors.border}"
    padding: 24px
  dark-card:
    backgroundImage: "linear-gradient({colors.dark-card-from}, {colors.dark-card-to})"
    textColor: "{colors.white}"
    rounded: "{rounded.xl}"
    padding: 24px
  feature-panel-lavender:
    backgroundColor: "{colors.panel-lavender}"
    textColor: "{colors.heading}"
    rounded: "{rounded.xxl}"
    padding: 40px
  feature-panel-blue:
    backgroundColor: "{colors.panel-blue}"
    textColor: "{colors.heading}"
    rounded: "{rounded.xxl}"
    padding: 40px
  stat-card:
    backgroundColor: "{colors.white}"
    textColor: "{colors.heading}"
    typography: "{typography.stat-numeral}"
    rounded: "{rounded.lg}"
    borderWidth: 1px
    borderColor: "{colors.border}"
    padding: 24px
  checklist-item:
    backgroundColor: transparent
    textColor: "{colors.heading}"
    typography: "{typography.body}"
    icon: "check-circle, {colors.heading}"
    gap: 12px
  faq-row:
    backgroundColor: "{colors.white}"
    textColor: "{colors.heading}"
    typography: "{typography.card-title}"
    rounded: "{rounded.lg}"
    borderWidth: 1px
    borderColor: "{colors.border}"
    padding: 24px
  blog-card:
    backgroundColor: transparent
    textColor: "{colors.heading}"
    typography: "{typography.card-title}"
    imageRounded: "{rounded.md}"
    meta: "{typography.caption} in {colors.text-muted}"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.text-body}"
    typography: "{typography.body}"
    borderWidth: 1px
    borderColor: "{colors.border-soft}"
    padding: "{spacing.xxl} 24px"

Overview

Lucen runs on one typographic idea repeated everywhere: a plain Inter Tight line, then the payoff in Playfair Display italic — "Send Money Instantly, Pay Anyone, Anywhere", "Everything You Need - In One Place", "Built for real people, not finance experts". The pairing of geometric sans and serif italic gives a fintech product an editorial, trust-me elegance that no color trick could.

Everything sits on white washed with pastel light. The canvas is #ffffff, but no large area is ever pure flat: the hero dissolves through lavender rgba(216,182,255,…) into peach rgba(255,234,211,…) with a sky-blue breath on the right; feature sections sit inside solid pastel panels (lavender #e9dcf8, sky #dce9fb, peach #fdeedd). Against this softness, actions are near-black rectangles with a hint of round — 12px radius buttons in #151515 with a trailing "↗" — never pills, never colored.

Key Characteristics:

• Sans + serif-italic two-line headline pattern on every section — the system's signature.
• Pastel gradient atmosphere: lavender ↔ peach washes, tinted full-width panels, white cards with 1px #e7e7e7 hairlines.
• Near-black 12px buttons with trailing ↗ arrows; white bordered secondary; rare lavender→peach gradient buttons inside pastel panels.
• Bento cards mixing white hairline cards, dark gradient cards, and embedded phone mockups with purple-orange gradient bank cards.
• Data accents: orange security-score ring, purple/blue icon tiles, green cashback deltas.
• Logo marquee strip under the hero; stat cards with 48px numerals; FAQ as pastel panel + white accordion rows; blog cards with category + read-time meta.

Colors

Source pages analyzed: hero with phone mockup, logo strip, "Everything You Need" bento grid, security section, "Send money in seconds" lavender panel, blue panel, stats, case studies, blog, FAQ, footer.

Canvas & Atmosphere

• Canvas ({colors.canvas} — #ffffff): base white; every atmospheric area is white + a pastel wash.
• Hero glow ({colors.hero-glow-lavender} / {colors.hero-glow-peach}): large soft radial washes — lavender upper-left, peach lower-right, faint sky-blue right edge. Never saturated; the page reads white.
• Pastel panels ({colors.panel-lavender} #e9dcf8, {colors.panel-blue} #dce9fb, {colors.panel-peach} #fdeedd): full-width 24px-rounded section containers alternating the rhythm.

Text Ladder

• Heading ({colors.heading} — #151515): all display text and buttons.
• Nav ({colors.text-nav} — #222222), Body ({colors.text-body} — #505050): the workhorse paragraph gray.
• Muted ({colors.text-muted}) and Disabled ({colors.text-disabled} — #aaa9b0): meta rows, pagination.
• Amber-deep ({colors.amber-deep} — #603c08): rare warm text accent on peach chips.

Accents (data, never chrome)

• Orange ({colors.accent-orange} — #f59546): security-score ring, warm icon tiles, gradient card glow. Companions {colors.accent-orange-bright} / {colors.accent-orange-deep} build the gradient.
• Purple ({colors.accent-purple} — #6f5dd8) / Blue ({colors.accent-blue} — #267ad3) / Plum ({colors.accent-plum}): icon tiles, the gradient bank card artwork.
• Cashback green ({colors.cashback-green}): "+8%" deltas only.

Signature Gradient Button

linear-gradient(90deg, #b3d0ff, #dec1ff 36%, #ffcfaa 74%, #dfc0ff) — lavender→peach; used sparingly for highlighted CTAs inside pastel panels, with {colors.heading} text. Dark gradient card fill: linear-gradient(#151515, #2e2d2d).

Hairlines

{colors.border} #e7e7e7 / {colors.border-soft} #e8e8e8: 1px card and divider lines. No shadows anywhere — separation is border + pastel contrast.

Typography

Font Families

• Headings & buttons: Inter Tight, sans-serif — weight 500 only.
• Editorial accents: Playfair Display, serif — italic 500, used as whole alternate headline lines.
• Body & UI: Inter, sans-serif — 400/500.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
{typography.hero-display}	60px	500	1.2	-1px	Hero line 1 (sans)
{typography.hero-display-italic}	60px	500 italic	1.15	0	Hero line 2 (serif)
{typography.display-lg}	48px	500	1.2	-1px	Section line 1
{typography.display-lg-italic}	48px	500 italic	1.15	0	Section line 2 (serif)
{typography.display-md}	36px	500	1.1	-0.5px	Panel headlines
{typography.stat-numeral}	48px	500	1.1	-1px	"$7B", "80%"
{typography.card-title}	24px	500	1.3	-0.5px	Card titles, FAQ questions
{typography.body}	16px	400	1.5	0	Ledes, lists, nav
{typography.caption}	14px	400	1.45	0	Meta, fine print
{typography.button}	18px	500	1.0	0	All buttons

Principles

• The two-line pattern is law: sans line + serif-italic line, centered, with the italic line carrying the emotional phrase.
• One weight (500) for all display; hierarchy is size only. No bold, no uppercase.
• Serif italic is never used for body, buttons, or labels — display only.

Note on Font Substitutes

All three are Google Fonts — load Inter Tight (500), Inter (400/500), Playfair Display (italic 500). No substitution needed.

Layout

Spacing System

• Tokens: {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.lg} 24px · {spacing.xl} 40px · {spacing.xxl} 64px · {spacing.section} 120px.
• Section vertical padding: ~120px; pastel panels pad 40px inside.
• Button padding: 16px × 24px.

Grid & Container

• Max content width: ~1290px (nav container ~1094px), centered, 24px page gutters.
• Hero: centered stack — trust pill, 2-line display headline, lede, button pair — above a centered phone mockup flanked by floating stat cards.
• Bento: 3-col grids of hairline cards with a phone mockup occupying the center column.
• Pastel panels: full-width rounded containers splitting copy+checklist / mockup.
• Blog: 3-col card grid; FAQ splits headline-left / accordion-right.

Whitespace Philosophy

Generous and calm. The pastel atmosphere does the decorating, so spacing stays even and roomy; density lives inside mockups and stat rings.

Elevation & Depth

Level	Treatment	Use
Flat	No shadow	All cards, buttons, pills
Hairline	1px #e7e7e7 border	White cards, secondary buttons, FAQ rows
Pastel panel	Solid tint + 24px radius	Feature sections, FAQ container
Glow	Radial pastel washes	Hero, dark card edges
Mockup depth	Dark phone bezels, inner cards	Hero/panel product shots

Shadow philosophy. Zero drop-shadows. Depth = borders, pastel contrast, and mockup bezels. The floating hero stat cards read as elevated purely through white-on-gradient contrast.

Shapes

Border Radius Scale

Token	Value	Use
{rounded.xs}	3px	Pagination dots, tiny tags
{rounded.sm}	8px	Icon tiles, inputs
{rounded.md}	12px	Buttons, bento cards, blog images — the system default
{rounded.lg}	16px	Stat cards, FAQ rows, feature cards
{rounded.xl}	20px	Dark feature cards
{rounded.xxl}	24px	Pastel panels, hero containers
{rounded.nav-pill}	48px	Nav link hover pills
{rounded.pill}	100px	Trust pill, badges, timeline chips
{rounded.circle}	100%	Avatars, score ring, social buttons

Geometry Rules

• Buttons are 12px rounded rectangles — roundness stops short of pill; pills are reserved for badges/chips.
• Circles for people and gauges: avatars, the orange security ring, check icons.
• The ↗ arrow rides the right side of every CTA — inside the dark button or as a small bordered square chip on cards.

Components

Top Navigation

top-nav — Static transparent bar: four-point star glyph + "Lucen" left; center links (Dual Pages ▾, Pricing, Integration, Blog, All Pages ▾) in {typography.nav-link} with 48px hover pills; right a {component.nav-contact} dark "Contact Us". No border until scroll.

Buttons

button-primary-dark — #151515, white 18px/500 label + trailing "↗", 12px radius, 16×24px ("Get Started Free"). Every primary CTA in the system. button-secondary — White, 1px border, dark label + "↗" ("Join Now"). button-gradient — lavender→peach gradient with dark text, used inside pastel panels ("Send Money"). nav-contact — Compact #2c2c2c 12px pill for the nav.

Badges & Chips

trust-pill — White hairline pill, leading badge glyph + "Trusted by startups & global teams"; centered above the hero headline. Section-head variants appear as small white pills ("Case Study"). Meta rows — "AI in Finance • 5 min read": caption gray with category in darker text.

Cards & Containers

bento-card — White, 1px hairline, 12px radius, 24px padding: title + "↗" chip, then an embedded visualization — orange security-score ring, icon-tile stat lists ("Active User 50k+"), mini phone screens, avatars cluster "+15k+". dark-card — #151515→#2e2d2d gradient, 20px radius, white content — used to break white grid rhythm. feature-panel-lavender/-blue — 24px pastel container: left = 36px headline + body + check-circle list ("Global payments, 135+ countries", "3% cashback on all business spend"); right = white mockup card (card-details form with gradient "Send Money" button) or phone. stat-card — Hairline card, 48px numeral ("80%", "$7B", "70%", "$120M") + gray caption; hero floats mini versions over the phone. faq-row — White hairline 16px row, 24px question + chevron, inside the lavender panel; headline "Frequently Asked Questions" occupies the left column. blog-card — 12px photo, meta row, 24px title ("How AI Is Redefining Financial Decision-Making in 2026"); "See all Blog ↗" ghost button at section head.

Footer

Light footer after a hairline top border: logo + tagline, link columns, newsletter input + dark submit, circular social buttons, legal bar in caption gray. Blog highlights may appear as a 3-up card row above the columns.

Do's and Don'ts

Do

• Pair every headline with its serif-italic answer line — the pattern is the brand.
• Wash large areas with lavender/peach pastels at low opacity; keep the overall impression white.
• Keep CTAs near-black 12px rectangles with a trailing "↗"; use gradient buttons only inside pastel panels.
• Separate white cards with 1px #e7e7e7 hairlines — never shadows.
• Confine orange/purple/blue/green accents to data visuals, icon tiles, and deltas.
• Alternate pastel panel colors (lavender → blue → peach) to pace long pages.

Don't

• Don't use Playfair italic for body text, labels, or buttons — display lines only.
• Don't make buttons pill-shaped or colored; pills are for badges only.
• Don't add drop-shadows; hierarchy is border + tint.
• Don't exceed weight 500 on display text or introduce uppercase headings.
• Don't let accent hues into the chrome (nav, buttons, borders) — they live in illustrations and data.
• Don't place saturated photography without 12px rounding; imagery always sits in rounded containers or fades into pastel.

Responsive Behavior

Breakpoints

Name	Width	Key Changes
Mobile	≤ 480px	Hero at ~40px, single line; bento and blog stack to 1-col; panels stack mockup-under-copy; nav collapses to logo + hamburger
Large phone	481–768px	2-col grids; floating hero cards hide or stack
Tablet	769–1024px	2-col bento; hero ~48px
Desktop	1025–1440px	Full 3-col grids; hero 60px
Wide desktop	≥ 1441px	Content centers at 1290px

Collapsing Strategy

• Nav: below 768px becomes logo + hamburger; Contact moves into the drawer.
• Bento/panels: center mockup drops below the copy cards; checklists keep full width.
• Stats: 4-up → 2×2 → 1-col.
• FAQ: headline stacks above the accordion.

Image Behavior

• Phone mockups are dark-bezel compositions that overlap pastel washes; they scale fluidly and keep rounding.
• Blog photos crop 16:10 inside 12px rounding; case photos ~4:3 in 16px.
• Hero floating cards animate subtly on load; below-fold imagery lazy-loads.

Iteration Guide

1. Focus on ONE component at a time. Reference its YAML key directly ({component.bento-card}, {component.feature-panel-lavender}).
2. Variants (-lavender / -blue) live as separate entries in components:.
3. Use {token.refs} everywhere — never inline hex; pastel washes must stay within the lavender–peach family.
4. New headlines: two lines — sans ({typography.display-lg}) + italic ({typography.display-lg-italic}).
5. New stats: {typography.stat-numeral} numeral + caption, inside a hairline card.
6. New actions: 12px dark button with "↗"; on pastel panels choose gradient or white bordered.
7. When in doubt about emphasis: switch a section into a pastel panel or go serif-italic — never add weight or shadows.

Known Gaps

• Pricing table, integration detail, and contact pages were not analyzed — documentation covers the homepage.
• Exact pastel panel hexes were sampled visually; Webflow variables may differ slightly per page.
• The footer's image-based background treatment was only partially captured.
• Marquee animation speed and case-study carousel behavior were not measured.
• Form validation and error states were not surfaced; inputs are documented in neutral state only.
• Dropdown menu ("Dual Pages", "All Pages") contents were not inventoried.