DESIGN.md · Analysis

Dyno

dyno.gg · 21 Aug 2026 · 47 colors · Roboto, Inter

Dyno

Dyno is a feature-rich Discord bot platform with web-based server management, moderation, and automation. The design system emphasizes dark-mode sophistication with bold accent colors and technical precision.

Colors

surface#0e1015

surface-dim#0a0a0a

surface-bright#1a1d24

surface-container-lowest#060809

surface-container-low#121518

surface-container#181a20

surface-container-high#222228

surface-container-highest#2d3039

on-surface#f5f5f5

on-surface-variant#b8b8b8

inverse-surface#f5f5f5

inverse-on-surface#0e1015

outline#555555

outline-variant#363636

surface-tint#c1234f

primary#c1234f

on-primary#ffffff

primary-container#d42657

on-primary-container#ffffff

inverse-primary#ff6b8a

secondary#00d1b2

on-secondary#0a0a0a

secondary-container#1a4d45

on-secondary-container#00d1b2

tertiary#79a85d

on-tertiary#0a0a0a

tertiary-container#a8d47a

on-tertiary-container#1a2e0a

error#f14668

on-error#ffffff

error-container#8b1a2e

on-error-container#f14668

primary-fixed#ff8fa3

primary-fixed-dim#d42657

on-primary-fixed#4a0a1a

on-primary-fixed-variant#8b1a2e

secondary-fixed#4dd9cc

secondary-fixed-dim#00a896

on-secondary-fixed#001a15

on-secondary-fixed-variant#006b5f

tertiary-fixed#b8e68a

tertiary-fixed-dim#7a9d4a

on-tertiary-fixed#1a2e0a

on-tertiary-fixed-variant#4a6b2a

background#0e1015

on-background#f5f5f5

surface-variant#363636

Typography

display: fontFamily: Roboto · fontSize: 60px · fontWeight: 700 · lineHeight: 68px · letterSpacing: -0.04em
headline-lg: fontFamily: Roboto · fontSize: 40px · fontWeight: 600 · lineHeight: 48px · letterSpacing: -0.02em
headline-md: fontFamily: Roboto · fontSize: 28px · fontWeight: 600 · lineHeight: 36px · letterSpacing: -0.01em
title-lg: fontFamily: Inter · fontSize: 20px · fontWeight: 600 · lineHeight: 28px · letterSpacing: 0em
body-lg: fontFamily: Inter · fontSize: 18px · fontWeight: 400 · lineHeight: 28px · letterSpacing: 0.01em
body-md: fontFamily: Inter · fontSize: 16px · fontWeight: 400 · lineHeight: 24px · letterSpacing: 0.01em
label-md: fontFamily: Inter · fontSize: 14px · fontWeight: 600 · lineHeight: 20px · letterSpacing: 0.02em
label-sm: fontFamily: Inter · fontSize: 12px · fontWeight: 500 · lineHeight: 16px · letterSpacing: 0.03em

Design guidance

Overview

Dyno is a comprehensive Discord server management platform designed for communities seeking technical sophistication without sacrificing accessibility. The design system embodies 'Technical Minimalism'—a movement that strips away ornament while preserving functional depth through precise color contrast, modular spacing, and deliberate visual hierarchy. The interface evokes a sense of control and clarity: users navigate complex moderation, automation, and configuration tasks with confidence. The brand personality is direct, competent, and community-focused. Dyno speaks in the language of Discord administrators: practical, jargon-aware, and action-oriented. Example voice: 'Configure anti-spam rules in 30 seconds. Your server stays clean while you focus on community.'

Colors

