{"id":"aecf9dda-5cba-4dc7-9e73-59b65d895cdf","name":"teenage engineering","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/aecf9dda-5cba-4dc7-9e73-59b65d895cdf","originalSiteUrl":"https://teenage.engineering","capturedAt":"2026-04-28T23:34:00.595Z","colors":[{"name":"Canvas","hex":"#f6f8f7","role":"Page background, primary display surface.","group":"neutral","cssVariable":"--color-canvas"},{"name":"Graphite","hex":"#0f0e12","role":"Secondary surface, used for darker interactive states or background elements, often paired with lighter text.","group":"neutral","cssVariable":"--color-graphite"},{"name":"Ink","hex":"#000000","role":"Primary text color for maximum contrast, borders, and some background elements in high-contrast sections.","group":"neutral","cssVariable":"--color-ink"},{"name":"Steel","hex":"#e5e5e5","role":"Muted text, subtle borders, and sometimes as a background fill for iconography or subtle navigation states.","group":"neutral","cssVariable":"--color-steel"},{"name":"Smoke","hex":"#b2b2b2","role":"Decorative borders around elements, muted text for secondary information.","group":"neutral","cssVariable":"--color-smoke"},{"name":"Electric Blue","hex":"#0071bb","role":"Interactive elements, 'buy now' links, and accents. Its vividness draws attention to key actions.","group":"accent","cssVariable":"--color-electric-blue"},{"name":"Verdant Accent","hex":"#006837","role":"Occasionally used for decorative fills, notably in SVG icons, less frequently for UI elements.","group":"accent","cssVariable":"--color-verdant-accent"}],"typography":[{"role":"General body text, navigation elements, links, and detailed product descriptions. The variety of thin weights keeps text light and airy.","sizes":"13px, 19px, 24px, 26px","family":"te-20","weight":"100, 300","lineHeight":"1.11, 1.15, 1.50","substitute":"Inter"},{"role":"Headlines and prominent display text. The singular light weight (300) is a signature choice, creating an understated impact, making the text feel designed rather than shouted.","sizes":"40px","family":"te-40","weight":"300","lineHeight":"1.11","substitute":"Inter"}],"spacing":{"radius":{"default":"0px"},"elementGap":"15px","sectionGap":"66px","cardPadding":"22px"},"radius":{"default":"0px"},"shadows":{"surfaces":[{"hex":"#f6f8f7","name":"Canvas","level":1,"purpose":"Primary page background, light canvases for product display."},{"hex":"#0f0e12","name":"Graphite","level":2,"purpose":"Secondary background for navigation, footers, or sections intended to recede or provide contrast for lighter elements."},{"hex":"#000000","name":"Ink","level":3,"purpose":"High-contrast background for specific elements or headers within darker sections, providing maximum textual legibility against lighter content."}]},"guidelines":{"do":["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."],"dont":["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."]}}