Styleguide / Atelier

Seilnacht Atelier & Goldschmiede

Design-System aus der Seilnacht-Vorlage, umgestellt auf die Atelier-CI: Sand und Creme als Flächen, Braun für Text und Aktionen, Bordeaux nur im Logo. Jost für alles (Überschriften in Versalien, gesperrt). Schrift und Logo liegen lokal.

Tokens / Farben

Farbpalette

Bricks-Farbpalette „Atelier“. Die Namen sind die der Seilnacht-Vorlage, damit alle Klassen und Theme-Styles weiter greifen; die Werte sind die Atelier-CI.

--primary#4c3e2f · rgb(76, 62, 47)

--primary-hover#66533d · rgb(102, 83, 61)

--primary-ultra-light#faf6f2 · rgb(250, 246, 242)

--primary-light#e6d9ca · rgb(230, 217, 202)

--primary-semi-light#a78762 · rgb(167, 135, 98)

--primary-semi-dark#66533d · rgb(102, 83, 61)

--primary-dark#362f26 · rgb(54, 47, 38)

--primary-ultra-dark#2b2722 · rgb(43, 39, 34)

--action#82684a · rgb(130, 104, 74)

--action-hover#66533d · rgb(102, 83, 61)

--secondary#c6ad90 · rgb(198, 173, 144)

--base#4c3e2f · rgb(76, 62, 47)

--base-ultra-light#faf6f2 · rgb(250, 246, 242)

--base-light#e6d9ca · rgb(230, 217, 202)

--cream#faf6f2 · rgb(250, 246, 242)

--cream-dark#efe6dc · rgb(239, 230, 220)

--white#ffffff · rgb(255, 255, 255)

--black#000000 · rgb(0, 0, 0)

--secondary-light#e6d9ca · rgb(230, 217, 202)

--brand-bordeaux#8a2432 · rgb(138, 36, 50)

--brand-crown-blue#464b64 · rgb(70, 75, 100)

--brand-black-iris#2b3042 · rgb(43, 48, 66)

--brand-sand#c6ad90 · rgb(198, 173, 144)

Primitives / Überschriften

Überschriften H1 bis H4

Jost 500, uppercase, 3px gesperrt (Variablen font-heading-*). Die Basis setzt keine Standardgrößen (wie bei Seilnacht): ey-heading gibt Schrift, Versalien und Laufweite, die Größe kommt aus den Modifiern ey-heading–display, –section und –card.

h1 · ey-heading ey-heading--display

Trauringe aus Freiburg

h2 · ey-heading ey-heading--section

Goldschmiede und Atelier

h3 · ey-heading ey-heading--card

Verlobungsringe und Unikate

h4 · ey-heading

Unterlinden 5

Primitives / Fließtext

Fließtext

Jost 300, Zeilenhöhe 1.7 (Variablen font-body-*). Links, Fett und Kursiv aus der Schrift selbst, keine Fremdschnitte.

Im Goldschmiedeatelier Seilnacht in der Freiburger Altstadt entstehen Trauringe, Verlobungsringe und Unikate von Hand. Die Werkstatt arbeitet Erbstücke um, setzt Steine neu und übernimmt Reparaturen.

Dieser Absatz zeigt fette, kursive und verlinkte Textstellen in Jost. Ziffern wie 3.600 € und Referenzen wie „Ref. 241“ laufen im gleichen Schnitt. Der Text ist ein Platzhalter für die Atelier-Inhalte aus dem Backup.

ey-subtext

Subtext: schmale Spalte für Einleitungen unter Überschriften, Farbe –base.

ey-eyebrowEyebrow über Überschriften

--editorial-headline: clamp(40px, 5vw, 80px)

Zeit, die bleibt

--editorial-statement: clamp(32px, 4.5vw, 72px)

Zeit, die bleibt

--editorial-h2: clamp(29px, 3vw, 45px)

Zeit, die bleibt

--editorial-tagline: clamp(10px, 0.9vw, 13px)

Zeit, die bleibt

--editorial-body: clamp(15px, 1.1vw, 18px)

Zeit, die bleibt

Primitives / Buttons

Buttons

ey-btn für die Struktur, ey-btn–solid und ey-btn–outline für die Darstellung, ey-btn–primary (Dunkelbraun), ey-btn–action (Nussbraun) und ey-btn–inverse (auf dunklem Grund) für die Farbe.

ey-btn ey-btn--solid ey-btn--primaryPrimär Dunkelbraun

ey-btn ey-btn--solid ey-btn--actionAktion Nussbraun

ey-btn ey-btn--outline ey-btn--primaryOutline Dunkelbraun

ey-btn ey-btn--outline ey-btn--actionOutline Nussbraun

ey-btn ey-btn--outline-darkOutline dunkel

auf --primaryOutline invers Aktion Nussbraun

Tokens / Farbflächen