Huisstijl-demo
Alle bouwstenen van AlphaVoice op één pagina
Kleuren, typografie, knoppen, formulieren, kaarten, statussen en tabellen. Dezelfde onderdelen worden gebruikt op de website en straks in Mijn AlphaVoice.
Kleuren
Blauw uit het logo, aangevuld voor het web
Alleen AlphaVoice-blauw komt rechtstreeks uit het logo. De overige kleuren zijn webaanvullingen. Statuskleuren worden altijd gecombineerd met tekst en een icoon.
- AlphaVoice-blauw
#1C75BC--av-color-primary - Blauw donker
#155E9A--av-color-primary-dark - Donkerblauw
#12324A--av-color-navy - Donkerblauw diep
#0C2436--av-color-navy-deep - Lichtblauw
#EAF3FA--av-color-light - Lichtgrijs vlak
#F5F8FB--av-color-surface - Wit
#FFFFFF--av-color-white - Tekst gedempt
#4A6072--av-color-muted - Rand
#D5DEE6--av-color-border - Rand invoerveld
#6F8394--av-color-border-strong - Succes
#1B7A4A--av-color-success - Succes vlak
#E7F4EC--av-color-success-bg - Aandacht
#8A5700--av-color-warning - Aandacht vlak
#FFF4D9--av-color-warning-bg - Aandacht accent
#E0A100--av-color-warning-accent - Fout
#B3261E--av-color-danger - Fout vlak
#FCECEA--av-color-danger-bg
Typografie
Source Sans Pro in vier snitten
Regular, italic, semibold en bold. De groottes schalen vloeiend mee tussen mobiel en desktop.
- Kop 1
--av-text-3xl Zakelijke telefonie. Online geregeld.
- Kop 2
--av-text-2xl Twee pakketten, één duidelijke opbouw
- Kop 3
--av-text-xl Bellen waar je werkt
- Kop 4
--av-text-lg Wat is een gebruiker?
- Intro
--av-text-lg Stel je 3CX-belomgeving samen, bekijk je kosten en bestel direct.
- Basistekst
--av-text-md Je betaalt een vast bedrag per maand, een bedrag per gebruiker en nummerhuur. Belverkeer reken je apart af op basis van gebruik. Een tekstlink, vette tekst en cursieve tekst.
- Kleine tekst
--av-text-sm Alle bedragen exclusief btw. Prijzen en voorwaarden zijn nog niet definitief.
- Label boven kop
Zo werkt het
Knoppen
Eén primaire actie per scherm
Blauw is gereserveerd voor de belangrijkste actie. De omlijnde knop is de tweede keuze, de tekstlink is voor verwijzingen.
Gebruik de Tab-toets om de focusstijl te zien: een duidelijke donkere rand rond het actieve element.
Formulieren
Korte formulieren met duidelijke labels
Elk veld heeft een zichtbaar label. Hulptekst staat onder het veld, een foutmelding zegt wat er moet gebeuren.
Kaarten
Kaarten voor inhoud, voordelen en prijzen
Witte kaarten met een dunne rand en kleine afronding. De prijskaart toont altijd de volledige opbouw.
Prijskaart
Conceptprijs
€ 69 per maand + € 9 per gebruiker
- Gedeelde 3CX-omgeving
- Bellen via app en browser
Prijskaart, uitgelicht
Conceptprijs
€ 119 per maand + € 12 per gebruiker
- Eigen 3CX-omgeving
- Bellen via app en browser
Badges en meldingen
Een status is nooit alleen een kleur
Groen voor geslaagd, amber voor aandacht en concept, rood voor fouten, blauw voor informatie. Altijd met tekst en icoon.
Badges
In een vergelijking
Ter informatie
Recente gesprekken kunnen nog ontbreken in het verbruik.
Je omgeving is gereed
Alle opleverchecks zijn geslaagd. Je kunt collega’s uitnodigen.
Actie nodig
Vul de machtiging voor nummerbehoud aan vóór 21 oktober.
De betaling is niet gelukt
Je bestelling blijft bewaard. Probeer het opnieuw of kies een andere betaalwijze.
Tabellen
Tabellen voor vergelijken en overzichten
Op smalle schermen schuift een brede tabel horizontaal binnen het eigen kader.
| Onderdeel | Aantal | Per maand |
|---|---|---|
| Professional basis | 1 | € 119,00 |
| Gebruikers | 12 | € 144,00 |
| Telefoonnummers | 1 | € 2,50 |
| Totaal excl. btw | € 265,50 |
Stappen en vragen
Vaste patronen voor uitleg
Genummerde stappen voor een volgorde, uitklapbare vragen voor veelgestelde vragen.
Kiezen
Gebruikers en nummers kiezen.
Bestellen
Gegevens invullen en betalen.
Starten
Collega's uitnodigen en bellen.
Hoe ziet een uitklapbare vraag eruit?
Zo. Het antwoord staat direct onder de vraag en is ook met het toetsenbord te openen.
Kan er meer dan één vraag open staan?
Ja. Elke vraag opent en sluit los van de andere.