Loom

Loom's visual design is a study in confident clarity, balancing a vibrant, highly saturated brand blue against clean, bright surfaces. The use of custom typography, Charlie Text and Charlie Display, with specific OpenType features like stylistic sets, imbues the interface with a distinct personality. Generous rounded corners, reaching up to 9999px for buttons and a significant 68.9231px for cards, create an approachable, fluid aesthetic, contrasting with the precise content delivery. Subtle background tints add a layered depth without heavy shadows. Prioritize Loom Blue (#1868db) for all primary calls-to-action to establish a clear visual hierarchy. Use pill-shaped 9999px radii exclusively for interactive buttons and navigation items to convey approachability and distinguish them from content blocks. Employ the Charlie Display font (weight 700) for all main section headings and hero text to ensure prominence and brand consistency. Alternate subtle background tints like Sky Dust (#e9f2fe), Lavender Mist (#eed7fc), Spring Bud (#efffd6), and Honey Dew (#fff5d4) for different sections to add visual interest and segmentation without harsh dividers. Apply the multi-layer shadow rgba(0, 0, 0, 0.04) 0px 2px 6px 0px, rgba(0, 0, 0, 0.06) 0px 5px 18px 0px, rgba(0, 0, 0, 0.1) 0px 24px 83px 0px for elevating cards and images, maintaining a soft, diffused lift. Maintain a default element and card padding of 16px to ensure comfortable information density. Ensure all text uses the Charlie Text or Charlie Display font families with their specified OpenType stylistic sets to preserve the unique typographic character. Avoid using harsh, high-contrast borders on cards; rely on subtle background colors and soft shadows for visual separation and depth. Do not introduce new color hues for primary interactive elements; restrict these to Loom Blue (#1868db) and its darker/lighter variants for consistency. Do not use sharp corners for buttons or primary content cards; maintain the brand's rounded aesthetic with 9999px or 41.6923px radii. Avoid excessive text styling within body paragraphs; stick to Charlie Text regular and medium weights for readability. Do not deviate from the defined letter spacing for headlines (normal) and body text; consistent tracking is crucial for the custom typeface's appearance. Resist using highly saturated colors for large background areas unless it's a dedicated feature highlight card with a specific content purpose. Do not implement complex gradient patterns beyond the subtle, directional background gradient example; the aesthetic focuses on solid colors and tinted surfaces.