{"id":"8eb9c53e-d69c-497a-b640-610856cf3a60","name":"Hyperstudio","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","colors":[{"name":"Midnight Void","hex":"#101010","role":"Primary page background, deepest dark surface.","group":"neutral","cssVariable":"--color-midnight-void"},{"name":"Deep Space","hex":"#080808","role":"Secondary background, slightly darker than Midnight Void, used for subtle depth.","group":"neutral","cssVariable":"--color-deep-space"},{"name":"Polar White","hex":"#F3F3F3","role":"Primary text color, hero headlines, clear contrast against dark backgrounds.","group":"neutral","cssVariable":"--color-polar-white"},{"name":"Absolute Zero","hex":"#FFFFFF","role":"Accent text and background for interactive elements like buttons, header text.","group":"neutral","cssVariable":"--color-absolute-zero"},{"name":"Ash Gray","hex":"#949494","role":"Secondary text, subtle borders, slightly toned down from main text.","group":"neutral","cssVariable":"--color-ash-gray"},{"name":"Dark Carbon","hex":"#333333","role":"Border colors, muted backgrounds for secondary elements.","group":"neutral","cssVariable":"--color-dark-carbon"},{"name":"Slate","hex":"#C1C1C1","role":"Subtle borders, outlines, dividers.","group":"neutral","cssVariable":"--color-slate"},{"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))","cssVariable":"--color-light-gradients"},{"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","cssVariable":"--color-amber-glow"},{"name":"Neon Green","hex":"#00AC5C","role":"Small status indicators, 'spots left' tags, indicating positive status or availability.","group":"semantic","cssVariable":"--color-neon-green"}],"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"}],"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."]}}