{"id":"b38702a0-75ab-474c-9106-00b624535825","name":"Ramp","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/b38702a0-75ab-474c-9106-00b624535825","originalSiteUrl":"https://ramp.com","capturedAt":"2026-04-13T22:23:27.077Z","colors":[{"name":"Deep Space Black","hex":"#0c0a08","role":"Primary page background, base surface for components — establishes the dark theme depth.","group":"neutral","cssVariable":"--color-deep-space-black"},{"name":"Pure White","hex":"#ffffff","role":"Primary text color, crucial for high contrast readability against dark backgrounds, interactive element text.","group":"neutral","cssVariable":"--color-pure-white"},{"name":"Ash Gray","hex":"#1a1919","role":"Secondary surface background, used for lifted cards or subtle section breaks against the primary background.","group":"neutral","cssVariable":"--color-ash-gray"},{"name":"Charcoal Black","hex":"#000000","role":"Illustrative elements, icons, and occasionally deeper backgrounds for visual breaks.","group":"neutral","cssVariable":"--color-charcoal-black"},{"name":"Ivory White","hex":"#f4f2f0","role":"Alternate background for specific white-themed cards or content sections, offering high contrast to deep blacks.","group":"neutral","cssVariable":"--color-ivory-white"},{"name":"Slate Gray","hex":"#999ba3","role":"Subtle text, inactive states, faint borders, and muted icons.","group":"neutral","cssVariable":"--color-slate-gray"},{"name":"Iron Gray","hex":"#4d505d","role":"Input field borders, secondary structural elements.","group":"neutral","cssVariable":"--color-iron-gray"},{"name":"Midnight Ink","hex":"#010412","role":"Subtle shadow color, creating depth on dark surfaces without being stark.","group":"neutral","cssVariable":"--color-midnight-ink"},{"name":"Ocean Abyss","hex":"#0b0d1b","role":"Darkest button backgrounds, creating a sense of subtle elevation within the dark theme.","group":"neutral","cssVariable":"--color-ocean-abyss"},{"name":"Silver Mist","hex":"#d2cecb","role":"Light borders and dividers for cards and sections on lighter neutral backgrounds.","group":"neutral","cssVariable":"--color-silver-mist"},{"name":"Sunbeam Yellow","hex":"#e4f222","role":"Primary calls to action, active navigation indicators, and key interactive elements. Provides strong visual focus.","group":"accent","cssVariable":"--color-sunbeam-yellow"},{"name":"Emerald Green","hex":"#00d638","role":"Success states, positive indicators, and specific illustrative elements.","group":"semantic","cssVariable":"--color-emerald-green"},{"name":"Deep Sea Blue","hex":"#5683d2","role":"Link text, informational elements, and subtle brand accents.","group":"brand","cssVariable":"--color-deep-sea-blue"},{"name":"Electric Blue","hex":"#0066ff","role":"Interactive elements, graphical accents with high visibility.","group":"brand","cssVariable":"--color-electric-blue"},{"name":"Blaze Orange","hex":"#ff492c","role":"Highlighting specific features or drawing attention to warnings.","group":"semantic","cssVariable":"--color-blaze-orange"}],"typography":[{"role":"Primary typeface for all UI text, headings, body, and interactive elements. Its custom 'ss01' feature implies a focus on numerical precision and aligned tabular data, critical for a financial platform.","sizes":"10px, 13px, 14px, 16px, 18px, 20px, 24px, 28px, 40px, 48px, 64px","family":"lausanne","weight":"400, 500","lineHeight":"0.74, 1.00, 1.04, 1.05, 1.14, 1.17, 1.20, 1.30, 1.33, 1.38, 1.43, 1.46, 1.50, 1.60","substitute":"system-ui, sans-serif","letterSpacing":"normal","fontFeatureSettings":"\"ss01\""},{"role":"Fallback typeface, used sparingly for specific legacy content or embedded imagery text, ensures broad compatibility.","sizes":"14px","family":"Arial","weight":"400","lineHeight":"1.20","substitute":"sans-serif","letterSpacing":"normal","fontFeatureSettings":"\"ss01\""}],"spacing":{"radius":{"nav":"4px","cards":"12px","input":"10px","buttons":"4px","default":"12px"},"elementGap":"8px","sectionGap":"24px","cardPadding":"24px"},"radius":{"nav":"4px","cards":"12px","input":"10px","buttons":"4px","default":"12px"},"shadows":{"philosophy":"The design system minimizes overt use of shadows, primarily relying on changing background colors of surfaces (Deep Space Black to Ash Gray to Ocean Abyss) and subtle borders to create depth. When shadows are present, they are either an almost imperceptible inset white line on the nav bar or implicitly soft, almost uncolored `box-shadow` values like `Midnight Ink` (`#010412`) to hint at elevation without heavy visual weight.","surfaces":[{"hex":"#0c0a08","name":"Deep Space Black Canvas","level":0,"purpose":"Base canvas for the entire application, providing the foundational dark theme."},{"hex":"#1a1919","name":"Ash Gray Surface","level":1,"purpose":"Secondary background for card-like elements or subtly elevated sections, adding slight visual depth."},{"hex":"#0b0d1b","name":"Ocean Abyss Card","level":2,"purpose":"Background for prominent interactive elements and cards that require higher contrast against the canvas."},{"hex":"#21212106","name":"Translucent Accent","level":3,"purpose":"Highly subtle background tint for specific card variants or overlays, often used on top of other surfaces to create a layered effect."},{"hex":"#f4f2f0","name":"Ivory White Accent Area","level":4,"purpose":"Background for occasional light sections or specific content cards that require high contrast with dark elements."}]},"guidelines":{"do":["Prioritize text legibility by using Pure White (`#ffffff`) for primary text on Deep Space Black (`#0c0a08`) or Ocean Abyss (`#0b0d1b`) backgrounds.","Use Sunbeam Yellow (`#e4f222`) exclusively for primary call-to-action buttons and active navigation states to clearly signal interaction points.","Apply 12px border-radius to all cards and larger container elements for a consistent soft-edged feel.","Maintain a clear visual hierarchy by utilizing the surface progression: Deep Space Black (`#0c0a08`) for canvas, Ash Gray (`#1a1919`) for elevated cards, and Ocean Abyss (`#0b0d1b`) for interactive elements on dark backgrounds.","Ensure headings use the 'lausanne' font with its 'ss01' font feature for precise number and character alignment, crucial for financial data.","Use 8px as the default `elementGap` for consistent spacing between UI elements, reserving smaller increments for fine-tuning dense interfaces.","For all navigation and buttons, apply a 4px border-radius to create a distinct, slightly softer interaction target."],"dont":["Do not use Sunbeam Yellow (`#e4f222`) for decorative purposes or non-interactive elements, as it dilutes its primary CTA role.","Avoid arbitrary color choices; every color must map to a defined role within the palette to maintain cohesion.","Do not introduce new shadow styles; adhere to the subtle inset white shadow (`rgba(255, 255, 255, 0.6) 0px 0px 2px 0px inset`) for nav and the default no shadows for cards.","Do not use generic system fonts for primary UI text; always prefer 'lausanne' with its 'ss01' feature for brand consistency and precision.","Avoid varying component padding; stick to the specified padding for buttons (e.g., 10px vertical, 20px horizontal) and cards (e.g., 24px for outlined cards) to maintain rhythmic spacing.","Do not use pure black (`#000000`) for extensive text; reserve it for illustrative elements or very specific, high-contrast contexts."]}}