AuraNatura Design System

Styleguide und Referenz aller Design-Elemente. Quelle: Figma via MCP.

Foundations

Farben

Aura Sand

50

#FAF7F2

100

#F3EEE8

200

#E7DFD4

300

#D7C9B8

400

#C3AF96

500

#AD9478

600

#8F7559

700

#715945

800

#4D3A2C

900

#2E221A

950

#1A120F

Aura Green

50

#F3FAED

100

#E4F2D4

200

#CCE6AA

300

#ADD97B

400

#8CC94F

500

#73B122

600

#5D8F1B

700

#47682D

800

#28401D

900

#152514

950

#06170E

Sonstige

Weiss

#FFFFFF

Schwarz

#000000

Signalrot

#C73A52

Sterngelb

#FFAA01

Abweichungen: Signalrot abgedunkelt von Figma #E24C65 auf #C73A52 (WCAG 4.5:1 Kontrast auf Weiss). Success nutzt Green 700 direkt (kein extra Token). Input-Borders von Sand 300 auf Sand 400 angehoben (WCAG SC 1.4.11, 3:1 Non-Text-Kontrast). Checkbox/Radio-Borders Sand 500 (gleicher Grund).

Typografie

Headlines (Poppins SemiBold 600)

XL — 56px / 76px

Nahrungsergänzung, die ankommt

LG — 40px / 50px

Nahrungsergänzung, die ankommt

MD — 32px / 42px

Nahrungsergänzung, die ankommt

SM — 28px / 38px

Nahrungsergänzung, die ankommt

XS — 20px / 30px

Nahrungsergänzung, die ankommt

Text (Poppins Medium 500)

XL — 20px / 24px

Hochdosiert. Laborgeprüft. Gut verträglich.

MD — 18px / 28px (ergänzt)

Hochdosiert. Laborgeprüft. Gut verträglich.

LG — 16px / 26px (Body Default)

Hochdosiert. Laborgeprüft. Gut verträglich.

SM — 14px / 24px

Hochdosiert. Laborgeprüft. Gut verträglich.

XS — 12px / 18px (ergänzt)

Hochdosiert. Laborgeprüft. Gut verträglich.

Spacing

8px-Grid mit Zwischenschritten.

--space-1: 4px

--space-2: 8px

--space-3: 12px

--space-4: 16px

--space-5: 24px

--space-6: 32px

--space-7: 40px

--space-8: 48px

--space-9: 64px

Shadows

--shadow-sm

--shadow-md

--shadow-lg

Border Radius

--radius-sm
4px

--radius-md
8px

--radius-lg
16px

--radius-full
40px (Pill)

Squircle (Progressive Enhancement)

corner-shape: squircle via @supports. Chrome 139+, Fallback: normaler border-radius.

border-radius

+ squircle

Elemente

Buttons

.btn + Variante + Grösse. SemiBold (600), Squircle PE. Icons: Phosphor Bold (.ph-bold), skalieren via 1.2em.

Grössen & Varianten

.btn-sm 14px / 36px min-h
.btn-md 16px / 48px min-h
.btn-lg 22px / 64px min-h
Icon links .btn-icon vor Text
Icon rechts .btn-icon nach Text

Primary — States

Normal bg: Green 700
Hover bg: Green 600 + shadow-lg
Active bg: Green 600
Focus Green 950 ring + shadow
Disabled opacity: 0.3

Secondary — States

Normal bg: Sand 200
Hover bg: Sand 300 + shadow-md
Active bg: Sand 400
Focus Green 600 ring + shadow
Disabled opacity: 0.3

Abweichungen: font-weight einheitlich SemiBold (Figma: Bold/SemiBold Mix). 3 Grössen statt 1. Focus: Green box-shadow Ring (Stripe-Ansatz, statt Figma Sand 50/900 Outline). Allgemeine Shadow-Tokens statt eigener Button-Shadow.

Icons: Phosphor Bold (.ph-bold, 2px) für Buttons, Tags, Navigation. Regular (.ph, 1.5px) für Inputs und Validierung. .ph-fill nur für Rating-Sterne (E-Commerce-Konvention).

Links

.text-link + Grösse. SemiBold, underline, Focus Sand 900 (WCAG 2.4.7).

Grössen

.text-link-sm 14px	Jetzt entdecken
.text-link-md 16px	Jetzt entdecken
.text-link-lg 22px	Jetzt entdecken

States

Normal color: Sand 900	Jetzt entdecken
Hover color: Green 600	Jetzt entdecken
Active color: Green 700	Jetzt entdecken
Focus Green 600 ring + shadow	Jetzt entdecken
Disabled opacity: 0.3 / .is-disabled	Jetzt entdecken

Abweichungen: SM/MD Grössen ergänzt. Disabled ergänzt. letter-spacing entfernt (Figma: 1.54px).

Tags

.tag + Variante. Grössen: Default (14px), .tag-lg (16px). Icon tauschbar via Phosphor Icons.

Produkt-Tag

.tag-sm 12px / 4px 8px	Testsieger
.tag-md 14px / 6px 10px	Testsieger
.tag-lg 16px / 8px 12px	Testsieger

Bewertungs-Tag

.tag-rating

Sand 100 bg / Bold + Link

