Skip to content

Esc

↑↓navigate↵open⌘Jpreview

Docs
Changelog

Overview
Brand
- Introduction
- Style Guides
- Messaging
  - Brand Voice
  - Style and Formatting
- GradRight Logo
- Design
  - Color
  - Typography
- Visual Design
Product
- Directives
- Patterns
- Objects
- Data Visualization
- Content
- Accessibility
- wow
- Get Started
  - Philosophy
  - Principles
  - Develop
  - Navigating Pajamas
  - Contributing
  - Contribution Lifecycle
  - Resources
  - Glossary
  - GR Lab kit
    Contributing
    File Structure
    Release Notes
    Release Process
  - Figma Guides
    Components
    Libraries
    Annotation
    Sharing
    Breaking Changes
- Foundations
  - Color
  - Spacing
  - Layout
  - Border
  - Elevation
  - Tailwind Utilities
  - Design Tokens
    Overview
    Authoring Guide
    Reading Guide
    Usage Guide
    All Design Tokens
  - Typography
    Fundamentals
    Headings
    Markdown
  - Animation
    Fundamentals
    Feedback
  - Iconography
    Fundamentals
    Animated Icons
    All Icons
  - Illustration
    Fundamentals
    Creating
    Exporting
    All Illustrations
- Components

Visual Design

Diagrams

How to draw product and brand diagrams.

Diagrams should be readable in one glance. Prefer labels over legend soup. Match brand color tokens.

Was this page helpful?

Thanks for your feedback!

PreviousPromptlings NextMotion

Open in chat

Open in ChatGPT Open in Claude Open in T3 Chat Open in Scira Open in Cursor