DESIGN.md · Analysis

Seobility

seobility.net · 15 Jun 2026 · 47 colors · Inter, Graphik, sans-serif

Seobility

Seobility is a free SEO checker and analysis platform that delivers instant website audits with actionable optimization recommendations. The design system emphasizes clarity, data visualization, and progressive disclosure through a clean, accessible interface.

Colors

surface#f6fbff

surface-dim#e5e7eb

surface-bright#ffffff

surface-container-lowest#f0f4f8

surface-container-low#e8ecf1

surface-container#e0e5eb

surface-container-high#d8dce2

surface-container-highest#d0d4da

on-surface#404040

on-surface-variant#6b7280

inverse-surface#1f2937

inverse-on-surface#f3f4f6

outline#9ca3af

outline-variant#d1d5db

surface-tint#1d85ed

primary#2bc46a

on-primary#ffffff

primary-container#c8f7d8

on-primary-container#0d5a2a

inverse-primary#7fd9a8

secondary#1d85ed

on-secondary#ffffff

secondary-container#afd6fe

on-secondary-container#003d99

tertiary#ff6900

on-tertiary#ffffff

tertiary-container#ffe0cc

on-tertiary-container#663300

error#cf2e2e

on-error#ffffff

error-container#f9dedc

on-error-container#8b0000

primary-fixed#c8f7d8

primary-fixed-dim#a8e6c1

on-primary-fixed#0d5a2a

on-primary-fixed-variant#1f7a45

secondary-fixed#afd6fe

secondary-fixed-dim#7eb8f5

on-secondary-fixed#003d99

on-secondary-fixed-variant#0052cc

tertiary-fixed#ffe0cc

tertiary-fixed-dim#ffb399

on-tertiary-fixed#663300

on-tertiary-fixed-variant#994c00

background#f6fbff

on-background#404040

surface-variant#eeeeee

Typography

display: fontFamily: Inter · fontSize: 56px · fontWeight: 700 · lineHeight: 64px · letterSpacing: -0.03em
headline-lg: fontFamily: Inter · fontSize: 40px · fontWeight: 600 · lineHeight: 48px · letterSpacing: -0.02em
headline-md: fontFamily: Inter · fontSize: 28px · fontWeight: 600 · lineHeight: 36px · letterSpacing: -0.01em
title-lg: fontFamily: Inter · fontSize: 20px · fontWeight: 600 · lineHeight: 28px · letterSpacing: 0em
body-lg: fontFamily: Graphik, sans-serif · fontSize: 18px · fontWeight: 400 · lineHeight: 28px · letterSpacing: 0.01em
body-md: fontFamily: Graphik, sans-serif · fontSize: 16px · fontWeight: 400 · lineHeight: 24px · letterSpacing: 0.01em
label-md: fontFamily: Graphik, sans-serif · fontSize: 14px · fontWeight: 600 · lineHeight: 20px · letterSpacing: 0.02em
label-sm: fontFamily: Graphik, sans-serif · fontSize: 12px · fontWeight: 500 · lineHeight: 16px · letterSpacing: 0.03em

Design guidance

Do's and Don'ts

**Do**

