Styleguide

Breadcrumbs

🌈
thalida.com

Table of Contents

Typography

Headings

Heading 2

Heading 3

Heading 4

💡
Faux H4 - Notion only goes to Heading 3 Officially

If you’re not being fucking honest with yourself how could you ever hope to communicate something meaningful to someone else?

A good fucking composition is the result of a hierarchy consisting of clearly contrasting elements set with distinct alignments containing irregular intervals of negative space. Widows and orphans are terrible fucking tragedies, both in real life and definitely in typography. Make work that fucking matters. You are the source of every ounce of give-a-damn that will ever exist in your work. Why are you reading all of this?

Loremfuckingipsum →

Quote

Imagine the most perfect quote ever

Inline

@Untitled

@January 29, 2022 🔥 E=mc2E = mc^2

Code

import { useState } from 'react';

export default function Component() {
  const [name, setName] = useState('juan');
	return (
		<div>
			{name}
		</div>
	);
}

Equation

a2+b2=c2a^2 + b^2 = c^2

Colors & Callouts

Text

⚫
Default
⚪
Gray
🟤
Brown
🟠
Orange
🟡
Yellow
🟢
Green
🔵
Blue
🟣
Purple
💓
Pink
🔴
Red

Backgrounds

⚫
Default
⚪
Gray
🟤
Brown
🟠
Orange
🟡
Yellow
🟢
Green
🔵
Blue
🟣
Purple
💓
Pink
🔴
Red

Lists

Bullets

  • super
    • notion
    • github pages
  • frameworks
    • vue
      • now on vue3
    • svelte
    • react

Numbered

  1. Create the list
  2. Go to the store
    1. Don’t forget your bags
      1. again
        1. Everything nested below will render with incorrect bullet on Super
          2. 🚫
          Not support by Super
        2. it goes max 3 deep
          1. before restarting
            1. the
              1. endlesss
                1. cycle
  3. Only buy items on the list
    1. and one random thing
    2. use self checkout
      1. it’s fancy now

Todo

Milk
2% Milk
Oat Milk
Bread
Cookies

Images

With a caption
With a caption
image
image

Interactive

File

Notion Super Colors.sketch58.5KB

Internal Links

Styleguide

Template Button

🚫
Template button does not render on Super

Toggles

‣

Heading 1 Toggle

Nothing to see here

‣

Heading 2 Toggle

Nothing to see here

‣

Heading 3 Toggle

Nothing to see here

‣
Heading 4 Toggle

Nothing to see here

‣
Toggle Section

Empty Toggle Section

Embeds

Bookmark

‣

Video

‣

Audio

‣

Map

‣

Twitter

Layout

Simple Table

Pros
Cons
Vue
React

Callout

⚡
Shout out into the ether

Two Column

⚡
Column 1

⚡
Column2

Two Column - Hero Left

⚡
Column 1

⚡
Column2

Two Column - Hero Right

⚡
Column 1

⚡
Column2

Three Column

⚡
Column 1

⚡
Column2

⚡
Column3

Four Column

⚡
Column 1

⚡
Column2

⚡
Column3

⚡
Column4

Five Column

⚡
Column 1
⚡
Column2
⚡
Column3
⚡
Column4
⚡
Column5

Databases

Sample Database

Table

Sample Database

NameDescriptionTagsDateGroupStatus
We have unlimited juice? This party is going to be off the hook.
redorangeyellowgreenpinkpurplebluebrowngraylight-graytags
July 23, 2018
Article
Not started
Optimize the fireball herding cats we need to have a Come to Jesus meeting with Phil about his attitude.
articlebrainstory
Project
Done
There is no strife, no prejudice, no national conflict in outer space as yet.
July 13, 2022
Article
In progress
purplegreenyellow
July 24, 2022
Article
Done
I hear the jury's still out on science. It's so watery.
Project
In progress
projectai
Article
Done
June 30, 2022
Project
Not started
Not started
Lorem Ipsum
July 20, 2022
Not started

Gallery - Large

Sample Database

Gallery - Medium

Sample Database

Gallery - Small

Sample Database

List

Sample Database

The One Thing About Juice That Keeps Me Up at Night
We have unlimited juice? This party is going to be off the hook.
redorangeyellowgreenpinkpurplebluebrowngraylight-graytags
July 23, 2018
This Is Your Brain on Party
Optimize the fireball herding cats we need to have a Come to Jesus meeting with Phil about his attitude.
articlebrainstory
The Beginner's Guide to EDM
purplegreenyellow
July 24, 2022
The Ultimate Space Checklist
There is no strife, no prejudice, no national conflict in outer space as yet.
July 13, 2022
Math Made Simple
June 30, 2022
No Page
Lorem Ipsum
July 20, 2022
Science Made Simple
I hear the jury's still out on science. It's so watery.
Getting Started with AI
projectai
Lorem Ipsum Title Only Dolor

Calendar

Sample Database

December 2023
Today
Mon
Tue
Wed
Thu
Fri
Sat
Sun
27
28
29
30
Dec 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Board

Sample Database

Article
The One Thing About Juice That Keeps Me Up at Night
The One Thing About Juice That Keeps Me Up at Night
The One Thing About Juice That Keeps Me Up at Night
We have unlimited juice? This party is going to be off the hook.
redorangeyellowgreenpinkpurplebluebrowngraylight-graytags
July 23, 2018
The Beginner's Guide to EDM
The Beginner's Guide to EDM
The Beginner's Guide to EDM
purplegreenyellow
July 24, 2022
The Ultimate Space Checklist
The Ultimate Space Checklist
There is no strife, no prejudice, no national conflict in outer space as yet.
July 13, 2022
Getting Started with AI
Getting Started with AI
Getting Started with AI
projectai
Project
This Is Your Brain on Party
This Is Your Brain on Party
This Is Your Brain on Party
Optimize the fireball herding cats we need to have a Come to Jesus meeting with Phil about his attitude.
articlebrainstory
Math Made Simple
Math Made Simple
Math Made Simple
June 30, 2022
Science Made Simple
Science Made Simple
Science Made Simple
I hear the jury's still out on science. It's so watery.

🦄⚡