Alchemical UI Kit

A collection of user interface elements styled after ancient manuscripts, alchemical diagrams, and arcane scrolls. Designed for a mystical or historical theme.

Codex & Script

Typography using classic serif fonts and dark ink colors on parchment backgrounds.

Primary Heading (H1)

Secondary Heading (H2)

Tertiary Heading (H3)

Quaternary Heading (H4)

This is standard paragraph text, styled as if written on aged parchment. Links appear as underlined references. Text may be emphasized using bold script or perhaps noted with italics for annotations. Specific formulas or terms are shown as inline code.

Further writings continue the discourse. In pulvere, solutionem invenies. Ut alius textus hic ponatur ad spatium demonstrandum.

Sigils & Actions

Buttons styled to resemble seals, plaques, or manuscript annotations.

Common Actions

Consult Codex 
<button class="button-alchemy">Transmute</button>
<a href="#" class="button-alchemy">Consult Codex</a>

Emphasis & Hierarchy

<button class="button-alchemy primary">Begin Ritual</button>
<button class="button-alchemy secondary">Scribe Notes</button>

Formulary Input

Form elements for recording observations, ingredients, or alchemical formulas.

Containment Glyphs

Panel elements for displaying sections of information, mimicking framed diagrams or text boxes.

A simple containment field holding textual observations. Vis Vires et Natura. Elementa chemica sunt fundamenta mundi.

Diagram Analysis

This glyph section features a descriptive header. Analysis suggests a correlation between the lunar phase and successful transmutation yield. Further study required.

Formula: Au + 3HNO₃ + 4HCl → HAuCl₄ + 3NO₂ + 3H₂O

Known Concoctions

A list of previously successful or documented experiments.

  • Elixir of Minor Restoration
  • Philosopher's Dew (Unstable)
  • Draught of Shadow Walking
Cross-reference: Vol. IV, Ch. 3 
<div class="panel-alchemy">
  <div class="panel-header-alchemy">
    <h3>Panel Title</h3>
  </div>
  <div class="panel-content-alchemy">
    Content...
  </div>
  <div class="panel-footer-alchemy">
    Footer...
  </div>
</div>

Oracular Notices

Alerts for conveying status, warnings, or results of alchemical processes.

Observation: The mixture emits a faint azure glow under moonlight.
Caution: Aetheric pressure rising. Vessel integrity may be compromised.
Note: Remember to cleanse the crucible after transmutation. 
<div class="alert-alchemy info">
  <strong>Observation:</strong> Message...
</div>
<div class="alert-alchemy warning">
  <strong>Caution:</strong> Message...
</div>