Style Guide & Design System
Living design system, typographic hierarchy, and UI component showcase for Castly theme.
Welcome to the Style Guide. This page is designed to showcase all the typographic styles, formatting elements, and layout patterns available within the theme. It serves as a visual playground for testing the theme's design system, margins, line heights, and typography pairing.
Typography & Headings
Good typography is silent; it is the skeleton that supports the architecture of words. The theme has been built with an elegant, responsive typographic scale that adapts seamlessly across all devices.
Heading Level One (H1)
This is a standard paragraph following an H1 heading. It displays the primary paragraph typography including size, line-height, margin, and weight configuration.
Heading Level Two (H2)
This is a standard paragraph following an H2 heading. Notice the spacing above and below headings to ensure high legibility and breathing room.
Heading Level Three (H3)
This is a standard paragraph following an H3 heading. H3 headings are typically used to split sub-sections of a long essay or article.
Heading Level Four (H4)
This is a standard paragraph following an H4 heading. Typically used for secondary elements or sidebar widgets.
Table
| Heading 1 | Heading 2 | Heading 3 | Heading 4 | Heading 5 |
|---|---|---|---|---|
| Data content 1 | Data content 2 | Data content 3 | Data content 4 | Data content 5 |
| Data content 1 | Data content 2 | Data content 3 | Data content 4 | Data content 5 |
| Data content 1 | Data content 2 | Data content 3 | Data content 4 | Data content 5 |
| Data content 1 | Data content 2 | Data content 3 | Data content 4 | Data content 5 |
| Data content 1 | Data content 2 | Data content 3 | Data content 4 | Data content 5 |
Markdown
MarkDown Title Bold
MarkDown Title Italic
- Unordered Item line one
- Unordered Subitem line one
- Unordered Subitem line two
- Unordered Subitem line three
- Unordered Item line two
- Unordered Item line three
- Ordered Item line one
- Ordered Item line two
- Ordered Item line three
Good content is easy to read and even easier to remember. Use highlighted text to emphasize important details, spotlight key takeaways, or make essential information stand out at a glance.
Links
Ghost makes linking effortless. Castly theme to create an instant link, or customize the anchor text to keep your content clean, readable, and engaging.
Images
Buttons
Call to action button
Bookmark
Bookmark cards transform ordinary links into beautiful, interactive previews. Simply paste a URL into the Ghost editor, and it automatically fetches the page's metadata—such as the title, description, image, and publisher—to create a visually appealing card. This helps highlight recommended resources, references, articles, and external content without interrupting the reading experience.
Priya Shah
Gallery
Callouts
Sign Up
Collapsible (Toggle)
First toggle title
First toggle Content
Second toggle title
Second toggle content
Video
Audio
Upload Media
Headings & Font Hierarchy
Sonic Resonance & Audio Storytelling
Deep Investigations & Narrative Audio Essays
Episode 48: The Architecture of Modern Silence
Field Recording Notes & Lossless Audio Stems
Castly is engineered for seamless long-form reading and listening. With calibrated contrast ratios, dynamic dark-mode compatibility, and balanced optical margins, editorial stories and episode transcripts remain effortlessly legible across all viewports.
Dynamic Color Palette
Interactive Buttons & Badges
Pull Quotes & Callout Cards
"Sound has an immediate emotional gateway to the human subconscious that visual media can never quite replicate."
For the best spatial sound immersion, listening with lossless over-ear studio headphones is recommended.