{"id":"aecf9dda-5cba-4dc7-9e73-59b65d895cdf","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","licenseNote":"Public design-reference facts mirrored from Refero for agent context. Keep source attribution visible and verify rights before reusing media, logos, or brand assets.","name":"teenage engineering","summary":"engineered precision against industrial gray","description":"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.","industry":"other","colorScheme":"light","colors":[{"name":"Canvas","hex":"#f6f8f7","role":"Page background, primary display surface.","group":"neutral"},{"name":"Graphite","hex":"#0f0e12","role":"Secondary surface, used for darker interactive states or background elements, often paired with lighter text.","group":"neutral"},{"name":"Ink","hex":"#000000","role":"Primary text color for maximum contrast, borders, and some background elements in high-contrast sections.","group":"neutral"},{"name":"Steel","hex":"#e5e5e5","role":"Muted text, subtle borders, and sometimes as a background fill for iconography or subtle navigation states.","group":"neutral"},{"name":"Smoke","hex":"#b2b2b2","role":"Decorative borders around elements, muted text for secondary information.","group":"neutral"},{"name":"Electric Blue","hex":"#0071bb","role":"Interactive elements, 'buy now' links, and accents. Its vividness draws attention to key actions.","group":"accent"},{"name":"Verdant Accent","hex":"#006837","role":"Occasionally used for decorative fills, notably in SVG icons, less frequently for UI elements.","group":"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"}],"typeScale":[{"role":"caption","size":13,"lineHeight":1.5},{"role":"body","size":19,"lineHeight":1.15},{"role":"subheading","size":24,"lineHeight":1.11},{"role":"heading","size":26,"lineHeight":1.11},{"role":"display","size":40,"lineHeight":1.11}],"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."]},"components":[{"name":"Primary Navigation Link","role":"Navigation element"},{"name":"Product Grid Item","role":"Product display"},{"name":"Footer Link","role":"Utility link"},{"name":"Promotional Banner (Top)","role":"Brand communication"},{"name":"Cookie Consent Banner","role":"Legal disclosure"}],"customSections":[{"title":"Agent Prompt Guide","content":"Quick Color Reference:\ntext: #000000\nbackground: #f6f8f7\nborder: #e5e5e5\naccent: #0071bb\nprimary action: no distinct CTA color\n\nExample Component Prompts:\nCreate a product card for an item named 'EP-133 K.O. II'. The main text is 'EP-133 K.O. II' in te-20 weight 300 at 19px, color Ink (#000000). Below that, add a sub-text 'buy now' in te-20 weight 300 at 13px, color Electric Blue (#0071bb). The card background is Canvas (#f6f8f7) with 0px radius and a 1px border in Steel (#e5e5e5). Maintain an element gap of 15px between text elements.\n\nGenerate a dark navigation bar. Background is Graphite (#0f0e12). Links like 'products' are in te-20 weight 300 at 13px, color Steel (#e5e5e5). Icons are also color Steel (#e5e5e5). The navigation should be full-width with 66px padding on the sides.\n\nDesign a footer section. Background color Graphite (#0f0e12). All text links, such as 'newsletter' or 'contact', should be in te-20 weight 300 at 13px, color Steel (#e5e5e5). The footer has 33px padding top and bottom and 66px padding left and right."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777419221525-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777419221525-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/aecf9dda-5cba-4dc7-9e73-59b65d895cdf-1777567233435-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/aecf9dda-5cba-4dc7-9e73-59b65d895cdf-1777567233435-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/aecf9dda-5cba-4dc7-9e73-59b65d895cdf-1777567233435-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/aecf9dda-5cba-4dc7-9e73-59b65d895cdf-1777567233435-preview-detail-poster.jpg"},"similarStyleIds":["8b708ba5-5c94-45a7-9868-36506fc423d0","6b5a0bf4-3d2a-4c3b-aa2e-652f1acb82c0","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","7337d65c-9a98-4b0f-b8bb-6f470742af98","98ab0172-9474-43b5-9055-98cf1a6a2401","f11750fc-d7c0-4d26-b32a-3b1d2098ae34","ec0f5bca-8367-49e7-b8aa-73b3fa09a4a0","0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2","2ca88a8f-fd06-4e2c-8ff5-7e1bd37e37eb","b76c7503-0217-4822-80b2-18fa19af46ee","d19c6fc3-1fc6-44a0-9c22-a0a82f7f79b4","5183054c-4c6e-4ecf-bd90-f7d794d5eb17","99820c01-a9a7-40a4-9d73-8c75b19e7e91","859f6be7-9d2d-4da6-a9b7-baa658172696","76bfda6b-125f-4d9b-96c0-356de1e9fc10","733f32ca-efc3-40fb-bc58-327bd2b45828","81a66e75-23af-4525-8a4e-f4a54c2700e7","b1e82907-d1cf-46cd-8ae7-3561c5b15fd0","46f01790-e488-4aba-9236-02466b0fb3cd","62e8e59e-17a5-4eba-a6c6-1c7f67ded518"],"exports":{"designMdUrl":"/references/refero/aecf9dda-5cba-4dc7-9e73-59b65d895cdf/design.md","tokensJsonUrl":"/references/refero/aecf9dda-5cba-4dc7-9e73-59b65d895cdf/tokens.json","tailwindV4Url":"/references/refero/aecf9dda-5cba-4dc7-9e73-59b65d895cdf/tailwind-v4.css","cssVariablesUrl":"/references/refero/aecf9dda-5cba-4dc7-9e73-59b65d895cdf/tailwind-v4.css"}}