Do use primary (#2bc46a) exclusively for positive actions, success states, and high-intent CTAs—never for warnings or neutral elements.
Do apply md (24px) spacing between major sections and sm (12px) spacing between cards to create visual rhythm without overwhelming the page.
Do use Inter for all headings and labels (600–700 weight) and Graphik for body text (400 weight) to maintain the technical-yet-approachable voice.
Do apply elevation.md (0 3px 8px rgba(0, 0, 0, 0.15)) on hover to cards and elevated elements to signal interactivity without creating a 'floating' effect.
Do use rounded.lg (16px) for buttons and rounded.md (12px) for cards to differentiate interactive elements from structural containers.
Do maintain 4.5:1 contrast between text and background colors; use on-surface (#404040) for primary text and on-surface-variant (#6b7280) for secondary text.

**Don't**

Don't use primary (#2bc46a) for warnings, errors, or neutral UI elements—reserve it for success and high-intent actions only.
Don't apply shadows > 24px blur-radius; keep elevation.lg at 0 8px 24px to maintain the grounded, analytical aesthetic.
Don't use system-ui or generic sans-serif fonts; always specify Inter or Graphik to preserve the brand's technical precision.
Don't exceed 1280px container max-width; wider layouts reduce readability and dilute the focused, data-driven experience.
Don't apply rounded corners to dividers, borders, or structural elements; reserve rounding for interactive elements (buttons, cards, badges).
Don't use more than 3 accent colors in a single view; stick to primary (#2bc46a), secondary (#1d85ed), and tertiary (#ff6900) to avoid visual chaos in metric-heavy layouts.

---
version: alpha
name: Seobility
description: >-
  Seobility is a free SEO checker and analysis platform that delivers instant website audits with actionable
  optimization recommendations. The design system emphasizes clarity, data visualization, and progressive disclosure
  through a clean, accessible interface.
logo:
  src: https://www.seobility.net/wp-content/uploads/2024/02/Vector.svg
colors:
  surface: '#f6fbff'
  surface-dim: '#e5e7eb'
  surface-bright: '#ffffff'
  surface-container-lowest: '#f0f4f8'
  surface-container-low: '#e8ecf1'
  surface-container: '#e0e5eb'
  surface-container-high: '#d8dce2'
  surface-container-highest: '#d0d4da'
  on-surface: '#404040'
  on-surface-variant: '#6b7280'
  inverse-surface: '#1f2937'
  inverse-on-surface: '#f3f4f6'
  outline: '#9ca3af'
  outline-variant: '#d1d5db'
  surface-tint: '#1d85ed'
  primary: '#2bc46a'
  on-primary: '#ffffff'
  primary-container: '#c8f7d8'
  on-primary-container: '#0d5a2a'
  inverse-primary: '#7fd9a8'
  secondary: '#1d85ed'
  on-secondary: '#ffffff'
  secondary-container: '#afd6fe'
  on-secondary-container: '#003d99'
  tertiary: '#ff6900'
  on-tertiary: '#ffffff'
  tertiary-container: '#ffe0cc'
  on-tertiary-container: '#663300'
  error: '#cf2e2e'
  on-error: '#ffffff'
  error-container: '#f9dedc'
  on-error-container: '#8b0000'
  primary-fixed: '#c8f7d8'
  primary-fixed-dim: '#a8e6c1'
  on-primary-fixed: '#0d5a2a'
  on-primary-fixed-variant: '#1f7a45'
  secondary-fixed: '#afd6fe'
  secondary-fixed-dim: '#7eb8f5'
  on-secondary-fixed: '#003d99'
  on-secondary-fixed-variant: '#0052cc'
  tertiary-fixed: '#ffe0cc'
  tertiary-fixed-dim: '#ffb399'
  on-tertiary-fixed: '#663300'
  on-tertiary-fixed-variant: '#994c00'
  background: '#f6fbff'
  on-background: '#404040'
  surface-variant: '#eeeeee'
typography:
  display:
    fontFamily: Inter
    fontSize: 56px
    fontWeight: '700'
    lineHeight: 64px
    letterSpacing: '-0.03em'
  headline-lg:
    fontFamily: Inter
    fontSize: 40px
    fontWeight: '600'
    lineHeight: 48px
    letterSpacing: '-0.02em'
  headline-md:
    fontFamily: Inter
    fontSize: 28px
    fontWeight: '600'
    lineHeight: 36px
    letterSpacing: '-0.01em'
  title-lg:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: '600'
    lineHeight: 28px
    letterSpacing: 0em
  body-lg:
    fontFamily: Graphik, sans-serif
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
    letterSpacing: 0.01em
  body-md:
    fontFamily: Graphik, sans-serif
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
    letterSpacing: 0.01em
  label-md:
    fontFamily: Graphik, sans-serif
    fontSize: 14px
    fontWeight: '600'
    lineHeight: 20px
    letterSpacing: 0.02em
  label-sm:
    fontFamily: Graphik, sans-serif
    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: 1280px
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.06)
  md: 0 3px 8px rgba(0, 0, 0, 0.15)
  lg: 0 8px 24px rgba(0, 0, 0, 0.12)
layout:
  containerMaxWidth: 1280px
  gridColumns: 12
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: 13px 21px
    height: 40px
    border: none
    boxShadow: none
  button-primary-hover:
    backgroundColor: '#24a85a'
    textColor: '{colors.on-primary}'
    transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1)
  button-secondary:
    backgroundColor: '{colors.surface-bright}'
    textColor: '{colors.on-surface}'
    typography: '{typography.label-md}'
    rounded: '{rounded.md}'
    padding: 9px 17px
    height: 40px
    border: 1px solid {colors.outline-variant}
  button-secondary-hover:
    backgroundColor: '{colors.surface-container-low}'
    border: 1px solid {colors.outline}
  button-tertiary:
    backgroundColor: transparent
    textColor: '{colors.secondary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: '{spacing.sm}'
    border: none
  button-tertiary-hover:
    backgroundColor: rgba(29, 133, 237, 0.08)
    textColor: '{colors.secondary}'
  card:
    backgroundColor: '{colors.surface-bright}'
    rounded: '{rounded.md}'
    padding: '{spacing.md}'
    border: 1px solid {colors.outline-variant}
    boxShadow: '{elevation.sm}'
  card-hover:
    backgroundColor: '{colors.surface-container-low}'
    boxShadow: '{elevation.md}'
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)
  input-field:
    backgroundColor: '{colors.surface-bright}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.sm}'
    border: 1px solid {colors.outline-variant}
    height: 40px
  input-field-focus:
    borderColor: '{colors.secondary}'
    boxShadow: 0 0 0 3px rgba(29, 133, 237, 0.1)
    outline: none
  badge-success:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-primary-container}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: 4px 12px
    display: inline-block
  badge-error:
    backgroundColor: '#f9dedc'
    textColor: '{colors.error}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: 4px 12px
  badge-warning:
    backgroundColor: '#fff3cd'
    textColor: '#856404'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: 4px 12px
  tab-active:
    backgroundColor: transparent
    textColor: '{colors.secondary}'
    typography: '{typography.label-md}'
    borderBottom: 3px solid {colors.secondary}
    paddingBottom: 12px
  tab-inactive:
    backgroundColor: transparent
    textColor: '{colors.on-surface-variant}'
    typography: '{typography.label-md}'
    borderBottom: 3px solid transparent
    paddingBottom: 12px
  progress-bar:
    backgroundColor: '{colors.surface-container-high}'
    rounded: '{rounded.full}'
    height: 8px
    overflow: hidden
  progress-bar-fill:
    backgroundColor: '{colors.secondary}'
    height: 100%
    transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1)
