Dixon Strategic Labs · Design System v2.1

The quick brown fox jumps over the lazy dog.

The DSL design system rendered as a living style guide. Every color, token, type specimen, and component on this page matches the real tokens used at dxn.is. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Visit dxn.is Read DESIGN.md
Colors

The brand colors are universal across themes. The surface tokens change with theme. Dark is default. Light is a toggle.

Brand (universal)
Gold#FBE248
Coral#CF5A5A
Teal#437481
Dark theme (default)
BG#09090B
Surface#111114
Elevated#1A1A1F
Hover#242429
Border#2A2A32
Text#FAFAFA
Body#E8E8ED
Dim#8A8A96
Light theme (toggle)
BG#FAFAF8
Surface#FFFFFF
Elevated#F4F4F2
Hover#EBEBEA
Border#D4D4D0
Text#0A0A0A
Body#2D2D2D
Dim#6B6B6B
Typography

Satoshi for display, Karla for body, Lora for editorial accent. All sizes use clamp() for fluid scaling. Reading column is capped at 70 characters.

H1Satoshi · 700
clamp(1.5, 3.5vw, 3)
The quick brown fox jumps over the lazy dog.
H2 defaultSatoshi · 700
clamp(2, 4vw, 3.5)
Section Heading
H2 section labelSatoshi · 600
UPPERCASE · 0.1em
Services
H3Satoshi · 600
clamp(1.5, 2.5vw, 2)
Third-level Heading
BodyKarla · 400
1.125rem / 1.75
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Pull quoteLora italic
Teal left border
"No matter the problem, community is the answer." (Margaret Wheatley)
Nav linkKarla · 500
0.03em tracking
Services · About · Contact
Button textKarla · 500
0.02em tracking
Let's Talk
Components

Hover any button to see the signature gold-fill with gradient underline sweep. Focus any input to see the accessibility outline. Every component uses the 8px baseline grid.

Button · default
Default Let's Talk
Button · primary
Primary Get Started
Input · default
Input · textarea
Layout

Twelve-column grid with a 24px gap. Max content width 1400px. Site gutter scales from 24px on mobile to 80px on desktop. Every spacing value is a multiple of 8 pixels.

1
2
3
4
5
6
7
8
9
10
11
12
--space-18px
--space-216px
--space-324px
--space-432px
--space-648px
--space-864px
--space-1296px
--space-16128px
Elevation

Dark mode uses glow-based shadows instead of traditional drop shadows. Four tokens cover the full range from subtle card lift to modal elevation.

shadow-smrgba(0,0,0,0.3)
shadow-mdrgba(0,0,0,0.4)
shadow-lgrgba(0,0,0,0.5)
shadow-glowteal 15%
Do's and don'ts

The deliberate choices. Things to preserve as the system evolves and things to avoid.

Do

  • Align everything to the 8px baseline grid.
  • Use square-corner buttons. The square is load-bearing.
  • Use the gradient-underline sweep as the signature button hover.
  • Cap paragraph width at 70ch for readability.
  • Use Satoshi for display, Karla for body, Lora for editorial pull quotes.
  • Preserve the dark theme as default.
  • Use teal as the primary interactive color.
  • Scale type with clamp() for fluid responsiveness.
  • Section label headings go uppercase with 0.1em letter-spacing.

Don't

  • Do not use Montserrat. Satoshi is the differentiator.
  • Do not reintroduce indigo. Teal replaced it.
  • Do not round buttons. Square corners are the signature.
  • Do not let body text run wider than 70ch.
  • Do not use arbitrary spacing values. Everything is a multiple of 8px.
  • Do not use generic stock imagery.
  • Do not use aggressive marketing language.
  • Do not remove the focus outline. Accessibility requirement.
  • Do not use drop shadows in dark mode. Use glow shadows.
DESIGN.md copied to clipboard