Chapter Text

Using Inklings

Inklings is a literary-inspired AO3 work skin built around the EB Garamond and Cormorant Garamond typefaces, a warm parchment-and-sage palette, and a collection of decorative formatting classes intended for archival, epistolary, and prose-heavy fiction. The skin includes drop caps, ornamental dividers, journal entries, manuscript pages, formal letters, epigraphs, author note boxes, and styled footnotes.

The complete CSS for this skin is included in the next chapter for ease of copying.

How to install: Go to Dashboard → Skins → Work Skins → Create Work Skin, paste the CSS into the skin editor, save it, then select the skin when posting or editing a work.

To use the formatting classes below, switch AO3's chapter editor into HTML mode using the <> button and paste the snippets directly into your chapter text.

Font note: The skin loads EB Garamond and Cormorant Garamond through Google Fonts. Readers whose browsers block external font loading will instead see Georgia or their device serif fallback.

General advice: This skin works best when decorative elements are used sparingly. Most prose should remain relatively clean and readable, allowing journals, letters, and ornamental formatting to stand out when they appear.

DROP CAP — .chapter-open

Apply to your opening paragraph. The first letter is automatically styled in crimson Cormorant Garamond.

In-text reference:

<p class="chapter-open">
The thesis had a shape now.
</p>

Rendered Example:

The thesis had a shape now.

HEADINGS — h2, h3, h4, h5

Use h2 for chapter or part titles, h3 for section headings, h4 for sub-headings (such as letters or extracts), and h5 for datelines or subtitles.

In-text reference:

<h3>Part Two</h3>
<h4>i. The Letter</h4>
<h5>Letter the First</h5>
<h6>circa autumn, year unknown</h6>

Rendered Example:

Part Two

i. The Letter

Letter the First

circa autumn, year unknown

INLINE TEXT STYLES — em, strong, q

<em> renders in blue-grey italic — useful for emphasis, remembered speech, or interiority. <strong> is dark and weighted. <q> renders in warm rust italic — useful for embedded dialogue or internal thought within narration.

<p>
She had <em>not</em> expected this.
<strong>It mattered.</strong>
He said, <q>I suppose it does.</q>
</p>

Rendered Example:

She had not expected this. It mattered. He said, I suppose it does.

BLOCKQUOTE / EPIGRAPH

Warm parchment styling with a gold left border. Useful for epigraphs, quotations, poetry, or embedded texts.

In-text reference:

<blockquote>
  <p>
    The world is full of doors, and not all of them are visible.
  </p>

  <p>
    — <em>fragment attributed to an anonymous traveller</em>
  </p>
</blockquote>

Rendered Example:

The world is full of doors, and not all of them are visible.

— fragment attributed to an anonymous traveller

SECTION BREAKS — hr and .section-break

The <hr> tag renders an ornamental divider. Use .section-break for a text ornament instead.

<hr />

<div class="section-break">✶ ✶ ✶</div>

Rendered Example:

DIALOGUE

Standard dialogue should remain in regular paragraph tags. Use <q> for remembered speech, embedded dialogue, or internal thought.

<p>
"Standard dialogue in a paragraph."
</p>

<p>
She thought, <q>this cannot go on.</q>
</p>

Rendered Example:

"Standard dialogue in a paragraph."

She thought, this cannot go on.

JOURNAL ENTRY — .journal-entry

Handwritten text on a softly textured paper background, with optional annotations and location tags.

In-text reference:

<div class="journal-header-note">
The following is excerpted from a personal journal.
</div>

<div class="journal-entry">

  <div class="journal-header">
    <p class="journal-date">14 October 1949</p>

    <span class="journal-location">
      Oxford<br />
      after midnight
    </span>
  </div>

  <p>
    I do not think grief leaves. I think it simply learns the house and
    moves quietly through it at night.
  </p>

  <div class="journal-annotation">
    Added later in different ink: this was the first entry she reread.
  </div>

</div>

Rendered Example:

DRAFT / MANUSCRIPT PAGE — .draftpage

