# Disconetwork Design System

> High-contrast monochrome foundation energized by electric violet accents and heavy-weight Inter typography.

**Source:** https://disconetwork.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Disconetwork utilizes a high-contrast palette of deep navy-black (#030711) and pure white (#ffffff), punctuated by a vibrant primary violet (#7c3bed). The system relies on heavy typographic hierarchy, specifically Inter at weights 800 and 900, to create a bold, "tech-forward" editorial feel. Layouts are spacious, using a 4px base unit with significant section gaps (80-112px), while components favor pill-shaped geometry (9999px radius) for primary actions and soft-edged cards (16px radius) for content containers.

## Signature DNA
1. **Heavy Display Hierarchy** (Inter at weight 800-900 with tight negative letter-spacing (-2.88px to -0.9px) creates a dense, authoritative headline style seen on the Homepage and About pages.)
2. **The "Disco" Pill** (Primary actions and decorative badges use a 9999px radius, often paired with a violet background (#7c3bed) or a dark navy (#030711) for high-contrast visibility.)
3. **Chromatic Accents** (While the base is monochrome, specific "voltage" is added through violet (#7c3bed), blue (#3c83f6), and emerald (#10b77f) used for badges and specific text gradients.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Page background, primary surface | 66 | 1 | Computed Style |
| `{color.ink}` | `#030711` | Primary text, dark surface backgrounds | 265 | 0.8 | Computed Style |
| `{color.slate.soft}` | `#f1f5f9` | Subtle section backgrounds | 22 | 0.8 | Computed Style |
| `{color.border}` | `#e5e7eb` | Default dividers and card outlines | 8 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#7c3bed` | Primary action color, violet accents | 94 | 1 | Brand Page |
| `{color.secondary}` | `#3c83f6` | Secondary accents, focus rings | 45 | 1 | `--tw-ring-color` |
| `{color.success}` | `#10b77f` | Success states, emerald accents | 21 | 0.8 | Computed Style |
| `{color.muted}` | `#65758b` | Secondary body text | 120 | 0.8 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Inter | 400, 500, 600, 700, 800, 900 | All headings, body, and UI | Inter (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.mega}` | 72px | 72px | -2.88px | 800 | Hero headlines | `span.inline-block.text-4xl` |
| `{type.display.lg}` | 48px | 48px | -1.2px | 800 | Section headers | `span.text-gradient-disco` |
| `{type.h2}` | 36px | 40px | -0.9px | 900 | Major sections | `h2.text-3xl` |
| `{type.h3}` | 24px | 32px | normal | 900 | Sub-sections | `span.text-2xl.font-black` |
| `{type.body.lg}` | 18px | 28px | normal | 400 | Intro text | `span.text-muted-foreground/40` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Default body | `section.relative.mx-auto` |
| `{type.body.sm}` | 14px | 20px | normal | 500 | UI labels | `p.text-sm.text-foreground` |
| `{type.caption}` | 12px | 16px | 1.2px | 700 | Badges / Labels | `span.text-xs.font-bold` |

### Principles
1. **Tighten Display Tracking:** Headlines above 36px must use negative letter-spacing (-0.9px to -2.88px).
2. **Weight Contrast:** Pair weight 900 headings with weight 400 body text to emphasize hierarchy.
3. **Uppercase Badges:** Small labels (12px) often use weight 700 and expanded tracking (1.2px).

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 90 |
| `{space.sm}` | 12px | 61 |
| `{space.md}` | 16px | 45 |
| `{space.lg}` | 24px | 24 |
| `{space.section}` | 112px | 12 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.pill}` | 9999px | Buttons, primary badges | 82 occurrences |
| `{radius.lg}` | 16px | Content cards | 14 occurrences |
| `{radius.md}` | 12px | UI controls, small cards | 46 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 20px 40px 0px` | Floating feature cards | Page: Homepage |
| `{shadow.subtle}` | `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px` | Inline UI elements | Page: About |

## Components

### Tier 1: Foundational

#### Button Primary
**Role:** Main call to action
**Pages observed:** Homepage, About
**Spec:** Background: `#7c3bed` | Text: `#ffffff` | Radius: `9999px` | Typography: `16px / 600`
**States observed:** Default | Hover: captured | Focus: not captured | Active: captured

#### Button Secondary
**Role:** Alternative action (e.g., "Reach New Customers")
**Pages observed:** Homepage
**Spec:** Background: `#030711` | Text: `#ffffff` | Radius: `9999px` | Typography: `16px / 600`
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting platform capabilities
**Pages observed:** Homepage, About
**Spec:** Background: `#ffffff` | Text: `#030711` | Radius: `16px` | Padding: `24px` | Shadow: `{shadow.card}`
**States observed:** Default

#### Accordion (FAQ)
**Role:** Information disclosure
**Pages observed:** Homepage
**Spec:** Background: `#ffffff` | Border: `1px #e5e7eb` | Radius: `12px` | Padding: `0px 24px`
**States observed:** Default | Active: captured

### Tier 3: Surface-specific

#### Badge
**Role:** Categorization/Labels (e.g., "Our Story")
**Pages observed:** About
**Spec:** Background: `rgba(124, 59, 237, 0.15)` | Text: `#7c3bed` | Radius: `9999px` | Padding: `2px 10px`
**States observed:** Default

#### Navigation Link
**Role:** Header/Footer navigation
**Pages observed:** Homepage, About
**Spec:** Text: `#030711` | Typography: `14px / 500` | Padding: `8px`
**States observed:** Default | Hover: captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1280px |
| Section Padding (Vertical) | 80px - 112px |
| Grid Gutter | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Headlines scale down (e.g., 4xl to 2xl); navigation collapses to hamburger. |
| Desktop | 1024px+ | Horizontal navigation; multi-column feature grids. |

## Imagery & decoration
- **3D Icons:** Uses soft-lit 3D renders (lightbulbs, baskets, shopping bags) to add depth.
- **Avatar Clusters:** Circular avatars connected by lines to represent networks.
- **Gradients:** Subtle text gradients using violet-to-blue transitions on key headings.

## Do's
- Use **Inter 900** for all primary section headers.
- Apply **negative letter-spacing** to any text larger than 32px.
- Use the **9999px pill** for all primary interactive buttons.
- Maintain a minimum **80px vertical gap** between major sections.
- Use **#7c3bed** as the primary accent for interactive states and badges.

## Don'ts
- Do not use sharp corners (0px) for buttons or cards; use at least **12px**.
- Do not use pure black (#000000) for text; use the navy-black **#030711**.
- Avoid using the primary violet (#7c3bed) for large background surfaces; keep it as an accent.
- **Wrong:** Using a sub-brand color (e.g., a hypothetical orange) for the main "Book a Demo" button. **Right:** Use the parent violet (#7c3bed). **Reason:** Maintain parent brand authority on global CTAs.

## Similar brands
- Linear
- Vercel
- Framer

## Quick start

### CSS Custom Properties
```css
:root {
  --color-canvas: #ffffff;
  --color-ink: #030711;
  --color-primary: #7c3bed;
  --color-muted: #65758b;
  --radius-pill: 9999px;
  --radius-card: 16px;
  --font-main: 'Inter', sans-serif;
}
```

### Tailwind v4 @theme
```css
@theme {
  --color-disco-violet: #7c3bed;
  --color-disco-navy: #030711;
  --font-inter: "Inter";
  --radius-disco: 16px;
  --shadow-disco-lg: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 20px 40px 0px;
}
```

## Agent prompt examples
- "Create a primary CTA button using the Disconetwork style: violet background #7c3bed, white text, 9999px border radius, and Inter 600 font."
- "Generate a feature card with a 1px subtle border #e5e7eb, 16px corner radius, and a deep shadow `rgba(0,0,0,0.1) 0px 20px 40px`."
- "Design a hero section with a headline in Inter 800, 72px size, and -2.88px letter spacing."

## Known gaps
- Hover states for secondary buttons were not explicitly captured in CSS variables.
- Mobile-specific spacing tokens (e.g., `--spacing-mobile`) were not declared in the source.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://disconetwork.com | 1440px | 2026-06-06 |
| About | https://disconetwork.com/about | 1440px | 2026-06-06 |