{"id":"964b9215-396b-492c-abec-7bd778d7b1c9","name":"Titan","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","colors":[{"name":"Midnight Ink","hex":"#111111","role":"Primary text, darkest surface. Creates stark contrast against lighter backgrounds","group":"neutral","cssVariable":"--color-midnight-ink"},{"name":"Canvas White","hex":"#ffffff","role":"Page backgrounds, card surfaces, ghost button text. The primary backdrop for all content","group":"neutral","cssVariable":"--color-canvas-white"},{"name":"Off-White Sage","hex":"#f3efeb","role":"Subtle background for card variants and secondary sections, provides a soft, warm surface distinction","group":"neutral","cssVariable":"--color-off-white-sage"},{"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","cssVariable":"--color-faded-stone"},{"name":"Gunmetal Gray","hex":"#615e5b","role":"Secondary text, muted helper text, and subtle icon details. Provides lower contrast for less prominent information","group":"neutral","cssVariable":"--color-gunmetal-gray"},{"name":"Soft Concrete","hex":"#d8d3cc","role":"Subtle borders for ghost buttons and card containers, provides minimal visual separation","group":"neutral","cssVariable":"--color-soft-concrete"},{"name":"Action Black","hex":"#000000","role":"Primary button backgrounds, key interactive elements. The pure black stands out against the near-white canvas","group":"brand","cssVariable":"--color-action-black"},{"name":"Highlight Orange","hex":"#ff9900","role":"Decorative strokes and subtle highlights, often within SVG elements. A small splash of vivid color","group":"accent","cssVariable":"--color-highlight-orange"}],"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\""}],"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."]}}