{"id":"3b83dfe4-2f53-4a4d-819d-e6045ca5f7dc","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/3b83dfe4-2f53-4a4d-819d-e6045ca5f7dc","originalSiteUrl":"https://x.ai","capturedAt":"2026-04-29T22:46:03.469Z","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":"xAI","summary":"Midnight Command Center: A dark, responsive interface with precise typographic hierarchy and subtle interactive cues.","description":"xAI employs a darkened cosmic canvas aesthetic: deep black backgrounds, muted grays for surfaces, and sharp white typography for contrast. A single, vivid blue accent is reserved for interactive input states, creating a focal point against the otherwise reserved palette. Components are lightweight with minimal borders and generous radius for buttons, aiming for a sense of contained energy rather than heavy presence.","industry":"ai","colorScheme":"dark","colors":[{"name":"Deep Midnight","hex":"#0c0c0b","role":"Neutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color","group":"neutral"},{"name":"Faded Steel","hex":"#1f2228","role":"Secondary background, subtle borders for ghost buttons and card outlines. Its slight tint keeps it from being pure black","group":"neutral"},{"name":"Frost White","hex":"#ffffff","role":"Primary text, interactive element text, button backgrounds, and subtle highlight shadows. Provides high contrast on dark surfaces","group":"neutral"},{"name":"Muted Ash","hex":"#7d8187","role":"Secondary text for badges, navigation, and body copy. Offers readability without high contrast; Decorative footer background effect, transitioning from dark with subtle color to full black","group":"neutral","gradient":"linear-gradient(to right, rgba(255, 99, 8, 0.1), rgba(255, 99, 8, 0.1), rgba(189, 201, 230, 0.1), rgba(151, 196, 255, 0.1), rgba(151, 196, 255, 0.1))"},{"name":"Whisper Gray","hex":"#474747","role":"Subtle button and navigation borders, creating a very soft outline","group":"neutral"},{"name":"Electric Blue","hex":"#2563eb","role":"Violet state accent for badges, validation surfaces, and short status labels. Do not promote it to the primary CTA color","group":"accent"}],"typography":[{"role":"Primary text for headings, body, navigation, and interactive elements. Its specific negative letter spacing gives titles a distinct, compact feel.","sizes":"16px, 20px, 36px, 48px, 80px","family":"universalSans","weight":"400","lineHeight":"1.00, 1.11, 1.20, 1.40, 1.50","substitute":"Inter","letterSpacing":"-0.0250em"},{"role":"Monospaced font for badges and occasional navigation elements. The explicit positive letter spacing creates a technical, spaced-out effect, contrasting with Universal Sans.","sizes":"12px, 14px","family":"GeistMono","weight":"400","lineHeight":"1.33, 1.43, 2.00","substitute":"Space Mono","letterSpacing":"0.1000em"}],"typeScale":[{"role":"caption","size":12,"lineHeight":2,"letterSpacing":0.1},{"role":"body-sm","size":14,"lineHeight":1.43,"letterSpacing":0.1},{"role":"body","size":16,"lineHeight":1.5,"letterSpacing":-0.025},{"role":"subheading","size":20,"lineHeight":1.4,"letterSpacing":-0.025},{"role":"heading","size":36,"lineHeight":1.2,"letterSpacing":-0.025},{"role":"heading-lg","size":48,"lineHeight":1.11,"letterSpacing":-0.025},{"role":"display","size":80,"lineHeight":1,"letterSpacing":-0.025}],"spacing":{"radius":{"inputs":"24px","buttons":"9999px","calloutCards":"0px"},"elementGap":"12px","sectionGap":"48px","cardPadding":"16px"},"radius":{"inputs":"24px","buttons":"9999px","calloutCards":"0px"},"shadows":{"surfaces":[{"hex":"#0c0c0b","name":"Deep Midnight Canvas","level":0,"purpose":"Primary page background, foundation of the dark theme."},{"hex":"#1f2228","name":"Faded Steel Surface","level":1,"purpose":"Used for card backgrounds, input borders, and other mid-level UI elements to provide subtle separation from the canvas."},{"hex":"#ffffff","name":"Frost White Overlay","level":2,"purpose":"Rarely used as a background, primarily for filled buttons, indicating a high-contrast interactive element."}]},"guidelines":{"do":["Retain the dominant dark theme using Deep Midnight (#0c0c0b) as the canvas and Faded Steel (#1f2228) for secondary surfaces.","Use Frost White (#ffffff) for all primary text, ensuring high contrast on dark backgrounds.","Apply universalSans with -0.0250em letter spacing for all headlines and body text to maintain the compact, confident typographic style.","Reserve Electric Blue (#2563eb) exclusively for interactive input focus states and accents, maintaining its visual impact as a sole chromatic element.","Apply a 9999px border-radius to all interactive buttons for a soft, pill-shaped appearance.","Set internal padding for feature cards at 16px to create consistent breathing room for content.","Utilize GeistMono with 0.1000em letter spacing for all badges and auxiliary labels to establish a technical, distinct text style."],"dont":["Avoid introducing additional saturated colors; maintain the restricted palette with Electric Blue as the only vivid accent.","Do not use heavy box-shadows or significant elevation; prefer subtle borders and slight background shifts for surface differentiation.","Do not use rectangular, sharp-edged buttons; enforce the 9999px radius for all interactive buttons.","Avoid large imagery or elaborate illustrations; prioritize clean UI and minimal, abstract graphics.","Do not use a light theme; the brand identity is firmly established in dark mode.","Do not vary paragraph line heights or font weights frequently within body text; maintain the universalSans-400, 1.5 lineHeight standard.","Avoid dense, unbroken blocks of text; break content into manageable sections with clear headings and ample vertical spacing of at least 48px between major sections."]},"components":[{"name":"Ghost Primary Button","role":"Primary action button with transparent background."},{"name":"Filled Secondary Button","role":"Secondary action button for explicit actions."},{"name":"Navigation Link","role":"Top navigation and footer navigation links."},{"name":"Interactive Text Input","role":"Text input field for user queries."},{"name":"Callout Card","role":"Section for product features or announcements."},{"name":"Badge Neutral","role":"Informational tags and date indicators."}],"customSections":[{"title":"Agent Prompt Guide","content":"Quick Color Reference:\ntext: #ffffff\nbackground: #0c0c0b\nborder: #1f2228\naccent: #2563eb\nprimary action: no distinct CTA color\n\nExample Component Prompts:\nCreate a hero section: Deep Midnight (#0c0c0b) background. Headline 'AI for all humanity' at 80px universalSans weight 400, #ffffff, letter-spacing -0.025em. Subtext 'Explore new frontiers' below it at 20px universalSans weight 400, #7d8187, letter-spacing -0.025em.\nNo distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color.\nCreate an Interactive Text Input: Background #0c0c0b, Text #ffffff, Border 1px solid #1f2228, Radius 24px, Padding 20px vertical, 16px left, 64px right. Placeholder text 'What do you want to know?' in #7d8187. On focus, add shadow: rgb(113, 113, 122) 0px 0px 0px 2px."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777502738951-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777502738951-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/3b83dfe4-2f53-4a4d-819d-e6045ca5f7dc-1777581848187-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/3b83dfe4-2f53-4a4d-819d-e6045ca5f7dc-1777581848187-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/3b83dfe4-2f53-4a4d-819d-e6045ca5f7dc-1777581848187-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/3b83dfe4-2f53-4a4d-819d-e6045ca5f7dc-1777581848187-preview-detail-poster.jpg"},"similarStyleIds":["e81d4724-9615-4159-8678-cef35f986cab","461da0f0-fde6-46bc-8137-7eca006260a8","f532c703-1179-465d-9933-7736df44d0ae","108e2695-6970-47d5-b5b0-eea8fc34e048","62e8e59e-17a5-4eba-a6c6-1c7f67ded518","e80231a2-e4d6-406a-a2c9-2e6109679690","34baa524-5d5b-4165-bbab-d01f05e6d6b9","186775da-7568-49e5-8110-4fd0bbc7bbe3","a1b78a21-a304-482b-8ce5-f612d95d44fe","c3ceca5c-d329-4559-b947-016172941ba2","408a149c-702f-4442-99df-bea49d9c0d9b","607e0dbf-e2fc-45c9-b939-946b8981c156","8401cb26-91a3-4b46-941e-1c75790821eb","4d4772a3-e1da-415f-a6d7-658dcefdcecd","2ab1abbc-b9f5-418f-a36a-94a4eca74ba9","30ebf167-9ad1-4b20-853c-2726f473f4c4","d16b85ee-0bbc-4030-9190-71e1408ff119","b8ba443e-5d83-4f37-b8c6-a1acd7623d0c","7b083729-e694-4b66-82a3-befb08451722","ddd9ffaa-d831-4cb4-a5bf-a1efce421dca"],"exports":{"designMdUrl":"/references/refero/3b83dfe4-2f53-4a4d-819d-e6045ca5f7dc/design.md","tokensJsonUrl":"/references/refero/3b83dfe4-2f53-4a4d-819d-e6045ca5f7dc/tokens.json","tailwindV4Url":"/references/refero/3b83dfe4-2f53-4a4d-819d-e6045ca5f7dc/tailwind-v4.css","cssVariablesUrl":"/references/refero/3b83dfe4-2f53-4a4d-819d-e6045ca5f7dc/tailwind-v4.css"}}