Dfense

Overview

Dfense is an AI-driven cybersecurity platform that translates enterprise-grade threat intelligence into accessible, actionable interfaces. The design system embodies "Technical Minimalism"—a philosophy that pairs deep technical sophistication with stark visual clarity. The brand serves mid-market and enterprise security teams across Latin America who demand precision without ornament. The UI evokes a sense of calm authority: a dark, high-contrast canvas (#0a0a0a background, #ffffff text) punctuated by a vivid electric blue accent (#0099ff) that signals interactivity and trust. Every interface element prioritizes signal over noise, reflecting the brand's core belief that security operations should be transparent, not theatrical.

Dfense speaks in the voice of a technical peer—direct, precise, and never condescending. The tone avoids marketing hyperbole; instead, it uses concrete language grounded in capability and certification. Example: "Our team holds the principal certifications from Latin America and the world's leading manufacturers. With that, Service Delivery is efficient and 100% focused on your needs." The vocabulary emphasizes expertise ("AI-driven," "threat intelligence," "certification"), reliability ("efficient," "focused"), and partnership ("our expertise is your expertise"). The brand personality is confident but not arrogant—it leads with credentials, not claims.

Colors

The Dfense color system is built on a foundation of near-absolute darkness (#0a0a0a surface, #0d0d0d container-lowest) that maximizes contrast and reduces eye strain during long security monitoring sessions. This dark-first approach is not aesthetic preference but functional necessity: security analysts work in low-light environments and require maximum legibility. The primary accent, electric blue (#0099ff), is deployed sparingly but decisively on all interactive elements—buttons, links, focus states, and badges. This color appears 35 times in the computed style analysis, confirming its role as the system's primary call-to-action and brand signature. Secondary accent #70befa (a lighter cyan) provides a softer alternative for secondary interactions and hover states, creating visual hierarc

Typography

The Dfense type system uses a two-family approach: Inter Tight for headlines and display text, Inter for body and UI labels. Inter Tight's condensed letterforms (fontFamily: 'Inter Tight', fontWeight: 700, fontSize: 64px, lineHeight: 72px, letterSpacing: -0.03em) create visual density and authority in hero sections and page titles, while its tight tracking (-0.03em on display, -0.02em on headlines) reinforces the brand's technical precision. Body text uses regular Inter (fontWeight: 400, fontSize: 18px, lineHeight: 28px) for optimal readability at length; the 28px line-height provides generous vertical breathing room, critical for reducing cognitive load in security-heavy content. Labels and UI text use Inter at 14px weight 600 with 0.01em letter-spacing to maintain crispness at small size

Layout

Dfense uses a 12-column fluid grid with a fixed max-width of 1280px (containerMaxWidth: 1280px), centered on the viewport. The grid accommodates both wide-format dashboards (full-width data tables) and narrow mobile experiences without breakpoint proliferation. Spacing follows a strict 8px unit system (spacing.unit: 8px) with semantic scale: xs (4px) for micro-spacing within components, sm (12px) for internal padding, md (24px) for section gutters and card padding, lg (40px) for major section separation, and xl (64px) for hero/footer spacing. Container gutters are consistently 24px on desktop, reducing to 12px on tablets and 8px on mobile. White-space philosophy: negative space is treated as a first-class design element, not a residual. The dark background (#0a0a0a) acts as a visual reset

Elevation & Depth

Dfense uses a restrained shadow system to convey depth without introducing visual clutter. The elevation scale has four levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle hover states on interactive elements, md (0 4px 12px rgba(0, 0, 0, 0.08)) for standard cards and modals, lg (0 16px 40px rgba(0, 0, 0, 0.12)) for elevated modals and dropdowns, and xl (0 3px 8px rgba(0, 0, 0, 0.15)) for focused interactive elements. The dark background (#0a0a0a) means traditional shadows are nearly invisible; instead, elevation is conveyed through a combination of subtle shadow (md level) and a 1px border

Shapes

Dfense adopts "Functional Geometry"—a shape philosophy that balances technical precision with human approachability. Border-radius values are deliberately modest: sm (4px) for small UI elements like badges and tight inputs, DEFAULT (8px) for standard inputs and small cards, md (10px) for medium cards and buttons, lg (12px) for larger cards and modals, xl (16px) for hero sections and prominent containers, and full (9999px) for pill-shaped buttons and badges. These values avoid the extremes of sharp corners (which feel cold and corporate) and extreme roundness (which feels playful and undermines

Components

Action Elements Buttons are the primary interaction mechanism and must be immediately recognizable. button-primary uses backgroundColor: {colors.primary} (#0099ff), textColor: {colors.on-primary} (#000000), typography: {typography.label-md}, rounded: {rounded.md} (10px), padding: 12px 24px, and height: 44px. On hover, button-primary-hover shifts to backgroundColor: {colors.primary-container} (#0077cc) with a 200ms ease-out transition. This color shift (from bright #0099ff to deeper #0077cc) provides tactile feedback without animation; the transition property (transition: all 200ms ease-out) ensures smooth state changes. button-secondary uses a transparent background with a 1px border at {colors.primary} (#0099ff), same text color, and identical padding/height. On hover, button-secondar

Do's and Don'ts

**Do**

• Do use {colors.primary} (#0099ff) exclusively for primary CTAs, focus states, and active navigation—never for decorative elements or backgrounds.
• Do maintain a minimum 44px height for all interactive elements (buttons, inputs, list items) to meet accessibility touch-target guidelines.
• Do apply the md elevation shadow (0 4px 12px rgba(0, 0, 0, 0.08)) to all cards and modals; use lg elevation only on hover or when content is elevated above the base layer.
• Do use Inter Tight (fontWeight: 700, letterSpacing: -0.02em) for headlines and Inter (fontWeight: 400, lineHeight: 28px) for body text to maintain typographic hierarchy.
• Do enforce the 8px unit spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) across all padding, margins, and gaps—never use arbitrary values.
• Do apply a 1px border at {colors.outline-variant} (#404040) to all cards and input fields to create visual separation on the dark background.
• Do use rounded.md (10px) for buttons and rounded.lg (12px) for cards; avoid border-radius values outside the defined scale.
• Do include a 200ms ease-out transition on all hover and focus state changes to provide smooth, predictable feedback.

**Don't**

• Don't use {colors.primary} (#0099ff) for body text, backgrounds, or non-interactive elements—reserve it exclusively for interactive affordances.
• Don't apply shadows with spread-radius > 0 or blur-radius > 40px; keep shadows subtle and aligned to the elevation scale.
• Don't mix Inter and Inter Tight within a single text block; use Inter Tight for headlines only, never for body or label text.
• Don't create custom spacing values; always reference the semantic scale (xs, sm, md, lg, xl) or the 8px unit.
• Don't use border-radius values outside the defined scale (sm: 4px, DEFAULT: 8px, md: 10px, lg: 12px, xl: 16px, full: 9999px).
• Don't apply color values directly in component styles; always use token references like {colors.primary} to maintain system consistency.
• Don't reduce button height below 44px or input field height below 40px; these minimums ensure accessibility and usability.
• Don't use animations or transitions longer than 200ms on interactive elements; faster feedback (150ms) is preferred for focus states.