PUBLIC REFERENCE
Titan
monochrome financial ledger
Colors
#111111 Primary text, darkest surface. Creates stark contrast against lighter backgrounds
#ffffff Page backgrounds, card surfaces, ghost button text. The primary backdrop for all content
#f3efeb Subtle background for card variants and secondary sections, provides a soft, warm surface distinction
#e9eaeb Subtle borders and dividers, navigation backgrounds, a very light gray that acts as an almost invisible separator
#615e5b Secondary text, muted helper text, and subtle icon details. Provides lower contrast for less prominent information
#d8d3cc Subtle borders for ghost buttons and card containers, provides minimal visual separation
#000000 Primary button backgrounds, key interactive elements. The pure black stands out against the near-white canvas
#ff9900 Decorative strokes and subtle highlights, often within SVG elements. A small splash of vivid color
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.
Don't
- 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.