4,3 27 Bewertungen

Abweichungen: Poppins SemiBold statt Inter Bold. Radius 8px statt 7px. SM/LG ergänzt.

Inputs

Standalone: .input. Mit Icon: .input-group + .input-field + .input-icon. Form: .input-pill / .input-box. Grössen: .input-md / .input-lg.

Pill (Sand 50, radius-full)

.input-md + Icon 48px / 16px / Lupe rechts
.input-lg + Icon 64px / 20px / Sparkle rechts
.input-md (ohne Icon) 48px / Standalone

Box (White, radius-lg)

Box-Inputs nutzen statische Labels oberhalb des Feldes (.input-label + .input-wrap). Kein Floating Label, kein Placeholder als Label-Ersatz (Wise-Ansatz).

.input-lg + Label 64px / Label oben	E-Mail-Adresse
.input-md + Label 48px / Label oben	Vorname
.input-md (ohne Label) 48px / nur Placeholder

States

Default border: Sand 400
Focus border: Green 600 + shadow ring
Disabled opacity: 0.3

Validierung

Error .input-error + .input-message	E-Mail-Adresse Bitte gib eine gültige E-Mail-Adresse ein.
Success .input-success + .input-message	E-Mail-Adresse E-Mail-Adresse bestätigt.

Abweichungen: Poppins statt Inter. Grössen MD/LG systematisiert (Figma: 3 verschiedene Höhen/Paddings). Focus: Border wechselt zu Green 600 + weicher box-shadow Ring (Stripe-Ansatz, statt Figma Sand 900 Outline).

Shopify+: Input-Klassen mit Prefix .input- vermeiden Konflikte. .input-group Pattern funktioniert in Liquid-Snippets.

Pill vs. Box: Pill (Sand 50, radius-full) wird hier bei der Suche gezeigt — ist aber auf alle Formularelemente übertragbar via .select-pill, .textarea-pill etc. Box ist der Standard für Formulare (Checkout, Account). Im Styleguide zeigen wir nur Box-Varianten, um Redundanz zu vermeiden.

Selects

Natives <select> mit appearance: none + Custom Chevron (Phosphor Caret-Down). Grössen: .select-md / .select-lg.

Box (White, radius-lg)

.select-md + Label 48px / Label oben	Land
.select-lg + Label 64px / Label oben	Kapselgrösse
Error .select-error	Versandart Bitte wähle eine Versandart.
Disabled opacity: 0.3

Abweichungen: Komplett custom (nicht in Figma). Natives <select> + appearance: none. Chevron als SVG-Background (Phosphor Caret-Down in Sand 600). Pill/Box-Varianten und Grössen konsistent mit Input-System.

Textarea

Mehrzeilige Eingabe. Immer Box-Variante (radius-lg, 2px border). .textarea + .input-wrap / .input-label.

Default + Label min-height: 120px	Nachricht
Error .textarea-error	Bewertung Zu kurz Bitte mindestens 20 Zeichen eingeben.
Disabled opacity: 0.3	Nicht verfügbar

Abweichungen: Nicht in Figma. Box-Styling konsistent mit Input-System. resize: vertical erlaubt.

Checks

Custom Checkboxen (.check) und Radios (.radio) via appearance: none. Accessible, keyboard-navigierbar.

Checkbox

Unchecked 20px / Sand 500 border	Newsletter abonnieren
Checked Green 700 bg + Checkmark	AGB akzeptieren
Disabled opacity: 0.3	Nicht verfügbar
Disabled + Checked opacity: 0.3	Bereits bestätigt

Radio

Gruppe

20px / 6px inner dot

Standardversand (3–5 Tage) Expressversand (1–2 Tage) Abholung (nicht verfügbar)

Abweichungen: Komplett custom (nicht in Figma). appearance: none + CSS-Styling. Markenfarbe Green 700 für Checked-State. Focus konsistent mit Input-System (Green box-shadow Ring).

Shopify+: .check / .radio Prefix vermeidet Konflikte mit Polaris-Klassen.

Komponenten

Ausstehend

Kapsel-Selekt

Produktkarte

Feature-Karten

Akkordeon / FAQ

Header

Footer

Referenz

Abweichungen vom Figma

Bewusste Abweichungen für Konsistenz und Accessibility. Details bei den jeweiligen Sektionen.

Buttons: font-weight SemiBold, 3 Grössen, Focus Sand 900, allgemeine Shadow-Tokens.

Links: SM/MD ergänzt, Disabled ergänzt, letter-spacing entfernt.

Tags: Poppins statt Inter, 8px statt 7px Radius, SM/LG ergänzt.

Typografie: Text MD (18px) und Text XS (12px) ergänzt.

Shadows: 3 Stufen statt 4. Kein separater Button-Shadow.

Shopify+ Hinweise

CSS Custom Properties sind kompatibel mit Shopify Dawn.

Klassen-Prefix (btn-, tag-) vermeidet Konflikte mit Shopify-Klassen.

Design Tokens lassen sich als Shopify Theme-Settings exponieren.

Font Loading: Bei Migration auf self-hosted Fonts umstellen.

Accessibility: Focus-States und Kontraste sind Lighthouse-ready. ARIA-Labels bei Komponentenentwicklung berücksichtigen.