Tobias Ahlin

The design system for Tobias Ahlin is a stark, high-contrast exploration of typography and structured negative space. It combines large, confident black sans-serif headlines with a minimalist canvas, often featuring a subtle off-white background. The visual identity is strongly tied to line-art graphics and geometric shapes, with a single muted orange hue serving as a delicate accent. Components are borderless and box-shadow-free, relying on distinct background colors and ample padding for definition. The overall feeling is precise, unornamented, and direct. Prioritize bold, black Inter typography with high contrast against light or subtly colored backgrounds. Use 0px (sharp corners) for all component edges unless explicitly specified as 2px for small elements. Define separation between elements and sections primarily through generous spacing (20px, 60px) and distinct background colors, not borders or shadows. Apply Warm Clay (#d67a60) exclusively for decorative, geometric line-art elements or subtle accents, never for functional text or backgrounds. Use distinct, saturated background colors (Cerulean Ink, Purple Haze, Moss Green) for primary actions and highlighted content blocks, ensuring white text for legibility. Maintain a spacious density across all layouts, utilizing sectionGap (60px) for vertical rhythm and cardPadding (40px) for internal content spacing. Favor white (#ffffff) or Canvas Oyster (#fefbf5) as primary surface colors, grounding the design in a light theme. Avoid using multiple border radii values; stick to 0px or 2px. Do not introduce drop shadows or other elevation cues; the visual system is entirely flat. Do not clutter layouts; keep information organized in clear, separate blocks with ample negative space. Refrain from using Warm Clay (#d67a60) for text or interactive elements; its role is purely decorative. Do not use subtle variations of neutral colors right next to each other. Rely on strong contrast or generous spacing for distinction. Do not apply borders to cards or main content blocks; boundaries are defined by background color and spacing. Avoid generic system fonts if Inter is available; Inter's distinct weights and condensed tracking are key to the brand's typographic voice.