Tajarin
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.
Design language
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.
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.
Designing new components in Tajarin
MIAN does not ship every component you will need. To make a new one that belongs in Tajarin, build it from --mn-* tokens inside [data-noodle="tajarin"] and follow these rules.
Do
- 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
[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); }The same guide, for AI tools: /ai/noodles/tajarin.md · MCP tool get_design_language.
Colour, type and brand
What Tajarin says before anyone reads a word, and what kind of brand it suits. Tendencies, not laws: see the guides on colour, type, branding and logos.
Primary · Black and ink
Authority, precision, luxury. It makes everything next to it look more deliberate.
Watch for: Pure #000 on pure #fff is harsh on long text. Soften one of the two slightly, or warm both.
Accent · Olive
Growth, health, permission, money. The easiest colour to look at for a long time.
Watch for: Success messages are green too: a green brand needs a success state that is clearly a status (icon, words). Claims of sustainability made with green alone read as greenwashing.
Page · White and paper
Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
Watch for: Empty is not the same as calm: white space needs a grid behind it.
A neutral primary with one olive accent: the accent means “look here” precisely because nothing else is coloured. The page itself 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.
Personality
Reads as luxury, refined, golden, italian, exclusive. Intensity 2 of 5. Brand dimension: sophistication.
Suits
luxury, hospitality, fine dining, fashion, wine. Less suited to dense admin, children.
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.
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
Specimen
The same markup as every other noodle. Press, hover, open the menu and the dialog: shape, depth, texture and motion all change.
Buttons
Fields
Choices
Status
Tabs
Bars
Line & donut
Table
| Invoice | Status | Amount |
|---|---|---|
| INV-001 | Paid | €250.00 |
| INV-002 | Pending | €150.00 |
| INV-003 | Overdue | €350.00 |
Feedback & motion
Deployed
Your site is live.
- Cart
- Pay
- Done
Buttons
Fields
Choices
Status
Tabs
Bars
Line & donut
Table
| Invoice | Status | Amount |
|---|---|---|
| INV-001 | Paid | €250.00 |
| INV-002 | Pending | €150.00 |
| INV-003 | Overdue | €350.00 |
Feedback & motion
Deployed
Your site is live.
- Cart
- Pay
- Done
This palette on Tajarin. Load it after mian.css and put data-brand on the same element as data-noodle.
Use it
<!-- everything -->
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<html data-noodle="tajarin">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/tajarin.css">
<!-- or scope it to one element -->
<section data-noodle="tajarin" data-mode="dark">…</section>Palette
Left half light, right half dark. Every text pair is verified for WCAG AA contrast when the site is built.
Typography & shape
| --mn-font | ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
| --mn-font-heading | "EB Garamond", Garamond, "Adobe Garamond Pro", "Cormorant Garamond", "Iowan Old Style", ui-serif, Georgia, serif |
| --mn-radius-field / box / badge | 0px · 0px · 0px |
| density | comfortable |
| shadows | none |