Style Guide

September 1, 2024 1 min read

This is the living visual reference for zaki.gg. Each specimen below is a movable component block; all of the explanation, headings, lists, and examples remain ordinary editable note blocks.

Colors

Surface, content, and theme tokens should remain legible across every color theme.

Buttons

Buttons share shape, spacing, focus behavior, and disabled treatment while their variants communicate emphasis.

Cards

Cards establish elevation through surface color, border treatment, and spacing rather than decorative complexity.

Forms

Inputs need persistent labels, visible focus states, comfortable targets, and useful placeholder examples.

Typography

Good defaults let notes read naturally without requiring one-off classes on every element. The hierarchy should remain obvious when prose includes bold text, italics, links, and inline code.

Typography should make structure visible without competing with the writing.

Lists

Unordered lists use theme-colored markers.
Wrapped lines align with their text rather than the marker.
- Nested lists indent consistently.
- Their marker style remains distinct.

Ordered lists preserve meaningful sequence.
Spacing stays consistent with unordered lists.
Multiple paragraphs can still belong to one item.

Code

Plain Text

			
			const excellentDefault = {
	readable: true,
	editable: true,
	themed: true
};