Wie tangerina. aussieht, klingt und sich anfühlt: auf dem Bildschirm, im Druck und im Laden im MULTI Open Shopping. Abgeleitet aus dem Kunstwerk von Danka Umbert, der offiziellen Markenanleitung, tangerina.me und der Ladenarchitektur.

Grundlagen

Bausteine

Vorlagen

Werte zum Weiterverwenden

tangerina. Design-System

Übersicht

Woher dieses System kommt und wie es zusammenhängt.

tangerina.

Seja leve, seja tangerina.

Dieses Design-System beschreibt, wie tangerina. aussieht, klingt und sich anfühlt: auf dem Bildschirm, im Druck und im Laden im MULTI Open Shopping in Rio Tavares. Es ist aus drei Quellen zusammengesetzt, die sich gegenseitig bestätigen:

Der Grundsatz in einem Satz

Viel Weiß, ein Ton Orange, ein Hauch Himmel, und die Kleidung bekommt die Bühne.

Orange ist die Marke, aber Orange ist kein Hintergrund. Es setzt einen Akzent pro Fläche: den Knopf, das Wort, die Frucht. Alles andere tritt zurück, damit die Ware wirkt. Genau so ist auch der Laden gebaut.

Was in diesem System steht

tangerina. Design-System

Farben

Pantone, CMYK und HEX, und vor allem: in welchem Verhältnis sie zueinander stehen.

Kernfarben aus der Markenanleitung

Diese fünf Töne sind verbindlich. Für alles Gedruckte gilt die Pantone-Nummer, nicht der HEX-Wert. Bildschirmfarben und Druckfarben lassen sich nicht exakt ineinander umrechnen.

Farben aus dem Kunstwerk von Danka Umbert

Das Banner ist die zweite, weichere Quelle. Diese Töne stehen nicht in der Anleitung, werden aber täglich benutzt, das Himmelblau ist inzwischen genauso erkennbar wie das Orange. Sie sind erlaubt für Flächen, Verläufe und Illustration, nicht für Logo und Knöpfe.

Neutrale aus dem Laden

Der Laden ist weiß und sandfarben, mit einem dunklen Holzelement an der Kasse. Diese Töne tragen alles, was nicht Akzent ist.

Das Mischungsverhältnis

Wenn du eine Fläche gestaltest, Instagram-Post, Schaufenster, Webseite, halte dich an diese Aufteilung. Sie ist der Grund, warum die Marke leicht wirkt und nicht laut.

Grün und Braun kommen aus dem 10-Prozent-Anteil dazu, nie zusätzlich. Zwei starke Farben nebeneinander, Orange und Grün großflächig, wirken wie Werbung, nicht wie Mode.

Erlaubte Farbpaare

Nur diese Kombinationen aus Fläche und Text sind geprüft und gut lesbar.

tangerina. Design-System

Schrift

Wilhelmina für den Namen, SF Pro für Titel, Helvetica Light für alles Übrige.

Drei Schriften, drei Aufgaben

Wilhelmina ist die eigens gezeichnete Hausschrift, sie ist die Wortmarke tangerina. selbst und darf nur für ganz große Titel und Claims benutzt werden. Im Web liegt sie als wilhelmina.woff2 auf tangerina.me; wo sie fehlt, springt Playfair Display ein (eine hochkontrastige Serifenschrift mit sehr ähnlichem Charakter).

SF Pro Medium ist laut Markenanleitung die Schrift für Überschriften. Helvetica LT Std Light ist die Schrift für Fließtext. Beide sind bewusst neutral: Der Charakter kommt aus Wilhelmina und aus den Bildern, nicht aus dem Lauftext.

Die Stufenleiter

Die harten Grenzen aus der Markenanleitung

tangerina. Design-System

Signatur und Lockups

Wortmarke plus Estilo · Moda · Beleza, die Markenliste und das orangefarbene Band.

Die offiziellen Schriftzüge

Es gibt vier fertige Schriftzüge, gezeichnet in Wilhelmina. Sie liegen als Bilddatei vor und werden nie nachgetippt, weil keine Schrift auf dem Rechner diese Formen trifft. Alle vier stecken in der Logodatei der Marke und liegen freigestellt im Ordner brand/wortmarke.

1. Die pure Wortmarke. Der Standard für Instagram, Webseite, Preisschild. Datei wortmarke-pur.

2. Mit der Schreibschriftzeile alma feminina. Für alles, was von der Haltung der Marke spricht: Schaufenster, Tüte, Titelbild. Datei wortmarke-alma.

3. Mit der Kampagnenzeile seja leve, seja tangerina. Für Story-Abschluss, Kampagne, Tragetasche. Datei wortmarke-sejaleve.

4. Gestapelt über drei Zeilen. Nur für hohe schmale Flächen: Rollup, Fahne, Schaufensterstreifen. Datei wortmarke-gestapelt.

Die Signatur der Marke

Im Kunstwerk steht die Wortmarke nie allein. Sie kommt immer mit einer festen Zeile darunter: ESTILO · MODA · BELEZA. Diese drei Wörter sagen in drei Sekunden, was der Laden ist. Zusammen bilden sie die Signatur, die auf Banner, Outdoor, LED-Wand und Schaufenster auftaucht.

