Studio
Studio
Bang & Olufsen tasarım sistemi açık temalı bir arayüz dili kullanıyor. Ana marka rengi Midnight Indigo (#060daa); metinler Carbon Black (#191817), arka plan Pure White (#ffffff). Tipografide BeoSupreme kullanılıyor. Bu DESIGN.md dosyası 7 renk token'ı ve 3 kademeli bir yazı ölçeği içeriyor; Claude, Cursor veya v0 gibi yapay zekâ araçlarına verildiğinde Bang & Olufsen tarzında tutarlı arayüzler üretmelerine yardımcı olur.
Bağımsız Stil İncelemesi
Gallery of precise objects. A dark, velvet-lined showcase where each product rests, spotlighted with refined exactitude.
This design system balances classic luxury with contemporary minimalism. Rich, deep indigo (#060daa) and elegant black (#191817) create a sophisticated backdrop, punctuated by a delicate, almost cream-colored off-white (#fcfaee) for textual contrast. The signature element is the custom BeoSupreme typeface, used across all text sizes, which brings a unique, refined character, with precise letter-spacing adjustments at every size. The dominant visual language is clean, centered product photography on stark backgrounds, framed by generous negative space and a strict typographic hierarchy.
| Renk | HEX | CSS token | Kullanım (İngilizce) |
|---|---|---|---|
| Midnight Indigo | #060daa | --color-midnight-indigo | Footer background, primary accent for deep sections – creating a luxurious, immersive foundation. |
| Carbon Black | #191817 | --color-carbon-black | Dominant text color for headings and body content on light backgrounds, input borders – provides stark contrast and grounded presence. |
| Barely White | #fcfaee | --color-barely-white | Primary text color on dark backgrounds, selected button text – a creamy off-white that softens the high contrast. |
| Ash Gray | #555555 | --color-ash-gray | Secondary text, subtle link color – offers a muted informational tone against white. |
| Pure White | #ffffff | --color-pure-white | Page backgrounds, card backgrounds, input backgrounds – provides clean, expansive canvas. |
| Pale Silver | #e5e5e5 | --color-pale-silver | Subtle border colors for inputs – an almost imperceptible divider. |
| Pure Black | #000000 | --color-pure-black | Primary icon color, borders on ghost buttons – a hard, crisp edge or fill. |
| Font | Ağırlıklar | Yedek font |
|---|---|---|
| BeoSupreme | 400, 500, 700 | Open Sans |
| Rol | Boyut | Satır yüksekliği | Token |
|---|---|---|---|
| body | 14px | 1.43 | --text-body |
| heading | 24px | 1.25 | --text-heading |
| display | 36px | 1.15 | --text-display |
