Stylebook

A living reference of all components, typography, and styles used across bartz.works. Organized following CUBE CSS methodology.

Design Tokens

Colors

--clr-bg:          hsl(48, 11%, 91%)    /* Parchment background */
        --clr-text:        hsl(225, 75%, 52%)   /* Blue — links, headings, primary UI */
        --clr-hover:       hsl(223, 85%, 61%)   /* Lighter blue — hover/active */
        --clr-body:        hsl(219, 5%, 27%)    /* Near-black — body text */
        --clr-tomato:      hsla(9, 100%, 60%)   /* Red-orange accent */
        --clr-yellow:      hsl(41, 100%, 65%)   /* Warm yellow accent */
        --clr-turquoise:   hsl(181, 55%, 41%)   /* Teal accent */

Type Scale

Major Third (1.25) via Utopia — from --fs-0 to --fs-11

fs-8 — 3.552rem

fs-7 — 3.052rem

fs-6 — 2.441rem

fs-5 — 1.953rem

fs-4 — 1.563rem

fs-3 — 1.25rem (body)

fs-2 — 1rem

fs-1 — 0.8rem

fs-0 — 0.64rem

<p style="font-size: var(--fs-8);">fs-8 — 3.552rem</p>
        <!-- Or use utility classes: -->
        <p class="font-xxxl">font-xxxl</p>
        <p class="font-xxl">font-xxl</p>
        <p class="font-xl">font-xl</p>
        <p class="font-lg">font-lg</p>
        <p class="font-md">font-md</p>
        <p class="font-sm">font-sm</p>
        <p class="font-xs">font-xs</p>
        <p class="font-xxs">font-xxs</p>
        <p class="font-xxxs">font-xxxs</p>

Spacing Scale

Fluid spacing via Utopia clamp() functions.

Shadows

Two tokens using relative-color lightness formulas. Applied by default on interactive elements — no class needed for typical use.

Hover/focus — --shadow-text

--shadow-text:    /* 4-layer depth, 7px max offset — buttons, containers, code blocks */
        --shadow-text-sm: /* 4-layer depth, 4px max offset — inline code, smaller elements */
        
        /* Used on: .btn:hover, .btn:focus, .toc-sidebar a.toc-active,
                    .container-blue, :not(pre) > code, pre[class*="language-"] */

Base Styles

Headings

Heading 1

<h1>Heading 1</h1>

Heading 2

<h2>Heading 2</h2>

Heading 3

<h3>Heading 3</h3>

Heading 4

<h4>Heading 4</h4>

Font Families

Fraunces — Primary / Heading font .font-heading

IBM Plex Mono — Monospace font .font-fixed

Italic text .font-italic

<p class="font-heading">Fraunces — Primary / Heading font</p>
        <p class="font-fixed">IBM Plex Mono — Monospace font</p>
        <p class="font-italic">Italic text</p>

Text Styles

Regular body text at --fs-3 (1.25rem). Max prose width is 60ch.

Subheading — italic, fs-4, used below page titles

Subnote — mono, fs-1, used for dates, captions, and metadata

Breadcrumb / trail / example

Faded text — reduced lightness for secondary content

"A pull-quote styled with heading weight and large size."

Text with emphasis and strong words inline.

<p>Regular body text</p>
        <p class="subheading">Subheading</p>
        <p class="subnote">Subnote</p>
        <p class="breadcrumb"><a href="#">Breadcrumb</a> / trail</p>
        <p class="faded-text">Faded text</p>
        <p class="quotebump">"Pull-quote text."</p>
        <p>Text with <em>emphasis</em> and <strong>strong</strong> words.</p>

Links

This is a local link with a tomato underline.

This is an external link — note the arrow icon appended automatically.

This is a mailto link — note the stamp icon.

<a href="#">Local link</a>
        <a href="https://example.com">External link</a>
        <a href="mailto:hello@example.com">Mailto link</a>

Paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quibusdam vero animi, voluptate vitae accusantium assumenda dignissimos iure eum facilis illum magnam eveniet earum est, rem sequi similique! Ipsa, molestias!

<p>Lorem ipsum dolor sit amet...</p>

Lists

Ordered List

1. First item — custom numbered markers in mono
2. Second item
3. Third item

<ol>
        	<li>First item</li>
        	<li>Second item</li>
        	<li>Third item</li>
        </ol>

Unordered List

• Item one — yellow bullet markers
• Item two
• Item three

<ul>
        	<li>Item one</li>
        	<li>Item two</li>
        	<li>Item three</li>
        </ul>

No-decoration List

• Item without bullet
• Another clean item

<ul class="no-list-decor">
        	<li>Item without bullet</li>
        </ul>

Blockquote

This is a blockquote. It uses the primary font at fs-5 with italic styling and a deep text shadow effect.

<blockquote>
        	This is a blockquote.
        </blockquote>

With attribution

This is a blockquote with an attribution line below it.

Joshua Bartz
Designer, bartz.works

<blockquote>
        	Quote text here.
        	<div class="subnote quote-attribution">
        		<strong>Name</strong><br>
        		Title, Organization
        	</div>
        </blockquote>

Drop Cap

Auto-applied via CSS selector — no class needed. Uses initial-letter: 2 (2-line drop cap) with italic heading variation.

<!-- No class needed. Place post content in #post-body: -->
        <section id="post-body">
        	<p>First paragraph gets a drop cap automatically.</p>
        	<h2>After this heading...</h2>
        	<p>...this paragraph also gets a drop cap.</p>
        </section>
        
        /* CSS selectors (automatic): */
        /* #post-body > p:first-of-type::first-letter */
        /* #post-body > h2 + p::first-letter           */
        /* blockquote :first-of-type::first-letter     */

End Mark

Auto-applied to the last paragraph inside #post-body — no class needed. Renders a small rotated square in --clr-tomato.

<!-- No class needed. The last <p> in #post-body gets the mark: -->
        /* #post-body > p:last-child::after */
        /* Also applied before <hr class="footnotes-sep"> if present */

Footnotes

Rendered by the markdown-it-footnote plugin. Inline refs become sup > a styled in tomato. The footnote list uses .footnotes-list.

Text with a footnote.[^1]
        
        [^1]: This is the footnote definition.

<!-- Rendered output structure: -->
        <p>Text with a footnote.<sup><a href="#fn1">1</a></sup></p>
        
        <hr class="footnotes-sep">
        <ol class="footnotes-list">
        	<li id="fn1">
        		<p>This is the footnote definition. <a href="#fnref1" class="footnote-backref">↩</a></p>
        	</li>
        </ol>

Horizontal Rule

A short rule with a centered pilcrow (¶):

<hr>
        <!-- Or in Markdown: --- -->

Composition

Grid Utilities

Grid systems from 3 to 5 columns. Collapse to single column on mobile.

Three columns

Four columns

<div class="grid-thirds">...</div>
        <div class="grid-fourths">...</div>
        <div class="grid-fifths">...</div>
        
        <!-- Span utilities -->
        <div class="grid-column">1 col</div>
        <div class="grid-double-column">2 cols</div>
        <div class="grid-quadruple-column">4 cols</div>

Utility

Utility Classes

.no-link-decor — removes underline from links

<span class="no-link-decor"><a href="#">No decoration link</a></span>

Icons

Custom icon font "jshbrtz"

.icon-external — auto-appended to external links

.icon-stamp — auto-appended to mailto links

.icon-back

.icon-forward

.icon-glasses

.icon-rotate

<span class="icon-external"></span>
        <span class="icon-stamp"></span>
        <span class="icon-back"></span>
        <span class="icon-forward"></span>
        <span class="icon-glasses"></span>
        <span class="icon-rotate"></span>

Block

Buttons

Standard Button

↗

<a href="#" class="btn">Standard Button</a>
        <a href="#" class="btn-icon">&#x2197;</a>

Highlights

