N° 006 / THE SYSTEM
36.8008° N · 10.1800° E
Home/Patterns
The Design System

The system.

Not a style guide — a discipline. Color, type, motion, and components, each carrying the same conviction: built in Tunis, legible in three scripts, recognizable anywhere. Every page on MYNTHISM is assembled from the parts below.

6Colors
4Typefaces
1Easing
3Scripts
Color · six values · two canvases

Crimson on ivory. Crimson on obsidian.

N° 01 · var(--bg)
Ivory
#faf8f4
Canvas — paper, sovereign, breathing
N° 02 · var(--surface)
Surface
#f5f1e8
One level elevated — cards, footer, cells
N° 03 · var(--charcoal)
Charcoal
#1a1714
Ink — body, headlines, quiet authority
N° 04 · var(--crimson)
Crimson
#c8102e
Primary — action, accent, ignition
N° 05 · var(--gold)
Gold
#d4a574
Warmth, wisdom, archive — used sparingly
N° 06 · var(--obsidian)
Obsidian
#0d0b09
Alternate canvas — cinematic, nocturnal
Typography · four voices · three scripts

Serif for feeling. Grotesque for work.

N° 01
Sovereign
Newsreader
Display · italic accent · headlines
Serif · 300 / 400 / 500 · variable opsz 6–72
N° 02
Built in Tunis.
Newsreader — roman
Section heads · editorial body
Serif · weight 400 · letter-spacing -.01em
N° 03
The work is the argument.
Space Grotesk
Body · interface · paragraph copy
Neo-grotesque · 300 / 400 / 500 / 600
N° 04
N° 006 · THE SYSTEM
DM Mono
Labels · annotations · metadata
Mono · 400 / 500 · all-caps · letter-spacing .26em
Buttons · two weights

One primary. One ghost.

Start learning
.cta-primary

Crimson fill, mono caps, a hairline dash. On hover it lifts 2px and a single diagonal light sweeps across — once, no loop. The hover is a lit match, not a flickering candle.

Read the philosophy ↗
.cta-ghost

Hairline outline, quiet ink. The arrow is the only flourish — Newsreader italic, crimson. On hover the border and text shift to crimson over a faint crimson wash. Secondary, never shy.

Cards · course & pillar

The containers everything lives in.

.mn4-ccourse
Strategy · 16 lessons

The Sovereign Path

Sixteen courses, eight agents. The full curriculum from logic to ethereal.

StrategyEnter →
Virtue · 12 lessons

Stoic Foundations

Marcus Aurelius to amor fati — discipline as a daily, repeatable habit.

VirtueEnter →
Craft · 9 lessons

Design as Argument

A logotype is an argument made in form. Two years of the studio, distilled.

CraftEnter →
Ethereal · 8 lessons

The Frontier Layer

AI fluency, agents, and the systems Tunisia could not wait for.

EtherealEnter →
.mn4-pillar
منطق
I

Logic

Clear thinking under pressure. The discipline of seeing systems as they actually behave, not as we wish them to.

Explore the pillar
فضيلة
II

Virtue

Ethical leadership and Stoic resolve. Character is the only thing that compounds without permission.

Explore the pillar
أثير
III

Ethereal

The frontier — AI fluency, agents, and sovereign digital systems built for the next generation.

Explore the pillar
Motion · one easing, total

Movement is meaning.

Pulse ring · live badge
Float soft · stat pills
Lightning sweep · CTA
--ease-expo
cubic-bezier(.16, 1, .3, 1)
The one easing. Fast exit, long tail. Everything that moves uses this.
--ease-spr
cubic-bezier(.34, 1.56, .64, 1)
Spring for tactile feedback — buttons, orbs, hover lifts.
--dur-base / slow
.30s · .60s
Small moves fast, large moves slow. No 300ms fence-sitting.
clip reveal
inset(100% 0 0 0) → inset(0)
The curtain lifts. Content is always there; the animation uncovers it.
See it in practice Read the philosophy ↗