# Ka Ra Studio · Design system migration spec

> Source: https://www.ka-ra.studio  ·  Curated by OpenDesign  ·  en

> Worth including as a strong example of a refined, typography-forward portfolio that prioritizes content and craftsmanship over UI complexity.

## 1. Identity DNA

The design system for Ka Ra Studio operates like a curated gallery exhibition of bespoke wooden objects. Each element is selected, placed, and lit with deliberate restraint, allowing the craftsmanship of the work itself to occupy the viewer's full attention. The system's purpose is to provide a calm, architectural container for a furniture practice.

**One-liner:** A restrained, typography-forward portfolio for a woodworking design practice.
**Keywords:** Handcrafted · Furniture · Wood · Minimal · Studio Practice
**Analogy:** A curated gallery exhibition of bespoke wooden objects.

## 2. Color

The color system is a disciplined two-tone composition, built on a foundation of warm white and a single, rich woody brown ink. This limited palette forces a focus on material and form, stripping away any decorative distraction.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#674A1D` | body text |
| `--muted` | `#674A1D` | placeholder |
| `--line` | `rgba(103, 74, 29, 1)` | divider |

**Color principle:** Two-tone palette dominated by warm white and a rich, woody brown ink.

The principle is one of strict material honesty; color serves only to delineate content, never to embellish.

## 3. Typography

Typographic voice is delivered exclusively through the transitional serif 'A B C Laica', used at a uniform weight of 400 for every textual element. This singular choice creates a consistent, quiet authority, treating every word as an object of equal importance.

- **Display:** transitional-serif
- **Body:** transitional-serif

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 34px | 1.2 | 400 | 0px | Main titles and project names |
| body | 15px | 1.65 | 400 | 0px | Small navigation elements and secondary text |

**Type rules:**
- The primary typeface 'A B C Laica' is used exclusively for all text elements.
- All text maintains a uniform weight of 400.
- Text color is strictly limited to a warm woody brown against a white background.

## 4. Spacing

Rhythm is established through generous, unhurried padding and margins that create a calm vertical flow.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous padding and margins create a calm, unhurried browsing experience.

## 5. Surfaces

Surface treatment is defined by flatness and clarity. Borders, when used, are rendered in the primary brown ink, while shadows are entirely absent, maintaining a clean, graphic plane.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Borders use the primary ink color and are occasionally paired with a subtle gray for inactive states.

## 6. Layout

The layout skeleton is a single, centered column designed for vertical scrolling. This simple structure, combined with ample whitespace, focuses the reading path and frames each photographic work as a singular exhibit.

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

**Skeleton:** A single-column, vertically scrolling layout with generous whitespace and center-aligned text.

## 7. Motion & Interaction

Motion philosophy is one of subtle confirmation rather than announcement. The only prescribed transition is a smooth 0.2-second opacity shift on interactive elements, providing feedback without ceremony.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle opacity transitions on hover for interactive elements.

- **Hover:** Opacity reduction on text links to indicate interactivity.
- **Click:** Standard browser navigation.
- **Transition:** All properties transition smoothly over 0.2s.
- **Keyboard:** Standard focus rings are not explicitly visible in the screenshots.

## 8. Voice & Don'ts

The editorial voice is refined, quiet, and confident, favoring declarative statements that often name the object and its material. Calls to action are understated, typically framed in parentheses to avoid a sales-driven tone.

- **Tone:** Refined, quiet, and confident.
- **Headline style:** Declarative, often stating the object name and material.
- **CTA style:** Subtle, using parentheses to frame simple actions like 'View' or 'Info'.
- **Avoid:** Marketing jargon / Loud calls to action / Excessive decoration

### Don'ts
- ❌ Don't use a dark background — screenshot shows a clean white background.
- ❌ Don't use sans-serif typography — screenshot shows a distinct transitional-serif face.
- ❌ Don't use bright accent colors — screenshot uses a monochrome brown ink palette.
- ❌ Don't use heavy drop shadows — screenshot shows completely flat surface treatment.
- ❌ Don't use complex multi-column grids — screenshot shows a simple, centered vertical flow.
- ❌ Don't use bold font weights — screenshot shows a uniform weight of 400 across all text.

The system deliberately excludes bold typography, dark modes, and complex grids to protect its core identity of handcrafted restraint.

## System Prompt (paste into AI tool)

```
Position this as a refined, minimalist portfolio for a design studio. The key colors are a warm white background and a woody brown ink. The typography is exclusively a transitional serif, used in a single weight. Critical donts: do not introduce dark modes or black backgrounds, do not use sans-serif type, and do not add decorative drop shadows to components. Keep interactions subtle, relying on opacity changes and generous whitespace.
```