Hauptfassung: Wortmarke in Orange, Zeile in Weiß, auf Himmelblau.

Maße

Die Zeile ist so breit wie die Wortmarke und sitzt darunter im Abstand einer Viertel-Wortmarkenhöhe. Ihre Schriftgröße beträgt rund ein Fünftel der Wortmarkenhöhe, Sperrung 0,22 em, Trenner sind Mittelpunkte mit Leerzeichen, keine Bindestriche.

Die Markenliste

Auf großen Flächen folgt unter der Signatur die Liste der geführten Marken. Sie steht immer in Weiß, untereinander, in dieser Reihenfolge, und endet mit der eigenen Marke.

Die Fremdmarken behalten ihre eigene Schreibweise. FARM in Versalien, dress to klein und gesperrt.

Das orangefarbene Band

Der Abbinder am unteren Rand von Outdoor und LED. Ein Satz, Versalien, Weiß auf Markenorange. Er nennt den Ort oder die Handlung, nie ein Angebot.

Grüne Fassung, wenn das Motiv daneben bereits viel Orange enthält.

Welche Fassung wann

tangerina. Design-System

Logo und Zeichen

Die Wortmarke, das Mandarinen-Icon aus dem Kunstwerk, und was damit verboten ist.

Die Wortmarke

Die Wortmarke ist ein Bild, kein Text. Sie ist in Wilhelmina gezeichnet und liegt als fertige Datei im Canva-Konto der Boutique (logo pdf tangerina, tangerina_logo_pantone.pdf). Sie wird nie neu getippt und nie nachgebaut, auch nicht „nur kurz“. Der Punkt gehört dazu: er macht aus dem Fruchtnamen eine Aussage.

Schutzraum

Rund um die Wortmarke bleibt mindestens die halbe Höhe des Schriftzugs frei, kein Text, kein Bildrand, keine Kante. In der Markenanleitung heißt das „Minimum whitespace“.

Das Mandarinen-Zeichen

Das Icon ist kein Ersatz für die Wortmarke, sondern das kleine Zeichen für Stickerei auf Kappen, Etiketten, Anhänger, Papiertüten und Aufkleber. Es ist nicht frei erfunden, sondern aus dem Kunstwerk von Danka Umbert herausgelöst, aus den gemalten Mandarinen im Banner. Deshalb trifft es die Handschrift der Marke, statt sie zu imitieren.

Verfremdet, 5 Farben · die Hauptfassung Dieselbe Frucht aus dem Kunstwerk, aber auf fünf klar begrenzte Flächen heruntergebrochen. Das ist die Fassung, die an den Hersteller geht und die überall im System benutzt wird. Sie trägt auch sehr klein. Datei: tangerina-icon-arte-grob.svg

Verfremdet, 8 Farben Klarere Licht- und Schattenzonen. Für große Anwendungen ab etwa 80 mm. -mittel.svg

Der reine Ausschnitt Direkt aus dem Banner freigestellt, alle Malstriche erhalten. Kein Vektor, daher nur für Druck bis rund 13 cm. Nicht für Stickerei.

Auf der Himmelsscheibe Für Anhänger, Aufkleber und Beiträge

Einfarbig OrangeHelle Stoffe, Stempel, einfarbiger Druck

Einfarbig BraunBeige und ockerfarbene Kappen

Einfarbig WeißDunkle Stoffe und Untergründe

Die einfarbigen Fassungen sind aus derselben verfremdeten Zeichnung abgeleitet, nicht neu gezeichnet. Zwischen Blatt und Frucht bleibt eine haarfeine Aussparung stehen, sonst verschmelzen beide in einer Farbe zu einer formlosen Fläche.

Welche Datei wofür

Was mit Logo und Icon nicht passieren darf

tangerina.

Nicht sperren oder stauchen

Nicht neigen oder drehen

Nicht umfärben

Keine Schlagschatten oder Effekte

Ebenso nicht: Icon und Wortmarke selbst zu einem neuen Logo zusammenbauen, das Icon in einen Kreis oder ein Wappen setzen, oder das Icon als Ersatz für das Wort tangerina. verwenden. Wer beides zusammen braucht, nimmt die fertige Lockup-Datei.

tangerina. Design-System

Bildsprache und Kunstwerk

Das Banner von Danka Umbert, seine gemessene Palette, seine Motive und wie man die Komposition nachbaut.

Das Kunstwerk ist die Quelle, nicht die Dekoration

Das Banner von Danka Umbert ist die visuelle Verfassung der Marke. Alles Weitere leitet sich daraus ab. Wichtig ist der Unterschied: Das Bild wird nicht nachgeahmt, sondern ausgeschnitten. Das Mandarinen-Icon zum Beispiel ist keine Zeichnung im Stil des Bildes, sondern eine echte Frucht daraus, freigestellt. Deshalb passt es zwangsläufig, ohne Interpretation dazwischen.

Was das Bild aufbaut

