{"id":"66eb1c37-a8e5-4e6c-b17f-a75385b462e7","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","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":"Rox","summary":"Analytical Blueprint on Pure White. An interface that feels like a meticulously charted course on a pristine, well-lit canvas.","description":"Rox exudes a focused, data-driven clarity, presenting complex financial automation with understated confidence. The design leverages a monochrome palette with strategic pops of a vibrant blue and a scattered, almost playful set of bright accent colors in secondary elements. Dominating the visual landscape is a unique pairing of a classic serif display font for impactful headlines and a clean, modern sans-serif for body text, creating a formal yet approachable feel. The near-achromatic backgrounds and lack of strong shadows contribute to a flat, spacious interface, elevating content through thoughtful typography rather than heavy visual effects. A subtle brand blue is employed sparingly, primarily to highlight interactive elements, guiding user attention with precision.","tags":["data-driven","minimalist","formal","high-contrast","clean","editorial","blue-accent","subtle-shadows","serif-headline","polished"],"industry":"fintech","colorScheme":"light","colors":[{"name":"Page Canvas","hex":"#f5f5f4","role":"Primary background for pages and major sections, providing a clean, bright foundation.","group":"neutral"},{"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"},{"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"},{"name":"Text Primary","hex":"#0c0a09","role":"Main body text, headlines, and critical information for maximum readability against light backgrounds.","group":"neutral"},{"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"},{"name":"Text Muted","hex":"#a6a09b","role":"Placeholder text, minor labels, and supplementary details, providing a softer visual presence.","group":"neutral"},{"name":"Text Subtle","hex":"#57534d","role":"Less prominent text like captions or descriptions, visually receding while remaining legible.","group":"neutral"},{"name":"Subtle Gray","hex":"#ececea","role":"Backgrounds for subtle containers like badges or minor card elements, offering a hint of differentiation.","group":"neutral"},{"name":"Border Light","hex":"#f0efef","role":"Distinguishes UI elements with a subtle border, especially for form fields and interactive elements.","group":"neutral"},{"name":"Disabled Gray","hex":"#d4d2d1","role":"Used for disabled states of interactive components, indicating non-interactability.","group":"neutral"},{"name":"Status Red","hex":"#f24149","role":"Indicator for errors or important alerts, drawing quick attention.","group":"semantic"},{"name":"Status Orange","hex":"#f97006","role":"Highlighting warnings or moderate priority information.","group":"semantic"},{"name":"Status Yellow","hex":"#f9b703","role":"For informational highlights or less critical status indicators.","group":"semantic"},{"name":"Status Violet","hex":"#6b4aff","role":"Likely for specific status tags or categories, providing visual distinction.","group":"semantic"}],"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"}],"typeScale":[{"role":"caption","size":10,"lineHeight":1.3,"letterSpacing":-0.03},{"role":"body","size":14,"lineHeight":1.3,"letterSpacing":-0.02},{"role":"heading","size":18,"lineHeight":1.3,"letterSpacing":-0.02},{"role":"heading-lg","size":20,"lineHeight":1.2,"letterSpacing":-0.02},{"role":"display-sm","size":24,"lineHeight":1.2,"letterSpacing":-0.02},{"role":"display","size":28,"lineHeight":1.2,"letterSpacing":-0.02},{"role":"hero-headline-1","size":106,"lineHeight":0.8},{"role":"hero-headline-2","size":183,"lineHeight":0.8}],"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."]},"components":[{"name":"Workflow Tab Bar","role":""},{"name":"Outbound Agent Dashboard Card","role":""},{"name":"CTA Button Group with Announcement Badge","role":""},{"name":"Primary Filled Button","role":"Interactive element"},{"name":"Secondary Outlined Button","role":"Interactive element"},{"name":"Text Link","role":"Navigation/Interactive text"},{"name":"Header Navigation Item","role":"Global Navigation"},{"name":"Display Headline - 'The Grand Statement'","role":"Hero content"},{"name":"Card Container","role":"Content grouping"},{"name":"Status Tag","role":"Categorization/Label"}],"customSections":[{"title":"Agent Prompt Guide","content":"1. **Quick Color Reference:**\n   - Text Primary: #0c0a09\n   - Page Background: #f5f5f4\n   - CTA Blue: #0b64e9\n   - Surface White: #ffffff\n   - Text Muted: #a6a09b\n\n2. **Example Component Prompts:**\n   - Create a primary filled button: Blueprint Blue background (#0b64e9), white text (#ffffff), 8px radius, with 12px vertical padding and 16px horizontal padding. Text in Geist, 16px, weight 500.\n   - Generate a card container: Surface White background (#ffffff), 6px radius, with a subtle shadow (rgba(0, 0, 0, 0.1) 0px 1px 2px 0px). Content padding 16px.\n   - Design a hero section headline: 'Revenue.' in FH Total Display Regular, 183px, weight 400, color #1c1917, lineHeight 0.8. Below it, 'On autopilot.' in FH Total Display Regular, 106px, weight 400, color #d4d2d1, lineHeight 0.8.\n   - Produce a status tag: Status Red background (#f24149), white text, 6px radius, small padding (e.g., 4px vertical, 8px horizontal). Text in system-ui, 12px, weight 400.\n   - Create a secondary outlined button: Subtle Gray background (#f0efef), Blueprint Blue text (#0b64e9), 1px border in Blueprint Blue, 8px radius, 8px vertical padding, 12px horizontal padding. Text in Geist, 14px, weight 400."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775932620041-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775932620041-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/66eb1c37-a8e5-4e6c-b17f-a75385b462e7-1777567871476-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/66eb1c37-a8e5-4e6c-b17f-a75385b462e7-1777567871476-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/66eb1c37-a8e5-4e6c-b17f-a75385b462e7-1777567871476-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/66eb1c37-a8e5-4e6c-b17f-a75385b462e7-1777567871476-preview-detail-poster.jpg"},"similarStyleIds":["a76ec6ba-20b3-495c-9d89-1e58281e79e7","62b22816-2d98-4e98-9c17-bf600ddb2fc8","0fd67ec5-7e9c-4ca9-b368-5d9c7388477a","9342e89b-c2fe-4acf-9993-53b44e0c13b5","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","b5fdba21-fd4d-427e-b551-1e22c51e42db","ec0f5bca-8367-49e7-b8aa-73b3fa09a4a0","12255b63-e506-4bc1-a4cd-d05487de32f3","537641a0-5a24-4203-ae9b-cd29516aa3f8","c14bfde7-6f08-4b54-bd9b-39989d10cfef","75fdb89f-ca64-41b3-af36-7a78bd09448e","e0ad1a25-5609-45e6-a355-9bdeec86c5ae","b8a8976c-52d9-4ebb-95ea-4c40f4a9acab","48e5de76-05d5-4c4e-a269-c7c245b291ec","aeefc294-a8f7-443d-b76a-538dddc29afe","62e8e59e-17a5-4eba-a6c6-1c7f67ded518","733e6475-892a-4138-8835-bf40344df317","186775da-7568-49e5-8110-4fd0bbc7bbe3","32845f27-6b24-48be-af25-8e664f826b30","88e9d606-7e8f-479c-9508-1b081e254ed9"],"exports":{"designMdUrl":"/references/refero/66eb1c37-a8e5-4e6c-b17f-a75385b462e7/design.md","tokensJsonUrl":"/references/refero/66eb1c37-a8e5-4e6c-b17f-a75385b462e7/tokens.json","tailwindV4Url":"/references/refero/66eb1c37-a8e5-4e6c-b17f-a75385b462e7/tailwind-v4.css","cssVariablesUrl":"/references/refero/66eb1c37-a8e5-4e6c-b17f-a75385b462e7/tailwind-v4.css"}}