The color palette is anchored by a bold magenta primary (#c1234f) that commands attention on CTAs and interactive states—this is the signature accent that distinguishes Dyno from generic admin tools. The dark surface stack (#0e1015 base through #2d3039 highest) provides a low-contrast, eye-friendly canvas for extended dashboard use, critical for server administrators monitoring activity for hours. Secondary cyan (#00d1b2) and tertiary sage (#79a85d) serve as supporting accents for status indicators, success states, and data visualization. Error red (#f14668) is reserved for destructive actions and warnings. The outline layer (#555555 to #363636) creates subtle separation between interactive elements without harsh borders. Primary (#c1234f) is used exclusively on primary CTAs ('Add To Serve

Typography

The type system pairs Roboto for headlines (display, headline-lg, headline-md) with Inter for body and UI text, creating a hierarchy that balances technical credibility with modern approachability. Roboto's geometric precision reinforces the 'control panel' aesthetic—headlines at 40px (headline-lg) and 28px (headline-md) with -0.02em letter-spacing create tight, confident statements. Body text at 16px (Inter, 400 weight, 24px line-height) maintains readability over long configuration forms and documentation. Labels use 14px Inter at 600 weight with 0.02em letter-spacing to distinguish interactive elements. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) on small labels (label-sm) when layered over busy dashboard backgrounds to ensure legibility. Headings use -0.04em letter-spacing at displ

Layout

The layout system uses a 12-column grid with a 1400px max-width container, accommodating both desktop dashboards and responsive mobile configurations. The gutter is 24px, providing breathing room between sections without excessive whitespace. Page rhythm is established through lg spacing (40px) for major section breaks and md spacing (24px) for component grouping. The container-max-width of 1400px ensures that wide dashboard tables and configuration panels remain scannable without horizontal scrolling on standard monitors. White-space is used strategically: dense information clusters (moderation logs, user lists) are separated by 40px vertical gaps, while related controls within a card use 12px (sm spacing) for compact grouping. Responsive breakpoints collapse to single-column layouts belo

Elevation & Depth

Visual hierarchy is conveyed through a restrained shadow system and surface-container layering rather than dramatic depth. Level 1 (Base): surface (#0e1015) with no shadow, establishing the foundation. Level 2 (Standard Cards): surface-container (#181a20) with box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), creating subtle separation from the base. Level 3 (Elevated/Modals): surface-container-high (#222228) with box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16), lifting interactive overlays. Level 4 (Floating Actions): surface-container-highest (#2d3039) with box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24), r

Shapes

The shape philosophy is 'Functional Sharpness'—minimal border-radius that prioritizes clarity and scannability over softness. Buttons and inputs use 4px (0.25rem) radius, creating subtle definition without distraction. Cards and containers use 4px radius consistently, reinforcing the modular, stackable nature of dashboard components. Badges and pills use 9999px (full) radius for status indicators and tags, creating visual distinction from rectangular UI elements. This hierarchy—sharp corners for primary structure, rounded corners for secondary labels—guides the eye through information hierarch

Components

Action Elements Buttons are the primary interaction surface. Primary buttons use #c1234f background with white text, 40px height, 7.5px 20px 9px padding, and 4px radius. Hover state transitions to #d42657 over 150ms. Secondary buttons use surface-container-high (#222228) with a 1px outline-variant border, maintaining the same dimensions. Both button types use label-md typography (14px Inter, 600 weight, 0.02em letter-spacing). Focus state applies a 3px ring at rgba(193, 35, 79, 0.1). Disabled buttons reduce opacity to 50% and remove pointer-events.

Containers & Surfaces Cards are the fundamental container unit: surface-container (#181a20) background, 4px radius, 24px padding, 1px outline-variant border, and sm elevation (0 1px 2px rgba(0, 0, 0, 0.12)). Hover state elevates to surf

Do's and Don'ts

**Do**

Do use primary (#c1234f) exclusively on primary CTAs and active/focus states—never on passive elements or backgrounds.
Do maintain 24px (md spacing) between major sections and 12px (sm spacing) within component groups to create scannable information hierarchy.
Do apply the 4px border-radius consistently to buttons, inputs, and cards; reserve 9999px (full) only for badges and status pills.
Do use the surface-container stack (#181a20 through #2d3039) to create depth without relying on color shifts—elevation is conveyed through shadows and layering.
Do pair Roboto headlines with Inter body text; never reverse this pairing or mix serif fonts into the system.
Do apply focus rings (3px rgba(193, 35, 79, 0.1)) to all interactive elements for keyboard navigation accessibility.

**Don't**

Don't use secondary (#00d1b2) or tertiary (#79a85d) on primary CTAs—these are reserved for status indicators and supporting actions.
Don't apply shadows larger than lg elevation (0 16px 40px rgba(0, 0, 0, 0.24)) to avoid visual chaos on the dark surface.
Don't exceed 1rem (16px) border-radius on any component; the brand aesthetic depends on sharp, functional corners.
Don't use pure white (#ffffff) or pure black (#000000) in the palette—always use on-surface (#f5f5f5) for text and surface (#0e1015) for backgrounds.
Don't mix font families within a single component; headlines are Roboto, body/UI is Inter.
Don't apply color transitions longer than 200ms on hover states—the interface should feel responsive and snappy, not sluggish.

---
version: alpha
name: Dyno
description: >-
  Dyno is a feature-rich Discord bot platform with web-based server management, moderation, and automation. The design
  system emphasizes dark-mode sophistication with bold accent colors and technical precision.
logo:
  src: https://dyno.gg/images/dyno-blitz-v2-transparent-bg.png
colors:
  surface: '#0e1015'
  surface-dim: '#0a0a0a'
  surface-bright: '#1a1d24'
  surface-container-lowest: '#060809'
  surface-container-low: '#121518'
  surface-container: '#181a20'
  surface-container-high: '#222228'
  surface-container-highest: '#2d3039'
  on-surface: '#f5f5f5'
  on-surface-variant: '#b8b8b8'
  inverse-surface: '#f5f5f5'
  inverse-on-surface: '#0e1015'
  outline: '#555555'
  outline-variant: '#363636'
  surface-tint: '#c1234f'
  primary: '#c1234f'
  on-primary: '#ffffff'
  primary-container: '#d42657'
  on-primary-container: '#ffffff'
  inverse-primary: '#ff6b8a'
  secondary: '#00d1b2'
  on-secondary: '#0a0a0a'
  secondary-container: '#1a4d45'
  on-secondary-container: '#00d1b2'
  tertiary: '#79a85d'
  on-tertiary: '#0a0a0a'
  tertiary-container: '#a8d47a'
  on-tertiary-container: '#1a2e0a'
  error: '#f14668'
  on-error: '#ffffff'
  error-container: '#8b1a2e'
  on-error-container: '#f14668'
  primary-fixed: '#ff8fa3'
  primary-fixed-dim: '#d42657'
  on-primary-fixed: '#4a0a1a'
  on-primary-fixed-variant: '#8b1a2e'
  secondary-fixed: '#4dd9cc'
  secondary-fixed-dim: '#00a896'
  on-secondary-fixed: '#001a15'
  on-secondary-fixed-variant: '#006b5f'
  tertiary-fixed: '#b8e68a'
  tertiary-fixed-dim: '#7a9d4a'
  on-tertiary-fixed: '#1a2e0a'
  on-tertiary-fixed-variant: '#4a6b2a'
  background: '#0e1015'
  on-background: '#f5f5f5'
  surface-variant: '#363636'
typography:
  display:
    fontFamily: Roboto
    fontSize: 60px
    fontWeight: '700'
    lineHeight: 68px
    letterSpacing: '-0.04em'
  headline-lg:
    fontFamily: Roboto
    fontSize: 40px
    fontWeight: '600'
    lineHeight: 48px
    letterSpacing: '-0.02em'
  headline-md:
    fontFamily: Roboto
    fontSize: 28px
    fontWeight: '600'
    lineHeight: 36px
    letterSpacing: '-0.01em'
  title-lg:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: '600'
    lineHeight: 28px
    letterSpacing: 0em
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
    letterSpacing: 0.01em
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
    letterSpacing: 0.01em
  label-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '600'
    lineHeight: 20px
    letterSpacing: 0.02em
  label-sm:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: '500'
    lineHeight: 16px
    letterSpacing: 0.03em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 8px
  xs: 4px
  sm: 12px
  md: 24px
  lg: 40px
  xl: 64px
  gutter: 24px
  container-max: 1400px
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.12)
  md: 0 4px 12px rgba(0, 0, 0, 0.16)
  lg: 0 16px 40px rgba(0, 0, 0, 0.24)
layout:
  containerMaxWidth: 1400px
  gridColumns: 12
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.sm}'
    padding: 7.5px 20px 9px
    height: 40px
    border: none
  button-primary-hover:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-primary}'
    transition: background-color 150ms ease-in-out
  button-secondary:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.on-surface}'
    typography: '{typography.label-md}'
    rounded: '{rounded.sm}'
    padding: 7.5px 20px 9px
    height: 40px
    border: 1px solid {colors.outline-variant}
  button-secondary-hover:
    backgroundColor: '{colors.surface-container-highest}'
    textColor: '{colors.on-surface}'
    transition: background-color 150ms ease-in-out
  card:
    backgroundColor: '{colors.surface-container}'
    rounded: '{rounded.sm}'
    padding: '{spacing.md}'
    border: 1px solid {colors.outline-variant}
    boxShadow: '{elevation.sm}'
  card-hover:
    backgroundColor: '{colors.surface-container-high}'
    boxShadow: '{elevation.md}'
    transition: all 200ms ease-in-out
  input-field:
    backgroundColor: '{colors.surface-container-low}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    padding: 7px 11px
    border: 1px solid {colors.outline-variant}
    height: 36px
  input-field-focus:
    borderColor: '{colors.primary}'
    boxShadow: 0 0 0 3px rgba(193, 35, 79, 0.1)
    transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out
  badge:
    backgroundColor: '{colors.secondary-container}'
    textColor: '{colors.on-secondary-container}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: 4px 12px
    display: inline-block
  badge-error:
    backgroundColor: '{colors.error-container}'
    textColor: '{colors.error}'
  list-item:
    backgroundColor: transparent
    rounded: '{rounded.md}'
    padding: '{spacing.sm}'
    textColor: '{colors.on-surface}'
  list-item-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.primary}'
    transition: background-color 150ms ease-in-out, color 150ms ease-in-out
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
Buttons are the primary interaction surface. Primary buttons use #c1234f background with white text, 40px height, 7.5px 20px 9px padding, and 4px radius. Hover state transitions to #d42657 over 150ms. Secondary buttons use surface-container-high (#222228) with a 1px outline-variant border, maintaining the same dimensions. Both button types use label-md typography (14px Inter, 600 weight, 0.02em letter-spacing). Focus state applies a 3px ring at rgba(193, 35, 79, 0.1). Disabled buttons reduce opacity to 50% and remove pointer-events.