1. Himmelblauer Grund. Eine ruhige, ungebrochene Fläche. Sie ist der Grund, warum so viel Orange nicht schreit.
2. Früchte in den Ecken. Gemalte Mandarinen mit Blättern, weißen Blüten und aufgeschnittenen Hälften. Sie rahmen, sie füllen nie die Mitte.
3. Die Figur rechts. Angeschnitten, in Bewegung, ohne Gesicht. Es geht um das Kleid und die Geste, nicht um ein Model.
4. Der Textblock links. Wortmarke groß, darunter die Zeile ESTILO · MODA · BELEZA, darunter die Marken.
5. Der Abbinder unten. Ein Satz in Weiß, der sagt, wo wir sind.

Die Querfassung für Outdoor und LED: dieselben Bausteine, nur umgestellt. Früchte links, Text mittig, Figur rechts, orangefarbenes Band unten mit dem Hinweis auf das MULTI Open Shopping.

Die gemessene Palette des Bildes

Diese Werte sind direkt aus der Originaldatei gemessen, nicht geschätzt. Sie liegen nah an der Markenanleitung, sind aber im Rot etwas heißer. Das ist Absicht des Bildes und gehört zum Kampagnenmotiv, nicht zur Grundpalette.

Die vier Motive

Im Icon gilt eine Ausnahme: dort sitzt oben der Kelch, keine Blüte. Blüte und Frucht sind zwei Stadien derselben Pflanze, und das Zeichen zeigt die Frucht. Die Blüte bleibt dem großen Bild vorbehalten.

Die Komposition nachbauen

Wer ein neues Motiv braucht, setzt dieselben Zonen. Das ist die Vorlage, nicht das Bild selbst.

Frucht oben Frucht unten Wortmarke Figur, angeschnitten

Die Regeln der Fläche

• Der Himmel füllt mindestens die Hälfte der Fläche und bleibt frei von Text.
• Früchte sitzen nur an den Rändern und dürfen angeschnitten sein.
• Die Figur steht rechts, angeschnitten, ohne Gesicht.
• Text steht links auf freiem Himmel, nie über der Figur.
• Zwischen Wortmarke und Bildrand bleibt mindestens die halbe Höhe des Schriftzugs frei.

Hochkant

In der Story-Fassung wandert der Textblock nach oben und der Abbinder nach unten, die Figur bleibt rechts. Die Früchte behalten ihre Ecken. So bleibt das Motiv in jedem Format wiedererkennbar, ohne dass etwas gestaucht wird.

Fertige Fassungen ohne Logo liegen im Ordner Danka Umbert - Arte / insta sem logo und können frei betextet werden.

Fotografie

tangerina. Design-System

Raster und Abstände

Basis 4, 12 Spalten, weiche Radien und Schatten, die von oben kommen.

Alles ist ein Vielfaches von 4

Jeder Abstand im System, Innenabstand eines Knopfes, Luft zwischen zwei Absätzen, Rand einer Karte, kommt aus dieser Leiter. Der Grund ist einfach: Wenn alle Abstände aus derselben Reihe stammen, wirkt eine Seite ruhig, auch wenn niemand nachmisst.

Raster

12 Spalten, 24 px Rinne, maximal 1200 px breiter Inhalt. Auf dem Handy wird daraus eine Spalte mit 20 px Rand.

Typische Aufteilungen: Bild + Text = 7 / 5 · Markenkarten = 3 × 4 · Startseiten-Bild = volle 12.

Radien: weich, nie eckig

Die Regale und Kleiderständer im Laden haben „leichte, organische Formen“. Das übersetzt sich in abgerundete Ecken überall, scharfe 0-Grad-Ecken gibt es im System nicht.

Schatten: Licht kommt von oben

Wie bei der gemalten Frucht: Licht von oben, warmer Schatten darunter, nie hart. Schatten sind immer eine Mischung aus einer engen und einer weiten Ebene.

Vertikaler Rhythmus einer Seite

Bewegung

Alles bewegt sich mit derselben Kurve: cubic-bezier(.16, 1, .3, 1), schnell losfahren, sanft ankommen. Dauer: 180 ms für kleine Zustandswechsel (Knopf), 320 ms für Karten und Menüs, 700 ms für Inhalte, die beim Scrollen einblenden. Elemente blenden mit 32 px Versatz von unten ein, nie von der Seite und nie mit Sprung.

tangerina. Design-System

Tonalität

Wie Tangerina spricht, auf Portugiesisch zuerst, Englisch gleichwertig daneben.

Wie Tangerina klingt

Portugiesisch ist die Hauptsprache, Englisch die zweite. Der Ton ist der einer Freundin, die sich mit Mode auskennt, warm, direkt, nie belehrend und nie marktschreierisch. Die Marke duzt (você) und spricht Frauen an, ohne sie zu bevormunden.

Der Kerntext von tangerina.me. Kurze Sätze, sinnliche Bilder, ein Rhythmus, der sich laut lesen lässt. Das ist die Messlatte für alles andere.

Vier Eigenschaften

Wortwahl

Feste Formulierungen

Diese Sätze gehören der Marke und werden nicht umgeschrieben:

• Vista Tangerina., der Schlusssatz des Markentexts
• Seja leve, seja tangerina., Bio-Zeile, Story-Claim
• Descubra o Mundo Tangerina!, Überschrift über Ort und Kanälen
• Diário Tangerina, Name des Blogs
• Grupo VIP no WhatsApp, nie „Newsletter“, nie „Club“

Knöpfe und Aufforderungen

