Heading 1 — The foundation of visual hierarchy

Heading 2 — Crafting digital experiences with precision

Heading 3 — Typography is the foundation of clear communication

Heading 4 — A minimalist approach to modern web layout design

Heading 5 — Attention to detail makes the difference in every pixel

Heading 6 — Subtle elegance and functional block structures

Blockquotes & Pullquotes

Single-line Blockquote:

Simplicity is about subtracting the obvious and adding the meaningful.

Multi-line Blockquote with Citation:

Emptiness does not mean nothingness; rather, it is a state of potential and receptive space where creative possibilities can breathe. When we clear away unnecessary elements from visual communication, we allow the essential message to emerge naturally. Minimalist design is not about making things simple, but about finding the intrinsic clarity within complex systems through thoughtful discipline and restraint.

John Maeda, The Laws of Simplicity

Pullquote:

Design with purpose. Create with clarity.

Yellow Suna

Tables

Regular Table Style (Hiragana Syllabary):

Hiragana Syllabary	A	I	U	E	O
—	あ	い	う	え	お
K	か	き	く	け	こ
S	さ	し	す	せ	そ
T	た	ち	つ	て	と
N	な	に	ぬ	ね	の
H	は	ひ	ふ	へ	ほ
M	ま	み	む	め	も
Y	や	—	ゆ	—	よ
R	ら	り	る	れ	ろ
W	わ	—	—	—	を
n	ん	—	—	—	—

Striped Table Style (Katakana Syllabary):

Katakana Syllabary	A	I	U	E	O
—	ア	イ	ウ	エ	オ
K	カ	キ	ク	ケ	コ
S	サ	シ	ス	セ	ソ
T	タ	チ	ツ	テ	ト
N	ナ	ニ	ヌ	ネ	ノ
H	ハ	ヒ	フ	ヘ	ホ
M	マ	ミ	ム	メ	モ
Y	ヤ	—	ユ	—	ヨ
R	ラ	リ	ル	レ	ロ
W	ワ	—	—	—	ヲ
n	ン	—	—	—	—

Lists & Definitions

Definition List (<dl>):

Kanso (簡素)

Simplicity and the deliberate removal of unnecessary elements. Things are expressed in a plain, simple, and natural manner.

Fukinsei (不均整)

Asymmetry or irregularity. Finding balance through dynamic, non-symmetrical proportions.

Shibui (渋い)

Subtle, understated beauty. Design that is unobtrusive, refined, and intrinsically quiet.

Yugen (幽玄)

Profound grace and subtlety. A sense of depth and mystery that evokes feeling rather than showing everything.

Unordered List (Nested):

• First level list item
  • Second level nested item
    • Third level deeper item
    • Another third level item
    • Additional third level item
  • Second level sibling item
  • Second level final item
• First level second item
• First level third item

Ordered List (Nested with Start & Reversed Attributes):

8. First level item (starts at 8)
   1. Second level standard item
      1. Third level item (reversed order)
      2. Third level item
      3. Third level item
      4. Third level item
   2. Second level item
   3. Second level item
9. First level item 9
10. First level item 10

HTML Elements & Text Formatting

A reference guide demonstrating standard HTML elements and typographic tags, styled according to the Yellow Suna design system.

Address Tag

Tokyo National Museum
13-9 Ueno Park, Taito-ku
Tokyo 110-8712, Japan

Anchor Tag (Link)

Explore more about Japan and discover its landscapes, traditions, and culture.

Abbreviation Tag

The term FSE refers to modern WordPress block-based theme architecture.

Cite Tag

“The journey itself is my home.” — Matsuo Bashō

“The tea room is a house of dreams.” — Okakura Kakuzō, The Book of Tea

Code Tag

Inline code snippets like body { background-color: #fcfbfa; } retain fixed-width alignment within regular paragraphs.

Delete Tag

This line shows outdated specifications that have been revised in the current release.

Emphasize and Italic Tags

Use emphasis for subtle semantic stress or italics for foreign terms like Wabi-sabi.

Horizontal Rule Tag

---

Insert Tag

Highlights newly introduced features during document revision steps.

Keyboard Tag

Press Ctrl + C + F to copy selected text.

Preformatted Tag

  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  An old silent pond...
  A frog jumps into the water,      /\_/\
  splash! Silence again.           ( o.o )
                                    > ^ <
  -- Matsuo Basho (1644–1694)
  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Inline Quote Tag (<q>)

Kenzo Tange famously remarked: Architecture must have something that appeals to the human heart.

Small Tag

Useful for disclaimers, legal notices, or fine print details at the end of a layout.

Strong and Bold Tags

Apply strong importance for key concepts or bold styling for visual emphasis.

Subscript Tag

Standard chemical notation: H₂O and CO₂ rely on subscript vertical alignment.

Superscript Tag

Mathematical calculations: 10² = 100 or footnote indicators^[1] rely on superscript formatting.

Underline Tag

Renders underlined text for specific stylistic highlights.

Variable Tag

In equations, variables such as x, y, and z are displayed in a mathematical font style.

Site Title and Tagline Blocks

Yellow Suna

A Multipurpose WordPress Theme