{"id":"66eb1c37-a8e5-4e6c-b17f-a75385b462e7","name":"Rox","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/66eb1c37-a8e5-4e6c-b17f-a75385b462e7","originalSiteUrl":"https://rox.com","capturedAt":"2026-04-11T18:37:21.679Z","colors":[{"name":"Page Canvas","hex":"#f5f5f4","role":"Primary background for pages and major sections, providing a clean, bright foundation.","group":"neutral","cssVariable":"--color-page-canvas"},{"name":"Surface White","hex":"#ffffff","role":"Used for cards, panels, and elements needing to stand out slightly from the main background, often appearing as content containers.","group":"neutral","cssVariable":"--color-surface-white"},{"name":"Blueprint Blue","hex":"#0b64e9","role":"Primary brand accent, used for all calls-to-action, interactive states, and key navigational elements to draw attention without being overwhelming.","group":"brand","cssVariable":"--color-blueprint-blue"},{"name":"Text Primary","hex":"#0c0a09","role":"Main body text, headlines, and critical information for maximum readability against light backgrounds.","group":"neutral","cssVariable":"--color-text-primary"},{"name":"Text Secondary","hex":"#1c1917","role":"Subheadings, supporting text, and less emphasized information, a subtle step lighter than primary text but still high contrast.","group":"neutral","cssVariable":"--color-text-secondary"},{"name":"Text Muted","hex":"#a6a09b","role":"Placeholder text, minor labels, and supplementary details, providing a softer visual presence.","group":"neutral","cssVariable":"--color-text-muted"},{"name":"Text Subtle","hex":"#57534d","role":"Less prominent text like captions or descriptions, visually receding while remaining legible.","group":"neutral","cssVariable":"--color-text-subtle"},{"name":"Subtle Gray","hex":"#ececea","role":"Backgrounds for subtle containers like badges or minor card elements, offering a hint of differentiation.","group":"neutral","cssVariable":"--color-subtle-gray"},{"name":"Border Light","hex":"#f0efef","role":"Distinguishes UI elements with a subtle border, especially for form fields and interactive elements.","group":"neutral","cssVariable":"--color-border-light"},{"name":"Disabled Gray","hex":"#d4d2d1","role":"Used for disabled states of interactive components, indicating non-interactability.","group":"neutral","cssVariable":"--color-disabled-gray"},{"name":"Status Red","hex":"#f24149","role":"Indicator for errors or important alerts, drawing quick attention.","group":"semantic","cssVariable":"--color-status-red"},{"name":"Status Orange","hex":"#f97006","role":"Highlighting warnings or moderate priority information.","group":"semantic","cssVariable":"--color-status-orange"},{"name":"Status Yellow","hex":"#f9b703","role":"For informational highlights or less critical status indicators.","group":"semantic","cssVariable":"--color-status-yellow"},{"name":"Status Violet","hex":"#6b4aff","role":"Likely for specific status tags or categories, providing visual distinction.","group":"semantic","cssVariable":"--color-status-violet"}],"typography":[{"role":"Hero and display headings — the signature typeface for brand impact, creating an elegant, authoritative presence with extreme size and tight line height.","sizes":"106px, 183px","family":"FH Total Display Regular","weight":"400","lineHeight":"0.80","substitute":"Playfair Display"},{"role":"Primary body and subheadings — a modern, geometric sans-serif that balances the classic display font with clarity and digital readability.","sizes":"14px, 16px, 18px, 20px, 24px, 28px","family":"Geist","weight":"400, 500","lineHeight":"1.20, 1.30, 1.40","substitute":"Inter","letterSpacing":"-0.02","fontFeatureSettings":"\"blwf\" on, \"cv03\" on, \"cv04\" on, \"cv09\" on, \"cv11\" on"},{"role":"Secondary body text and utility content — ensures broad compatibility and performance for smaller text blocks, leveraging system fonts for efficiency.","sizes":"10px, 12px, 14px","family":"system-ui","weight":"400, 500","lineHeight":"1.30","letterSpacing":"-0.03"},{"role":"Smallest UI text, labels, and metadata — a fallback simple sans-serif for minimal text elements where space is constrained.","sizes":"12px","family":"sans-serif","weight":"400","lineHeight":"1.20"}],"spacing":{"radius":{"pill":"100px","large":"12px","buttons":"8px","default":"6px"},"elementGap":"4-16px","sectionGap":"","cardPadding":"16px"},"radius":{"pill":"100px","large":"12px","buttons":"8px","default":"6px"},"guidelines":{"do":["Use 'FH Total Display Regular' solely for hero-level headlines (106px, 183px) to establish brand gravitas; reserve serif usage for maximum impact.","Apply 'Blueprint Blue' (#0b64e9) exclusively for primary calls-to-action and active states to maintain clear visual hierarchy.","Employ the '#f5f5f4' 'Page Canvas' for all primary page backgrounds to ensure an expansive, clean aesthetic.","Utilize Geist font with a -0.02em letter-spacing for all body text and subheadings to maintain the distinct digital typography.","Standardize on 6px default radii for all general elements and 8px for buttons, except for pill shapes which use 100px.","Always use 'Text Primary' (#0c0a09) for main body copy and 'Text Secondary' (#1c1917) for sub-content on light backgrounds for optimal contrast."],"dont":["Do not use multiple saturated colors for primary interactive elements; Blueprint Blue (#0b64e9) serves as the singular brand identifier.","Avoid strong, heavy drop shadows; instead, use subtle shadows like rgba(0, 0, 0, 0.06) 0px 2px 4px 0px for minimal elevation.","Do not use generic system fonts for prominent headings; FH Total Display Regular is reserved for brand distinction.","Refrain from using color to signify hierarchy on text elements; instead, rely on font weights, sizes, and the specified neutral color scale (Text Primary, Secondary, Muted).","Do not introduce new border radii beyond 1px, 6px, 8px, 12px, 16px, 20px, 30px, 36px, and 100px to maintain consistent geometric rhythm."]}}