Kleurenpalet

Het FortiSan kleurenpalet: chique, elegant en vertrouwenwekkend.

Primary Teal

#39b0a0

Primary Dark

#2d8a7d

Accent Dark

#1a1a1a

Gold Accent

#c9a962

Background

#fafafa

Text

#333333


                        --fs-primary: #39b0a0;

                        --fs-primary-dark: #2d8a7d;

                        --fs-accent: #1a1a1a;

                        --fs-gold: #c9a962;

                        --fs-bg: #fafafa;

                        --fs-text: #333333;

Typografie

Playfair Display voor elegante koppen, Lato voor leesbare body text.

Headings - Playfair Display

Heading 1 - De kunst van huidverzorging

Heading 2 - Professionele behandelingen

Heading 3 - Persoonlijke aanpak

Heading 4 - Resultaatgericht

Heading 5 - Vakmanschap

Heading 6 - Ervaring

Body Text - Lato

Lead paragraph: Bij FortiSan staat jouw huid centraal. Met meer dan 25 jaar ervaring bieden wij behandelingen die echt resultaat leveren.

Regular paragraph: Sandra is een zeer ervaren schoonheidsspecialist die haar hele carrière heeft doorgeleerd. Haar expertise in huidverbetering, gecombineerd met de nieuwste technieken zoals BeautyRay®, zorgt voor optimale resultaten.

Buttons

Elegante witte buttons met dunne borders - bij hover krijgen ze de FortiSan teal kleur.

Canonieke schaal — gebruik deze (foundation.css)

Nieuwe knoppen gebruiken .btn-brand (primaire actie) en .btn-outline-brand (secundaire actie) uit foundation.css. Deze zijn AA-getoetst en werken op elke achtergrond. De onderstaande .btn-clean-*, .btn-elegant-*, .btn-fortisan en .btn-gold zijn legacy-varianten (AA in U1): niet hernoemen, maar in nieuwe views niet meer toevoegen. Op donkere/foto-hero's krijgen ze een hero-scoped override (zie .hero-clean .btn-clean-*).

Primaire actie Secundaire actie

Primary Buttons (Wit met zwart randje → Teal bij hover)

Secondary & Dark (Zelfde elegante stijl)

FortiSan Branded (Voor sterke CTAs)

Button States

Formulieren

Form elementen met FortiSan styling.

Text Inputs

Standaard Input

Email Input

Met Validatie (Succes)

Ziet er goed uit!

Met Validatie (Error)

Dit veld is verplicht.

Andere Elementen

Textarea

Select

Ik ga akkoord met de voorwaarden

Optie A

Optie B

Floating Labels

Volledige naam

E-mailadres

Cards

Card componenten voor content presentatie.

Huidverbetering

Geavanceerde behandelingen met BeautyRay® technologie.

Meer info

Premium Card

Highlighted card voor speciale content.

Bekijk

Populair

Ontspannend

Pure verwennerij voor lichaam en geest.

60 minuten
Inclusief massage
Aromatherapie

Boeken

Card-schaal (publieke site)

Publieke pagina's gebruiken de .card-clean-familie uit Site.css: .card-clean (standaard), .card-clean-accent (teal rand + genummerd), .card-clean-gold (gouden accent) en .card-clean-compact (dichtere variant). Behandelpagina's gebruiken daarnaast .sidebar-box uit behandelingen-shared.css. Combineer met de categoriekleuren (teal / goud / rose) uit het kleurenpalet.

Figure frame — foto met verspringend accentkader (.figure-frame)

Standaard is het kader goud; voeg .figure-frame--teal toe voor de teal-variant (zoals in de sectie "Over FortiSan").

Alerts & Badges

Feedback componenten en labels.

Alerts

Je afspraak is succesvol ingepland!

Wist je dat? Regelmatige behandelingen zorgen voor het beste resultaat.

Let op: Vermijd zonlicht na een peeling behandeling.

Er ging iets mis. Probeer het opnieuw.

FortiSan tip: Drink voldoende water voor een gezonde huid!

Badges

Primary Secondary Succes Belangrijk Waarschuwing Info Dark

FortiSan Premium Gradient

Pill Primary Pill Secondary Nieuw

Iconen

Bootstrap Icons - de complete icon library.

Veelgebruikte Iconen

person

heart

star

calendar

envelope

telephone

geo-alt

clock

check-circle

shield-check

award

gem

<i class="bi bi-heart"></i> - Gebruik Bootstrap Icons met prefix "bi bi-"

Toegankelijkheid

WCAG 2.2 AA. Teal --color-primary haalt op wit maar ~2,7:1: gebruik het voor accenten, randen en grote tekst. Voor witte tekst op teal en voor kleine teal tekst gebruik je de onderstaande tokens (foundation.css).

--color-primary-strong

#247a6e · wit 5,1:1 · knoppen

--color-primary-deep

#1a5d54 · wit 7,8:1 · tekst

--color-gold-deep

#8a6d2a · goud als tekst

--color-rose

#e8b4c8 · accent Ontspanning/Cosmetisch · alleen decoratief

--color-rose-deep

#9c4f72 · rose als tekst (5,6:1)

44px Tab door deze knoppen om de focusring (--focus-ring) te zien. Elke pagina heeft een skip-link "Naar de inhoud".

Portaal

Gedeelde schil voor Admin en Klant (_PortalLayout + portal.css). Het menu komt uit PortalNavigation; nog niet gebouwde schermen tonen "Binnenkort".

12

portal-stat (--brand)

portal-card-title

portal-empty: icoon, één zin, volgende actie.

portal-card--hero

Welkomstbanner in het klantportaal.

Spacing & Layout

Bootstrap 5 spacing utilities.

Margin & Padding Scale

0

1

2

3

4

5

Border Radius

0

4px

8px

12px

50%

Shadows

No shadow

shadow-sm

shadow

shadow-lg

Style Guide