# Phantazein Design System

> φαντάζειν · *to make visible*

**Version 1.1.0 · 2026-10-04** · [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) · © 2026 Phantazein S.L.
Canonical home: <https://phantazein.com/design/>. This file: <https://phantazein.com/design/DESIGN.md>

The brand system of **Phantazein S.L.**, an independent software studio in Málaga, Spain.
It is written to be read by people **and by LLMs and coding agents**: everything needed to
produce on-brand Phantazein work is in this one file, and every value matches the live
phantazein.com, which loads the same stylesheet.

| File | What it is |
|---|---|
| [`DESIGN.md`](https://phantazein.com/design/DESIGN.md) | This spec. Start here. |
| [`phantazein.css`](https://phantazein.com/design/phantazein.css) | Tokens, base and every component as plain CSS classes. The site itself loads it. |
| [`tokens.json`](https://phantazein.com/design/tokens.json) | The same tokens in W3C Design Tokens (DTCG) format. |
| [`assets/`](https://phantazein.com/design/#logo) | Mark and logo PNGs, print colour PDF. Trademarks: not under the CC licence. |
| [`LICENSE.txt`](https://phantazein.com/design/LICENSE.txt) | CC BY 4.0 terms and the trademark notice. |
| [`/design/`](https://phantazein.com/design/) | The human style guide, with live specimens. |

## Usage, licence and trademarks

This system is public on purpose. Anyone, and any model working for them, may use it: to
build for Phantazein, to learn from it, or to reuse its techniques (the token structure, the
CSS patterns, the way the red is placed) in their own work.

**Licence: [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/).** © 2026 Phantazein S.L.
`DESIGN.md`, `phantazein.css`, `tokens.json` and the style guide may be copied, adapted and
used for any purpose, commercial included, with credit. Suggested attribution:

> Based on the Phantazein Design System by Phantazein S.L., https://phantazein.com/design/,
> licensed under CC BY 4.0.

Linking the hosted stylesheet needs no credit. Credit is required when you share copies or
adaptations of the files. Full terms: [`LICENSE.txt`](https://phantazein.com/design/LICENSE.txt).

**Trademarks.** "Phantazein", the eight-spoke mark and the logo files in `assets/` are
trademarks of Phantazein S.L. and are **not** covered by the CC BY licence. Use them only to
refer to Phantazein (crediting this system counts). Never use them as the brand of something
else, and never present unofficial work as made, commissioned or endorsed by Phantazein.

**For agents:** if you are asked to work "in the Phantazein style" on a project that isn't
Phantazein's, use the system but leave out the name, the mark and the logos, don't suggest any
affiliation, and add the attribution line above wherever you ship copied or adapted files.
Questions: studio@phantazein.com.

---

## 1. The rules (read these first)

1. **Black ground, warm off-white ink, one red.** `#000000`, `#f4f2ee`, `#ff0018`. Light theme
   swaps the neutrals; the red never changes.
2. **The red wraps the last word.** Every display title ends in a `<span class="red">`:
   "Software that makes ideas <span style="color:#ff0018">visible.</span>" One red span per title.
3. **Display type is Archivo Black, UPPERCASE, tight.** Body is Inter. Labels, nav, buttons and
   meta are JetBrains Mono, uppercase, widely tracked.
4. **Zero border-radius. No shadows. No gradients.** Hard edges only.
5. **1px rules organise everything.** Elevation is a background step (`--bg` → `--bg-card`) plus
   a rule colour, never a shadow.
6. **No imagery.** The page is type, rules and the mark.
7. **No emoji.** Allowed glyphs: `→` in CTAs, `·` as separator, `●` for status, `/` after a
   section number, `↗` on outbound links.
8. **No em dashes or en dashes, in any language.** Use a period, a comma, a colon or `·`.
9. **Terse, confident, anti-corporate copy.** "Focused work, fewer decks."
10. **Use the tokens.** Write `var(--accent)`, never `#ff0018` inline.

---

## 2. Install

```html
<!doctype html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="dark light">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Archivo+Black&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap">
  <link rel="stylesheet" href="https://phantazein.com/design/phantazein.css">
</head>
<body>
  <main class="wrap"> … </main>
</body>
</html>
```

- **Theme:** `data-theme="dark"` or `"light"` on `<html>` forces a theme. Leave the attribute off
  to follow the OS. Always declare `color-scheme` (meta tag above): without it some mobile
  browsers auto-darken the light theme.
- **No build step.** Plain CSS classes; works in any framework. In React, use `className`.
- Prefer linking the hosted file so updates arrive automatically. Copying it is fine too.

---

## 3. Colour

| Token | Dark (default) | Light | Use |
|---|---|---|---|
| `--bg` | `#000000` | `#f5f3ef` | Page ground |
| `--bg-elev` | `#0a0a0a` | `#eceae3` | Elevated band, form fields, ghost-button hover |
| `--bg-card` | `#0e0e0e` | `#e5e2da` | Card hover, panels |
| `--ink` | `#f4f2ee` | `#0b0b0b` | Headlines, primary text |
| `--ink-soft` | `#a8a5a0` | `#4a4843` | Body text |
| `--ink-mute` | `#5e5c58` | `#86827b` | Mono labels and meta **only** |
| `--rule` | `#1c1c1c` | `#dbd7d0` | Hairlines |
| `--rule-hi` | `#2a2a2a` | `#c6c1b8` | Control borders (buttons, inputs, badges) |
| `--accent` | `#ff0018` | `#ff0018` | THE red |
| `--accent-dim` | `#b30011` | `#b30011` | Pressed red |
| `--accent-hover` | `#ff2030` | `#ff2030` | Filled red buttons on hover |
| `--accent-glow` | `rgba(255,0,24,.18)` | same | Status-dot halo, focus ring |
| `--on-accent` | `#ffffff` | `#ffffff` | Text on red |
| `--status-shipping` | `var(--accent)` | same | Badge dot |
| `--status-preview` | `#d6d1c6` | `#4a4843` | Badge dot |
| `--status-research` | `var(--ink-mute)` | same | Badge dot |

**Where the red goes:** only in these places:

1. the `.red` span on the last word or phrase of a display title;
2. the number in a section label (`01 /`) and the square number chip on cards;
3. the eyebrow above the hero (text plus its 36px dash);
4. the Shipping status dot and the active-nav underline (2px);
5. filled primary buttons, and the red flood when a bordered CTA is hovered;
6. focus rings and form-field errors.

Never as a large background fill, never for body text.

The print spec (`assets/Phantazein-Colours.pdf`) lists PMS 185 / RAL 3024 and `#FF0019`; for
anything on a screen, `#ff0018` wins.

---

## 4. Typography

| Family | Token | Role |
|---|---|---|
| Archivo Black | `--display` | Display titles, card names, filled buttons. UPPERCASE, weight 900. |
| Archivo | `--heavy` | In-between heavy weights (400 to 900) when Black is too much. |
| Inter | `--sans` | Body, ledes, inputs. 300 to 600; `strong` is 600 in `--ink`. |
| JetBrains Mono | `--mono` | Labels, nav, meta, mono buttons, tags. Uppercase, tracked. |

**Scale**

| Token | Value | Line-height | Tracking | Class |
|---|---|---|---|---|
| `--text-hero` | `clamp(40px, 7.2vw, 116px)` | .95 | -0.025em | `.title-hero` |
| `--text-xl` | `clamp(32px, 5vw, 68px)` | 1.0 | -0.02em | `.title-xl` |
| `--text-section` | `clamp(30px, 4vw, 54px)` | 1.0 | -0.02em | `.sec-title` |
| `--text-statement` | `clamp(24px, 3vw, 38px)` | 1.08 | -0.015em | `.title-statement` |
| `--text-card` | `26px` | 1.05 | -0.01em | `.card-name` |
| `--text-lede` | `18px` | 1.55 | 0 | lede paragraph |
| `--text-body` | `15.5px` | 1.6 to 1.7 | 0 | body copy |
| `--text-small` | `14px` | 1.6 | 0 | card copy, inputs |
| `--text-nav` | `11.5px` | inherits | .16em (nav) / .26em (eyebrow) | mono |
| `--text-label` | `11px` | inherits | .22em (section label) / .14em (buttons) | mono |
| `--text-micro` | `10.5px` | inherits | .2em (meta key) / .14em (tag) | mono |

Display titles cap their width so they break well: hero `17ch`, section `20ch`, XL `14ch`.
Body measure: 52 to 56ch.

---

## 5. Layout, edges, motion

- **Container:** `.wrap` = `max-width: var(--maxw)` (1280px), side padding `var(--gutter)`
  (`clamp(20px, 4vw, 56px)`).
- **Sections:** `.sec` = `padding: var(--space-section) 0` (`clamp(72px, 12vh, 130px)`) with a 1px
  bottom rule. Section head is a 160px label column + content column; it stacks at ≤760px.
- **Grids** share borders like a table (`.catalog`: 3 columns → 1 at ≤760px).
- **Edges:** `border-radius: 0` everywhere, including avatars, inputs and switches.
- **Borders:** 1px. 2px only for the active-nav underline and the eyebrow dash.
- **Shadows:** none. The single exception is the 3px `--accent-glow` halo on the Shipping dot
  and on focused inputs.
- **Motion:** `.2s ease` for colour, border and background; `.3s` for card hover; scroll
  reveal is a `.9s` opacity fade. Filled buttons lift 2px on hover and their `→` slides 6px.
  No bounce, no parallax. Respect `prefers-reduced-motion` (`phantazein.css` does).

---

## 6. Components

All classes ship in `phantazein.css`.

### Display title with the red last word
```html
<h1 class="title-hero">Software that makes ideas <span class="red">visible.</span></h1>
<h2 class="title-xl">Let's talk about <span class="red">your project.</span></h2>
<p class="title-statement">Independent by design. <span class="red">Small by choice.</span></p>
```

### Eyebrow (red kicker above a hero)
```html
<div class="eyebrow">Independent studio · Málaga, Spain</div>
```

### Section with label, title and intro
```html
<section class="sec" id="services">
  <div class="wrap">
    <header class="sec-head">
      <div class="sec-label"><span class="num">01 /</span>Services</div>
      <div>
        <h2 class="sec-title">What we <span class="red">work on.</span></h2>
        <p class="sec-intro">Engagements are scoped individually. These are the recurring shapes.</p>
      </div>
    </header>
    <!-- content -->
  </div>
</section>
```

### Buttons
```html
<a class="btn-primary" href="#contact">Get in touch <span class="arrow" aria-hidden="true">→</span></a>
<a class="btn-ghost" href="#services">See what we do</a>
<a class="btn-cta" href="#contact">Get in touch →</a>
<button class="icon-btn" type="button" aria-label="Search"><svg>…</svg></button>
```
- `btn-primary`: red fill, Archivo Black 14px caps. **One per view.**
- `btn-ghost`: bordered mono caps, quiet hover.
- `btn-cta`: small bordered mono caps that **floods red on hover**. It is the nav CTA.
- `icon-btn`: 38px square, icon-only. Always give it an `aria-label`.

### Card grid
```html
<div class="catalog">
  <article class="card">
    <div class="card-index"><span class="num">01</span></div>
    <h3 class="card-name">Studio</h3>
    <p class="card-line">Software delivery for focused engagements, built and shipped end to end.</p>
  </article>
  <!-- more .card -->
</div>
```

### Key/value panel
```html
<aside class="meta">
  <div class="meta-row"><div class="meta-k">Location</div><div class="meta-v">Málaga <span class="dim">· ES</span></div></div>
  <div class="meta-row"><div class="meta-k">Entity</div><div class="meta-v">Phantazein S.L. <span class="dim">· ES</span></div></div>
  <div class="meta-row"><div class="meta-k">Founded</div><div class="meta-v">MMXXVI</div></div>
</aside>
```

### Status badge and tag
```html
<span class="badge badge-shipping">Shipping</span>
<span class="badge badge-preview">In Preview</span>
<span class="badge badge-research">Research</span>

<span class="tag">Agents · MCP</span>
<span class="tag tag-active">Productivity</span>
```
Badge labels: one or two words. Tags: separate terms with ` · `.

### Form fields
```html
<div class="field">
  <label class="field-label" for="email">Work email</label>
  <input class="input" id="email" type="email" placeholder="you@company.com">
  <span class="field-hint">Replies within one working day.</span>
</div>

<div class="field is-error">
  <label class="field-label" for="domain">Domain</label>
  <input class="input" id="domain" value="phantazein" aria-invalid="true" aria-describedby="domain-err">
  <span class="field-error" id="domain-err">That domain looks off.</span>
</div>

<div class="field">
  <label class="field-label" for="brief">What do you want built?</label>
  <textarea class="textarea" id="brief" rows="5" placeholder="A few sentences is plenty."></textarea>
</div>

<div class="field">
  <label class="field-label" for="kind">Engagement</label>
  <select class="select" id="kind"><option>Studio</option><option>Product Management</option></select>
</div>

<label class="switch"><input type="checkbox" role="switch" checked><span>Stream steps</span></label>
```

### Avatar
```html
<span class="avatar">DK</span>
<span class="avatar avatar-lg"><img src="…" alt="Name"></span>
```
Square by default, echoing the mark. Sizes: `avatar-sm` 28px, default 40px, `avatar-lg` 56px.

### Scroll reveal
Add `class="reveal"` and set `.in` when the element enters the viewport:
```js
const io = new IntersectionObserver(es => es.forEach(e => {
  if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); }
}), { threshold: 0.08 });
document.querySelectorAll('.reveal').forEach(el => io.observe(el));
```

---

## 7. Page patterns

- **Nav:** sticky, 72px tall, `backdrop-filter: blur(14px)` over a 72% black (light: 78%
  `#f5f3ef`) background. The 1px bottom rule appears only after scrolling. Left: 28px mark +
  `PHANTAZEIN` in `--display` 18px. Right: mono nav links (`--ink-soft` → `--ink`, active gets a
  2px red underline), theme toggle (`icon-btn`), language select, `btn-cta`.
- **Hero:** eyebrow → `title-hero` (max 17ch) → two columns: lede + CTAs on the left, mono
  key/value stats with 1px top rules on the right. A giant ghost of the mark (5% opacity, 7% in
  light) sits behind on the right, hidden below 1100px.
- **Sections:** numbered in reading order. The site runs `01 /` Services, `02 /` Portfolio,
  `03 /` Studio, `04 /` Contact.
- **Portfolio rows:** a ruled list, one product per row in three columns (`minmax(180px,240px)
  1fr auto`, 28px gap, 24px vertical padding, 1px bottom rule; one column at ≤760px): name in
  `--display` 22px caps, one line of description in Inter 14.5px `--ink-soft`, then the domain
  as a mono 10.5px `--ink-mute` link ending in `↗`. Links turn `--accent` on hover.
- **Closing CTA:** `title-xl` on the left; on the right a large red button
  (`studio@phantazein.com →`) and a mono line under it.
- **Footer:** all mono caps in `--ink-mute`: mark + tagline "φαντάζειν · to make visible.",
  link columns (Services, Portfolio, Studio), then fine print in sentence case: earlier work
  and legal lines.

---

## 8. Logo and assets

| File | Use |
|---|---|
| [`mark-red.png`](https://phantazein.com/design/assets/mark-red.png) | **Primary mark:** red square, white eight-spoke star. Favicon, nav, footer, hero ghost. |
| [`mark-white.png`](https://phantazein.com/design/assets/mark-white.png) | White mark on transparent. For use on red or photography. |
| [`mark-black.png`](https://phantazein.com/design/assets/mark-black.png) | Black square, white spokes. Monochrome contexts. |
| [`mark-tile.png`](https://phantazein.com/design/assets/mark-tile.png) | 270px tile (app/tile icons). |
| [`logo-primary.png`](https://phantazein.com/design/assets/logo-primary.png) | Lockup: mark + PHANTAZEIN wordmark in dark ink, **for light backgrounds only**. |
| [`Phantazein-Colours.pdf`](https://phantazein.com/design/assets/Phantazein-Colours.pdf) | Print colour spec. |

- On dark grounds there is no lockup file: set the mark next to `PHANTAZEIN` in `--display`
  18px, `letter-spacing: .02em`, 12px gap (as in the site nav).
- Never redraw, recolour, rotate, outline or round the mark. Keep clear space of at least
  a quarter of its width.
- Copy the files; don't approximate the mark with CSS or SVG.

---

## 9. Iconography

- Line icons only, ~2px stroke, inheriting `currentColor` (the site's sun/moon toggle and `↗`
  are inline SVGs at 16px). For larger UIs use [Lucide](https://lucide.dev) at stroke 2.
- Icons are `--ink`; red only for an active state.
- No filled or duotone icon sets, and no emoji.

---

## 10. Voice and writing

**Terse, confident, anti-corporate.** Short declaratives. Concrete nouns. No hype.

From the live site (reuse these verbatim, don't paraphrase):

- Hero: "Software that makes ideas **visible.**"
- Lede: "Phantazein is an independent studio based in Málaga, working on product management,
  software delivery, and related engagements for teams across the EU and US. Focused work, fewer decks."
- Section titles: "What we **work on.**" · "Built in **the studio.**" ·
  "Independent, on the **Costa del Sol.**" · "Let's talk about **your project.**"
- Statement: "Independent by design. **Small by choice.**"
- CTAs: "Get in touch →" · "See what we do"
- Footer: "φαντάζειν · to make visible." · "Engagements are scoped individually via a written statement of work."

**Mechanics**

- Display titles are written in sentence case in the source and uppercased by CSS; the red span
  goes on the last word or phrase, including the full stop.
- Mono labels are UPPERCASE via CSS. Separate meta items with ` · `.
- Section numbers: `01 /`, `02 /`. Roman numerals for years where it fits (MMXXVI).
- English is canonical; the site also ships ES / FR / DE.
- No em dashes (—) or en dashes (–), in EN, ES, FR or DE. Pick a period, a comma, a colon or
  `·`, and vary it: three colons in a row reads as mechanically as three dashes. Write ranges
  as "40 to 116px".
- No emoji. No exclamation marks.

**Vocabulary:** focused, scoped, shipped, built, delivered, engagement, studio.
**Avoid:** solutions, journey, empower, seamless, ecosystem, disrupt, synergy, leverage.

**Naming.** Many Phantazein products take Greek names. When the Greek is shown, set the
original word in `--sans` (never uppercased) and the English gloss in mono:

| Name | Greek | Gloss |
|---|---|---|
| Phantazein | φαντάζειν | to make visible |
| Koine | Κοινή | the common tongue |
| Refugio | καταφυγή | refuge, shelter |
| Epistole | ἐπιστολή | letter, epistle |
| Hermeneia | ἑρμηνεία | interpretation |
| Just Claude Things | πρᾶγμα | deed, thing done |
| ThingsSync | συνχρονισμός | together in time |
| Just Claude Reminders | μνήμη | memory |
| StyleCoach | ἦθος | character, disposition |

As on the site: "Earlier work: Koine (Κοινή), self-hosted demand intelligence for product teams."

---

## 11. Don't

- Round a corner, add a drop shadow, or use a gradient.
- Use a second accent colour, or the red as a large background.
- Put more than one red span in a title, or put it anywhere but the end.
- Set body copy in `--ink-mute`, or display type in sentence case.
- Use stock photos, illustrations, 3D, or emoji.
- Use blue/purple "AI" gradients, glassmorphism cards, or left-border accent cards.
- Write "solutions", "seamless", "empower", or other agency filler.
- Use an em dash or an en dash.

---

## 12. Accessibility notes

Contrast of the shipped pairs (WCAG 2.x):

| Pair | Dark | Light |
|---|---|---|
| `--ink` on `--bg` | 18.8:1 | 17.8:1 |
| `--ink-soft` on `--bg` | 8.6:1 | 8.2:1 |
| `--ink-mute` on `--bg` | **3.2:1** | **3.5:1** |
| `--accent` text on `--bg` | 5.3:1 | **3.6:1** |
| `--on-accent` on `--accent` | **4.0:1** | **4.0:1** |

Known gaps, kept as shipped and flagged: `--ink-mute` passes only for large text, so use it for
labels, never for content. Red **text** on the light ground and white on red are below 4.5:1 at
small sizes; prefer red for large display words, and keep button labels short and heavy.
Focus is a 2px `--accent` outline (`:focus-visible`).

---

## 13. Changelog

- **1.1.0 · 2026-10-04**: Licensed under CC BY 4.0, with a trademark notice keeping the name,
  mark and logos out of the licence. Full terms in `LICENSE.txt`.
- **1.0.1 · 2026-10-04**: Added the usage note: free to use, but no unofficial work presented as
  Phantazein's, and the name, mark and logos only to refer to Phantazein.
- **1.0.0 · 2026-10-04**: First public release on phantazein.com. Migrated from the Claude
  Design project and reconciled with the live site: light theme added, type scale and copy
  updated to the current site, components published as plain CSS.