Ein Knopftext ist ein Verb und maximal drei Wörter: Fala pelo Whats, Siga-nos no Insta, Ver no Maps, Entrar no grupo VIP, Ler artigo. Kein „Saiba mais“, kein „Clique aqui“, der Text sagt, was passiert.

tangerina. Design-System

Knöpfe

Pillenform, ein Orange pro Fläche, Verb im Text.

Die vier Knöpfe

Pro Fläche gibt es genau einen orangen Knopf. Er zeigt die eine Handlung, die wir uns wünschen. Alles Weitere ist ein Rahmen-Knopf oder ein Link. Knöpfe sind immer Pillen, runde Enden, passend zu den organischen Formen im Laden.

Wann welcher

• Orange (primary), die Haupthandlung: WhatsApp schreiben, in den VIP-Gruppe eintreten, zum Laden navigieren. Einer pro Bildschirm.
• Rahmen (secondary), die zweitbeste Handlung direkt daneben.
• Grün (support), nur für WhatsApp-bezogene Aktionen, wo Grün ohnehin die erwartete Farbe ist. Nicht als zweiter Primärknopf missbrauchen.
• Leise (quiet), nebensächliche Aktionen, Filter, „Mehr laden“.
• Link, im Fließtext und in Listen.

Größen

Auf dem Handy ist jeder Knopf mindestens 48 px hoch und, wenn er allein steht, volle Breite.

Auf verschiedenen Untergründen

Zustände

Der Fokusrahmen ist Pflicht, er ist für Menschen da, die mit der Tastatur navigieren, und darf nie wegoptimiert werden.

tangerina. Design-System

Karten und Flächen

Standardkarte, Markenkarte, Aktionsfläche, Etiketten und Bewertungen.

Standardkarte

Die Karte ist der Grundbaustein: Bild oben, Vorzeile, Titel, ein bis zwei Sätze, ein Link. Sie hebt sich beim Überfahren leicht an, 3 px, nicht mehr.

Markenkarte

Für die vier Marken im Laden. Kein Bild, nur der Name in Wilhelmina, die Marken bringen ihre eigene Bildwelt mit, und die soll nicht mit unserer konkurrieren.

Aktionsfläche

Große farbige Fläche für genau eine Einladung. Maximal eine pro Seite.

Etiketten

Etiketten sind immer hell hinterlegt mit farbigem Text, nie vollflächig Orange. Sonst konkurrieren sie mit dem Knopf.

Bewertungskarte

tangerina. Design-System

Formulare

Wenige Felder, große Schrift, Fehlermeldungen, die weiterhelfen.

Eingabefelder

Tangerina fragt selten etwas ab, die meisten Wege führen über WhatsApp. Wo doch ein Formular nötig ist (VIP-Anmeldung, Kontakt, Terminwunsch), gilt: wenige Felder, große Schrift, klare Fehlermeldungen auf Portugiesisch.

Zustände eines Feldes

Regeln

tangerina. Design-System

Navigation

Kopfzeile mit dem Namen in der Mitte, Handy-Menü, Fußzeile.

Kopfzeile

Der Name steht in der Mitte, das ist die Eigenart der Marke und bleibt so. Links die drei Menüpunkte, rechts die Sprachumschaltung. Die Leiste klebt beim Scrollen oben und ist leicht durchscheinend, damit die Bilder darunter durchschimmern.

Auf dem Handy

Brotkrumen

Início  ›  Diário Tangerina  ›  Como usar estampa sem medo

Fußzeile

tangerina. Design-System

Instagram

Vier Beitragstypen, drei Story-Fassungen und wie das Raster als Ganzes wirkt.

Die vier Beitragstypen

Mehr braucht der Kanal nicht. Wer jede Woche etwas Neues erfindet, bekommt ein Profil, das aussieht wie fünf verschiedene Läden. Format: 1080 × 1350 (hochkant) für Looks und Kampagnen, 1080 × 1080 für Zitate und Hinweise.

Nova Coleção

Verão em Floripa

tangerina.

1 Look. Foto trägt, Text unten in der Ecke.

Chegou coleção nova

Peças Dress To e FARM Rio já na loja.

tangerina.

2 Ankündigung. Himmelblau, Frucht, ein Satz.

Tangerina é mais do que cheiro.
É uma cor que veste.

tangerina.me

3 Zitat, quadratisch. Sand, Wilhelmina kursiv.

Na loja hoje

Atendimento com hora marcada

tangerina.

4 Service. Gleiche Struktur, anderer Anlass.

Story

Format 1080 × 1920. Die gestrichelte Linie zeigt den sicheren Bereich: Alles Wichtige bleibt darin, sonst verdecken es der Instagram-Kopf oben und der Antwortbalken unten.

sicherer Bereich

Seja leve,
seja tangerina.

Novidades chegando essa semana.

Arraste para cima

tangerina.

Claim-Story auf Himmelblau.

sicherer Bereich

Look do dia

Vestido Dress To, R$ 749

Fala pelo Whats

tangerina.

Produkt-Story über einem Foto.

sicherer Bereich

Hoje até 20h

MULTI Open Shopping, Rio Tavares.

Ver no Maps

tangerina.

Hinweis-Story auf Sand.

Wie das Profil als Ganzes wirkt

