# Tajarin: a MIAN design language

Forty yolks and shaved truffle. Tajarin are Piedmont’s hair-thin egg noodles, made with up to forty yolks per kilo, served in autumn under shaved white truffle. Tajarin is a luxury system: black and ivory, Garamond headlines, tiny tracked capitals, sharp corners, hairlines and one gold yolk accent, with a lot of silence around everything.

- Family: Elegant · Origin: Italy · Piedmont · License: MIAN License (free to use)
- Traits: luxury, refined, golden, italian, exclusive, elegant · intensity 2/5 · contrast medium · density comfortable. Good for: luxury, hospitality, fine dining, fashion, wine. Less for: dense admin, children.
- Use: `<html data-noodle="tajarin">` (or on any element to scope it). Add `data-mode="dark"` or `"light"` to force a mode.
- Everything: https://mian.ro/dist/mian.css · Only this noodle: https://mian.ro/dist/mian-core.css + https://mian.ro/dist/noodles/tajarin.css
- Page: https://mian.ro/noodles/tajarin

## Design philosophy

Tajarin is quiet luxury. Hair-thin egg noodles made with forty yolks and served under shaved white truffle become black and ivory at full contrast, Garamond headlines, tiny tracked capitals for every label and button, sharp corners, 1px hairlines, one yolk-gold signature, and a great deal of silence around everything.

## Principles

- Capitals for the interface: labels, buttons, tabs, badges and table heads are 11px uppercase with .18em tracking.
- Garamond for content: headlines, titles and numbers at 400.
- Hairlines only: 1px borders and underlines; no shadows, no radius.
- Gold is a signature: the focus underline, the active tab line, a switch knob, one chart column.

## The language

- **Shape.** 0px radius everywhere; fields are a single hairline.
- **Surface.** Ivory and black; hairline frames; nothing floats.
- **Colour.** Black (#0d0d0c), ivory (#faf8f3), yolk gold (#8a6508 / #e3b547).
- **Type.** Garamond headlines, tracked small capitals for UI.
- **Motion.** tajarin-in: a plain 480ms fade; hovers darken slowly; nothing bounces.
- **Data.** Narrow columns at 40% width, hairline lines without points, an 8% donut.

## Colour, type and brand

- **Primary** #0d0d0c: black and ink (deep, muted). Authority, precision, luxury. It makes everything next to it look more deliberate.
- **Accent** #8a6508: olive (deep, saturated). Growth, health, permission, money. The easiest colour to look at for a long time.
- **Page** #faf8f3: white and paper (pale). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** A neutral primary with one olive accent: the accent means “look here” precisely because nothing else is coloured. The page is warm.
- **Type.** Two voices: garalde serif (garamond family) for headings, neutral sans for the interface. Headings are light to regular, which reads as delicate and unhurried. Classical, humane, quietly elegant. Five centuries of book typography.
- **Reads as** luxury, refined, golden, italian, exclusive (brand dimension: sophistication).
- **Tone of voice.** Calm and clear. Short sentences, one idea each, a friendly but not chatty register.
- **Logo.** Square and angular marks fit: a wordmark in capitals or a solid block symbol. Set the wordmark in a serif to match the headings.
- To keep this noodle’s shape with your own brand colours: POST https://mian.ro/api/v1/noodles/create or the MCP tool `create_noodle` (base: "tajarin").

## Inspired by the noodle

- Forty yolks → one deep yolk-gold accent, used like a signature
- Shaved truffle → black and ivory at high contrast, nothing in between
- Cut by hand, hair-thin → sharp corners and 1px hairlines
- An autumn dinner → Garamond headlines, tracked small capitals and slow, quiet fades

## Designing new components in Tajarin

Build new components from `--mn-*` tokens, scoped with `[data-noodle="tajarin"]`, and follow these rules. Any `--x-*` variables named below are defined by this noodle's skin and can be used inside its scope.

- font: 500 .6875rem/1 var(--mn-font); letter-spacing: .18em; text-transform: uppercase for every control label.
- border: 1px solid var(--mn-fg) (frames) or border-bottom only (fields); border-radius: 0.
- Emphasis with a 1px gold line (var(--mn-accent)), not a fill.

Avoid:

- Rounded corners and shadows
- Colour beyond black, ivory and gold
- Bold weights

Recipe: a selectable tile in this language:

```css
[data-noodle="tajarin"] .tile { padding: 18px 20px; border: 1px solid var(--mn-border); border-radius: 0; background: var(--mn-surface); font: 500 .6875rem/1 var(--mn-font); letter-spacing: .18em; text-transform: uppercase; }
[data-noodle="tajarin"] .tile[aria-selected="true"] { border-color: var(--mn-fg); box-shadow: inset 0 -1px 0 var(--mn-accent); }
```

## Tokens

- Fonts: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Heading font: "EB Garamond", Garamond, "Adobe Garamond Pro", "Cormorant Garamond", "Iowan Old Style", ui-serif, Georgia, serif
- Radius: field 0px, box 0px, badge 0px
- Density: comfortable · Shadows: none

| token | light | dark |
|---|---|---|
| bg | #faf8f3 | #080807 |
| surface | #ffffff | #10100e |
| surface2 | #f1eee6 | #191816 |
| fg | #0d0d0c | #f3efe4 |
| muted | #5d5b55 | #a8a395 |
| border | #e5e1d7 | #262521 |
| input | #b9b4a7 | #4a4740 |
| primary | #0d0d0c | #f3efe4 |
| primaryFg | #faf8f3 | #0d0d0c |
| secondary | #f1eee6 | #191816 |
| secondaryFg | #0d0d0c | #f3efe4 |
| accent | #8a6508 | #e3b547 |
| accentFg | #ffffff | #221700 |
| ring | #0d0d0c | #e3b547 |
| success | #15803d | #4ade80 |
| successFg | #ffffff | #052e16 |
| warning | #b45309 | #fbbf24 |
| warningFg | #ffffff | #1f1300 |
| danger | #dc2626 | #f87171 |
| dangerFg | #ffffff | #210505 |
| info | #0369a1 | #38bdf8 |
| infoFg | #ffffff | #03202d |
| primaryText | #0d0d0c | #f3efe4 |
| secondaryText | #71706c | #827f79 |
| accentText | #886308 | #e3b547 |
| successText | #15793a | #4ade80 |
| warningText | #aa4f09 | #fbbf24 |
| dangerText | #c72423 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #0d0d0c | #f3efe4 |