{"id":"b38702a0-75ab-474c-9106-00b624535825","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","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":"Ramp","summary":"Deep Ocean Command Center – a stark, high-contrast control panel set against an endless dark expanse.","description":"The Ramp design system evokes the precision and quiet authority of a financial control panel operating in a deep ocean environment. Its foundation is a dark theme, utilizing a rich `#0c0a08` background and surfaces that progressively lighten to reveal hierarchy, like submerged objects reflecting distant light. Typography, primarily Lausanne, sets a technical yet approachable tone with its clean geometry and a prominent use of 'ss01' font feature, ensuring figures and characters align perfectly. Vibrant yellow accents (`#e4f222`) serve as critical interaction indicators, cutting through the deep blue and near-black neutrals like sonar beacons, guiding the user through complex financial interfaces.","industry":"fintech","colorScheme":"dark","colors":[{"name":"Deep Space Black","hex":"#0c0a08","role":"Primary page background, base surface for components — establishes the dark theme depth.","group":"neutral"},{"name":"Pure White","hex":"#ffffff","role":"Primary text color, crucial for high contrast readability against dark backgrounds, interactive element text.","group":"neutral"},{"name":"Ash Gray","hex":"#1a1919","role":"Secondary surface background, used for lifted cards or subtle section breaks against the primary background.","group":"neutral"},{"name":"Charcoal Black","hex":"#000000","role":"Illustrative elements, icons, and occasionally deeper backgrounds for visual breaks.","group":"neutral"},{"name":"Ivory White","hex":"#f4f2f0","role":"Alternate background for specific white-themed cards or content sections, offering high contrast to deep blacks.","group":"neutral"},{"name":"Slate Gray","hex":"#999ba3","role":"Subtle text, inactive states, faint borders, and muted icons.","group":"neutral"},{"name":"Iron Gray","hex":"#4d505d","role":"Input field borders, secondary structural elements.","group":"neutral"},{"name":"Midnight Ink","hex":"#010412","role":"Subtle shadow color, creating depth on dark surfaces without being stark.","group":"neutral"},{"name":"Ocean Abyss","hex":"#0b0d1b","role":"Darkest button backgrounds, creating a sense of subtle elevation within the dark theme.","group":"neutral"},{"name":"Silver Mist","hex":"#d2cecb","role":"Light borders and dividers for cards and sections on lighter neutral backgrounds.","group":"neutral"},{"name":"Sunbeam Yellow","hex":"#e4f222","role":"Primary calls to action, active navigation indicators, and key interactive elements. Provides strong visual focus.","group":"accent"},{"name":"Emerald Green","hex":"#00d638","role":"Success states, positive indicators, and specific illustrative elements.","group":"semantic"},{"name":"Deep Sea Blue","hex":"#5683d2","role":"Link text, informational elements, and subtle brand accents.","group":"brand"},{"name":"Electric Blue","hex":"#0066ff","role":"Interactive elements, graphical accents with high visibility.","group":"brand"},{"name":"Blaze Orange","hex":"#ff492c","role":"Highlighting specific features or drawing attention to warnings.","group":"semantic"}],"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\""}],"typeScale":[{"role":"caption","size":10,"lineHeight":1.5},{"role":"subheading","size":18,"lineHeight":1.38},{"role":"heading-sm","size":24,"lineHeight":1.33},{"role":"heading","size":40,"lineHeight":1.17},{"role":"heading-lg","size":48,"lineHeight":1.14},{"role":"display","size":64,"lineHeight":1.05}],"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."]},"components":[{"name":"Primary Call to Action Button","role":"Interactive"},{"name":"Secondary Ghost Button","role":"Interactive"},{"name":"Text Link Button","role":"Interactive"},{"name":"Dark Filled Button","role":"Interactive"},{"name":"Product Feature Card","role":"Display"},{"name":"Dark Marketing Card","role":"Display"},{"name":"Testimonial Card","role":"Display"},{"name":"Outline Card","role":"Display"},{"name":"Input Field - Dark Background","role":"Interactive"},{"name":"Input Field - Light Background","role":"Interactive"},{"name":"Input Field - Focused/Active","role":"Interactive"}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\n- Primary Text: `#ffffff` (Pure White)\n- Page Background: `#0c0a08` (Deep Space Black)\n- Primary CTA: `#e4f222` (Sunbeam Yellow)\n- Input Border: `#4d505d` (Iron Gray)\n- Link Text: `#5683d2` (Deep Sea Blue)\n\n### Example Component Prompts\n1. Create a hero section: Full-bleed Deep Space Black background. Headline 'Time is money. Save both.' using 'lausanne' font, 64px, weight 500, Pure White text, line-height 1.05. Subtext 'Easy-to-use corporate cards...' uses 'lausanne' 18px, weight 400, Pure White. Primary button 'Get started for free' is Sunbeam Yellow (`#e4f222`), text Deep Space Black (`#0c0a08`), 6px border-radius, 10px vertical 20px horizontal padding. Input field 'What's your work email?' has transparent background, Pure White text, Iron Gray border, 10px border-radius, 16px horizontal padding.\n2. Design a feature card: Use Ivory White (`#f4f2f0`) for the background, 12px border-radius. Headline 'Ramp Intelligence' using 'lausanne' 24px, weight 500, Deep Space Black text. Accent text 'Put Ramp AI to work for you.' using 'lausanne' 14px, weight 400, Deep Space Black. Include a 'Learn more' link in Deep Sea Blue (`#5683d2`). Card padding 0px.\n3. Implement a navigation bar: Sticky, 62px height, Deep Space Black background. Logo text 'ramp' in Pure White. Navigation links 'Products', 'Solutions' in Pure White, 'lausanne' 14px, weight 400. 'Sign in' button as transparent background, Pure White text, 6px border-radius, 10px vertical 20px horizontal padding. 'See a demo' button as Sunbeam Yellow (`#e4f222`) background, Deep Space Black text, 6px border-radius, 10px vertical 20px horizontal padding. Apply inset shadow `rgba(255, 255, 255, 0.6) 0px 0px 2px 0px inset`.\n4. Construct a testimonial card within a horizontal carousel: Background `rgba(33, 33, 33, 0.024)`, 12px border-radius. Inner padding 32px vertical, 24px horizontal. Text 'Ramp is the only vendor...' in Pure White, 'lausanne' 16px, weight 400. Name 'Brandon Zell' in Pure White, 'lausanne' 14px, weight 500. Include a 'Read customer story' link in Deep Sea Blue (`#5683d2`)."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1776118974795-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1776118974795-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/b38702a0-75ab-474c-9106-00b624535825-1777568656929-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/b38702a0-75ab-474c-9106-00b624535825-1777568656929-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/b38702a0-75ab-474c-9106-00b624535825-1777568656929-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/b38702a0-75ab-474c-9106-00b624535825-1777568656929-preview-detail-poster.jpg"},"similarStyleIds":["7c38e84b-aea0-4c8f-b3e9-60b994ee6c6b","62e8e59e-17a5-4eba-a6c6-1c7f67ded518","733e6475-892a-4138-8835-bf40344df317","8d3dc65e-4443-4bb3-b1a9-b0fc98381db9","21cfe0c1-778d-4613-9f47-a5718eb929b3","a76ec6ba-20b3-495c-9d89-1e58281e79e7","ab201ed7-928f-4080-ba95-c3992311e39d","c60f05ff-2420-4a24-92db-80c4b6a74683","4d4772a3-e1da-415f-a6d7-658dcefdcecd","3172cd4d-118a-4a16-a259-6b634d32322e","7b083729-e694-4b66-82a3-befb08451722","4ce66adb-ed8b-4e71-8066-15d92c4d2be0","964b9215-396b-492c-abec-7bd778d7b1c9","a0630421-7b66-48b4-aa14-6194a3b2c2b9","e0ad1a25-5609-45e6-a355-9bdeec86c5ae","91b110da-902b-4d09-8bf0-26bd1f25f8b2","29392960-0acf-4891-ad33-28a72f6a9b75","1bd3b2ba-9ad9-44ed-9130-03f9d94de821","48ba2283-13b5-423a-8742-390ea4e53c36","b58d92f6-68a8-4358-8fc9-6ea58e6d483b"],"exports":{"designMdUrl":"/references/refero/b38702a0-75ab-474c-9106-00b624535825/design.md","tokensJsonUrl":"/references/refero/b38702a0-75ab-474c-9106-00b624535825/tokens.json","tailwindV4Url":"/references/refero/b38702a0-75ab-474c-9106-00b624535825/tailwind-v4.css","cssVariablesUrl":"/references/refero/b38702a0-75ab-474c-9106-00b624535825/tailwind-v4.css"}}