{"id":"cf1f4666-bb5b-4fc4-a3e6-660218996cbb","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","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":"Lift-off challenge","summary":"Aircraft control panel — high-contrast modular interfaces on a rigid, light-grey chassis with urgent red signals.","description":"This design evokes a retro-futuristic mission control panel, blending a stark, industrial realism with an urgent, high-stakes atmosphere. The dominance of a light grey canvas punctuated by sharp, dark-grey interfaces creates a sense of mechanical precision. Visual urgency is delivered through vibrant, almost alarm-like red accents, sparingly used on critical elements like \"Lift-off\" buttons and warning indicators, contrasting with the otherwise monochromatic scene.","industry":"other","colorScheme":"light","colors":[{"name":"Control Panel Grey","hex":"#e5e7eb","role":"Page canvas, primary panel background, borders, input backgrounds","group":"neutral"},{"name":"Display Black","hex":"#11161c","role":"Interface display backgrounds, interactive card backgrounds, dense information blocks","group":"neutral"},{"name":"Obsidian Grey","hex":"#000000","role":"Primary text on light backgrounds, shadows, critical text on dark backgrounds","group":"neutral"},{"name":"Digital White","hex":"#ffffff","role":"Text on dark backgrounds, active elements, subtle card shadows","group":"neutral"},{"name":"Graphite","hex":"#bbbbbb","role":"Secondary borders, subtle background tints","group":"neutral"},{"name":"Steel Grey","hex":"#a3a3a3","role":"Muted text, icon fills, inactive states","group":"neutral"},{"name":"Slate Blue","hex":"#575c75","role":"Secondary text, subtle details, some icon fills","group":"neutral"},{"name":"Urgency Red","hex":"#f43325","role":"Primary call-to-action buttons, warning indicators, critical states","group":"brand"},{"name":"Active Blue","hex":"#0078a8","role":"Interactive links, specific highlights","group":"accent"},{"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%)"},{"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%)"}],"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"}],"typeScale":[{"role":"caption","size":10,"lineHeight":0.8,"letterSpacing":0.5},{"role":"body","size":14,"lineHeight":1.5,"letterSpacing":0.013},{"role":"subheading","size":18,"lineHeight":1.25,"letterSpacing":0.014},{"role":"heading","size":36,"lineHeight":1.16,"letterSpacing":-0.071},{"role":"heading-lg","size":48,"lineHeight":1.1,"letterSpacing":-0.071},{"role":"display","size":106,"lineHeight":1,"letterSpacing":0}],"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."]},"components":[{"name":"Primary Action Button","role":"Main call-to-action"},{"name":"Ghost Button","role":"Secondary or tertiary actions"},{"name":"Dark Interface Card","role":"Content presentation within a dark display area"},{"name":"Pill Card","role":"Small, contained information units or selectors"},{"name":"Input Field","role":"Data entry"},{"name":"Lift-off Button","role":"Critical, visually dominant interaction"},{"name":"Status Indicator","role":"Visual feedback for states (waiting, warning)"},{"name":"Doto Number Display","role":"Large, eye-catching numerical readouts"}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\n- Text (dark): #000000\n- Text (light): #ffffff\n- Background (canvas): #e5e7eb\n- Background (display): #11161c\n- CTA (primary): #f43325\n- Border (default): #e5e7eb\n\n### 3-5 Example Component Prompts\n1. **Create a 'Display Black' information card:** Use #11161c for the background, #ffffff for heading, and #575c75 for body text. Apply a 127.397px border-radius, and 8px padding. Headline with 'proxima-nova' weight 700 at 18px and body with 'proxima-nova' weight 400 at 14px.\n2. **Generate an 'Urgency Red' Call-to-Action button:** Use #f43325 for the background, #ffffff for text. Set border-radius to 270.89px. Text 'proxima-nova' weight 600 at 16px with 2px vertical and 8px horizontal padding.\n3. **Design a 'Doto Number Display' module:** Use #11161c as the background color, #ffffff for the primary number. Display number '182' using the 'Doto' font at 106px weight 900. Place a small 'proxima-nova' caption below it in #575c75 at 12px with 8px top padding.\n4. **Build an Input Field:** Background transparent, with a 1px solid #ffffff border. Text color #ffffff. 8px padding all around. Placeholder text in #575c75 using 'proxima-nova' at 14px."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777411219516-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777411219516-thumb.jpg"},"similarStyleIds":["62e8e59e-17a5-4eba-a6c6-1c7f67ded518","572bc29f-8827-4f77-b248-08dddf1c2e26","8b708ba5-5c94-45a7-9868-36506fc423d0","13b74e34-b824-4d1d-bd2c-bb9bfbc2d6e1","733e6475-892a-4138-8835-bf40344df317","e81d4724-9615-4159-8678-cef35f986cab","32845f27-6b24-48be-af25-8e664f826b30","225059ac-0450-49d3-b2b7-d0e98b7ae938","461da0f0-fde6-46bc-8137-7eca006260a8","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","50833119-cb36-4b75-b0cc-be48afea050a","6b5a0bf4-3d2a-4c3b-aa2e-652f1acb82c0","5183054c-4c6e-4ecf-bd90-f7d794d5eb17","0fd67ec5-7e9c-4ca9-b368-5d9c7388477a","108e2695-6970-47d5-b5b0-eea8fc34e048","90ce5883-bb24-4466-93f7-801cd617b0d1","3f22028a-05d4-4648-a6d1-591134af06a4","969b879e-166b-4c1f-9c33-e44fa643188c","10ab6120-3d03-48ff-aebe-0b4910edc046","41af8353-6a8f-416d-947b-57932f591497"],"exports":{"designMdUrl":"/references/refero/cf1f4666-bb5b-4fc4-a3e6-660218996cbb/design.md","tokensJsonUrl":"/references/refero/cf1f4666-bb5b-4fc4-a3e6-660218996cbb/tokens.json","tailwindV4Url":"/references/refero/cf1f4666-bb5b-4fc4-a3e6-660218996cbb/tailwind-v4.css","cssVariablesUrl":"/references/refero/cf1f4666-bb5b-4fc4-a3e6-660218996cbb/tailwind-v4.css"}}