Someone & Others

Someone & Others

Preview image. Unlock full-res

Frosted glass on crisp canvas

Industryagency
Palette
#0a0a0a
#ffffff
#333333
#f4f4f4
#dddddd
#ababab
#555555
#ffd700
#FFB005

Someone & Others employs a minimalist, high-contrast aesthetic with a subtle, frosted glass surface treatment. Typography is bold and dominant, paired with a restricted achromatic palette where only minimal, vibrant gradients provide visual energy. Interactive elements are softened through larger radii and a distinct blurred background, creating a sense of refined polish against the clean canvas. Always use SuisseIntl for all text, varying weights (300, 400, 500) to establish hierarchy. Apply negative letter-spacing defined in typography tokens for all headlines and larger text sizes to create a distinctive, impactful look. Prioritize a clean, achromatic palette (#0a0a0a, #ffffff, various grays) for primary UI elements, reserving color for functional accents. Use a generous 100px border-radius for all interactive elements like buttons and badges to create a soft, approachable feel. Introduce visual interest and hierarchy through large, bold typography and subtle background gradients on interactive elements. Maintain high contrast (minimum 15:1) between text and background for all content, primarily using #0a0a0a on light surfaces. Use backdrop-filter: blur(12px) saturate(1.8) brightness(1.08) on interactive containers to create a frosted glass effect behind actions. Avoid using solid, saturated colors for large interface areas or primary backgrounds; keep them neutral and understated. Do not introduce hard, sharp corners; all functional UI elements should use 100px, 16px, or 12px border radii. Refrain from using strong, opaque drop shadows; prefer subtle inset shadows or blur effects for elevation. Do not clutter layouts; maintain generous section gaps (40px) and element gaps (16px) to ensure breathing room. Avoid generic icon styles; use custom, illustrative icons like the '&' character for unique brand identity. Do not rely on outline or ghost buttons for primary calls to action; always use the gradient glow button for high-impact actions.

More like this