### Containers & Surfaces
Cards are the fundamental container unit: surface-container (#181a20) background, 4px radius, 24px padding, 1px outline-variant border, and sm elevation (0 1px 2px rgba(0, 0, 0, 0.12)). Hover state elevates to surf

## Do's and Don'ts

**Do**
- Do use primary (#c1234f) exclusively on primary CTAs and active/focus states—never on passive elements or backgrounds.
- Do maintain 24px (md spacing) between major sections and 12px (sm spacing) within component groups to create scannable information hierarchy.
- Do apply the 4px border-radius consistently to buttons, inputs, and cards; reserve 9999px (full) only for badges and status pills.
- Do use the surface-container stack (#181a20 through #2d3039) to create depth without relying on color shifts—elevation is conveyed through shadows and layering.
- Do pair Roboto headlines with Inter body text; never reverse this pairing or mix serif fonts into the system.
- Do apply focus rings (3px rgba(193, 35, 79, 0.1)) to all interactive elements for keyboard navigation accessibility.

**Don't**
- Don't use secondary (#00d1b2) or tertiary (#79a85d) on primary CTAs—these are reserved for status indicators and supporting actions.
- Don't apply shadows larger than lg elevation (0 16px 40px rgba(0, 0, 0, 0.24)) to avoid visual chaos on the dark surface.
- Don't exceed 1rem (16px) border-radius on any component; the brand aesthetic depends on sharp, functional corners.
- Don't use pure white (#ffffff) or pure black (#000000) in the palette—always use on-surface (#f5f5f5) for text and surface (#0e1015) for backgrounds.
- Don't mix font families within a single component; headlines are Roboto, body/UI is Inter.
- Don't apply color transitions longer than 200ms on hover states—the interface should feel responsive and snappy, not sluggish.

Edit, then copy or download.