Column

Column, clean, minimal

Preview image. Unlock full-res

Architectural blueprint on white marble. Subtle background patterns convey structure beneath a pristine, luminous surface, punctuated by precise, high-contrast markers.

Industryfintech, fintech
Palette
#011821
#000000
#ffffff
#f6f6f8
#e3e4e8
#232730
#7c7f88
#12161
#111a4a
#ec652b
#d65620
#023247

Column's design is a blend of corporate authority and digital precision. It uses a very light, almost invisible dotted grid background to evoke a technical blueprint, while maintaining a clean, spacious feel. The deep-seated violet and stark orange accents provide clear interactive points set against a largely monochromatic text palette, suggesting seriousness and innovation. Strategic use of subtle box shadows and inner borders adds dimensionality without heavy handedness, like layers of frosted glass on a complex instrument. Use Fog Gray (#f6f6f8) for secondary section backgrounds to create subtle visual breaks, not just Ghost White (#ffffff). Apply SuisseIntl with a negative letter-spacing (-0.02em to -0.03em) for all headlines 28px and larger, tightening the text for a refined, modern feel. Borders on interactive elements should primarily use Steel Gray (#e3e4e8), providing definition without harshness. All cards and buttons should consistently use an 8px border-radius for a soft, approachable geometry, except when specific components dictate otherwise. Emphasize critical actions with the Action Orange (#ec652b) background, reserving Deep Plum (#111a4a) primarily for non-primary interactive elements and brand accents. Use SFMono or SuisseIntlMono at 10-12px for all numerical data and code snippets to ensure alignment and technical precision. Enhance surface depth with the subtle card shadow: rgba(17, 26, 74, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 2px 0px, rgba(255, 255, 255, 0.5) 0px 0px 0px 1px inset. Do not use generic blue for primary interactive elements; save Info Blue (#7ea7e9) for graphics and non-actionable information to prevent dilution of Deep Plum and Action Orange. Avoid arbitrary uses of vivid colors; Success Moss (#44b48b) and Notification Teal (#88deeb) are reserved for semantic feedback, not decorative elements. Do not deviate from the 8px default border-radius for primary UI elements across buttons and cards; exceptions are only for badges or specific component variants. Do not apply heavy, opaque box-shadows; the system relies on subtle, layered shadows to suggest depth and elevation. Avoid using Code Black (#000000) for large blocks of text; opt for Ink Blue (#011821) or Charcoal Text (#232730) for better readability and a softer appearance. Do not introduce new typefaces; SuisseIntl is for visual impact and headings, Inter for general readability, and monospaced fonts for technical context. Do not break the established vertical rhythm of 48px sectionGap and 24px elementGap in content arrangements; maintain spaciousness.

More like this