Design System

Colors

Brand

Background

Foreground (typeface)

Typography

H1

I've looked at clouds from both sides now

H2

I've looked at clouds from both sides now. From up and down and still somehow

H3

I've looked at clouds from both sides now. From up and down and still somehow

H4

I've looked at clouds from both sides now. From up and down and still somehow

H5

I've looked at clouds from both sides now. From up and down and still somehow

H6 (Label)

Marker

Body

I've looked at clouds from both sides now. From up and down and still somehow

Mind Maps

The art of organizing ideas

Introduction

A mind map is a diagram used to visually organize information into a hierarchy, showing relationships among pieces of the whole.[^1]

It is often based on a single concept, drawn as an image in the center of a blank page, to which associated representations of ideas such as images, words and parts of words are added. Major ideas are connected directly to the central concept, and other ideas branch out from those major ideas.

Mind maps can also be drawn by hand, either as “notes” during a lecture, meeting or planning session, for example, or as higher quality pictures when more time is available.

Mind maps are considered to be a type of spider diagram.[^2]

[^1]: This is the first footnote

[^2]: This is the second footnote

Origin

Although the term “mind map” was first popularized by British popular psychology author and television personality Tony Buzan, the use of diagrams that visually “map” information using branching and radial maps traces back centuries.

These pictorial methods record knowledge and model systems, and have a long history in learning, brainstorming, memory, visual thinking, and problem solving by educators, engineers, psychologists, and others.

Some of the earliest examples of such graphical records were developed by Porphyry of Tyros, a noted thinker of the 3rd century, as he graphically visualized the concept categories of Aristotle. Philosopher Ramon Llull (1235–1315) also used such techniques.

Links

Three types of inline links: Internal link, anchor link and external links

Buttons

Adding some text here because buttons will never be directly underneath a header.

Lists

Unordered List

• First
• Second
• Third

Ordered List

1. First
2. Second
3. Third

Horizontal bar

Quote

I've looked at clouds from both sides now

Callout

Code

Inline code

console.log()

Code-block (basic)

import DeepThought from 'deepthought';
const dp = new DeepThought();
 
const completion = await dp.chat.completion.create({
  model: "deepthought",
  messages: [
    { role: "system", content: "Be helpful and concise" },
    {
      role: "human",
      content: "What is the meaning of life?",
    },
  ]
});

Code-block (enhanced)

import DeepThought from 'deepthought';
const dp = new DeepThought();
 
const completion = await dp.chat.completion.create({
  model: "deepthought",
  messages: [
    { role: "system", content: "Be helpful and concise" },
    {
      role: "human",
      content: "What is the meaning of life?",
    },
  ]
});

Image

This is a wabi sabi image

Canvas

With title