Visual Design, Typography & Themes
Configuring cohesive color tokens, typographic scales, and theme transitions across your project.
Design Tokens & Semantic Color Palette
Rayvotech Tools employs a rigorous design token architecture that ensures cohesive visual rhythm across all pages, components, and modal states. Tokens automatically adapt between dark and light themes without hardcoded hex values in component markup:
| Token Name | Light Mode | Dark Mode | Role & Application |
|---|---|---|---|
| Canvas | #ffffff | #09090b | Primary page background and full-bleed viewport backdrop |
| Surface | #f4f4f5 | #18181b | Elevated cards, sidebar panels, input fields, and modals |
| Line / Border | #e4e4e7 | #27272a | High-contrast structural dividers and card perimeter outlines |
| Accent | #ea580c | #f97316 | Primary conversion action buttons, badges, active tabs, focus rings |
| Text Primary | #09090b | #fafafa | Main headings, table labels, active navigation text |
| Text Body | #18181b | #d4d4d8 | 90% black body paragraphs for maximum human readability |
Typography Systems & Optical Scaling
Typography pairings are mathematically tuned to maintain optical harmony across all viewport sizes:
Clean, modern grotesque sans-serif with tall x-height, open apertures, and subtle ink-traps optimized for high-density computer displays and mobile devices.
Utilized across database schema inspectors, code diffs, terminal outputs, and keyboard shortcut badges (e.g. ⌘K).
Headings use CSS clamp(2rem, 5vw, 3.5rem) to smoothly scale between smartphone screens and ultrawide desktop monitors without sudden breakpoint jumps.