Card title
Tagline
Border carries the structure. Hover raises the border toward accent.
Design system
Style Guide
A living reference for the DSEC Labs visual language: color, typography, layout and motion, iconography, and diagrams. Toggle the theme in the nav to watch every token below re-theme.
01
Color
Every color is a token. The swatch shows the live value for the active theme; the hex codes list both. Green is the single brand accent, cyan is a support color, and red is reserved for errors and attack paths.
--color-bg
Page background
dark #080b0f · light #ffffff
--color-surface
Cards, panels
dark #0f141b · light #f6f8fa
--color-surface-2
Raised surfaces, code
dark #151c25 · light #eceff3
--color-border
Borders, dividers
dark #1e2733 · light #e3e8ee
--color-border-strong
Emphasized borders
dark #2b3846 · light #cbd5e1
--color-text
Primary text
dark #e6edf3 · light #0f172a
--color-muted
Secondary text
dark #9aa7b4 · light #4b5768
--color-faint
Meta, captions
dark #64707d · light #8593a3
--color-accent
Primary accent, links, CTAs
dark #4ade80 · light #15803d
--color-accent-hover
Accent hover
dark #22c55e · light #166534
--color-accent-soft
Accent-tinted fills
dark #14261c · light #dcfce7
--color-cyan
Secondary accent, inline code
dark #22d3ee · light #0e7490
--color-danger
Errors, attack paths
dark #f87171 · light #f87171
02
Typography
Two self-hosted variable fonts. Inter for everything readable, JetBrains Mono for code, kickers, labels, and meta.
Sans · Inter
We break your systems
Exploitation-driven audits across AI, Web3, and Web2.
Body copy sits in muted; primary text is brighter. Sentence case for headings, relaxed line height for paragraphs.
Mono · JetBrains Mono
DSEC_Labs
nmap -sV -p 8000,11434 target
Inline code like /v1/models
is tinted cyan. Kickers and labels are uppercase and letter-spaced.
Type scale
Kicker · mono / accent
Heading 1
Heading 2
Heading 3
Body text in primary color.
Secondary text in muted.
Meta and captions in faint.
03
Layout, shape & motion
The repeating unit is a bordered surface card. Buttons come in two weights.
Corners use a 0.75rem radius;
elements rise and fade in once on load (this page included), gated behind
reduced-motion.
Card
Buttons
Primary
Secondary
Pill
Offensive security · AI · Web3 · Web2Grid backdrop
04
Iconography
Lucide for UI (thin stroke, currentColor),
Simple Icons for brands. The logo is a stroked shield in accent next to the
wordmark.
UI icons · Lucide
Brand icons · Simple Icons
Logo
DSEC_Labs05
Diagrams
Blog diagrams are hand-authored SVGs on a dark rounded card, always dark regardless of site theme. Accent green marks the focus path, red marks attacker elements, neutral gray carries the flow.
card bg
#0f141b
box fill
#151c25
border
#2b3846
title
#e6edf3
label
#9aa7b4
accent (focus)
#4ade80
cyan (secondary)
#22d3ee
attacker (red)
#f87171
Render to retina PNG on a transparent background. For Medium, recolor the dark palette to a light equivalent (white background, dark text, same accent and red) so it reads on Medium’s white canvas.