
Preview image. Unlock full-res
Data Sheet Precision. A clean, well-organized technical document with key elements highlighted in a single, vivid accent.
Fingerprint's design system offers a grounded, informative aesthetic that balances clear data presentation with subtle brand touches. The combination of a warm, off-white background and a dark, slightly desaturated typography creates a high-contrast yet comfortable reading experience. The system utilizes a precise, technical monospace font for data display, contrasting with a clean sans-serif for general content, underscoring its focus on accuracy and data integrity. Primary interactions are highlighted with a vibrant, energetic orange, adding a focused burst of color against the otherwise subdued palette.
Prioritize Inter 400 for all body copy and standard UI text at 14px or 16px size for clear readability.
Use Accent Orange (#f35b22) exclusively for primary calls to action and active states to guide user focus.
Apply a 6px border radius for all interactive buttons and a 12px radius for contained content cards to provide soft corners.
Ensure all technical data, code snippets, and console-like displays use JetBrains Mono in Code Block Dark (#2e2e2c) backgrounds for consistent visual cueing.
Use Border Ash (#e4e5e1) for all component borders and dividers to maintain a subtle, structured appearance.
Implement the card shadow rgba(228, 229, 225, 0.3) 0px 1px 0px 0px inset, rgba(110, 111, 109, 0.1) 0px -1px 0px 0px inset for subtle internal depth on cards.
Do not introduce new chromatic colors; stick to Accent Orange, Deep Teal, Soft Blue, Monitor Grey, and Success Green for emphasis.
Avoid using bold or weight 700 for paragraphs; reserve Inter 600 for headlines and critical short statements only.
Do not deviate from the established spacing scale; maintain 8px element gaps and 48px section gaps for visual rhythm.
Do not use hard, sharp shadows; only apply the specified inset shadows or light, diffused box shadows for elevation.
Avoid large imagery that breaks the grid; if images are used, they should complement the data-driven content or be contained within structured layouts.
Do not use generic blue for interactive elements; Accent Orange is the designated primary interaction color.









