{"id":"8eb9c53e-d69c-497a-b640-610856cf3a60","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/8eb9c53e-d69c-497a-b640-610856cf3a60","originalSiteUrl":"https://hyperstudio.org","capturedAt":"2026-04-11T16:37:41.665Z","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":"Hyperstudio","summary":"Monochrome terminal with amber accents. The design feels like a precisely coded interface, where every element serves a distinct, functional purpose against a dark, featureless backdrop.","description":"This design system evokes a sparse, high-contrast digital workspace, reminiscent of a command line interface or early internet text modes but with a refined typographic sensibility. The stark black backgrounds (#101010, #080808) are punctuated by crisp white text (#F3F3F3, #FFFFFF), creating a sense of technical precision and directness. Minimal chromatic accents (#E7C59A, #00AC5C) are used sparingly, like status lights, ensuring they immediately draw the eye and signify interactive elements or states without overwhelming the monochrome base. Custom Aeonik and Input fonts lend a distinctive, somewhat retro-futuristic feel, reinforcing the tech-focused brand identity.","tags":["dark mode","monochrome","high contrast","minimalist","tech-focused","futuristic","typographic","precise","command-line","controlled accent"],"industry":"agency","colorScheme":"dark","colors":[{"name":"Midnight Void","hex":"#101010","role":"Primary page background, deepest dark surface.","group":"neutral"},{"name":"Deep Space","hex":"#080808","role":"Secondary background, slightly darker than Midnight Void, used for subtle depth.","group":"neutral"},{"name":"Polar White","hex":"#F3F3F3","role":"Primary text color, hero headlines, clear contrast against dark backgrounds.","group":"neutral"},{"name":"Absolute Zero","hex":"#FFFFFF","role":"Accent text and background for interactive elements like buttons, header text.","group":"neutral"},{"name":"Ash Gray","hex":"#949494","role":"Secondary text, subtle borders, slightly toned down from main text.","group":"neutral"},{"name":"Dark Carbon","hex":"#333333","role":"Border colors, muted backgrounds for secondary elements.","group":"neutral"},{"name":"Slate","hex":"#C1C1C1","role":"Subtle borders, outlines, dividers.","group":"neutral"},{"name":"Light Gradients","hex":"#B5B5B5","role":"Subtle background gradient for UI elements, providing a soft, almost imperceptible texture.","group":"neutral","gradient":"linear-gradient(rgb(181, 181, 181), rgb(228, 228, 228))"},{"name":"Amber Glow","hex":"#E7C59A","role":"Key accent color for interactive elements, 'NEW' tags, drawing attention in a restrained way appropriate for a tech brand.","group":"accent"},{"name":"Neon Green","hex":"#00AC5C","role":"Small status indicators, 'spots left' tags, indicating positive status or availability.","group":"semantic"}],"typography":[{"role":"Primary typeface for all headlines, body text, and UI elements. Its confident, geometric forms convey technical modernity and clarity consistently across sizes.","sizes":"13px, 14px, 16px, 17px, 18px, 21px, 23px, 34px, 44px, 63px","family":"Aeonik","weight":"400, 700","lineHeight":"0.95, 1.03, 1.05, 1.07, 1.11, 1.22, 1.28, 1.29, 1.34, 1.35, 1.38, 1.43, 2.69","substitute":"Inter","letterSpacing":"-0.011, -0.007"},{"role":"Secondary typeface used for specific data points and code-like elements, adding a monospaced, technical contrast to Aeonik for specialized information. The tighter letter spacing enhances its code-like appearance.","sizes":"13px, 14px, 16px, 17px, 18px","family":"Input","weight":"400","lineHeight":"1.20, 1.21, 1.25, 1.31, 1.48, 1.50, 1.54","substitute":"IBM Plex Mono","letterSpacing":"-0.037, -0.022"}],"typeScale":[{"role":"caption","size":13,"lineHeight":1.43,"letterSpacing":-0.007},{"role":"subheading","size":18,"lineHeight":1.28},{"role":"heading-sm","size":21,"lineHeight":1.22},{"role":"heading","size":23,"lineHeight":1.11},{"role":"heading-lg","size":34,"lineHeight":1.07},{"role":"display","size":44,"lineHeight":1.03},{"role":"display-lg","size":63,"lineHeight":0.95,"letterSpacing":-0.011}],"spacing":{"radius":{"tags":"20px","buttons":"8px","default":"8px","statusIcons":"99px"},"elementGap":"10px","sectionGap":"64px","cardPadding":"24px"},"radius":{"tags":"20px","buttons":"8px","default":"8px","statusIcons":"99px"},"guidelines":{"do":["Prioritize high contrast between text and background, typically Polar White (#F3F3F3) on Midnight Void (#101010) or Absolute Zero (#FFFFFF) on Dark Carbon (#333333).","Use Aeonik at size 63px, weight 700, and lineHeight 0.95 for primary display headlines to maintain a commanding yet compact presence.","Employ Amber Glow (#E7C59A) exclusively for key attention-grabbing elements, such as 'NEW' labels or critical status indicators.","Maintain a default border radius of 8px for most interactive elements and cards, using 99px only for circular or pill-shaped tags.","Utilize Input font for any content that benefits from a monospace, data-like presentation, especially at -0.037em letter spacing for specific technical details.","Structure layouts with ample section-gap (64px) to create a spacious, breathable feel between content blocks despite the dark theme.","Employ Neon Green (#00AC5C) to denote positive status, availability, or success, ensuring it stands out as an unambiguous indicator."],"dont":["Do not introduce additional vibrant colors; stick to Amber Glow (#E7C59A) and Neon Green (#00AC5C) as the only chromatic accents.","Avoid using drop shadows for elevation; rely on varied shades of dark neutrals like Midnight Void (#101010) and Deep Space (#080808) for depth perception.","Do not deviate from the specified tight line-heights for headlines, as they are crucial for the dense, impactful typographic style.","Do not use generic system fonts; Aeonik and Input are essential to the brand's distinctive technical aesthetic.","Avoid excessive rounding; maintain sharp or subtly rounded corners (8px) for most UI elements, reserving pill shapes for specific tags.","Do not use full-width background images that break the defined dark background color palette; visual interest comes from typographic treatment and data visualization."]},"components":[{"name":"Availability Status Pill + CTA Button Group","role":""},{"name":"Service Feature Cards Grid","role":""},{"name":"Why Hyperstudio Manifesto Block","role":""},{"name":"Primary Ghost Button","role":"Call to action button for primary actions"},{"name":"Secondary Ghost Button","role":"Call to action button for secondary actions"},{"name":"Small Status Pill Tag","role":"Indicates status or limited availability"},{"name":"Header Navigation Link","role":"Navigation items in the primary header"},{"name":"Header Navigation Tag","role":"Highlighted new navigation items"},{"name":"Chat Button","role":"Persistent contact CTA in the header"},{"name":"Service Feature Card","role":"Used to highlight key service offerings"},{"name":"Manifesto Button","role":"Secondary call to action button, typically for more information."}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\n- Text: #F3F3F3\n- Background: #101010\n- CTA: #333333 (background), #FFFFFF (text)\n- Border: #333333\n- Accent: #E7C59A\n\n### 3-5 Example Component Prompts\n1. **Create a hero section:** background #101010. Headline 'World-class branding and websites for startups.' using Aeonik, size 63px, weight 700, #F3F3F3, letterSpacing -0.011em, lineHeight 0.95. Below, add a 'START NOW' button: transparent background, Aeonik, size 16px, weight 400, #F3F3F3, 8px border-radius. Next to it, a 'VIEW WORK' button: transparent background, Aeonik, size 16px, weight 400, #949494, 8px border-radius.\n2. **Generate a service feature block:** background #080808. Title 'AWARD-WINNING LOGOS' using Aeonik, size 23px, weight 700, #F3F3F3. Body text 'Easy to remember and distinctive logos, giving your brand a unique identity.' using Aeonik, size 16px, weight 400, #949494. Ensure consistent 24px padding within the block, and the block is visually separated by 64px from other content.\n3. **Design a persistent header bar:** background #101010. Logo 'Hyperstudio' using Aeonik, size 18px, weight 700, #F3F3F3. Navigation links 'SERVICES', 'PROCESS' using Aeonik, size 16px, weight 400, #F3F3F3. Add a 'PORTFOLIO NEW' link: 'PORTFOLIO' using Aeonik, size 16px, weight 400, #F3F3F3; 'NEW' tag appending it with background #E7C59A, text #F3F3F3, Aeonik, size 13px, weight 400. Include a 'LET'S CHAT' button on the right: background #000000, text #FFFFFF, Aeonik, size 14px, weight 400, 8px border-radius, with an icon.\n4. **Create a 'Why Hyperstudio?' section:** background #101010. Main heading 'Why Hyperstudio?' using Aeonik, size 44px, weight 700, #F3F3F3. Body text paragraph using Aeonik, size 18px, weight 400, #F3F3F3, with lineHeight 1.31. Below, add a 'READ MANIFESTO' button: background #333333, text #FFFFFF, Aeonik, size 16px, weight 400, 4.5px border-radius."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775925438462-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775925438462-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/8eb9c53e-d69c-497a-b640-610856cf3a60-1777582041569-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/8eb9c53e-d69c-497a-b640-610856cf3a60-1777582041569-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/8eb9c53e-d69c-497a-b640-610856cf3a60-1777582041569-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/8eb9c53e-d69c-497a-b640-610856cf3a60-1777582041569-preview-detail-poster.jpg"},"similarStyleIds":["408a149c-702f-4442-99df-bea49d9c0d9b","62e8e59e-17a5-4eba-a6c6-1c7f67ded518","50833119-cb36-4b75-b0cc-be48afea050a","c3ceca5c-d329-4559-b947-016172941ba2","cb6e4ab0-b8fe-45b0-bd22-6339b073e26d","cc38369a-41e3-4bcd-b619-230ccffe7e8e","d417b42f-824d-45ba-a02e-cbef3b8ea0d8","632249f1-fd78-4c77-9b34-7bae37ff3e9b","86541d12-7870-4d51-8c47-0880fdb1ea01","d266fee3-7479-4725-b727-e343ccefb576","0acef011-07da-4416-b874-ccdd675140f6","572bc29f-8827-4f77-b248-08dddf1c2e26","1f0cc2ef-9de0-4cbb-909f-ca120ef6d0ae","c81d2be0-05b7-4755-8046-f2d19fbc448c","4d4772a3-e1da-415f-a6d7-658dcefdcecd","103e0972-5b6e-44b2-91b5-02662dc93fa2","733e6475-892a-4138-8835-bf40344df317","7b083729-e694-4b66-82a3-befb08451722","ed10ae04-24ec-4e42-9bf2-ea12a4b58d67","c14bfde7-6f08-4b54-bd9b-39989d10cfef"],"exports":{"designMdUrl":"/references/refero/8eb9c53e-d69c-497a-b640-610856cf3a60/design.md","tokensJsonUrl":"/references/refero/8eb9c53e-d69c-497a-b640-610856cf3a60/tokens.json","tailwindV4Url":"/references/refero/8eb9c53e-d69c-497a-b640-610856cf3a60/tailwind-v4.css","cssVariablesUrl":"/references/refero/8eb9c53e-d69c-497a-b640-610856cf3a60/tailwind-v4.css"}}