{"id":"43c1b150-0dab-42f9-9bce-fe0be3dde26c","name":"Delphi","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/43c1b150-0dab-42f9-9bce-fe0be3dde26c","originalSiteUrl":"https://delphi.ai","capturedAt":"2026-04-11T16:09:35.790Z","colors":[{"name":"Parchment White","hex":"#fdf6ee","role":"Primary page and card backgrounds, lending a warm, analog feel to the digital interface.","group":"neutral","cssVariable":"--color-parchment-white"},{"name":"Deep Cognac","hex":"#2b180a","role":"Primary text color for body copy, headings, and key UI elements, offering strong contrast against the warm backgrounds.","group":"brand","cssVariable":"--color-deep-cognac"},{"name":"Muted Stone","hex":"#94877c","role":"Secondary text, subtle borders, and placeholder text, providing visual hierarchy without harshness.","group":"neutral","cssVariable":"--color-muted-stone"},{"name":"Pressed Cacao","hex":"#7f6e60","role":"Tertiary text and subtle accents, deepening the warm neutral palette.","group":"neutral","cssVariable":"--color-pressed-cacao"},{"name":"Burnt Umber","hex":"#3e2407","role":"Interactive elements like primary buttons and emphasized text, acting as a warm, grounded accent.","group":"accent","cssVariable":"--color-burnt-umber"},{"name":"Warm Ash","hex":"#a99d93","role":"Subtle borders and muted instructional text.","group":"neutral","cssVariable":"--color-warm-ash"},{"name":"Cloud Fog","hex":"#f0e6dc","role":"Hover states and secondary button backgrounds, a slightly darker shade of the primary background for subtle interaction feedback.","group":"neutral","cssVariable":"--color-cloud-fog"},{"name":"Fire Opal","hex":"#f65726","role":"Used sparingly for dynamic highlights or notification states, providing a vibrant pop.","group":"accent","cssVariable":"--color-fire-opal"},{"name":"Sunset Orange","hex":"#ff5c00","role":"Occasional accent for specific headline emphasis, drawing attention without being overwhelming.","group":"accent","cssVariable":"--color-sunset-orange"},{"name":"White","hex":"#ffffff","role":"Text on dark backgrounds, or pure white elements for contrast against Parchment White.","group":"neutral","cssVariable":"--color-white"},{"name":"Dark Charcoal","hex":"#21201c","role":"Deep, almost black text for strong contrast where needed.","group":"neutral","cssVariable":"--color-dark-charcoal"}],"typography":[{"role":"Primary display and headline font for all large text, creating an inviting, antique, and intellectual tone. The liberal use of negative letter-spacing for large sizes is a signature choice, drawing characters closer for a cohesive, refined look.","sizes":"10px, 12px, 14px, 15px, 20px, 24px, 40px, 56px, 64px","family":"Martina Plantijn Light","weight":"300, 400, 700","lineHeight":"1.00, 1.20, 1.22, 1.32, 1.34","substitute":"Source Serif Pro","letterSpacing":"-0.03em at 64px, -0.022em at 56px, -0.02em at 40px, -0.013em at 24px, -0.012em at 20px, normal at 15px and below"},{"role":"Dominant sans-serif for body text, navigation items, and descriptions, providing contemporary readability against the more expressive display font.","sizes":"10px, 13px, 14px, 15px, 17px","family":"Inter","weight":"400, 500","lineHeight":"1.00, 1.20, 1.40","substitute":"Inter","letterSpacing":"-0.01em"},{"role":"Fallback and utilitarian text where robust readability is paramount, such as system messages or very small captions.","sizes":"12px","family":"sans-serif","weight":"400","lineHeight":"1.20","substitute":"Arial","letterSpacing":"normal"},{"role":"Monospaced font used for data, code snippets, or any content requiring exact character alignment.","sizes":"13px","family":"Roboto Mono","weight":"400","lineHeight":"1.40","substitute":"Roboto Mono","letterSpacing":"normal"}],"spacing":{"radius":{"small":"4px","buttons":"12px","default":"12px","testimonials":"70px"},"elementGap":"8px","sectionGap":"75px","cardPadding":"20px"},"radius":{"small":"4px","buttons":"12px","default":"12px","testimonials":"70px"},"shadows":{"philosophy":"The design embraces a philosophy of subtle, organic elevation, shying away from strong, hard-edged shadows. Instead, elevation is primarily conveyed through slight background color variations (e.g., #fdf6ee for cards on potentially #f0e6dc backgrounds) and very soft, diffuse box-shadows. These shadows are barely perceptible, creating a gentle lift rather than a stark separation, maintaining the warm and inviting aesthetic without sharp contrasts."},"guidelines":{"do":["Use Martina Plantijn Light at weight 300 for all content headings larger than 24px, applying appropriate negative letter-spacing.","Maintain #fdf6ee as the primary background color for all main page content and interactive cards.","Apply a default border-radius of 12px to all interactive elements and contained content blocks like cards.","Employ the Deep Cognac (#2b180a) as the default text color for primary content and navigation.","Utilize Inter at 15px with line height 1.4 for most body copy, ensuring an open and readable text block.","Emphasize primary calls-to-action using a filled button with Burnt Umber (#3e2407) background and white text.","Ensure consistent spacing elements are multiples of 4px, especially for padding within components and between text blocks."],"dont":["Do not use highly saturated colors for backgrounds or large text areas; reserve them for small, impactful accents like #f65726 or #ff5c00.","Avoid harsh shadows; prefer subtle, barely-there elevations to maintain the soft, warm aesthetic.","Do not use pure black (#000000) for text on #fdf6ee backgrounds unless for specific, high-contrast, legal text. Prefer Deep Cognac (#2b180a) or Dark Charcoal (#21201c).","Do not break the established type scale; Martina Plantijn Light scales with specific letter-spacing adjustments at larger sizes.","Do not introduce strong, geometric shapes where rounded corners (12px or 70px) are the established pattern.","Avoid busy or distracting imagery; prefer tightly cropped portraits or clean UI mockups.","Do not use `sans-serif` (system font) for any primary content; it is reserved for inaccessible or fallback instances."]}}