FingerprintIQ — Device Intelligence for the Modern Web

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/fingerprintiq.com -->
<!-- Extracted: 2026-05-27T08:44:42.346Z | Schema: v1 | Quality: 90/100 -->
---
version: alpha
name: "FingerprintIQ — Device Intelligence for the Modern Web"
description: "FingerprintIQ exudes a serious, technical, and highly precise vibe, emphasizing accuracy and performance. It positions itself as a cutting-edge solution for complex web intelligence, catering to a sophisticated, developer-centric audience with a no-nonsense approach."
colors:
  primary: "#34d399"
  tertiary: "#34d399"
  neutral: "#a1a1aa"
  surface: "#050506"
  on-surface: "#f0f0f0"
  on-surface-secondary: "#52525b"
  border: "#ffffff"
  error: "#ef4444"
  warning: "#f59e0b"
  success: "#34d399"
  surface-dark: "#050506"
  on-surface-dark: "#f0f0f0"
typography:
  display-lg:
    fontFamily: "Inter"
    fontSize: "72px"
    fontWeight: "700"
    lineHeight: "82.8px"
    letterSpacing: "-1.44px"
  headline-lg:
    fontFamily: "Inter"
    fontSize: "36px"
    fontWeight: "700"
    lineHeight: "41.4px"
    letterSpacing: "-0.72px"
  headline-md:
    fontFamily: "Inter"
    fontSize: "24px"
    fontWeight: "600"
    lineHeight: "27.6px"
    letterSpacing: "-0.48px"
  body-md:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
rounded:
  md: "8px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-outline:
    textColor: "#f0f0f0"
    rounded: "8px"
    padding: "0px 32px"
    fontSize: "16px"
    fontWeight: "500"
    borderWidth: "1px"
    boxShadow: "rgba(0, 0, 0, 0.35) 0px 2px 8px 0px, rgba(255, 255, 255, 0.08) 0px 1.5px 0px 0px inset, rgba(0, 0, 0, 0.5) 0px -2px 8px 0px inset"
  button-primary:
    backgroundColor: "#34d399"
    textColor: "#050506"
    rounded: "0px"
    padding: "8px 16px"
    fontSize: "14px"
    fontWeight: "500"
---

# FingerprintIQ — Device Intelligence for the Modern Web — Design System

## Overview

FingerprintIQ's design system embodies the archetypes of The Sage and The Ruler, projecting an aura of authoritative expertise and unwavering control. It aligns with the aesthetic principles of industry leaders like Vercel, Stripe, Cloudflare, and Datadog, prioritizing clarity, precision, and high performance. The visual language is inherently technical and developer-first, engineered to communicate complex device intelligence with absolute accuracy. This is a system built for sophisticated users who demand robust, secure, and modern solutions.

The emotional register is one of serious competence and understated power. The design avoids any hint of playfulness, frivolity, or consumer-grade aesthetics. It is not designed to be overtly friendly or approachable in a broad sense, but rather to be highly functional and trustworthy for its specialized audience. Every element is optimized for legibility, data visualization, and efficient interaction within a technical context, reflecting FingerprintIQ's commitment to cutting-edge web intelligence.

**Key characteristics:**

- Vibe — technical, precise, high-performance, developer-first, secure, modern
- Archetypes — The Sage, The Ruler
- Comparable to — Vercel, Stripe, Cloudflare, Datadog
- Design era — contemporary-minimal
- Emotional tone — authoritative-precise
- Target audience — Developers, technical decision-makers, and security professionals in modern web and API-driven environments who prioritize accuracy, performance, and robust device intelligence.
- Visual energy — 7/10 (high-energy/bold)

## Colors

The color palette is deliberately minimalist and highly functional. The primary color, `#34d399` (a vibrant green), signifies growth, security, and operational success, acting as a clear indicator of positive status or key actions. The dominant surface color, `#050506` (a near-black), provides a deep, high-contrast canvas that enhances legibility and underscores the brand's technical, high-performance identity. This limited palette ensures visual clarity and prevents distraction, reinforcing the precision and data-centric nature of FingerprintIQ.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#34d399` | Emerald |
| accent / tertiary | `#34d399` | Emerald |
| background | `#050506` | Black |
| text | `#f0f0f0` | White Smoke |
| secondary text | `#52525b` | Dark Gray |
| border | `#ffffff` | White |
| muted | `#a1a1aa` | Dark Silver |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| surface | `#050506` | Black |
| background | `#050506` | Black |
| text | `#f0f0f0` | White Smoke |
| secondary text | `#34d399` | Emerald |
| link | `#f0f0f0` | White Smoke |
| muted | `#34d399` | Emerald |

### Semantic

| Role | Hex | Use |
|------|-----|-----|
| success | `#34d399` | Confirmations, positive states |
| warning | `#f59e0b` | Caution, intermediate states |
| error | `#ef4444` | Failures, destructive actions |

## Typography

The type system utilizes Inter for primary text and JetBrains Mono for all code-related or monospaced contexts. Inter provides exceptional legibility and a modern, professional appearance, aligning with the brand's contemporary and developer-first ethos. JetBrains Mono, specifically designed for coding, ensures perfect character alignment and readability for technical information, crucial for a device intelligence platform. The hierarchy is established through precise sizing and weight variations, prioritizing data and functional elements without resorting to excessive stylistic flourishes, maintaining a clean and efficient visual flow.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Inter | body | self-hosted | 400, 500 |
| Inter | heading | self-hosted | 600, 700 |
| JetBrains Mono | mono | self-hosted | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Inter | 72px | 700 | 82.8px | -1.44px |
| Heading 2 | Inter | 36px | 700 | 41.4px | -0.72px |
| Heading 3 | Inter | 24px | 600 | 27.6px | -0.48px |
| Body | Inter | 16px | 400 | 24px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 24px
- Monospace — JetBrains Mono

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| button | `rgba(0, 0, 0, 0.35) 0px 2px 8px 0px, rgba(255, 255, 255, 0.08) 0px 1.5px 0px 0px inset, rgba(0, 0, 0, 0.5) 0px -2px 8px 0px inset` |