Alle drei Beiträge in einer Reihe sollen zusammen funktionieren. Bewährte Folge: zwei Fotos, dann eine farbige Fläche. So bekommt das Raster Luft, ohne dass ein Muster erzwungen wirkt.

tangerina. Design-System

Druck und Laden

Preisschild, Papiertüte, Schilder, Schaufenster und die Maße für die Produktion.

Preisschild und Anhänger

Format 50 × 80 mm, Loch oben mittig. Weiß ist die Regel, Himmelblau die Ausnahme für die Eigenmarke Tangerina. Der Preis steht in SF Pro Medium, nicht in Wilhelmina: Zahlen in der Hausschrift sind schlecht lesbar, und ein Preis soll man erfassen, nicht bewundern.

tangerina.

R$ 749,00

Dress To
Vestido midi · M

Standard, Fremdmarke

tangerina.

R$ 389,00

Marca própria
Blusa de linho · P

Eigenmarke, Himmelblau

tangerina.

R$ 249,00

Seleção especial
Enquanto durarem

Aktion, Sand statt Rot

Papiertüte

tangerina.

Sandfarben, Frucht über der Wortmarke

tangerina.

Weiße Fassung für kleine Tüten

Schilder im Laden

Innenschilder sind ruhig: Sand oder Grün, nie Orange. Orange bleibt der Fassade und dem Schaufenster vorbehalten, damit es von außen wirkt und drinnen nicht stört.

Schaufenster und Außenwerbung

Großflächen leben vom Kunstwerk: Himmel als Grund, gemalte Früchte als Motiv, die Wortmarke groß und mittig. Ein Satz, nicht mehr. Wer im Vorbeifahren liest, hat zwei Sekunden.

tangerina.

Seja leve, seja tangerina.

Maße für die Produktion

tangerina. Design-System

Webseite

Aufbau der Startseite von tangerina.me und die technischen Werte dahinter.

Aufbau der Startseite

tangerina.me ist kein Onlineshop, sondern eine Einladung in den Laden. Deshalb endet fast jeder Abschnitt bei WhatsApp, Instagram oder Google Maps. Die Reihenfolge ist immer gleich: Bild, wer wir sind, welche Marken, was Kundinnen sagen, wo wir sind.

tangerina.me

InícioBlogBio

tangerina.

PT / EN

Vista Tangerina.

Moda feminina multimarcas em Florianópolis.

Ver no Maps

Sobre nós.

Tangerina é mais do que cheiro. É um sabor que abraça. É uma cor que veste. Tangerina é presença que transforma, um toque que fica, uma essência que marca.

Nossas Marcas

Trabalhamos com marcas que compartilham esse propósito.

Dress To

DNA brasileiro e estampas exclusivas, direto do Rio.

FARM Rio

Cores vibrantes e o borogodó carioca.

Tangerina

Nossa marca própria, design autoral e curadoria.

Grupo VIP no WhatsApp

Acesso antecipado a coleções, descontos exclusivos e looks selecionados a cada semana.

Entrar no grupo VIP

tangerina.

MULTI Open Shopping
Rio Tavares, Florianópolis, SC

Navegação

InícioDiário TangerinaBio

Fale conosco

WhatsAppInstagramGoogle Maps

Was der Bildschirmentwurf technisch bedeutet

Die Webseite läuft auf Vite, React und Tailwind. Die Farben liegen dort als HSL-Variablen in src/index.css. Diese Werte entsprechen dem System:

• --primary: 22 90% 52% ist das Markenorange
• --secondary: 204 45% 72% ist das Himmelblau aus dem Kunstwerk
• --accent: 134 30% 38% ist das Blattgrün
• --foreground: 200 10% 25% ist Tinta, der Fließtext
• --radius: 0.5rem ist der kleine Radius; Knöpfe bekommen zusätzlich rounded-full
• Die Hausschrift liegt als src/assets/fonts/wilhelmina.woff2 und ist als font-wilhelmina eingebunden

Verhalten

Inhalte blenden beim Scrollen mit 32 px Versatz von unten ein, Dauer 700 ms, Kurve cubic-bezier(.16, 1, .3, 1). Karten in einer Reihe kommen versetzt, 70 ms Abstand zueinander. Nichts fliegt von der Seite herein, nichts hüpft.

tangerina. Design-System

Design-Tokens

Alle Werte maschinenlesbar. Kopieren und in Figma (Tokens Studio), Tailwind, Style Dictionary oder Lovable einlesen.

CSS-Variablen

Für die Webseite. In src/index.css einfügen oder als eigene Datei laden.

/* ============================================================
   tangerina. Design Tokens
   Quelle: offizielle Markenanleitung (Canva DAGwCwIl6MM),
   Kunstwerk von Danka Umbert (Banner Multi), tangerina.me,
   Ladenarchitektur 3P Studio.
   Verbindlich fuer den Druck ist immer die Pantone-Nummer.
   ============================================================ */

