Preview image. Unlock full-res
Artisanal precision on a calm canvas: a meticulously crafted UI using refined typography and a neutral palette, where subtle interactions and product imagery take center stage.
Websmith Studio presents a visually understated design system built on a calming off-white canvas and grounded in dark, confident typography. The UI is characterized by lightweight components, ample whitespace, and minimal elevation, allowing product visuals to pop with their own distinct color palettes. Interactions are subtle and deliberate, maintaining the overall sense of quiet sophistication and focus on content.
Prioritize the Canvas (#f8f8f2) for page backgrounds, reserving Fog (#ffffff) for contained UI surfaces like cards.
Use Ink (#1a1a1a) for all primary text, headlines, and interactive elements to maintain high contrast and legibility.
Apply a consistent 12px border-radius to all image containers, content cards, and major UI blocks for a unified soft aesthetic.
Maintain ample negative space using elementGap up to 16px and sectionGap up to 96px, allowing content to breathe.
Use the system font -apple-system with letter-spacing: -0.025em for headlines 48px and larger, to achieve a tight, modern typographic feel.
Introduce subtle accent colors (Mint, Sky Tint, Blush) primarily as card backgrounds for visual differentiation, avoiding their use as primary text or action colors.
Keep elevation minimal or absent; when used, rely on subtle borders rather than heavy shadows to define elements.
Never use vibrant saturated colors for large UI areas; they are reserved for small, functional accent points like the Online Green status dot.
Avoid decorative gradients; the design relies on flat colors and subtle textural differences between surfaces.
Do not introduce strong drop shadows; the system prefers a flat, clean aesthetic with elevation defined by background color shifts or hairline borders.
Refrain from using thin, light fonts for body copy; ensure sufficient contrast and readability with Ink (#1a1a1a) and appropriate weights.
Do not deviate from the established 8px and 12px radii for buttons and cards; these values define the component softness.
Avoid overly dense layouts or packing too much information into one section; maintain the spacious rhythm with generous padding and section gaps.
Do not use browser default link colors; all links should be styled with Ink (#1a1a1a) and rely on subtle hover effects for interaction.
