A CSS Design System

Tarot Card

Divination through design. Ornate golden frames, celestial symbolism, and the infinite wisdom of the Major Arcana — rendered in code.

✦ ✧ ✦ ✧ ✦
✳ ✦ ✳
I — The Magician

Color Palette

The chromatic arcana — each hue drawn from the celestial vault

Core Palette

Midnight Purple #1a0e2e
Deep Indigo #251749
Mystic Indigo #3a2568
Celestial Gold #d4a847
Star White #f5f0e8
Moon Silver #c8c0d4

Accent Palette

Candlelight Amber #e89f45
Arcana Red #8b2e3b
Oracle Teal #2e7a7a
Spirit Violet #7a4a9a
Void Black #0d0818
Gold Bright #e8c35a
☽ ☉ ☾
II — The High Priestess

Typography

The sacred letters — inscribed with reverence and intent

Display — Cinzel 700
The Wheel of Fortune
3.2rem · tracking 0.08em · 700 weight
Heading — Cinzel 600
Major Arcana & Minor Arcana
1.8rem · tracking 0.06em · 600 weight
Subheading — Bodoni Moda Italic 500
The cards speak in whispers to those who learn to listen
1.4rem · italic · 500 weight
Body — Cormorant Garamond 400
The tarot is a mirror reflecting the querent’s inner landscape. Each card in the deck carries a symbolic weight accumulated over centuries of esoteric tradition, from the Egyptian mysteries through the Renaissance courts of northern Italy. The Major Arcana traces the Fool’s journey from innocence to enlightenment, while the four suits of the Minor Arcana map the elemental forces of daily existence.
1.1rem · line-height 1.8 · 400 weight
Caption — Bodoni Moda Italic 400
Reversed cards suggest blocked energy or an inward turn of the archetype’s meaning — not necessarily negative, but always worthy of deeper reflection.
0.85rem · italic · 400 weight
✦ ★ ✦
III — The Empress

Spacing

Sacred geometry — the breath between the symbols

XS
4px
SM
8px
MD
16px
LG
24px
XL
32px
2XL
48px
3XL
64px
4XL
96px
✠ ✦ ✠
IV — The Emperor

Buttons

Actions of will — each press a declaration of intent

Standard Buttons
Size Variants
Disabled State
✡ ☉ ✡
V — The Hierophant

Forms

The querent speaks — gathering intention before the reading

The name anchors the reading to the querent’s energy
✴ ✦ ✴
VI — The Lovers

Cards & Panels

The arcana revealed — containers for the mysteries

The Sun
Joy, success, vitality, and the radiance of truth illuminating all shadows. The child rides forth on a white horse, naked and unashamed.
XIX
The Moon
Intuition, illusion, and the subconscious mind. The path between the two towers winds through dreams and hidden fears.
XVIII
The Star
Hope, renewal, and serenity after the storm. The naked figure pours water upon the earth and into the pool of consciousness.
XVII
The Spread

In a Celtic Cross spread, the first card represents the present situation. The second card, laid across the first, reveals the immediate challenge or obstacle. Each subsequent card builds a narrative — past influences, conscious goals, the subconscious undercurrent, the near future, the querent’s self-perception, environmental factors, hopes and fears, and finally, the likely outcome.

Elemental Correspondences

Wands — Fire. Will, inspiration, enterprise.
Cups — Water. Emotion, intuition, relationships.
Pentacles — Earth. Material world, craft, prosperity.
Swords — Air. Intellect, conflict, truth.

✳ ✦ ✳
VII — The Chariot

Alerts

Messages from the ether — omens and portents for the interface

☉ Oracle’s Guidance

The cards have been shuffled and the spread is ready. Focus your intention upon the question before turning the first card.

★ Favorable Alignment

The celestial houses are in harmony. This reading carries strong positive energy. The Sun and Star both appear upright in significant positions.

☽ Mercury Retrograde

Communications may be clouded during this period. Review the Swords suit carefully and consider whether messages are being received as intended.

✠ The Tower Reversed

A significant upheaval approaches. The querent should prepare for transformation. What falls away was built upon unstable foundations.

✦ ✧ ✦
VIII — Strength

Navigation

Pathways through the arcana — wayfinding between the mysteries

✴ ★ ✴
IX — The Hermit

Design Principles

The hermit’s lantern illuminates the path of creation

Ornate Borders

Every element is framed with intention. Double and triple borders create depth and suggest the layered symbolism of the tarot tradition.

Celestial Light

Gold emerges from deep purple as starlight from the void. The palette evokes candlelit readings and gilded medieval manuscripts.

Sacred Rhythm

Spacing follows a deliberate scale like the numbered cards of each suit. Breath between elements creates reverence and focus.

Symbolic Type

Display text commands authority through Cinzel’s Roman capitals. Body text flows in Cormorant Garamond’s scholarly elegance.