DeVTools

Overview

DeVTools is a free, browser-native developer utility platform serving security researchers, OSINT practitioners, and full-stack engineers. The design language—termed 'Functional Neon'—combines a deep, near-black canvas (#0f1117) with a vibrant purple accent (#6c5ce7) that pulses across interactive elements, creating a sense of precision and energy without sacrificing legibility. The interface evokes a command-line aesthetic reimagined for the modern web: dark, focused, and unapologetically technical. Users encounter a grid of 62+ tool cards, each a discrete, clickable unit that responds with subtle elevation and glow effects, reinforcing the brand's promise of instant, frictionless utility.

The brand voice is direct, confident, and utility-first. Tone avoids marketing fluff; instead, it speaks in the language of developers: 'Encode/Decode Base64 strings,' 'Check if email was in data breaches,' 'Perform DNS record lookups.' Copy is scannable, action-oriented, and assumes technical literacy. Example sentence in brand voice: 'DNS Propagation Checker — verify global DNS propagation across authoritative servers in seconds.'

Colors

The color system is built on a dark-first philosophy, anchored by a near-black surface (#0f1117) that serves as the primary canvas. The surface stack progresses through carefully calibrated grays: surface-container (#1c1f2e) for cards and elevated regions, surface-container-high (#252840) for hover states, and surface-container-highest (#2d3449) for modals or maximum elevation. Text hierarchy is maintained via on-surface (#e4e6f0, a cool off-white) for primary content and on-surface-variant (#8b8fa3, a muted blue-gray) for secondary labels and metadata.

The primary accent is a saturated purple (#6c5ce7), used exclusively for call-to-action buttons, active category chips, focus states, and brand-critical interactive elements. Its glow variant (rgba(108, 92, 231, 0.3)) creates a soft halo e

Typography

The type system uses Inter exclusively across all weights (400, 600, 700), a geometric sans-serif that balances technical precision with approachability. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major page titles with commanding presence. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) structure content hierarchy, with negative letter-spacing (-0.02em and -0.01em respectively) tightening the visual mass for impact. Body text (16px–18px, 400 weight) maintains 24–28px line-height for comfortable reading across tool descriptions and metadata. Label-md (14px, 600 weight, 0.01em tracking) is applied to buttons, badges, and category chips, ensuring crisp legibility at small scales. Label-sm (12px, 500 weight, 0.02em tracking) handles micro-copy lik

Layout

The layout employs a responsive 12-column grid with a fixed max-width of 1400px, centered on the viewport. The primary content area uses a fluid, auto-fill grid for tool cards (minmax(260px, 1fr)), collapsing to 1 column on mobile (≤640px), 2 columns on tablet (768px–1023px), 3 columns on desktop (1024px–1279px), and 4 columns on large screens (≥1280px). The fixed header (56px height) and collapsible sidebar (280px width) frame the content, with a horizontal category bar (56px height) providing secondary navigation. Spacing follows a semantic scale: xs (4px) for micro-adjustments within components, sm (12px) for internal component padding, md (24px) for card padding and section margins, lg (40px) for major section separation, and xl (64px) for page-level spacing. The gutter (16px) defines

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle transform effects, avoiding the flat aesthetic while maintaining the dark theme's sophistication. Level 1 (Base Cards): box-shadow: 0 2px 8px rgba(0,0,0,0.12), applied to standard tool cards and input fields, creating a soft separation from the background. Level 2 (Hover/Elevated): box-shadow: 0 4px 24px rgba(0,0,0,0.3), paired with transform: translateY(-4px), applied on card hover and active category chips, signaling interactivity and focus. Level 3 (Maximum Elevation/Modals): box-shadow: 0 8px 32px rgba(0,0,0,0.4), reserved for

Shapes

The shape philosophy—termed 'Rounded Precision'—balances technical approachability with modern softness. Buttons and primary CTAs use lg (1rem / 16px) border-radius, creating a distinctly rounded, inviting appearance that softens the technical nature of developer tools. Cards and containers use lg (1rem) as well, maintaining visual consistency and a cohesive, modular aesthetic. Input fields and search bars use md (0.75rem / 12px), a slightly tighter radius that signals 'functional' without appearing harsh. Category chips and badges use full (9999px) border-radius, creating pill-shaped elements

Components

Action Elements Buttons are the primary call-to-action mechanism. The button-primary component uses {colors.primary} (#6c5ce7) background with {colors.on-primary} (white) text, {typography.label-md} for crisp legibility, {rounded.lg} for approachability, and 12px 24px padding within a 44px height. On hover, the background shifts to {colors.primary-container} (#7d6ff0) and the shadow expands to 0 4px 16px rgba(108, 92, 231, 0.4), creating a subtle lift. Transition timing is 0.25s cubic-bezier(0.4,0,0.2,1). The button-secondary variant uses a transparent background with a 1px solid {colors.outline} border and {colors.primary} text, allowing for secondary actions without visual dominance. On hover, the background becomes {colors.surface-container-high} and the border shifts to {colors.pri

Do's and Don'ts

**Do**

• Do use the primary accent (#6c5ce7) sparingly and intentionally—reserve it for CTAs, active states, and focus indicators to maintain visual hierarchy and prevent accent fatigue.
• Do apply the standard transition timing (0.25s–0.3s cubic-bezier(0.4,0,0.2,1)) to all interactive state changes to create a cohesive, predictable interaction model.
• Do maintain the 4px vertical lift (transform: translateY(-4px)) on card and button hover states to reinforce interactivity through motion, not just color.
• Do use the full surface-container stack (lowest, low, container, high, highest) to create clear visual separation between nested regions and modals.

**Don't**

• Don't use colors outside the defined palette—avoid arbitrary grays, blues, or purples that conflict with the accent or status colors (#2ed573, #007aff, #ff4757).
• Don't apply shadows larger than {elevation.lg} (0 8px 32px) on standard components; reserve maximum elevation for modals and floating panels only.
• Don't mix border-radius values arbitrarily—stick to the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency and modular coherence.
• Don't disable transitions or use instant state changes (transition: none)—even micro-interactions benefit from the 0.25s–0.3s easing to feel intentional and polished.