kymo logoKymoStudio / design
kymo.studio ↗
Design System
Foundations
  • Overview
  • Branding
  • Colour
  • Typography
  • Tokens
  • Voice
  • What not to do
Foundations

Design System

The single source of truth for the kymo brand — the mark, the Mermaid palette, typography, design tokens and voice. Pick a topic to dive in.

Download the markBrand guidelines
01BrandingThe mark, wordmark lockups, and the rules that keep them consistent.→02ColourThe Mermaid palette, roles, and WCAG-approved contrast pairings.→03TypographyThe three faces — display, body and mono — and how to use them.→04TokensThe CSS custom properties every kymo surface is built on.→05VoiceThe fixed lines — tagline, slogan, positioning — and where they live.→06What not to doCommon mistakes to avoid with the mark and the messaging.→
Next →Branding

kymo.studio

  • Home
  • Documentation
  • Editor
  • Icons
  • Design

Diagram types

  • Flowchart
  • Architecture
  • Sequence
  • Class
  • State
  • Entity-Relationship
  • Block
  • Mindmap
  • Kanban
  • Quadrant
  • Requirement
  • BPMN

Diagram formats

  • Mermaid
  • D2
  • PlantUML
  • Graphviz
  • BPMN
  • WaveDrom

Diagram outputs

  • Animated SVG
  • WebP
  • PNG
  • Figma
  • Excalidraw

Packages

  • PyPI
  • npm
  • crates.io
  • VS Code

Developers

  • GitHub
  • Issues
  • Discussions
  • Connect over MCP
Copyright © 2026 KymoStudio. Licensed under Apache-2.0.