teenage engineering

teenage engineering

Preview image. Unlock full-res

engineered precision against industrial gray

Industryother
Palette
#f6f8f7
#0f0e12
#000000
#e5e5e5
#b2b2b2
#0071bb
#006837

This system feels like a minimalist architectural blueprint, where products are spotlighted against a backdrop of muted industrial grays. The deliberate use of extremely thin custom typography, particularly for headings, creates a subtle, almost whispered authority. Interactive elements are marked by a singular vivid blue against a monochromatic field, acting like technical indicator lights. Sharp angles and high-contrast text on neutral surfaces define the system's precise and functional aesthetic. Prioritize the ultra-light 'te-20' and 'te-40' typefaces, especially for headlines, to maintain the brand's understated authority. Use Electric Blue (#0071bb) exclusively for interactive elements and calls to action. Implement high-contrast pairings of Ink (#000000) text on Canvas (#f6f8f7) backgrounds for primary content. Define clear visual hierarchy through font weights (te-40 for main headings, te-20 for body and smaller elements), rather than size alone. Maintain generous spacing with 15px for element gaps and 66px for section gaps, contributing to the 'comfortable' density. Employ Steel (#e5e5e5) and Smoke (#b2b2b2) for subtle borders and muted text to provide visual structure without heavy lines. Leverage the Canvas (#f6f8f7) background as the primary stage, ensuring products and content remain the focal point. Avoid using bold or heavy font weights for headlines; the brand identity is built on a whisper-thin typographic aesthetic. Do not introduce new vibrant colors outside of Electric Blue (#0071bb) for interactive elements, as this dilutes the monochromatic focus. Refrain from adding decorative shadows or complex embellishments; the design system favors clean, flat surfaces. Do not use Electric Blue (#0071bb) for non-interactive text or purely decorative elements, as it's reserved for action. Avoid excessive rounding of corners; the design system maintains sharp, precise edge treatments. Do not allow text to crowd; ensure ample 15px element spacing and 66px section padding is consistently applied.

More like this