Lumina

Lumina Rebrand

A complete brand transformation for a fintech startup transitioning from stealth to market launch.

Client

Lumina Finance

Year

2025

Role

Brand Strategy, Visual Identity, Web Design

Duration

12 Weeks

The Challenge

Lumina Finance had spent two years in stealth mode building an innovative payment platform. As they prepared for their public launch, they needed a brand identity that would communicate trust, innovation, and accessibility to both consumers and enterprise clients.

Their existing visual identity was functional but lacked the polish and coherence needed to stand out in a crowded fintech market. The challenge was to create a brand system that felt both cutting-edge and trustworthy.

Before

After

Our Approach

We began with a comprehensive discovery phase, interviewing stakeholders, analyzing competitors, and mapping the customer journey. This research informed a strategic brand framework that guided all creative decisions.

Discovery

Stakeholder interviews, competitive analysis, and audience research to define brand positioning.

Strategy

Brand architecture, messaging framework, and visual direction based on research insights.

Execution

Logo design, typography system, color palette, and comprehensive brand guidelines.

Gallery 1

Gallery 2

Gallery 3

Wide Format

The Result

The new brand identity launched alongside Lumina's public debut. The response was overwhelmingly positive, with the rebrand cited as a key factor in their successful Series A fundraise of $18M.

340%

Increase in brand recall

$18M

Series A raised

4.9/5

Client satisfaction

Next Project

Horizon Dashboard

Theme Config

Edit the CSS custom properties below and click Apply to see changes live. Copy the config to use in your own project.

:root {
  /* Colors — black primary, dramatic, minimal */
  --background: 240 10% 4%;
  --foreground: 0 0% 95%;
  --card: 240 10% 6%;
  --card-foreground: 0 0% 95%;
  --popover: 240 10% 6%;
  --popover-foreground: 0 0% 95%;
  --primary: 0 0% 95%;
  --primary-foreground: 240 10% 4%;
  --secondary: 240 5% 12%;
  --secondary-foreground: 240 5% 65%;
  --accent: 240 5% 16%;
  --accent-foreground: 0 0% 90%;
  --muted: 240 5% 12%;
  --muted-foreground: 240 5% 55%;
  --destructive: 0 63% 40%;
  --destructive-foreground: 0 0% 95%;
  --success: 142 71% 45%;
  --success-foreground: 0 0% 95%;
  --warning: 38 92% 50%;
  --warning-foreground: 240 10% 4%;
  --border: 240 5% 14%;
  --input: 240 5% 14%;
  --ring: 0 0% 95%;
  --chart-1: 0 0% 85%;
  --chart-2: 173 60% 50%;
  --chart-3: 38 80% 55%;
  --chart-4: 330 55% 55%;
  --chart-5: 200 70% 50%;

/* Sidebar */
  --sidebar-background: 240 10% 3%;
  --sidebar-foreground: 0 0% 90%;
  --sidebar-primary: 0 0% 95%;
  --sidebar-primary-foreground: 240 10% 4%;
  --sidebar-accent: 240 5% 10%;
  --sidebar-accent-foreground: 0 0% 90%;
  --sidebar-border: 240 5% 12%;
  --sidebar-ring: 0 0% 95%;

/* Typography — clean, dramatic */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-heading: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

/* Shadows — subtle in dark */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.2);
  --shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.2);
  --shadow-lg: 0 6px 10px -2px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.2);
  --shadow-xl: 0 12px 20px -4px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.2);

/* Glass & overlay */
  --overlay-opacity: 0.6;
  --backdrop-blur: 12px;
  --glass-bg: rgba(10, 10, 14, 0.8);
  --glass-border: rgba(255, 255, 255, 0.06);

/* Spacing & density — generous, dramatic */
  --spacing-scale: 1.15;
  --container-max-width: 1280px;
  --container-padding: 2rem;
  --card-padding: 1.5rem;
  --input-height: 2.5rem;
  --button-height: 2.25rem;
  --section-gap: 5rem;

/* Typography tokens */
  --letter-spacing-tighter: -0.06em;
  --letter-spacing-tight: -0.03em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.03em;
  --letter-spacing-wider: 0.08em;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  --heading-weight: 700;
  --heading-letter-spacing: -0.04em;
  --heading-line-height: 0.95;

/* Shape — minimal radius */
  --radius: 0.25rem;
  --radius-none: 0;
  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.375rem;
  --radius-xl: 0.5rem;
  --radius-2xl: 0.75rem;
  --radius-full: 9999px;
  --avatar-radius: 9999px;
  --badge-radius: 0.25rem;
  --button-radius: 0.25rem;
  --input-radius: 0.25rem;
  --card-radius: 0.375rem;
  --tooltip-radius: 0.25rem;

/* Component shadows */
  --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2);
  --dropdown-shadow: 0 6px 10px -2px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.2);
  --dialog-shadow: 0 12px 20px -4px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.2);
  --button-shadow: none;

/* Borders & dividers */
  --border-width: 1px;
  --border-style: solid;
  --divider-style: solid;
  --divider-opacity: 0.08;

/* Inputs */
  --input-style: bordered;
  --input-border-on-focus: 0;
  --placeholder-opacity: 0.4;

/* Buttons */
  --button-style: filled;
  --button-weight: 500;
  --hover-effect: darken;
  --active-effect: scale-down;
  --disabled-opacity: 0.4;

/* Links */
  --link-style: underline;
  --link-weight: inherit;

/* Focus */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-style: ring;

/* Icons */
  --icon-style: outlined;
  --icon-stroke-width: 1.5;
  --icon-size: 1.25rem;

/* Scrollbar */
  --scrollbar-style: thin;
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(255, 255, 255, 0.1);

/* Selection */
  --selection-background: 0 0% 95%;
  --selection-foreground: 240 10% 4%;

/* Tooltips */
  --tooltip-style: light;

/* Tables */
  --table-style: clean;
  --table-header-weight: 600;

/* Loading */
  --spinner-style: circle;

/* Motion */
  --transition-duration: 200ms;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --animation-speed: normal;
  --hover-transition: 200ms ease;
  --enter-transition: 300ms ease-out;
  --exit-transition: 200ms ease-in;
}

RBuilt with Refraction UI