Gichuki

This website’s mini design system

Fonts

`--font-sans`

I met a traveler from an antique land, who said Two vast and trunkless legs stand in the desert, near them, on the sand, A shattered visage lies, whose frown, and wrinkled lip and sneer of cold command tell that its sculptor well those passions read. And on the pedestal these words appear << My name is Ozymandias, King of Kings, look at my works ye mighty, and despair >> Nothing beside remains, round the decay of that colossal wreck, the plain and level sands stretch far away.

`--font-serif`

I met a traveler from an antique land, who said Two vast and trunkless legs stand in the desert, near them, on the sand, A shattered visage lies, whose frown, and wrinkled lip and sneer of cold command tell that its sculptor well those passions read. And on the pedestal these words appear << My name is Ozymandias, King of Kings, look at my works ye mighty, and despair>> Nothing beside remains, round the decay of that colossal wreck, the plain and level sands stretch far away.

`--font-mono`

/**
 * This is a dummy typescript block code to display
 * @example
 * const dummy = new DummyClass();
 * console.log(dummy.dummyMethod());
 */
class DummyClass {
  dummyMethod(): string {
    return "I'm a dummy method";
  }
}

`--font-nanum`

I met a traveler from an antique land, who said Two vast and trunkless legs stand in the desert, near them, on the sand, A shattered visage lies, whose frown, and wrinkled lip and sneer of cold command tell that its sculptor well those passions read. And on the pedestal these words appear << My name is Ozymandias, King of Kings, look at my works ye mighty, and despair >> Nothing beside remains, round the decay of that colossal wreck, the plain and level sands stretch far away.

`--font-jalliya`

the elusive beauty of imperfection.

Colors

Text Colors

Background Colors

State Colors

Elements

Lists

Build a house.
Paint the house.
Rest.

Build a house.
Paint the house.
Rest.

Inline code

In this case, when a button has both intent: "primary" and size: "medium", it automatically gets the bg-red-500 class added.

Blockquote

This is a blockquote. This paragraph is also part of the quote.

Link

In the 1840s, Urbain Le Verrier used Newtonian mechanics to predict the position of the then-undiscovered planet Neptune after analyzing perturbations in the orbit of Uranus.

Strikethrough

~~The world is flat.~~

Image

Starry Night, an oil-on-canvas painted by Dutch painter Vincent van Gogh

Table

Token	Value	Usage
`--primary-500`	`#3b82f6`	Primary buttons, links
`--success-500`	`#10b981`	Success states, confirmations
`--warning-500`	`#f59e0b`	Warnings, cautions
`--error-500`	`#ef4444`	Errors, destructive actions
`--gray-500`	`#6b7280`	Secondary text, borders

Emojis

Emoji	Shortcode
😄	`:smile:`
😆	`:laughing:`
😊	`:blush:`
😃	`:smiley:`
😏	`:smirk:`
😍	`:heart_eyes:`

emoji cheatsheet

Highlight

I need to highlight these very important words

Task lists

Write the press release
Update the website
Contact the media

Here’s a sentence with a footnote. ¹

This is the footnote ↩