# Seint Store · Design system migration spec

> Source: https://seint.store  ·  Curated by OpenDesign  ·  en

> Worth including as an example of a completely unstyled, utilitarian, and content-heavy template design.

## 1. Identity DNA

The Seint Store design system is not a system for creation, but for containment—a rigorous set of constraints applied to a basic WordPress template. Its identity is defined by what it deliberately omits, functioning like a well-organized filing cabinet where utility precedes all aesthetics.

**One-liner:** A functional, text-heavy directory site built on a standard blog template.
**Keywords:** informational · directory · content-heavy · utilitarian · basic
**Analogy:** A basic WordPress blog template used for directory listings.

## 2. Color

The palette is a study in high-contrast utility, built on a foundation of white and dark gray. A single functional blue accent provides the only chromatic punctuation, reserved for interactive elements and critical links.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#f7f8f9` | card background |
| `--ink` | `#222222` | body text |
| `--muted` | `#222222` | placeholder |
| `--accent` | `#1e73be` | single accent |
| `--line` | `rgba(240, 240, 240, 1.0)` | divider |

**Color principle:** Standard high-contrast web palette with a single functional blue accent.

The principle is one of absolute restraint, where color exists only to signal function.

## 3. Typography

Typography is entrusted entirely to the system, using the default UI font stack. This is a utilitarian choice, prioritizing instant rendering and universal legibility over any proprietary voice.

- **Display:** system-ui
- **Body:** system-ui

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 35px | 1.2 | 700 | normal | Page titles and headings |
| body | 17px | 1.5 | 400 | normal | Main body text |

**Type rules:**
- Base typography uses system UI fonts.
- Bold weights are used extensively for keyword emphasis.

## 4. Spacing

Vertical rhythm is inherited from the browser's own defaults, with spacing defined by simple padding values rather than a bespoke scale.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 px
- **Rhythm:** Standard vertical rhythm primarily driven by browser defaults and basic padding values.

## 5. Surfaces

Surfaces are deliberately flat, defined by the absence of shadow or depth. The only boundary is a hairline border, a subtle but clear container for discrete content modules.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** 1px solid #f0f0f0

## 6. Layout

The skeletal structure is a classic two-column blog layout, a main content area flanked by a sidebar on desktop. This is a proven, functional framework for presenting dense, directory-style information.

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

**Skeleton:** Standard two-column blog layout with a main content area and a sidebar on desktop.

## 7. Motion & Interaction

Motion is employed with extreme parsimony, confined to a near-instantaneous color transition on interactive elements. The philosophy is one of pure feedback, not decoration or narrative.

- **Durations:** micro 100ms · small 100ms · medium 100ms
- **Easing:** `ease-in-out`
- **Patterns:**
  - Subtle color transitions on interactive elements.

- **Hover:** Color changes on links.
- **Click:** Standard default browser behavior.
- **Transition:** Color and background-color transitions over 0.1s.
- **Keyboard:** Default browser focus styles.

## 8. Voice & Don'ts

The editorial voice is informational and direct, with headlines built from keywords and calls to action stripped of persuasion. Language is utilitarian, avoiding brand-specific or playful phrasing to maintain neutrality.

- **Tone:** Informational and utilitarian.
- **Headline style:** Direct and keyword-focused.
- **CTA style:** Simple and functional.
- **Avoid:** Brand names / Technical jargon / Playful language

### Don'ts
- ❌ Don't use custom fonts — screenshot shows a standard system-ui stack.
- ❌ Don't introduce complex border-radius — screenshot shows sharp, unrounded corners.
- ❌ Don't use drop shadows — screenshot shows completely flat surfaces.
- ❌ Don't apply colorful gradients — screenshot shows a plain white background.
- ❌ Don't use complex animations — screenshot shows only simple hover transitions.
- ❌ Don't use decorative illustrations — screenshot shows standard web text and a single image.

This system explicitly rejects custom fonts, rounded corners, shadows, gradients, complex animation, and decorative illustration.

## System Prompt (paste into AI tool)

```
This is a basic, text-heavy directory site built on a standard WordPress template (GeneratePress). The visual style is highly utilitarian and unstyled, relying on default browser font stacks (system-ui) and a high-contrast palette of white (#ffffff) and dark gray (#222222) with a single functional blue accent (#1e73be). The layout is a standard two-column structure with a main content area and a sidebar. Interactions are limited to simple hover color changes. Critical design constraints include: do not use custom fonts, avoid rounded corners or shadows, and do not add complex animations.
```