:root {
  /* ---------- Marke: Kernfarben (aus der Markenanleitung) ---------- */
  --tg-orange:            #F47B3D; /* Pantone P 34-5 U  · CMYK 0/64/84/0   */
  --tg-orange-deep:       #D8702C; /* Pantone P 30-15 U · CMYK 10/66/90/10 */
  --tg-green:             #458357; /* Pantone P 147-13 U· CMYK 58/0/66/40  */
  --tg-green-light:       #85CA9B; /* Pantone P 142-7 U · CMYK 49/0/51/0   */
  --tg-brown:             #60442D; /* Pantone P 33-15 U · CMYK 45/63/80/44 */

  /* ---------- Marke: Farben aus dem Kunstwerk (Danka Umbert) ---------- */
  --tg-sky:               #88C4E8; /* Himmel des Banners: der wichtigste Nicht-Anleitungs-Ton */
  --tg-sky-deep:          #6FA8CC;
  --tg-peel-light:        #F5BF4D; /* Sonnenseite der Frucht      */
  --tg-peel-mid:          #F2900F;
  --tg-peel-shadow:       #C95A05; /* Schattenseite der Frucht    */
  --tg-peel-dark:         #9E3D10;
  --tg-leaf-light:        #91A56D;
  --tg-leaf-dark:         #3A4F28;
  --tg-blossom:           #F1F9FA; /* weisse Orangenbluete            */
  --tg-campaign-red:      #E52C02; /* Kleid im Kunstwerk, NUR Kampagne */

  /* ---------- Neutrale (Laden + Web) ---------- */
  --tg-paper:             #FCFCFC; /* Grundflaeche Bildschirm     */
  --tg-sand:              #F3ECE2; /* Sandton, Boden des Ladens   */
  --tg-sand-deep:         #E6DACA;
  --tg-wood:              #6B4A32; /* dunkles Holz an der Kasse   */
  --tg-ink:               #394246; /* Fliesstext                  */
  --tg-ink-soft:          #6A767C; /* Sekundaertext               */
  --tg-line:              #DAE2E7; /* Linien, Rahmen              */
  --tg-white:             #FFFFFF;

  /* ---------- Semantisch (so werden sie im Layout benutzt) ---------- */
  --tg-color-bg:            var(--tg-paper);
  --tg-color-bg-alt:        var(--tg-sand);
  --tg-color-surface:       var(--tg-white);
  --tg-color-text:          var(--tg-ink);
  --tg-color-text-muted:    var(--tg-ink-soft);
  --tg-color-text-invert:   var(--tg-white);
  --tg-color-action:        var(--tg-orange);
  --tg-color-action-hover:  var(--tg-orange-deep);
  --tg-color-support:       var(--tg-green);
  --tg-color-highlight:     var(--tg-sky);
  --tg-color-border:        var(--tg-line);
  --tg-color-focus:         var(--tg-orange-deep);

  /* ---------- Schrift ---------- */
  --tg-font-display: "Wilhelmina", "Playfair Display", Georgia, "Times New Roman", serif;
  --tg-font-head:    "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont,
                     "Inter", "Helvetica Neue", Arial, sans-serif;
  --tg-font-body:    "Helvetica LT Std", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --tg-weight-display: 700;
  --tg-weight-head:    500;   /* SF Pro Medium, so steht es in der Anleitung */
  --tg-weight-body:    300;   /* Helvetica LT Std Light                       */
  --tg-weight-body-em: 400;

  /* Groessen: Schritt 1.25. Kleiner als 18px nie auf dem Bildschirm. */
  --tg-text-xs:   14px;  /* nur Bildunterschrift, Preis-Kleingedrucktes */
  --tg-text-sm:   16px;
  --tg-text-base: 18px;  /* Mindestgroesse digital laut Anleitung */
  --tg-text-md:   22px;
  --tg-text-lg:   28px;
  --tg-text-xl:   36px;
  --tg-text-2xl:  48px;
  --tg-text-3xl:  64px;
  --tg-text-4xl:  88px;

  --tg-leading-tight: 1.08;
  --tg-leading-snug:  1.25;
  --tg-leading-body:  1.62;
  --tg-tracking-tight: -0.02em;
  --tg-tracking-wide:  0.14em;

  /* ---------- Raster und Abstaende (Basis 4) ---------- */
  --tg-space-1:  4px;
  --tg-space-2:  8px;
  --tg-space-3:  12px;
  --tg-space-4:  16px;
  --tg-space-5:  24px;
  --tg-space-6:  32px;
  --tg-space-7:  48px;
  --tg-space-8:  64px;
  --tg-space-9:  96px;
  --tg-space-10: 128px;

  --tg-container: 1200px;
  --tg-gutter:    24px;

  /* ---------- Radien: weich und organisch, nie eckig ---------- */
  --tg-radius-sm:   8px;
  --tg-radius-md:   16px;
  --tg-radius-lg:   28px;
  --tg-radius-pill: 999px;

  /* ---------- Schatten: nur Licht von oben, nie hart ---------- */
  --tg-shadow-sm: 0 1px 2px rgba(57,66,70,.06), 0 2px 8px rgba(57,66,70,.05);
  --tg-shadow-md: 0 2px 4px rgba(57,66,70,.05), 0 12px 28px rgba(57,66,70,.08);
  --tg-shadow-lg: 0 4px 8px rgba(57,66,70,.05), 0 28px 60px rgba(57,66,70,.12);

  /* ---------- Bewegung ---------- */
  --tg-ease: cubic-bezier(.16, 1, .3, 1);
  --tg-dur-fast: 180ms;
  --tg-dur:      320ms;
  --tg-dur-slow: 700ms;

  /* ---------- Schutzraum Logo ---------- */
  --tg-logo-clearspace: 0.5em; /* = halbe Hoehe der Wortmarke, rundum */
}