Animated gradient text

<span class="highlight-anim-text">Animated gradient text</span>

Inline Code

Use inline code for short references. Styled in mono with a subtle container.

<p>Use <code>inline code</code> for short references.</p>

Code Block

// Syntax-highlighted code block (PrismJS)
        const greeting = "Hello, world";
        console.log(greeting);

Callouts

Paired shortcode: callout color, id, title

{% callout "yellow", "demo-yellow", "Yellow Callout" %}
        Content goes here.
        {% endcallout %}
        
        {% callout "tomato", "demo-tomato", "Tomato Callout" %}
        Content goes here.
        {% endcallout %}
        
        {% callout "blue", "demo-bg", "Blue Callout" %}
        Content goes here.
        {% endcallout %}

Containers

Standalone colored containers with drop-shadow effects.

<div class="container-yellow">...</div>
        <div class="container-tomato">...</div>
        <div class="container-blue">...</div>

TOC Sidebar

Auto-rendered in post.html when a post has 2 or more headings. Uses IntersectionObserver to highlight the active heading with .toc-active. Sticky on desktop, full-width on mobile.

<div class="post-with-toc">
        	<nav class="toc-sidebar" aria-label="Table of contents">
        		<p class="toc-title">Table of contents</p>
        		<!-- TOC links rendered by eleventy-plugin-toc -->
        	</nav>
        	<section id="post-body" aria-label="Article content">
        		<!-- post content -->
        	</section>
        </div>

Blogroll / Article List

List pattern for article and note index pages.

• Article Title

  A short description of the article goes here, clamped to two lines.

  February 21, 2026

<ul class="no-list-decor">
        	<li class="blogroll">
        		<article class="blogroll-link">
        			<a href="/post-url/" class="no-link-decor">
        				<h3 class="blogroll-title">Post Title</h3>
        				<p>Description text.</p>
        				<p class="subnote">February 21, 2026</p>
        			</a>
        		</article>
        	</li>
        </ul>

Media Lists

Responsive auto-fill grid for books, albums, and other media. Uses minmax(10rem, 1fr).

<ul class="no-list-decor media-lists">
        	<li>
        		<a class="no-link-decor" href="https://example.com">
        			<article class="media-link">
        				<img class="img-screenshot" src="/img/cover.jpg" alt="&quot;Title&quot;, by Author">
        				<h3>Title</h3>
        				<p class="subnote">Author Name</p>
        			</article>
        		</a>
        	</li>
        </ul>

Logo Row

Centered flex row for partner or client logos. Each image is constrained to max-width: 10rem; max-height: 4rem.

<div class="full-width">
        	<div class="logo-row">
        		<picture>
        			<img src="/img/logos/company.svg" alt="Company Name">
        		</picture>
        		<picture>
        			<img src="/img/logos/other.svg" alt="Other Company">
        		</picture>
        	</div>
        </div>

Shortcodes Reference

Eleventy shortcodes defined in eleventy.config.js

leftNav

Renders a .left-nav with .btn links. First item is "All", then a separator, then category links. aria-current="page" applied to the matching href.

        {# Single image with optional caption #}
        {% imageSingle "/img/path/to/image.jpg", "Alt text", "Caption" %}
        
        {# Single video with optional caption #}
        {% videoSingle "/img/path/to/video.mp4", "Alt text", "Caption" %}
        
        {# Left navigation #}
        {% leftNav [
        	{ label: "All", href: "/library/" },
        	{ label: "Reading", href: "/reading" }
        ], "/library/" %}
        
        {# Callout (paired) #}
        {% callout "yellow", "my-id", "My Title" %}
        Callout content here.
        {% endcallout %}
        
        {# Image row (paired) #}
        {% imageRow "Caption text", "row-id" %}
        	<img src="/img/photo1.jpg" alt="Photo 1" />
        	<img src="/img/photo2.jpg" alt="Photo 2" />
        {% endimageRow %}
        
        {# Copyright year #}
        {% copyrightyear %}