---

## Do's and Don'ts

**Do**
- Do use primary (#2bc46a) exclusively for positive actions, success states, and high-intent CTAs—never for warnings or neutral elements.
- Do apply md (24px) spacing between major sections and sm (12px) spacing between cards to create visual rhythm without overwhelming the page.
- Do use Inter for all headings and labels (600–700 weight) and Graphik for body text (400 weight) to maintain the technical-yet-approachable voice.
- Do apply elevation.md (0 3px 8px rgba(0, 0, 0, 0.15)) on hover to cards and elevated elements to signal interactivity without creating a 'floating' effect.
- Do use rounded.lg (16px) for buttons and rounded.md (12px) for cards to differentiate interactive elements from structural containers.
- Do maintain 4.5:1 contrast between text and background colors; use on-surface (#404040) for primary text and on-surface-variant (#6b7280) for secondary text.

**Don't**
- Don't use primary (#2bc46a) for warnings, errors, or neutral UI elements—reserve it for success and high-intent actions only.
- Don't apply shadows > 24px blur-radius; keep elevation.lg at 0 8px 24px to maintain the grounded, analytical aesthetic.
- Don't use system-ui or generic sans-serif fonts; always specify Inter or Graphik to preserve the brand's technical precision.
- Don't exceed 1280px container max-width; wider layouts reduce readability and dilute the focused, data-driven experience.
- Don't apply rounded corners to dividers, borders, or structural elements; reserve rounding for interactive elements (buttons, cards, badges).
- Don't use more than 3 accent colors in a single view; stick to primary (#2bc46a), secondary (#1d85ed), and tertiary (#ff6900) to avoid visual chaos in metric-heavy layouts.

Edit, then copy or download.