Origin Financial

Origin Financial

Preview image. Unlock full-res

Midnight Command Center – screens glowing with data against a dark, seamless backdrop.

Industryfintech
Palette
#0f1011
#2e2e2e
#000000
#ffffff
#f5f5f7
#cacaca
#6a6b6b
#00b3dd
#847dff
#d1c9ff
#dd90d8
#4b49aa

Origin Financial employs a 'Dark Canvas, Subtle Glow' visual system. It uses a deep, rich dark grey as its primary background, accented by layers of lighter, desaturated greys for elevated surfaces and text. Typography is elegant, with a focus on restrained display fonts and highly legible body text. While largely monochromatic, the system introduces a spectrum of soft, vivid colors within functional cards, creating a sense of dynamic data visualization and subtle branding rather than overt color blocking. Always use Midnight Ink (#0f1011) as the primary page background to maintain the dark theme. Utilize Lyondisplay App weight 300 for prominent headlines, letting its lightness convey subtle authority. Apply a generous 16px border-radius to static cards and 8px to interactive components like buttons and inputs. Structure primary buttons as Ghost White text on a transparent background, accented with a light border, to maintain visual lightness. Incorporate accent colors like Ocean Glimmer (#00b3dd) or Violet Haze (#847dff) primarily within card backgrounds or data visualizations, as functional highlights. Maintain comfortable element spacing with 12px as a common elementGap between related items. Ensure all body text uses Suisseintl weight 400 for optimal readability on dark backgrounds. Avoid using harsh, saturated primary colors for large background areas; reserve vivid hues for contained accents. Do not introduce strong drop shadows; the system relies on distinct background colors and subtle borders for elevation. Do not deviate from the specified font families or their intended weights and letter spacing, as these are critical for brand identity. Never use Ghost White (#ffffff) text directly on Slate Canvas (#000000) for large text blocks; primary text should sit against Midnight Ink or Elevated Charcoal for optimal contrast. Avoid using generic button styles; always apply the specific radius (8px or 1440px) as defined for primary actions. Do not create dense layouts; maintain a comfortable density with ample padding and vertical spacing. Don't use more than a single accent color in any given visual area to avoid visual clutter and maintain focus.

More like this