{"id":"3b83dfe4-2f53-4a4d-819d-e6045ca5f7dc","name":"xAI","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","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","cssVariable":"--color-deep-midnight"},{"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","cssVariable":"--color-faded-steel"},{"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","cssVariable":"--color-frost-white"},{"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))","cssVariable":"--color-muted-ash"},{"name":"Whisper Gray","hex":"#474747","role":"Subtle button and navigation borders, creating a very soft outline","group":"neutral","cssVariable":"--color-whisper-gray"},{"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","cssVariable":"--color-electric-blue"}],"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"}],"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."]}}