{"id":"cf1f4666-bb5b-4fc4-a3e6-660218996cbb","name":"Lift-off challenge","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/cf1f4666-bb5b-4fc4-a3e6-660218996cbb","originalSiteUrl":"https://liftoffchallenge.hypr-space.com","capturedAt":"2026-04-28T21:20:46.028Z","colors":[{"name":"Control Panel Grey","hex":"#e5e7eb","role":"Page canvas, primary panel background, borders, input backgrounds","group":"neutral","cssVariable":"--color-control-panel-grey"},{"name":"Display Black","hex":"#11161c","role":"Interface display backgrounds, interactive card backgrounds, dense information blocks","group":"neutral","cssVariable":"--color-display-black"},{"name":"Obsidian Grey","hex":"#000000","role":"Primary text on light backgrounds, shadows, critical text on dark backgrounds","group":"neutral","cssVariable":"--color-obsidian-grey"},{"name":"Digital White","hex":"#ffffff","role":"Text on dark backgrounds, active elements, subtle card shadows","group":"neutral","cssVariable":"--color-digital-white"},{"name":"Graphite","hex":"#bbbbbb","role":"Secondary borders, subtle background tints","group":"neutral","cssVariable":"--color-graphite"},{"name":"Steel Grey","hex":"#a3a3a3","role":"Muted text, icon fills, inactive states","group":"neutral","cssVariable":"--color-steel-grey"},{"name":"Slate Blue","hex":"#575c75","role":"Secondary text, subtle details, some icon fills","group":"neutral","cssVariable":"--color-slate-blue"},{"name":"Urgency Red","hex":"#f43325","role":"Primary call-to-action buttons, warning indicators, critical states","group":"brand","cssVariable":"--color-urgency-red"},{"name":"Active Blue","hex":"#0078a8","role":"Interactive links, specific highlights","group":"accent","cssVariable":"--color-active-blue"},{"name":"Gradient Night","hex":"#c9cbe4","role":"Decorative background gradient used in some sections, suggesting cosmic or distant elements","group":"accent","gradient":"linear-gradient(135deg, rgb(201, 203, 228) 0%, rgb(45, 47, 65) 30%, rgb(27, 28, 46) 100%)","cssVariable":"--color-gradient-night"},{"name":"Gradient Combustion","hex":"#f43325","role":"Strong, urgent gradients for prominent visual elements or critical interaction areas","group":"brand","gradient":"linear-gradient(rgb(244, 51, 37) 17.31%, rgb(255, 149, 141) 25.48%, rgb(210, 39, 26) 43.27%, rgb(210, 39, 26) 71.15%, rgb(131, 19, 11) 94.71%)","cssVariable":"--color-gradient-combustion"}],"typography":[{"role":"Primary sans-serif for most UI text, headings, and buttons. Its varied weights support clear hierarchy without excessive stylistic flair.","sizes":"11px, 12px, 14px, 15px, 16px, 18px, 36px, 40px, 48px, 56px","family":"proxima-nova","weight":"400, 600, 700, 800","weights":[400,600,700,800],"lineHeight":"1.00, 1.10, 1.16, 1.25, 1.50","substitute":"system-ui","letterSpacing":"-0.0710em, 0.0110em, 0.0130em, 0.0140em, 0.0200em, 0.0250em, 0.0280em, 0.0330em"},{"role":"Monospaced font used for data readouts, code snippets, and technical labels, reinforcing the control panel aesthetic.","sizes":"10px, 11px, 12px","family":"SF Mono","weight":"400, 500","weights":[400,500],"lineHeight":"0.80, 1.10, 1.20, 1.50","substitute":"monospace","letterSpacing":"0.0420em, 0.0450em, 0.0500em"},{"role":"Secondary sans-serif for minor body text sections, providing a clean, recognizable base for small text.","sizes":"11px","family":"Helvetica Neue","weight":"400","weights":[400],"lineHeight":"1.50","substitute":"system-ui","letterSpacing":"normal"},{"role":"Custom display font for large numerical values and impactful headlines, providing a distinctive pixelated, digital read-out feel.","sizes":"106px","family":"Doto","weight":"900","weights":[900],"lineHeight":"1.00","substitute":"Press Start 2P","letterSpacing":"normal"}],"spacing":{"radius":{"cards":"127.397px","pills":"9999px","buttons":"270.89px","default":"4px"},"elementGap":"8px","sectionGap":"48px","cardPadding":"8px"},"radius":{"cards":"127.397px","pills":"9999px","buttons":"270.89px","default":"4px"},"shadows":{"surfaces":[{"hex":"#e5e7eb","name":"Canvas","level":1,"purpose":"The primary background, acting as the base 'metal' or chassis of the overall control panel."},{"hex":"#11161c","name":"Display","level":2,"purpose":"Used for 'screen' elements, data readouts, and information cards, mimicking embedded digital panels."},{"hex":"#ffffff","name":"Elevated Control","level":3,"purpose":"Used for specific interactive components like button backgrounds or subtle highlights, providing digital light."}]},"guidelines":{"do":["Use Control Panel Grey #e5e7eb as the primary canvas for all page backgrounds and top-level panels.","Apply Urgency Red #f43325 exclusively for critical action buttons and warning states, ensuring strong visual signaling.","Implement Display Black #11161c for all interactive data displays and information cards to maintain the control panel aesthetic.","For large numerical data, use the Doto font at 106px font size with Digital White #ffffff color against a Display Black #11161c background.","Utilize border-radius 270.89px for primary buttons and 9999px for small, contained elements like pill buttons or tags, while using 127.397px for cards.","Maintain high contrast text: Obsidian Grey #000000 on Control Panel Grey #e5e7eb, and Digital White #ffffff on Display Black #11161c.","Use SF Mono for any small, technical or data-driven text elements to reinforce the retro-futuristic theme."],"dont":["Do not use gradients or colored backgrounds on general text or informational sections, as they are reserved for prominent elements like the Lift-off button.","Avoid applying Urgency Red #f43325 for decorative purposes or non-critical text; its impact must be preserved for alerts and main calls to action.","Do not use generic square radius for buttons; leverage the defined 270.89px or 9999px for consistent button styling.","Refrain from using heavily saturated colors beyond Urgency Red #f43325 or Active Blue #0078a8; the color palette is intentionally restrained.","Do not introduce drop shadows on every element; elevation is minimal, reserving white shadows for subtle card lifts and dark shadow for deeper interaction states.","Avoid excessive spacing between elements; maintain a compact information density typical of control interfaces, using 8px as the primary element gap.","Do not deviate from the specified font families; their distinct characteristics are crucial for maintaining the thematic integrity."]}}