# Gt Maru · Design system migration spec

> Source: https://gt-maru.com  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of a playful, typographic-driven design that uses a custom font family to create a unique and friendly visual identity.

## 1. Identity DNA

The GT Maru system is built as a living type specimen, treating the interface itself as a character study. Like a friendly, rounded figure, its identity is defined by warm, organic forms and a playful spirit that feels both contemporary and inviting. This is a typographic voice made visual.

**One-liner:** A playful, warm, and rounded typeface specimen with a friendly character.
**Keywords:** friendly · playful · rounded · Japanese-influenced · typographic
**Analogy:** A warm, friendly, and playful type specimen that feels like a soft, rounded character.

## 2. Color

The palette is driven by high-contrast primaries: a deep blue and a bright yellow that commands attention. Black is used structurally for thick outlines, not as a void, while pink accents provide moments of playful energy. The system's principle is clear: color is for defining shape and drawing the eye.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0068FF` | main background |
| `--bg-quiet` | `#B3D9FF` | quiet area |
| `--ink` | `#000000` | body text |
| `--muted` | `#83BBFF` | placeholder |
| `--accent` | `#FFC800` | single accent |
| `--line` | `rgba(0,104,255,1.0)` | divider |

**Color principle:** High-contrast primary blue and yellow with playful pink accents and stark black outlines.

Every color choice serves the primary goal of creating vibrant, legible, and playful visual forms.

## 3. Typography

The entire typographic voice belongs to the GT Maru family, whose rounded terminals are the core of the system's friendly, casual tone. A Japanese-influenced warmth guides every setting, from massive, tight-set headlines to generously spaced body text.

- **Display:** rounded-sans
- **Body:** rounded-sans
- **Mono:** rounded-mono

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 158px | 1.0 | 400 | -9px | Hero headlines and primary title |
| heading | 53px | 1.0 | 400 | -3px | Section headings |
| body | 27px | 1.15 | 400 | 0px | Main body copy and descriptions |
| caption | 16px | 1.0 | 400 | 0px | Small UI text and captions |

**Type rules:**
- All typography is set in the GT Maru family, characterized by rounded terminals and a friendly, casual tone.
- Letter spacing is negative for large display text to maintain tight, cohesive word shapes.
- Line height for body text is generous (around 1.15-1.2) to ensure readability.

## 4. Spacing

The spacing rhythm is organic and spacious, built on a foundation of generous padding that gives content room to exist without strain.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Spacious and organic, with generous padding (30px) around content blocks.

## 5. Surfaces

Depth is achieved not through shadows but through a stark, confident use of line. Thick, 2-3px black borders define every shape and element, creating a clean, illustrative quality. This is a system of solid forms, not implied elevation.

- **Radius:** sm 5px · md 10px · lg 30px · pill 999px
- **Borders:** Thick black outlines (2px-3px) used as a primary design element to define shapes and text.

## 6. Layout

The layout skeleton is one of generous negative space, creating an open, breathable environment. Significant margins and padding are structural, allowing the expressive typography and bold color blocks to occupy the canvas without competition.

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

**Skeleton:** Generous, open layout with significant negative space to let the typography breathe.

## 7. Motion & Interaction

Motion in the system is functional and smooth, focused on guiding the eye through layout shifts. CSS transitions handle margin and opacity changes with subtlety, ensuring the playful feel remains uncluttered by complex animation.

- **Durations:** micro 100ms · small 250ms · medium 400ms
- **Easing:** `cubic-bezier(1, 0, 1, 1)`
- **Patterns:**
  - Smooth margin-top transitions for layout shifts.
  - Subtle opacity and transform transitions for UI elements.

- **Hover:** Standard pointer cursor indicates interactivity.
- **Click:** Standard pointer interaction.
- **Transition:** CSS transitions are used for layout and opacity changes.
- **Keyboard:** Not explicitly detailed but implied by interactive elements.

## 8. Voice & Don'ts

The editorial voice mirrors the type: friendly, casual, and approachable. Headlines are massive and outlined, making a bold statement, while calls to action are simple, understated rounded rectangles that invite without demanding.

- **Tone:** Friendly, casual, and approachable, mirroring the rounded typography.
- **Headline style:** Massive, outlined, and highly expressive.
- **CTA style:** Simple, understated rounded rectangles.
- **Avoid:** Formal or rigid language. / Sharp or aggressive visual elements. / Dense or cluttered layouts. / Serif or geometric sans-serif typefaces. / Muted or overly dark color palettes.

### Don'ts
- ❌ Don't use sharp, geometric sans-serif fonts — screenshot shows rounded, friendly terminals.
- ❌ Don't use thin, subtle borders — screenshot shows thick, prominent 2px-3px black outlines.
- ❌ Don't use a dark or muted color palette — screenshot uses vibrant primary blue and yellow.
- ❌ Don't create dense, cluttered layouts — screenshot features generous spacing and negative space.
- ❌ Don't use drop shadows for depth — screenshot relies on solid colors and bold outlines.
- ❌ Don't use serif typefaces — screenshot exclusively uses a custom rounded sans-serif family.

The system deliberately avoids sharp geometry, dense layouts, and any element that contradicts its core warmth and playfulness.

## System Prompt (paste into AI tool)

```
Design a playful, warm, and friendly interface inspired by the GT Maru type specimen. Use a vibrant primary blue (#0068FF) background with bright yellow (#FFC800) for accents. Typography should be exclusively rounded sans-serif with thick black outlines and generous letter spacing. Layouts must be open and spacious with significant negative space. Critical donts: avoid sharp, geometric sans-serif fonts, thin or subtle borders, dark or muted color palettes, dense layouts, drop shadows, and serif typefaces. The overall feel should be casual, approachable, and visually soft, like a friendly character.
```