W3C Design Token Format (JSON)

Für Figma über das Plugin Tokens Studio, für Style Dictionary und für Lovable.

{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "tangerina. Design Tokens im W3C Design Token Format. Importierbar in Figma (Tokens Studio), Style Dictionary, Tailwind. Verbindlich fuer den Druck ist die Pantone-Nummer im $extensions-Block.",
  "color": {
    "brand": {
      "orange": {
        "$type": "color",
        "$value": "#F47B3D",
        "$description": "Laranja Tangerina. Die Hauptfarbe der Marke.",
        "$extensions": {
          "tangerina": {
            "pantone": "P 34-5 U",
            "cmyk": "0/64/84/0"
          }
        }
      },
      "orangeDeep": {
        "$type": "color",
        "$value": "#D8702C",
        "$description": "Dunkles Orange. Kontur, Hover, Text auf hellem Orange.",
        "$extensions": {
          "tangerina": {
            "pantone": "P 30-15 U",
            "cmyk": "10/66/90/10"
          }
        }
      },
      "green": {
        "$type": "color",
        "$value": "#458357",
        "$description": "Verde Folha. Blattgruen.",
        "$extensions": {
          "tangerina": {
            "pantone": "P 147-13 U",
            "cmyk": "58/0/66/40"
          }
        }
      },
      "greenLight": {
        "$type": "color",
        "$value": "#85CA9B",
        "$description": "Blattrippe. Nur als Flaeche, nie als Text.",
        "$extensions": {
          "tangerina": {
            "pantone": "P 142-7 U",
            "cmyk": "49/0/51/0"
          }
        }
      },
      "brown": {
        "$type": "color",
        "$value": "#60442D",
        "$description": "Marrom. Stiel, Akzent, Holz.",
        "$extensions": {
          "tangerina": {
            "pantone": "P 33-15 U",
            "cmyk": "45/63/80/44"
          }
        }
      }
    },
    "artwork": {
      "sky": {
        "$type": "color",
        "$value": "#88C4E8",
        "$description": "Himmelblau aus dem Banner von Danka Umbert, direkt aus der Datei gemessen. Steht nicht in der Anleitung, ist aber der meistbenutzte Ton der Marke."
      },
      "skyDeep": {
        "$type": "color",
        "$value": "#6FA8CC"
      },
      "peelLight": {
        "$type": "color",
        "$value": "#F5BF4D",
        "$description": "Sonnenseite der gemalten Frucht."
      },
      "peelMid": {
        "$type": "color",
        "$value": "#F2900F"
      },
      "peelShadow": {
        "$type": "color",
        "$value": "#C95A05",
        "$description": "Schattenseite der gemalten Frucht."
      },
      "peelDark": {
        "$type": "color",
        "$value": "#9E3D10"
      },
      "leafLight": {
        "$type": "color",
        "$value": "#91A56D"
      },
      "leafDark": {
        "$type": "color",
        "$value": "#3A4F28"
      },
      "blossom": {
        "$type": "color",
        "$value": "#F1F9FA",
        "$description": "Weisse Orangenbluete im Kunstwerk."
      },
      "campaignRed": {
        "$type": "color",
        "$value": "#E52C02",
        "$description": "Rot des Kleides im Kunstwerk. NUR im Kampagnenbild. Nie als Flaechen- oder Textfarbe verwenden."
      }
    },
    "neutral": {
      "paper": {
        "$type": "color",
        "$value": "#FCFCFC"
      },
      "sand": {
        "$type": "color",
        "$value": "#F3ECE2",
        "$description": "Sandton: Boden und Waende des Ladens."
      },
      "sandDeep": {
        "$type": "color",
        "$value": "#E6DACA"
      },
      "wood": {
        "$type": "color",
        "$value": "#6B4A32",
        "$description": "Dunkles Holz am Kassentresen."
      },
      "ink": {
        "$type": "color",
        "$value": "#394246"
      },
      "inkSoft": {
        "$type": "color",
        "$value": "#6A767C"
      },
      "line": {
        "$type": "color",
        "$value": "#DAE2E7"
      },
      "white": {
        "$type": "color",
        "$value": "#FFFFFF"
      }
    },
    "semantic": {
      "background": {
        "$type": "color",
        "$value": "{color.neutral.paper}"
      },
      "backgroundAlt": {
        "$type": "color",
        "$value": "{color.neutral.sand}"
      },
      "surface": {
        "$type": "color",
        "$value": "{color.neutral.white}"
      },
      "text": {
        "$type": "color",
        "$value": "{color.neutral.ink}"
      },
      "textMuted": {
        "$type": "color",
        "$value": "{color.neutral.inkSoft}"
      },
      "textInvert": {
        "$type": "color",
        "$value": "{color.neutral.white}"
      },
      "action": {
        "$type": "color",
        "$value": "{color.brand.orange}"
      },
      "actionHover": {
        "$type": "color",
        "$value": "{color.brand.orangeDeep}"
      },
      "support": {
        "$type": "color",
        "$value": "{color.brand.green}"
      },
      "highlight": {
        "$type": "color",
        "$value": "{color.artwork.sky}"
      },
      "border": {
        "$type": "color",
        "$value": "{color.neutral.line}"
      },
      "focus": {
        "$type": "color",
        "$value": "{color.brand.orangeDeep}"
      }
    }
  },
  "fontFamily": {
    "display": {
      "$type": "fontFamily",
      "$value": [
        "Wilhelmina",
        "Playfair Display",
        "Georgia",
        "serif"
      ],
      "$description": "Nur fuer die Wortmarke und sehr grosse Titel. Wilhelmina ist die eigens gezeichnete Hausschrift; Playfair Display ist der Web-Ersatz."
    },
    "head": {
      "$type": "fontFamily",
      "$value": [
        "SF Pro Display",
        "-apple-system",
        "Inter",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "$description": "Headliners laut Markenanleitung: SF Pro Medium."
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Helvetica LT Std",
        "Helvetica Neue",
        "Helvetica",
        "Arial",
        "sans-serif"
      ],
      "$description": "Content laut Markenanleitung: Helvetica LT Std Light."
    }
  },
  "fontWeight": {
    "display": {
      "$type": "fontWeight",
      "$value": 700
    },
    "head": {
      "$type": "fontWeight",
      "$value": 500
    },
    "body": {
      "$type": "fontWeight",
      "$value": 300
    },
    "bodyEmph": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "fontSize": {
    "xs": {
      "$type": "dimension",
      "$value": "14px",
      "$description": "Nur Bildunterschrift und Kleingedrucktes. Nie fuer Fliesstext."
    },
    "sm": {
      "$type": "dimension",
      "$value": "16px"
    },
    "base": {
      "$type": "dimension",
      "$value": "18px",
      "$description": "Mindestgroesse digital laut Markenanleitung."
    },
    "md": {
      "$type": "dimension",
      "$value": "22px"
    },
    "lg": {
      "$type": "dimension",
      "$value": "28px"
    },
    "xl": {
      "$type": "dimension",
      "$value": "36px"
    },
    "2xl": {
      "$type": "dimension",
      "$value": "48px"
    },
    "3xl": {
      "$type": "dimension",
      "$value": "64px"
    },
    "4xl": {
      "$type": "dimension",
      "$value": "88px"
    }
  },
  "lineHeight": {
    "tight": {
      "$type": "number",
      "$value": 1.08
    },
    "snug": {
      "$type": "number",
      "$value": 1.25
    },
    "body": {
      "$type": "number",
      "$value": 1.62
    }
  },
  "letterSpacing": {
    "tight": {
      "$type": "dimension",
      "$value": "-0.02em"
    },
    "wide": {
      "$type": "dimension",
      "$value": "0.14em"
    }
  },
  "spacing": {
    "1": {
      "$type": "dimension",
      "$value": "4px"
    },
    "2": {
      "$type": "dimension",
      "$value": "8px"
    },
    "3": {
      "$type": "dimension",
      "$value": "12px"
    },
    "4": {
      "$type": "dimension",
      "$value": "16px"
    },
    "5": {
      "$type": "dimension",
      "$value": "24px"
    },
    "6": {
      "$type": "dimension",
      "$value": "32px"
    },
    "7": {
      "$type": "dimension",
      "$value": "48px"
    },
    "8": {
      "$type": "dimension",
      "$value": "64px"
    },
    "9": {
      "$type": "dimension",
      "$value": "96px"
    },
    "10": {
      "$type": "dimension",
      "$value": "128px"
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": "8px"
    },
    "md": {
      "$type": "dimension",
      "$value": "16px"
    },
    "lg": {
      "$type": "dimension",
      "$value": "28px"
    },
    "pill": {
      "$type": "dimension",
      "$value": "999px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": "#3942460F",
          "offsetX": "0px",
          "offsetY": "1px",
          "blur": "2px",
          "spread": "0px"
        },
        {
          "color": "#3942460D",
          "offsetX": "0px",
          "offsetY": "2px",
          "blur": "8px",
          "spread": "0px"
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": "#3942460D",
          "offsetX": "0px",
          "offsetY": "2px",
          "blur": "4px",
          "spread": "0px"
        },
        {
          "color": "#39424614",
          "offsetX": "0px",
          "offsetY": "12px",
          "blur": "28px",
          "spread": "0px"
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": "#3942460D",
          "offsetX": "0px",
          "offsetY": "4px",
          "blur": "8px",
          "spread": "0px"
        },
        {
          "color": "#3942461F",
          "offsetX": "0px",
          "offsetY": "28px",
          "blur": "60px",
          "spread": "0px"
        }
      ]
    }
  },
  "duration": {
    "fast": {
      "$type": "duration",
      "$value": "180ms"
    },
    "base": {
      "$type": "duration",
      "$value": "320ms"
    },
    "slow": {
      "$type": "duration",
      "$value": "700ms"
    }
  },
  "cubicBezier": {
    "tangerina": {
      "$type": "cubicBezier",
      "$value": [
        0.16,
        1,
        0.3,
        1
      ]
    }
  }
}