⌨️ Keyboard Shortcuts

Navigation

g + h Go to Home
g + b Go to Blog
g + a Go to About

Actions

/ Search
? Show shortcuts
Esc Close overlay

Scrolling

j Scroll down
k Scroll up
g + g Scroll to top
G Scroll to bottom
Esc
Quick Actions
🏠 Go to Home g h
📝 Go to Blog g b
⏰ What I'm doing now
👤 About Me g a
Terminal Commands
$ ls posts List all blog posts
$ ls tags List all tags
$ cat about.md Read about page
$ cd ~ Go to home

Design System Preview

Reader-First Blog Design System

Typography

Heading Font: Inter

The quick brown fox jumps over the lazy dog

Body Font: Georgia (Serif)

The quick brown fox jumps over the lazy dog. This is how body text will look in articles. Georgia provides excellent readability for long-form content.

Code Font: JetBrains Mono

const greeting = "Hello, World!";

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Color Palette

Light Mode

Background
#FAFAFA
Surface
#FFFFFF
Text
#1A1A1A
Muted
#6B7280
Accent
#2563EB

Dark Mode

Background
#0F0F0F
Surface
#1A1A1A
Text
#E5E5E5
Muted
#9CA3AF
Accent
#60A5FA

Content Elements

Paragraph

This is a paragraph with bold text, italic text, and a link. The line height is set to 1.75 for comfortable reading.

Blockquote

"The ADHD paradox: intensely focused on one thing, yet exploring every layer beneath it."

Lists

  • Unordered list item one
  • Unordered list item two
  • Unordered list item three

Code

const designSystem = {
  typography: 'Inter + Georgia',
  colors: 'Soft & Comfortable'
};

Spacing

Content Width: 680px optimal

Container: 1200px max

Buttons

Primary Secondary

Dark Mode

Toggle dark mode di header untuk melihat perubahan warna.

WCAG AA Compliant: Contrast ratio 4.5:1 minimum