# Philosophicalfoxes · Design system migration spec

> Source: https://www.philosophicalfoxes.com  ·  Curated by OpenDesign  ·  en

> This site is worth including as a prime example of how retro-gaming aesthetics (pixel art, monospaced type) can be elevated into a premium, editorial experience.

## 1. Identity DNA

Philosophicalfoxes operates at the intersection of classical narrative and digital craft, presenting itself as a curated gallery where pixel-art fables unfold. The system is built on a deliberate architectural tension, blending the gravitas of a museum hall with the nostalgic charm of retro-gaming aesthetics. This results in a premium editorial space that feels both ancient and freshly rendered.

**One-liner:** A premium pixel-art editorial experience exploring philosophical themes through a digital gallery.
**Keywords:** Pixel Art · Philosophical · Narrative · Digital Art · Fables
**Analogy:** A digital gallery blending classical architecture with retro-gaming aesthetics to tell modern fables.

## 2. Color

The color system is one of stark, high-contrast dualism, eschewing a vibrant palette for a strict dialogue between warm parchment beige and deep black. This choice is not decorative but functional, immediately segmenting the visual experience into its two primary modes: the warm, textured gallery and the stark, typographic interlude.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F6F2E4` | main background |
| `--ink` | `#000000` | body text |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** Stark high-contrast dualism: warm, parchment-like beige for the pixel-art gallery and deep black for the typographic interludes.

The principle is absolute: a binary palette that defines every surface and interaction, creating clarity through constraint.

## 3. Typography

The typographic voice is monospaced and unyielding, using uppercase settings to create a uniform, pixel-perfect texture across all text levels. This deliberate choice rejects the organic curves of traditional serif or sans-serif fonts, aligning the typographic rhythm directly with the grid-based logic of the pixel art it accompanies.

- **Display:** monospaced
- **Body:** monospaced
- **Mono:** monospaced

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 27.936px | 1.14 | 400 | 0px | Large display headings |
| body | 14.4px | 1.6 | 400 | 0px | Standard body text |

**Type rules:**
- All text is uppercase for headings and frequently for body labels.
- Monospaced typography is used exclusively across all text levels.
- Letter-spacing is generally neutral or slightly loose.

## 4. Spacing

Rhythm here is a function of space, with generous padding and gaps that prioritize legibility and grant each element room to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous padding and gaps prioritize legibility and breathing room around the pixel art elements.

## 5. Surfaces

Depth is communicated not through shadow but through line, with thin, 1px solid black borders acting as the primary framing device for gallery sections and content cards. Surfaces remain fundamentally flat, relying on these precise geometric boundaries to establish hierarchy and separation.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** 1px solid black, used to frame the gallery sections and cards.

## 6. Layout

The structural skeleton is a clean, grid-based layout where large, immersive hero images and deliberate text blocks are partitioned by thin black lines. This framework creates a disciplined order, ensuring each pixel-art illustration and philosophical statement is presented as a distinct, focused artifact within the larger gallery.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A clean, grid-based layout where large hero images and text blocks are separated by thin black lines.

## 7. Motion & Interaction

Motion philosophy favors subtlety and continuity, employing smooth, scroll-based reveals and gentle opacity fades to guide the viewer through the narrative. All transitions are governed by a consistent, generous timing function, creating a refined and deliberate pace that feels premium rather than performative.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.23, 1, 0.32, 1)`
- **Patterns:**
  - Smooth, continuous transitions for scroll-based reveals.
  - Gentle opacity and transform fades.

- **Hover:** Subtle opacity or color shifts.
- **Click:** Immediate response.
- **Transition:** Global 1s transitions with custom cubic-bezier easing.
- **Keyboard:** Standard browser focus navigation.

## 8. Voice & Don'ts

The editorial voice is contemplative and narrative-driven, with short, punchy headlines often set in uppercase to command attention with direct simplicity. This tone deliberately avoids dense prose and generic corporate language, focusing instead on the clear, direct communication of ideas and calls to action.

- **Tone:** Contemplative, philosophical, and narrative-driven.
- **Headline style:** Short, punchy, and often uppercase to command attention.
- **CTA style:** Direct and simple, using monospaced text.
- **Avoid:** Dense paragraphs / Generic corporate jargon / Bright, chaotic color palettes

### Don'ts
- ❌ Don't use smooth, rounded UI components — screenshot shows sharp, pixel-art aesthetics and thin geometric borders.
- ❌ Don't use sans-serif fonts — screenshot shows monospaced fonts exclusively for all text.
- ❌ Don't use a white background — screenshot shows a warm, off-white parchment color (#F6F2E4) or pure black.
- ❌ Don't use a vibrant accent color — screenshot shows a strictly monochromatic palette of black and beige.
- ❌ Don't use complex drop shadows — screenshot shows completely flat design with only solid borders.
- ❌ Don't mix serif and sans-serif typefaces — screenshot maintains a strict monospaced typographic system.

The system deliberately does not accommodate vibrant accents, smooth rounded components, or complex shadow effects, committing fully to its stark, geometric, and monochromatic discipline.

## System Prompt (paste into AI tool)

```
This website presents a premium, editorial experience centered around a pixel-art gallery that explores philosophical themes. It utilizes a stark, dualistic color palette of warm parchment (#F6F2E4) and deep black (#000000), creating a high-contrast visual language. The typography is strictly monospaced, with all text frequently presented in uppercase to match the retro-gaming, pixel-art aesthetic. Critical design constraints include avoiding any use of serif or sans-serif fonts, steering clear of vibrant accent colors, and ensuring all UI components remain flat without the use of drop shadows. The layout is structured and grid-based, providing ample whitespace to frame the detailed pixel-art illustrations.
```