{"id":"964b9215-396b-492c-abec-7bd778d7b1c9","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/964b9215-396b-492c-abec-7bd778d7b1c9","originalSiteUrl":"https://www.titan.com","capturedAt":"2026-04-30T00:20:17.872Z","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":"Titan","summary":"monochrome financial ledger","description":"Titan presents a refined, high-contrast, monochrome aesthetic, marrying the sharpness of financial precision with an underlying human warmth. Its visual language prioritizes clear information hierarchy and direct interaction, utilizing stark black and white with subtle, almost imperceptible, warm off-white and gray undertones for depth. Components are lightweight and interaction-focused, often featuring generous padding and distinctive pill-shaped radii to create a sense of approachability within a formal system. The design feels grounded and authoritative, not through heavy elements, but through its disciplined use of space, typography, and a distinct lack of decorative flourishes, allowing content and functionality to lead.","industry":"fintech","colorScheme":"light","colors":[{"name":"Midnight Ink","hex":"#111111","role":"Primary text, darkest surface. Creates stark contrast against lighter backgrounds","group":"neutral"},{"name":"Canvas White","hex":"#ffffff","role":"Page backgrounds, card surfaces, ghost button text. The primary backdrop for all content","group":"neutral"},{"name":"Off-White Sage","hex":"#f3efeb","role":"Subtle background for card variants and secondary sections, provides a soft, warm surface distinction","group":"neutral"},{"name":"Faded Stone","hex":"#e9eaeb","role":"Subtle borders and dividers, navigation backgrounds, a very light gray that acts as an almost invisible separator","group":"neutral"},{"name":"Gunmetal Gray","hex":"#615e5b","role":"Secondary text, muted helper text, and subtle icon details. Provides lower contrast for less prominent information","group":"neutral"},{"name":"Soft Concrete","hex":"#d8d3cc","role":"Subtle borders for ghost buttons and card containers, provides minimal visual separation","group":"neutral"},{"name":"Action Black","hex":"#000000","role":"Primary button backgrounds, key interactive elements. The pure black stands out against the near-white canvas","group":"brand"},{"name":"Highlight Orange","hex":"#ff9900","role":"Decorative strokes and subtle highlights, often within SVG elements. A small splash of vivid color","group":"accent"}],"typography":[{"role":"Primary typeface for all UI elements, headings, body text, and links. Its clean, modern lines reinforce the site's precision. Key use cases: weight 700 at 60px for prominent hero headlines, weight 400 at 16px for body content. Features 'ss02' and 'ss03' for consistent brand character.","sizes":"10px, 12px, 14px, 16px, 18px, 20px, 24px, 32px, 40px, 60px","family":"Geist","weight":"400, 500, 700","weights":[400,500,700],"lineHeight":"1.00, 1.10, 1.20, 1.30, 1.50","substitute":"Inter","letterSpacing":"-0.0300em, 0.0200em, 0.0300em","fontFeatureSettings":"\"ss02\", \"ss03\""},{"role":"Used sparingly for data displays or code-like elements, lending a technical and precise feel. Its monospaced nature is a deliberate choice for presenting numerical or categorical information. Features 'ss08' for specific character variations.","sizes":"11px, 13px, 20px, 28px, 48px","family":"Geist Mono","weight":"400, 500","weights":[400,500],"lineHeight":"1.00, 1.10","substitute":"JetBrains Mono","letterSpacing":"-0.0100em, 0.0300em","fontFeatureSettings":"\"ss08\""}],"typeScale":[{"role":"caption","size":10,"lineHeight":1.2},{"role":"body-sm","size":12,"lineHeight":1.2},{"role":"body","size":14,"lineHeight":1.2},{"role":"body-lg","size":16,"lineHeight":1.2},{"role":"heading-sm","size":20,"lineHeight":1.2},{"role":"heading","size":24,"lineHeight":1.2},{"role":"heading-lg","size":32,"lineHeight":1.2},{"role":"display-sm","size":40,"lineHeight":1.2},{"role":"display","size":60,"lineHeight":1.2}],"spacing":{"radius":{"cards":"32px","small":"10px","medium":"20px","buttons":"160px","navigation":"140px"},"elementGap":"24px","sectionGap":"80px","cardPadding":"28px","pageMaxWidth":"1200px"},"radius":{"cards":"32px","small":"10px","medium":"20px","buttons":"160px","navigation":"140px"},"shadows":{"surfaces":[{"hex":"#ffffff","name":"Canvas White","level":1,"purpose":"Dominant page background, main content area."},{"hex":"#f3efeb","name":"Off-White Sage","level":2,"purpose":"Secondary background for cards and distinct content sections, offering a subtle visual break."},{"hex":"#e9eaeb","name":"Faded Stone","level":3,"purpose":"Background for subtle borders, navigation elements, or very light dividers, almost blending into the canvas."}]},"guidelines":{"do":["Use Midnight Ink (#111111) as the primary text color against Canvas White (#ffffff) or Off-White Sage (#f3efeb) to maintain high contrast.","Apply a 160px border-radius to all primary and ghost buttons, and 140px to navigation elements for a consistent pill-shaped aesthetic.","Separate major content sections with 80px vertical spacing to ensure comfortable density and visual breathing room.","Utilize Geist at weight 700 for headings, sizes 40px and 60px, with -0.0300em letter spacing to create impactful, condensed titles.","Use Geist Mono sparingly for numerical data or technical terms, leveraging its 'ss08' feature for distinct presentation.","Implement Soft Concrete (#d8d3cc) for subtle 1px borders on ghost buttons and divider lines to avoid heavy visual separation.","Employ Off-White Sage (#f3efeb) as a background for secondary content blocks or cards to provide a warm, soft distinction from the main Canvas White background."],"dont":["Avoid introducing additional saturated colors; maintain the predominantly monochrome palette with only subtle Highlight Orange accents in decorative elements.","Do not use box-shadows for elevation; rely on background color changes or subtle borders for surface differentiation.","Do not use generic circular or square button radii; adhere to the specific 160px and 140px values for interactive elements.","Avoid dense, unbroken blocks of text; break up content with generous padding, section gaps, and clear typographic hierarchy.","Do not use default browser link styles; all links should be styled with Midnight Ink (#111111) and no underline by default.","Do not use thin or light text weights for body copy; ensure readability with Geist at weight 400 or 500 for paragraph text.","Avoid cluttering the layout; maintain the spacious and comfortable density by respecting elementGap of 24px and cardPadding of 28px."]},"components":[{"name":"Primary Filled Button","role":"Call to action"},{"name":"Ghost Button","role":"Secondary action or link"},{"name":"Navigation Link Button","role":"Tertiary action or inline navigation link"},{"name":"Feature Card","role":"Informational content container"},{"name":"Expanded Feature Card","role":"Detailed content container"},{"name":"Stat Display Card","role":"Quick view data presentation"},{"name":"Inline Text Link","role":"Navigation or contextual information link"}],"customSections":[{"title":"Agent Prompt Guide","content":"Quick Color Reference:\n- text: #111111\n- background: #ffffff\n- border: #e9eaeb\n- accent: #ff9900\n- primary action: #000000 (filled action)\n\nExample Component Prompts:\n- Create a Primary Action Button: #000000 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.\n- Generate a Feature Card titled 'Equity Compensation' using Off-White Sage (#f3efeb) background, 20px border-radius, padding 28px. Inside, use Geist weight 500 at 24px for the title and Geist weight 400 at 16px for body text, both in Midnight Ink (#111111).\n- Build a Ghost Button 'See More' with Canvas White (#ffffff) background, Midnight Ink (#111111) text, Soft Concrete (#d8d3cc) 1px border, and 160px border-radius, with 24px horizontal padding and 11px vertical padding."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777508392174-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777508392174-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/964b9215-396b-492c-abec-7bd778d7b1c9-1777581428460-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/964b9215-396b-492c-abec-7bd778d7b1c9-1777581428460-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/964b9215-396b-492c-abec-7bd778d7b1c9-1777581428460-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/964b9215-396b-492c-abec-7bd778d7b1c9-1777581428460-preview-detail-poster.jpg"},"similarStyleIds":["8d3dc65e-4443-4bb3-b1a9-b0fc98381db9","3f2b79c1-d980-4380-a903-29856975fc37","d703d9f7-4821-468e-8fe4-c8b5790b00ed","a76ec6ba-20b3-495c-9d89-1e58281e79e7","9d16aa65-cef7-4bf7-83c8-91837a248cd9","76b0c23b-7a09-49f6-a53c-cc6fc6258d5f","e0ad1a25-5609-45e6-a355-9bdeec86c5ae","29392960-0acf-4891-ad33-28a72f6a9b75","c60f05ff-2420-4a24-92db-80c4b6a74683","aeefc294-a8f7-443d-b76a-538dddc29afe","7c38e84b-aea0-4c8f-b3e9-60b994ee6c6b","5d273906-0110-48cf-99cd-63a72eb9c586","7b083729-e694-4b66-82a3-befb08451722","1bd3b2ba-9ad9-44ed-9130-03f9d94de821","14389660-81ff-4ca0-957f-b0dcc8fbe120","48e5de76-05d5-4c4e-a269-c7c245b291ec","ac2e7d86-580e-48b9-bb68-d76297fb5957","9cc537fc-97d8-4632-8703-f9aa296c2206","043341c3-cf82-4be1-9142-fa5e6a370ca9","4d4772a3-e1da-415f-a6d7-658dcefdcecd"],"exports":{"designMdUrl":"/references/refero/964b9215-396b-492c-abec-7bd778d7b1c9/design.md","tokensJsonUrl":"/references/refero/964b9215-396b-492c-abec-7bd778d7b1c9/tokens.json","tailwindV4Url":"/references/refero/964b9215-396b-492c-abec-7bd778d7b1c9/tailwind-v4.css","cssVariablesUrl":"/references/refero/964b9215-396b-492c-abec-7bd778d7b1c9/tailwind-v4.css"}}