Useful for drafts, annotations, manuscript fragments, or writing-process scenes.

In-text reference:

<div class="draftpage">

  <p>
    What the traveller believes is, in the end, immaterial.
  </p>

  <p>
    The threshold does not require belief. It requires only proximity.
  </p>

  <p>
    The traveller does not choose the sovereignty — they are chosen for it.
  </p>

</div>

Rendered Example:

FORMAL LETTER — .admission-letter

Designed for formal correspondence, institutional notices, telegrams, or archival documents.

In-text reference:

<div class="admission-letter">

  <div class="letter-header">

    <p class="letter-institution">
      University of Oxford
    </p>

    <p class="letter-department">
      Faculty of English Language and Literature
    </p>

  </div>

  <p class="letter-date">
    17th November, 1951
  </p>

  <p>
    Dear Miss Pevensie,
  </p>

  <p>
    Your application has been provisionally approved.
  </p>

</div>

Rendered Example:

AUTHOR NOTE BOX — .author-note

A centered note box useful for content warnings, commentary, or end notes.

In-text reference:

<div class="author-note">
  <p>
    Lucky for Susan, anecdotal evidence doesn't hold up in peer review.
  </p>
</div>

Rendered Example:

FOOTNOTES — .fn-ref, .footnotes, .footnote

Footnotes in Inkwell are designed to simulate archival annotation — marginal commentary, scholarly aside, or narrative intrusion layered beneath the main text. They create a secondary reading space at the end of the chapter, visually separated but structurally tied to the prose above.

Each footnote consists of two parts: a reference marker placed within the body text, and a corresponding entry in a dedicated footnotes block at the end of the chapter.

In-text reference:

<p>
The argument had been established in earlier folklore studies<a class="fn-ref">[1]</a>
but rarely expanded in structural terms.
</p>

Footnotes block (placed at the end of the chapter):

<div class="footnotes">

  <div class="footnote">
    <p>
      <span class="footnote-symbol">[1]</span>
      A reference to early comparative folklore scholarship treating thresholds as narrative devices rather than ontological structures.
    </p>
  </div>

</div>

Rendered example:

The argument had been established in earlier folklore studies[1] but rarely expanded in structural terms.

In practice, footnotes function as a secondary narrative layer. They may remain strictly academic, or they may develop a voice of their own depending on how they are used across a work.

RENDERED EXAMPLE — LONGFORM PROSE

This excerpt demonstrates standard prose styling, ornamental dividers, inline dialogue styling, and literary pacing within the skin, including the footnote system as a structural annotation layer.

November, and the study was cold by ten.

Mrs. Macready banked the fire before she went to bed and Susan let it go down again. The drive to Oxford was fifteen minutes in the Rover. She had learned which roads held ice in January, and which roads to avoid unless the moon was out. The Bodleian kept late hours. She kept later ones.

The blue-curtained room at the end of the east corridor was empty now.

She was aware of this the way she was aware of the other unused rooms — not as absence exactly, more as a quality of the house in winter, the cold that came off certain doors.

Then write it. That's all there is to it.

She had written it.[1]

The argument, once stated, did not behave like something finished. It accumulated instead — like sediment, like dust in the margins of books that had not been moved in months.

She did not correct it.

She expanded it.

RECOMMENDED WORKFLOW

Write and edit your chapter normally first, then add formatting afterwards. Decorative styling is usually most effective when it reinforces structure rather than overwhelming it.

• Use .chapter-open once per chapter
• Reserve .journal-entry and .draftpage for inserted documents
• Use <blockquote> for epigraphs and quoted texts
• Use ornamental dividers sparingly between major scene or perspective shifts
• Keep most prose in standard paragraph formatting for readability

The skin is intentionally restrained and designed to resemble a worn literary edition rather than a heavily graphic webpage.

KNOWN AO3 QUIRKS

AO3 strips certain CSS properties for security reasons, and some spacing or font rendering may vary slightly across browsers and mobile devices. External images used in ornamental dividers may also render inconsistently depending on screen width and reader settings.

Skin design and formatting classes by TheArbiterofFate.