Style Guide

Color

Grayscale Palette

White
Gray 1
Gray 2
Gray 3
Gray 4
Gray 5
Gray 6
Gray 7
Gray 8
Gray 9
Black

Color Palette

Red
Orange
Yellow
Lime
Taiga
Turquoise
Cyan
Blue
Violet
Magenta

Theme Palette

Primary
Secondary
Tertiary
Info
Question
Success
Warning
Danger

Typography

Headlines and Paragraphs

I Saw Ryan Gosling at a Grocery Store

I saw Ryan Gosling at a grocery store in Los Angeles yesterday. I told him how cool it was to meet him in person, but I didn’t want to be a douche and bother him and ask him for photos or anything.

He said, “Oh, like you’re doing now?”

I was taken aback, and all I could say was “Huh?” but he kept cutting me off and going “huh? huh? huh?” and closing his hand shut in front of my face. I walked away and continued with my shopping, and I heard him chuckle as I walked off.

When I came to pay for my stuff up front I saw him trying to walk out the doors with like fifteen Milky Ways in his hands without paying.

The girl at the counter was very nice about it and professional…

…and was like “Sir, you need to pay for those first.” At first he kept pretending to be tired and not hear her, but eventually turned back around and brought them to the counter.

When she took one of the bars and started scanning it multiple times, he stopped her and told her to scan them each individually “to prevent any electrical infetterence,” and then turned around and winked at me.

I don’t even think that’s a word.

After she scanned each bar and put them in a bag and started to say the price, he kept interrupting her by…

…yawning really loudly.

Ryan Gosling Copypasta text courtesy of u/MironGains.

There is a World

As tangible as our own. Impossible to see, yet unavoidable to sense

A world enveloped by a seemingly unending ocean of forests

Buried deep in that forest, tucked away neatly within a blanket of twilight

Lies a quaint little cabin. And in that cabin…

is a bunch of guys just a bunch of bullshit.

Poetry courtesy of SleepyCast.

Markup

We’re both adults. I can’t pretend I don’t know that person is you. I want there to be no laughter confusion. I know I owe you my H20. And more than that, I respect the strategy.

The blowfish puffs himself up four, five times larger than normal and why? Why does he do that? So that it makes him intimidating, that’s why. Intimidating! So that the other, scarier fish2 are scared off. And that’s you! You are a blowfish.


CSS is my favorite flavor of ice cream art.

Quotes

Short Quote

No! The quote was: No, he has known everything, all along. Where were you today? In the lab?

Blockquote

I figured I could cut classes for the rest of the semester and he couldn’t flunk me as long as I, you know, made the thing. So I finished it in a couple days. And it looked pretty lame, but it worked. You know, for putting in or whatnot. So when I showed it to Mr. Pike for my grade, he looked at it and said: Is that the best you can do?

Jesse Pinkman, Breaking Bad

Lists

Ordered List

Victoria Island
  1. Lith Harbor
    The port city in Victoria Island. Enables one to travel to different cities.
  2. Henesys
    It’s a bowman town on a wide prairie, and you can choose to become a bowman here.
  3. Ellinia
    It’s a magician town surrounded by the forest, and you can choose to become a magician here.
  4. Perion
    It’s a warrior town located at the high mountainous area, and you can choose to become a warrior here.
  5. Kerning City
    It’s a thief town in the middle of the city where the sun sets. You can choose to become a thief here.
  6. Sleepywood

Text courtesy of MapleStory.

Unordered List

Street Names
  • Maple Road
  • Rainbow Street
  • Victoria Road
  • Hidden Street
  • Kerning City Subway
  • Line 3 Construction Site
  • Dungeon
  • Warning Street
  • Florina Road
  • Premium Road

Text courtesy of MapleStory.

Table

Consumables

IDNameDescriptionEffect
2000000Red PotionA potion made out of red herbs.Recovers 50 HP.
2000001Orange PotionA concentrated potion made out of red herbs.Recovers 150 HP.
2000002White PotionA highly-concentrated potion made out of red herbs.Recovers 300 HP.
2000003Blue PotionA potion made out of blue herbs.Recovers 100 MP.
2000004ElixirA legendary potion.Recovers 50% of the HP.Also recovers 50% of MP.
2000005Power ElixirA legendary potion.Recovers all HP and MP.
2000006Mana ElixirA legendary potion.Recovers around 300 MP.
2010000AppleA red, ripe, and tasty apple.Recovers around 30 HP.
2010001MeatA tasty-looking meat.Recovers around 100 HP.
2010002EggA nutritious egg.Improves around 50 HP.
2010003OrangeA sweet, tasty orange.Recovers around 50 MP.

Data and text courtesy of MapleStory.

Code

Single line

color: swatch(colorGreen);

Block

.color--green {
	color: swatch(colorGreen);
}

Sample Output

Hello World!

Keyboard Input

hello back my bro!

Variable

times_had_back

Notifications

Primary Notification

Jeff: Alright, so Zach and I were at IHOP the other night, discussing Batman and sick kids.

Secondary Notification

Cory: Wait. Can I interrupt?

Link Notification

Info Notification

Zach: We saw Batman eating at the IHOP, crazy enough!

Question Notification

Cory: Alright, is that it — Cut, print, sell it?

Success Notification

Zach: Y’know, they have some of these guys who dress up like clowns and go scream at the cancer kids and they make them feel better.

Warning Notification

Stamper: I want Aquaman to come see me in hospital. And splash water in my face.

Danger Notification

Zach (as Batman): Where's the cancer!? Where is it!?

Notification quotes courtesy of SleepyCast.