Devnt

Overview

Devnt is a first-party tracking platform designed for agencies and single-site brands seeking clarity and control over their data infrastructure. The design system embodies "Technical Minimalism"—a philosophy that strips away visual noise to expose the essential mechanics of data flow. The interface prioritizes legibility and precision through a monospace-forward typographic hierarchy, sharp geometric edges (0px border-radius throughout), and a teal accent (#0d9488) that signals trust and technical sophistication. The brand personality is direct, data-literate, and uncompromising: users expect to see real-time event streams, exact values, and clear product distinctions without marketing flourish.

Voice and tone are clinical yet approachable—sentences are short, active, and metric-driven. Example: "Your tracking is leaking money. Fix it with first-party signals." The vocabulary favors technical terms ("edge gateway," "server-side hosting," "ad-block resistant") paired with plain language ("pick the tracking path that fits your business"). The UI never apologizes for complexity; instead, it organizes complexity into scannable, monospace-rendered tables and event streams that reward close reading.

Colors

The color system is anchored by a teal primary (#0d9488) used exclusively for interactive elements—buttons, links, and focus states—creating a consistent visual anchor across the interface. This teal is paired with a near-white on-primary (#f8fafc) for maximum contrast and readability in high-density data contexts. The surface stack ranges from #f8fafc (surface-container-lowest, the default page background) through #cbd5e1 (surface-container-high, used for subtle hover states and dividers). Supporting accents include a warm amber secondary (#fb923c) for warnings or secondary CTAs, and a golden tertiary (#fbbf24) for event-type highlights in the live stream (e.g., checkout events). The outline color (#64748b) is used for borders and dividers at 1px weight, creating visual separation without

Typography

The type system is built on a two-family foundation: Space Grotesk (geometric, all-caps headlines) and IBM Plex Sans (humanist body text), with IBM Plex Mono (monospace) reserved for data, timestamps, and technical labels. Display text (72px, 700 weight, -0.04em letter-spacing) is used sparingly for hero headlines and sets the tone of technical authority. Headline-lg (48px, 700 weight) and headline-md (32px, 600 weight) establish section hierarchy without excess. Body text is set in IBM Plex Sans at 16–18px with 1.5 line-height for comfortable reading in longer copy. Monospace labels (IBM Plex Mono, 14px, 700 weight, 0.1em letter-spacing) are applied to all interactive elements (buttons, badges, nav links) and data rows, reinforcing the technical brand identity. Event stream rows use a sma

Layout

The page layout uses a 12-column grid with a 1280px max-width container, centered on larger screens. The hero section splits into a 7-column text area (left) and 5-column live event stream (right) on lg+ breakpoints, collapsing to single-column on mobile. Horizontal spacing uses a semantic gutter of 24px between major sections; vertical rhythm is established through lg spacing (40px) between section blocks and md spacing (24px) between subsections. The event stream on the right is a fixed-height scrollable container (approximately 400–500px) with a gradient fade at top and bottom (height: 6px, background: linear-gradient(to bottom, rgba(248, 250, 252, 1), transparent)) to signal overflow. Navigation is fixed at the top (z-index: 50) with 16px vertical padding and 24px horizontal padding. C

Elevation & Depth

Depth is conveyed through subtle shadows and borders rather than layering or blur effects. The base elevation (md shadow: 0 3px 8px rgba(0, 0, 0, 0.15)) is applied to cards and dropdowns to separate them from the surface. Elevated states (lg shadow: 0 8px 24px rgba(0, 0, 0, 0.12)) are reserved for modals or hover states on interactive cards. All elements use a 1px solid border at {colors.outline-variant} (#cbd5e1) to define edges crisply without relying on shadow alone. The live event stream uses a subtle inset gradient (background: linear-gradient(to bottom, rgba(248, 250, 252, 1) 0%, rgba(24

Shapes

The design system embraces "Sharp Minimalism"—all border-radius values are set to 0px (sm, DEFAULT, md, lg, xl), creating a grid-aligned, architectural aesthetic that reinforces technical precision. This sharp-edged approach differentiates Devnt from softer, consumer-focused tracking tools and signals that the product is built for engineers and data professionals. The only exception is the full radius (9999px) used for icon buttons or avatar placeholders, creating a subtle visual contrast. Buttons, cards, inputs, and badges all use 0px radius, creating a cohesive, modular appearance. This cons

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses {colors.primary} (#0d9488) background with {colors.on-primary} (#f8fafc) text, IBM Plex Mono 14px 700 weight with 0.1em letter-spacing, 16px vertical and 32px horizontal padding, and 48px height. On hover, the background shifts to {colors.primary-fixed-dim} (#0f766e) with a transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1). On active (click), apply transform: scale(0.95) for tactile feedback. The button-secondary variant uses a transparent background with a 1px border at {colors.outline-variant}, on-surface text, and a hover state that fills the background with {colors.surface-container-low} (#f1f5f9). Both button variants have 0px border-radius and no box-shadow.

Containers & Surfaces

Do's and Don'ts

**Do**

• Do use Space Grotesk for all headlines and IBM Plex Mono for buttons, labels, and data rows to maintain the technical brand voice.
• Do apply the teal primary (#0d9488) exclusively to interactive elements (buttons, links, focus states) to create a consistent visual anchor.
• Do use 0px border-radius throughout to reinforce the sharp, architectural aesthetic and differentiate from softer competitors.
• Do pair monospace typography with data-dense layouts (event streams, tables) to signal precision and technical authority.
• Do use 1px solid borders at {colors.outline-variant} (#cbd5e1) to define edges crisply without relying on shadow alone.
• Do apply {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and dropdowns to separate them from the surface with subtlety.

**Don't**

• Don't use rounded corners (border-radius > 0) on buttons, cards, or inputs; maintain 0px radius to preserve the sharp minimalist aesthetic.
• Don't apply the primary teal to non-interactive elements like backgrounds or body text; reserve it exclusively for CTAs and focus states.
• Don't use more than two typefaces in a single layout; stick to Space Grotesk (headlines) and IBM Plex Sans/Mono (body/data).
• Don't add decorative shadows or blur effects; rely on 1px borders and subtle elevation shadows (md/lg) to convey hierarchy.
• Don't use color alone to communicate state; always pair color changes with text labels or icons for accessibility.
• Don't exceed 48px height for buttons or interactive elements; maintain consistency with the 48px minimum touch target.