Stijlgids voor Innovatech Solutions 1. Inleiding Deze stijlgids definieert de visuele en functionele richtlijnen voor de website van Innovatech Solutions. Ze zorgt voor consistentie in kleurgebruik, typografie, knoppen, formulieren, links en navigatiemenu's, zodat de merkidentiteit stevig en herkenbaar blijft. 2. Merkidentiteit - Naam: Innovatech Solutions - Kernwaarden: innovatie, betrouwbaarheid, gebruiksvriendelijkheid 3. Kleurenpalet Gebruik deze kleuren consequent in alle UI-elementen: - Fel rood: #FF0000 - Toepassing: knoppen, belangrijke accenten, call-to-actions - Antraciet zwart: #333333 - Toepassing: hoofdtekst, koppen, iconen - Puur wit: #FFFFFF - Toepassing: achtergronden, tekst op gekleurde achtergronden 4. Typografie Gebruik de volgende lettertypes en stijlen: A. Koppen - Font: Roboto - Gewicht: Bold (700) - Grootte: - H1: 36px - H2: 30px - H3: 24px - H4: 20px - Kleur: #333333 - Letterspacing: 0.5px - Line-height: 1.2 B. Bodytekst - Font: Open Sans - Gewicht: Light (300) - Grootte: 16px - Kleur: #333333 - Letterspacing: 0.2px - Line-height: 1.5 5. UI-componenten A. Knoppen - Basisstijl: - Achtergrondkleur: #FF0000 - Tekstkleur: #FFFFFF - Font: Roboto, Bold, 16px - Padding: 12px 24px - Border: none - Border-radius: 4px - Cursor: pointer - Hover: - Achtergrondkleur: #CC0000 (donkerder rood) - Tekstkleur: #FFFFFF - Actief/ingedrukt: - Achtergrondkleur: #990000 - Tekstkleur: #FFFFFF B. Formulieren - Velden: - Rand: 1px solid #CCCCCC - Border-radius: 4px - Padding: 10px - Font: Open Sans, 16px - Kleur tekst: #333333 - Foutmeldingen: - Kleur: #FF0000 - Font: Open Sans, 14px - Marges: bovenaan 4px C. Links - Standaard: - Kleur: #FF0000 - Onderstreept - Font: Open Sans, 16px - Hover: - Kleur: #CC0000 - Onderstreept - Actief: - Kleur: #990000 - Onderstreept niet D. Navigatiemenu's - Layout: horizontaal of verticaal afhankelijk van de pagina - Links: - Kleur: #333333 - Font: Roboto, Bold, 16px - Padding: 10px 15px - Hover: - Kleur: #FF0000 - Onderstreept - Actief: - Kleur: #FF0000 - Onderstreept 6. Extra richtlijnen - Consistent gebruik van kleuren en typografie is essentieel. - Voor knoppen en belangrijke elementen gebruik het fel rood en antraciet zwart. - Zorg voor voldoende witruimte tussen UI-elementen voor een overzichtelijke uitstraling. - Gebruik afgeronde hoeken op knoppen en formulieren voor een moderne look. - Zorg dat alle tekst goed leesbaar is op verschillende schermgroottes. 7. Conclusie Deze stijlgids biedt een overzicht van de visuele taal van Innovatech Solutions. Houd je aan deze richtlijnen voor een consistente merkbeleving en een professionele uitstraling van de website. --- Bij vragen of behoefte aan verdere specificaties, neem contact op met de ontwerpafdeling.

Zeker, hier is een gedetailleerde stijlgids voor je Webflow website van Innovatech Solutions, volledig in het Nederlands: --- ### **Stijlgids Innovatech Solutions** #### **1. Merkkleuren** - **Primair rood:** `#FF0000` *Gebruik:* Primaire knoppen, belangrijke accenten, call-to-actions - **Antraciet zwart:** `#333333` *Gebruik:* Hoofdtekst, koppen, footer, navigatie - **Zuiver wit:** `#FFFFFF` *Gebruik:* Achtergronden, tekst op donkere achtergronden, secundaire knoppen #### **2. Typografie** - **Koppen (H1-H6):** **Font:** Roboto (Bold/700) **Gebruik:** Paginatitels, sectiekoppen **Voorbeeld:** - H1: 48px, regelafstand 1.2 - H2: 36px, regelafstand 1.3 - H3: 28px, regelafstand 1.3 - **Bodytekst:** **Font:** Open Sans (Light/300) **Gebruik:* Paragrafen, formulieren, labels **Standaard:** 16px, regelafstand 1.6 **Klein:** 14px voor bijschriften en details #### **3. Knoppen** - **Primaire knop:** `Achtergrond: #FF0000` `Tekst: #FFFFFF` `Padding: 12px 24px` `Border-radius: 4px` `Hover: Donkerder rood (#CC0000)` - **Secundaire knop:** `Achtergrond: Transparant` `Tekst: #333333` `Rand: 2px solid #333333` `Padding: 12px 24px` `Border-radius: 4px` `Hover: Achtergrond #333333, tekst #FFFFFF` #### **4. Formulieren** - **Inputvelden:** `Rand: 1px solid #333333` `Border-radius: 4px` `Padding: 12px` `Focus: Rand 2px solid #FF0000` - **Labels:** `Font: Open Sans (Regular/400)` `Kleur: #333333` `Fontgrootte: 14px` - **Placeholder tekst:** `Kleur: #888888` `Fontstijl: Italic` #### **5. Links** - **Standaard link:** `Kleur: #FF0000` `Geen onderstreping` `Hover: Onderstreping, donkerder rood (#CC0000)` - **Footer links:** `Kleur: #FFFFFF` `Hover: Kleur #FF0000` #### **6. Navigatiemenu** - **Desktop navigatie:** `Achtergrond: #333333` `Link kleur: #FFFFFF` `Hover: Kleur #FF0000` `Actieve pagina: #FF0000` - **Mobiele navigatie:** `Hamburger icoon: #333333` `Dropdown achtergrond: #FFFFFF` `Dropdown links: #333333` #### **7. Icoongebruik** - **Stijl:** Lijniconen (outline) - **Kleuren:** - Primair: #333333 - Accent: #FF0000 - **Grootte:** 24px standaard, 16px voor kleine iconen #### **8. Spacing Systeem** - **Basis eenheid:** 8px - **Margins:** 16px, 24px, 32px, 48px, 64px - **Paddings:** 8px, 16px, 24px, 32px #### **9. Schaduwen** - **Subtiele schaduw:** `0 2px 4px rgba(51,51,51,0.1)` - **Medium schaduw:** `0 4px 8px rgba(51,51,51,0.15)` #### **10. Consistentie Tips voor Webflow** 1. Maak gebruik van Webflow's **Style Manager** voor hergebruik van stijlen 2. Definieer alle kleuren als **CSS-variabelen** in de projectinstellingen 3. Gebruik **Combo-klassen** voor varianten van componenten 4. Stel **globale lijsten** in voor typografie consistentie 5. Maak **symbolen** van herbruikbare componenten zoals knoppen en navigatie --- Deze stijlgids zorgt voor een professionele, consistente uitstraling die perfect past bij de innovatieve identiteit van Innovatech Solutions. Succes met je Webflow-project!