Skip to content
Library

Vectary. Graphite blueprint with violet signal.

  • Design tools
  • Light theme
  • 7 colors
  • 1 typeface

Vectary operates on a near-monochromatic canvas: white surfaces, graphite-scale text from #252525 down to #949494, and zero chromatic noise until action is required. Visual hierarchy is built from weight and size, not color — Inter at weight 900 reserves itself for display moments, weight 700 for section headings, weight 400 for everything else. A single vivid violet (#6100ff) functions as the system's only color, appearing exclusively on the gradient CTA to signal the one thing the user can do. Components stay flat with hairline restraint, and the overall feeling is that of a precise drafting instrument rather than a decorated product.

Screenshot of Vectary
Captured from vectary.com on October 11, 2026

Vectary design system

Vectary

Brand2

  • Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color

  • Supporting palette color for small decorative accents when the core palette needs contrast. Do not promote it to the primary CTA color

Neutrals5

  • Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color

  • Secondary dark surface, nav panel background

  • Body text, secondary headings — the readable gray for paragraph copy

  • Muted helper text, captions, links at rest

  • Page background, text on dark fills

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Paper on Electric Violet

7.11 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.