ISO Meet

ISO Meet

Preview image. Unlock full-res

White canvas, crisp black ink

Industrydesign
Palette
#ffffff
#000000
#f2f2f2
#999999
#cccccc
#222222
#808080
#e5d7ff
#b3e2cf

ISO Meet establishes a focused, minimalist aesthetic with a canvas of crisp whites and soft grays, punctuated by precise black typography. The layout emphasizes breathing room and clear functional separation, using soft card shadows for subtle hierarchy. Components lean towards understated, adaptive forms with generous padding, making the interface feel spacious and inviting. The visual system supports a 'work-focused yet approachable' atmosphere, with hints of gentle gradient accents as stylistic touches rather than dominant features. Prioritize Canvas White (#ffffff) for all main backgrounds to maintain a clean, open feel. Use Ink Black (#000000) for primary text, headings, and interactive elements to ensure strong contrast and visual hierarchy. Apply Ghost Gray (#f2f2f2) consistently for secondary backgrounds such as input fields, badges, and background cards. Employ the Instrument Sans family for all general UI text and body content, reserving Instrument Serif for larger, impactful headlines (48px and 60px) only. Round all interactive elements and content containers generously. Use 80px for inputs, 160px for full-bleed buttons, 50px for badges, and 24px for cards. Maintain comfortable visual breathing room with 'elementGap' at 18px and 'cardPadding' at 40px to ensure a spacious layout. Use soft, subtle shadows like rgba(13, 32, 47, 0.04) 0px 0px 14px 0px for elevation, avoiding harsh or opaque shadow effects. Ensure letter-spacing is applied per the typography specification, particularly for headlines, to achieve the intended precision and feel. Avoid using highly saturated colors. The palette is intentionally monochrome with accent gradients reserved for decorative or atmospheric purposes. Do not use heavy, dark shadows. Elevation should be subtle, created with low-opacity, diffused shadows. Do not mix Instrument Sans and Instrument Serif at similar font sizes or within the same paragraph; maintain clear roles for each typeface. Avoid tight spacing. Respect the generous 'elementGap' and 'cardPadding' to prevent a cramped or dense appearance. Do not introduce strong, visible borders or dividers. Borders should be hairline, transparent, or rely on background contrast. Refrain from using color to indicate states unless explicitly defined (e.g., success/error shades are not part of this system). Rely on opacity or border changes instead. Never override the letter-spacing values specified in the typography section, as they are crucial for the distinct feel of the headlines.

More like this