{"id":"43c1b150-0dab-42f9-9bce-fe0be3dde26c","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","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":"Delphi","summary":"Cognac-Stained Parchment – A sense of aged wisdom and quiet authority, inviting deep contemplation.","description":"This design system evokes a sense of thoughtful, quiet expertise, like a leather-bound journal filled with well-considered thoughts. The dominant use of an off-white, almost beige background (#fdf6ee) coupled with a nuanced palette of warm grays and subtle browns creates an inviting, scholarly atmosphere. The signature element is the `Martina Plantijn Light` typeface at whisper-weights, which gives a sophisticated, almost intimate feel, contrasting with the geometric precision of accompanying sans-serifs.","tags":["editorial","academic","warm-neutrals","serif-dominant","subtle-luxury","knowledge-driven","expert-focused","minimalist-warm","muted-palette"],"industry":"ai","colorScheme":"light","colors":[{"name":"Parchment White","hex":"#fdf6ee","role":"Primary page and card backgrounds, lending a warm, analog feel to the digital interface.","group":"neutral"},{"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"},{"name":"Muted Stone","hex":"#94877c","role":"Secondary text, subtle borders, and placeholder text, providing visual hierarchy without harshness.","group":"neutral"},{"name":"Pressed Cacao","hex":"#7f6e60","role":"Tertiary text and subtle accents, deepening the warm neutral palette.","group":"neutral"},{"name":"Burnt Umber","hex":"#3e2407","role":"Interactive elements like primary buttons and emphasized text, acting as a warm, grounded accent.","group":"accent"},{"name":"Warm Ash","hex":"#a99d93","role":"Subtle borders and muted instructional text.","group":"neutral"},{"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"},{"name":"Fire Opal","hex":"#f65726","role":"Used sparingly for dynamic highlights or notification states, providing a vibrant pop.","group":"accent"},{"name":"Sunset Orange","hex":"#ff5c00","role":"Occasional accent for specific headline emphasis, drawing attention without being overwhelming.","group":"accent"},{"name":"White","hex":"#ffffff","role":"Text on dark backgrounds, or pure white elements for contrast against Parchment White.","group":"neutral"},{"name":"Dark Charcoal","hex":"#21201c","role":"Deep, almost black text for strong contrast where needed.","group":"neutral"}],"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"}],"typeScale":[{"role":"caption","size":10,"lineHeight":1,"letterSpacing":-0.01},{"role":"body","size":15,"lineHeight":1.4,"letterSpacing":-0.01},{"role":"subheading","size":20,"lineHeight":1.2,"letterSpacing":-0.48},{"role":"heading-sm","size":24,"lineHeight":1.22,"letterSpacing":-0.48},{"role":"heading","size":40,"lineHeight":1.22,"letterSpacing":-0.8},{"role":"heading-lg","size":56,"lineHeight":1.2,"letterSpacing":-1.23},{"role":"display","size":64,"lineHeight":1.34,"letterSpacing":-1.92}],"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."]},"components":[{"name":"CTA Button Group","role":""},{"name":"Feature Cards — Why Delphi","role":""},{"name":"Trust Feature Cards Grid","role":""},{"name":"Primary Button (Filled)","role":"Call to action."},{"name":"Secondary Button (Outlined)","role":"Secondary action or ghost button."},{"name":"Tertiary Button","role":"Subtle, less emphasized actions, often within navigation."},{"name":"Auth Button","role":"Sign-in or Get-started actions in the header."},{"name":"Testimonial Card","role":"Displaying expert quotes or profiles."},{"name":"Input Field","role":"User data entry."},{"name":"Header Navigation Item","role":"Primary site navigation."},{"name":"Feature Card","role":"Highlighting product features or benefits."}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\n- Text: #2b180a\n- Background: #fdf6ee\n- Primary CTA: #3e2407\n- Secondary CTA: #f0e6dc\n- Subtle Border: #94877c\n\n### 3-5 Example Component Prompts\n1. Create a hero section: background #fdf6ee. Centered Headline 'Digitize Your Mind' in Martina Plantijn Light 64px weight 300, #2b180a, letter-spacing -1.92px. Subtext 'Turn your knowledge into an interactive profile...' in Inter 17px weight 400, #94877c. Primary button 'Create Your Digital Mind' with background #3e2407, white text, 12px radius, 12px 16px padding. Secondary button 'See it in action' with background #f0e6dc, #2b180a text, 12px radius, 12px 16px padding.\n2. Design a feature card: background #fdf6ee, radius 16px, 20px padding. Headline 'Never Repeat Yourself Again' in Martina Plantijn Light 24px weight 400, #2b180a, letter-spacing -0.48px. Body text 'You have expertise people want...' in Inter 15px weight 400, #2b180a.\n3. Implement a header navigation bar: background #fdf6ee. Left-aligned logo. Navigation items 'Industries', 'Resources' at Inter 15px weight 400, #94877c, 12px padding. Right-aligned button 'Get Started' with background #ffffff, #2b180a text, 12px radius, 12px 16px padding."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775923753149-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775923753149-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/43c1b150-0dab-42f9-9bce-fe0be3dde26c-1777561018396-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/43c1b150-0dab-42f9-9bce-fe0be3dde26c-1777561018396-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/43c1b150-0dab-42f9-9bce-fe0be3dde26c-1777561018396-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/43c1b150-0dab-42f9-9bce-fe0be3dde26c-1777561018396-preview-detail-poster.jpg"},"similarStyleIds":["68d18deb-bb09-4258-8024-001af9c844c0","c955d25a-b32a-441d-9f07-a260d1df897b","5bfe6c1d-1b15-4f8d-b0c9-677a33291c5d","694723e9-0df7-4b9f-ba07-83fc598532d6","2b67c471-ff5c-4443-9f8d-e704b6bb5236","7b083729-e694-4b66-82a3-befb08451722","a6950b49-8ce4-4330-9499-26ca08061599","0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2","9342e89b-c2fe-4acf-9993-53b44e0c13b5","607c2098-bbbb-40bb-b23e-adf2b72c63dd","c363a216-873c-4112-b960-8e823db76f74","8f42603d-7ff9-446e-99a3-6bdd1f388ae5","75fdb89f-ca64-41b3-af36-7a78bd09448e","80d7ef36-ed7e-48bb-b558-f772eb40106f","e0ad1a25-5609-45e6-a355-9bdeec86c5ae","08c8700c-f278-42bc-812e-f60dc6ce996e","51752cfb-4fd4-464f-8b78-ecbc813830e1","25863c92-a287-491e-bae7-4da37a1f9a98","b8a8976c-52d9-4ebb-95ea-4c40f4a9acab","c8c22958-ec50-47f1-aedc-a131d7aeb442"],"exports":{"designMdUrl":"/references/refero/43c1b150-0dab-42f9-9bce-fe0be3dde26c/design.md","tokensJsonUrl":"/references/refero/43c1b150-0dab-42f9-9bce-fe0be3dde26c/tokens.json","tailwindV4Url":"/references/refero/43c1b150-0dab-42f9-9bce-fe0be3dde26c/tailwind-v4.css","cssVariablesUrl":"/references/refero/43c1b150-0dab-42f9-9bce-fe0be3dde26c/tailwind-v4.css"}}