### Gradients

- `radial-gradient(at 50% 50%, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0) 70%)`
- `linear-gradient(in oklab, rgb(255, 255, 255) 0%, rgb(113, 113, 122) 100%)`
- `linear-gradient(to right in oklab, rgb(5, 5, 6) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to left in oklab, rgb(5, 5, 6) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to right, oklab(0.772893 -0.146909 0.0443082 / 0.06) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%)`
- `radial-gradient(circle at 85% 15%, rgba(52, 211, 153, 0.18), rgba(0, 0, 0, 0) 55%)`

## Shapes

Border-radius scale:

- `md` — 8px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Outline**

- Text — `#f0f0f0`
- Radius — `8px`
- Padding — `0px 32px`
- Font size — `16px`
- Font weight — `500`
- Shadow — `rgba(0, 0, 0, 0.35) 0px 2px 8px 0px, rgba(255, 255, 255, 0.08) 0px 1.5px 0px 0px inset, rgba(0, 0, 0, 0.5) 0px -2px 8px 0px inset`
- Sample copy — "Live demo"

**Primary**

- Background — `#34d399`
- Text — `#050506`
- Radius — `0px`
- Padding — `8px 16px`
- Font size — `14px`
- Font weight — `500`
- Sample copy — "Try the web3 demo →"

## Do's and Don'ts

### Do

- Utilize a dark mode default with a #050506 background and #f0f0f0 text for core content, maintaining high contrast.
- Employ #34d399 as the primary accent color for key elements and calls to action, ensuring it stands out against the dark background.
- Set all body text using Inter at 400 weight with a line-height of 24px, ensuring readability on dark backgrounds.
- Format all headings using Inter at 600 or 700 weight, strictly in sentence-case, to maintain a serious and professional tone.
- Render all code snippets and monospaced text using JetBrains Mono at 400 weight, self-hosted for consistent display.
- Design primary buttons with a solid #34d399 background, #050506 text, 0px border-radius, and 8px 16px padding.
- Implement outline buttons with #f0f0f0 text, 8px border-radius, 0px 32px padding, and a subtle shadow: rgba(0, 0, 0, 0.35) 0px 2px 8px 0px, rgba(255, 255, 255, 0.08) 0px 1.5px 0px 0px.
- Incorporate subtle radial gradients like `radial-gradient(at 50% 50%, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0) 70%)` for background depth effects, avoiding harsh color transitions.
- Maintain a consistent spacing system based on a 2px base unit, applying medium border radii of 8px for elements requiring subtle rounding.

### Don't

- Avoid using any emojis in marketing or product copy; the brand maintains a strictly professional and fact-based communication style.
- Do not use exclamations; the brand's tone is matter-of-fact and serious, relying on data and precision.
- Refrain from using title case or all caps for headings; sentence-case is the established convention.
- Do not introduce additional font families beyond Inter and JetBrains Mono; maintain the established typographic hierarchy.
- Avoid bright or playful color palettes; stick to the defined dark background, primary accent, and text colors.
- Do not use large, rounded, or pill-shaped border radii; the brand's aesthetic favors sharp (0px) or subtly rounded (8px) corners.
- Do not apply heavy or colorful shadows; adhere to the specific, subtle shadow style defined for outline buttons.
- Avoid overly casual or informal language; the brand's vocabulary is moderate with heavy technical jargon, reflecting its serious nature.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 3/10 | formal |
| Playful ↔ Serious | 9/10 | serious |
| Enthusiastic ↔ Matter-of-fact | 8/10 | matter-of-fact |
| Respectful ↔ Irreverent | 2/10 | respectful |
| Technical ↔ Accessible | 4/10 | technical |

### Copywriting style

- Avg. sentence length — 8 words
- Vocabulary — moderate
- Jargon — heavy
- CTA style — direct, action-oriented verbs and product names
- Rhetorical devices — repetition, tricolon

### Sample copy

> Know your users.Classify your traffic.

> 41+ signals, 99.2% accuracy, sub-50ms at the edge.

> Browser, server, and CLI.Each solving a different trust problem.

> Zero PII collected. Ever.

> Wallet detection, ENS, and on-chain reputation in one SDK.

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| logomark | — | svg | [link](https://extractvibe.com/api/assets/brands/fingerprintiq.com/logo-2.svg) | 80% |
| favicon | — | png | [link](https://extractvibe.com/api/assets/brands/fingerprintiq.com/logo-1.png) | 74% |
| favicon | — | svg | [link](https://extractvibe.com/api/assets/brands/fingerprintiq.com/logo-0.svg) | 62% |

## Sources

- Live brand page — https://extractvibe.com/brand/fingerprintiq.com
- Raw JSON — https://extractvibe.com/api/brand/fingerprintiq.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/fingerprintiq.com/design.md
- Extracted — 2026-05-27T08:44:42.346Z
- Generator — ExtractVibe vv1
- Quality score — 90/100

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md