Design system · v1.1.0

The system, made visible.

Everything that makes Phantazein look and sound like Phantazein, in one public place. phantazein.com runs on this exact stylesheet. The spec is written so people and LLMs can produce on-brand work from a single file.

Use it with an LLM phantazein.css
01 /For LLMs

Point any model at one file.

DESIGN.md holds the rules, tokens, components as copy-paste HTML, voice and assets. The stylesheet and tokens are the same system in machine form.

Files

Prompt

Read https://phantazein.com/design/DESIGN.md and follow it exactly.
Link https://phantazein.com/design/phantazein.css and use its classes and tokens.
Build:

Usage

Licensed CC BY 4.0: use, adapt and ship it, commercially too, with credit. The name, mark and logos are Phantazein trademarks and not part of the licence: use them only to refer to Phantazein. On someone else's project, keep the style and leave the brand out. Full terms.

02 /Colour

Black, ink and one red.

Values below are read live from phantazein.css for the current theme. Toggle the theme to see light. The red never changes.

Neutrals
Accent
03 /Type

Heavy display, quiet body, tracked mono.

Archivo Black for display, always uppercase. Inter for reading. JetBrains Mono for every label, button and piece of meta.

.title-heroArchivo Black · 40 to 116px
lh .95 · -0.025em
Ideas visible.
.title-xlArchivo Black · 32 to 68px
lh 1 · -0.02em
Let's talk about your project.
.sec-titleArchivo Black · 30 to 54px
lh 1 · -0.02em
What we work on.
.title-statementArchivo Black · 24 to 38px
lh 1.08 · -0.015em
Independent by design. Small by choice.
.card-nameArchivo Black · 26px
lh 1.05 · -0.01em
Product Management
LedeInter · 18px · lh 1.55

Phantazein is an independent studio based in Málaga. Focused work, fewer decks.

BodyInter · 15.5px · lh 1.7

Work is scoped individually and delivered directly, without account layers or standard packages.

MonoJetBrains Mono · 10.5 to 11.5px
uppercase · .12 to .26em
Services · Studio · Get in touch →
04 /Components

Hard edges, one red.

Plain CSS classes, no build step. The HTML for each one is in DESIGN.md.

Buttons.btn-primary · .btn-ghost · .btn-cta · .icon-btn
Get in touch See what we do Get in touch →
Labels.eyebrow · .sec-label · .badge · .tag
Independent studio · Málaga
01 /Services
Shipping In Preview Research Agents · MCP Active
Card grid.catalog · .card
01

Studio

Software delivery for focused engagements, built and shipped end to end.

02

Product Management

Roadmapping, discovery, and prioritization without a full-time hire.

03

Other Engagements

Technical advisory, architecture reviews, and ad hoc consulting.

Form fields.field · .input · .textarea · .select · .switch
Replies within one working day.
That domain looks off.
Switch
Panel and avatar.meta · .avatar
PZDKMCP
06 /Voice

Terse, confident, no filler.

Short declaratives and concrete nouns. Titles end on a red word. No emoji, no exclamation marks.

Write like this
  • Software that makes ideas visible.
  • Focused work, fewer decks.
  • Engagements are scoped individually. These are the recurring shapes.
  • Independent by design. Small by choice.
Not like this
  • Empowering your digital transformation journey.
  • Seamless end-to-end solutions for your ecosystem!
  • We leverage synergies to disrupt the status quo.
  • Unlock your team's potential 🚀
NameGreekGloss
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