search ESC
search

Empieza a escribir para buscar...

Zoek naar features, prijzen, documentatie, blog posts...

Powered by Cloudflare AI
↑↓ Navigeren ↵ Selecteren ESC Sluiten

Stylesheet

Alle UI componenten, cards en buttons van het Tesoro design system

Typography

Heading levels, text sizes, weights en special styles

Headings

TYP-H1

Heading 1

text-6xl • 3.75rem / 1.1 line-height • font-display (Poppins)
TYP-H2

Heading 2

text-5xl • 3rem / 1.2 line-height • font-display (Poppins)
TYP-H3

Heading 3

text-4xl • 2.25rem / 2.5rem line-height • font-display (Poppins)
TYP-H4

Heading 4

text-3xl • 1.875rem / 2.25rem line-height • font-display (Poppins)
TYP-H5
Heading 5
text-2xl • 1.5rem / 2rem line-height • font-display (Poppins)
TYP-H6
Heading 6
text-xl • 1.25rem / 1.75rem line-height • font-display (Poppins)

Body Text

TYP-XL

Extra Large Text (1.25rem / 20px)

font-size: 1.25rem • line-height: 1.75rem • Inter
TYP-LG

Large Text (1.125rem / 18px)

font-size: 1.125rem • line-height: 1.75rem • Inter
TYP-BASE

Base Text (1rem / 16px)

font-size: 1rem • line-height: 1.6 • Inter
TYP-SM

Small Text (0.875rem / 14px)

font-size: 0.875rem • line-height: 1.25rem • Inter
TYP-XS

Extra Small Text (0.75rem / 12px)

font-size: 0.75rem • line-height: 1rem • Inter

Font Weights

TYP-W3

Light (300)

font-weight: 300 • Voor subtiele text
TYP-W4

Regular (400)

font-weight: 400 • Body text default
TYP-W5

Medium (500)

font-weight: 500 • Lichte nadruk
TYP-W6

Semibold (600)

font-weight: 600 • Medium nadruk
TYP-W7

Bold (700)

font-weight: 700 • Sterke nadruk

Special Styles

TYP-LINK
Dit is een link
color: primary • hover: underline
TYP-CODE
const example = true;
font-family: monospace • bg: neutral-100
TYP-QUOTE
"Dit is een quote"
border-left • italic • neutral-600
TYP-MUTED

Muted text voor secundaire info

color: neutral-500 • Voor meta informatie

Path Selection Card

Primaire keuze-cards voor navigatie en onboarding flows

CPS-1
rocket_launch

Nieuw bij Tesoro

Stap-voor-stap onboarding. Account aanmaken, team uitnodigen en je eerste deals.

CPS-2
menu_book

Documentatie

Zoek in alle handleidingen en vind snel technische antwoorden.

CPS-3
bolt

Expert Tips

Geavanceerde workflows en power-user functionaliteit.

Feature Card

Voor product features met benefits lijst

CFB-1
person_add

Lead Management

Centraliseer al je leads en converteer ze naar klanten.

  • check Automatische lead capture
  • check Real-time notificaties
  • check Lead scoring & routing
Meer info
CFB-2
view_kanban

Deal Pipeline

Visueel overzicht van je sales pipeline met drag & drop.

  • check Kanban board interface
  • check Automatische fase updates
  • check Revenue forecasting
Meer info
CFB-3
psychology

AI Matching

Slimme AI die klanten en properties automatisch matcht.

  • check Machine learning engine
  • check Preference learning
  • check Match score insights
Meer info

Step Card

Voor geordende stappen en tutorials

CSP-1
1

Account aanmaken

Registreer je account en configureer je basis instellingen.

schedule 5 min play_circle Video
arrow_forward
CSP-2
2

Team uitnodigen

Voeg je collega's toe en stel permissies in voor samenwerking.

schedule 3 min
arrow_forward
CSP-3
3

Email koppelen

Koppel je Gmail of Outlook om alle communicatie te centraliseren.

schedule 7 min check_circle Voltooid
arrow_forward

Info Card

Algemene content cards voor tips, updates, announcements

CIS-1
lightbulb

Pro Tip

Gebruik keyboard shortcuts om sneller te werken. Druk op ? voor een volledig overzicht.

CIS-2
campaign

Nieuw Feature

AI-powered email templates zijn nu beschikbaar! Laat AI je follow-up emails schrijven.

CIS-3
warning

Let op

Geplande onderhoud op 20 oktober van 22:00-23:00 CET. Je data blijft veilig opgeslagen.

CIS-4
info

Wist je dat?

Je kunt tasks direct vanuit emails aanmaken door ze te forwarden naar [email protected]

Stat Card

Voor cijfers, statistieken en metrics

CSM-1
trending_up
€127K
Revenue deze maand
arrow_upward +23%
CSM-2
handshake
34
Gesloten deals
arrow_upward +12%
CSM-3
groups
142
Actieve leads
remove 0%
CSM-4
email
89%
Email open rate
arrow_downward -3%

Integration Card

Compacte cards voor integraties en tools - 4 varianten

Variant A: Basic

CIB-1
Gmail
Email
CIB-2
Outlook
Email
CIB-3
Slack
Communication
CIB-4
Zapier
Automation

Variant B: Feature Card

CID-1
mail
Gmail
Email integratie
Popular
CID-2
chat
Slack
Team communicatie
New
CID-3
event
Calendar
Agenda sync
CID-4
payments
Stripe
Betalingen

Variant C: Horizontal Layout

CIC-1
Gmail
check_circle Active
Sync emails, contacts en agenda automatisch
Email CRM
CIC-2
Slack
error Error
Real-time notificaties en team updates
Communication
CIC-3
Google Calendar
schedule Pending
Afspraken synchroniseren met je CRM
Calendar Sync
CIC-4
Stripe
add_circle Available
Accepteer betalingen direct in je CRM
Payments Finance

Variant D: Rich Card

CIR-1
Active

Gmail Integration

Bidirectionele email sync met je CRM

1,247
Emails synced
98%
Uptime
CIR-2
New

Slack Connect

Real-time notificaties en updates

342
Notifications
5
Channels
CIR-3

Google Calendar

Synchroniseer afspraken automatisch

check 2-way sync
check Auto-reminders
check Team calendars

Testimonial Card

Voor klant reviews en testimonials

CT-1
format_quote

Tesoro heeft onze sales pipeline gestroomlijnd en ons geholpen 40% meer deals te sluiten. De AI matching is game-changing.

JS
John Stevens
CEO, Premium Real Estate
star star star star star
CT-2
format_quote

De email integratie is briljant. Alle communicatie automatisch gelogd en gekoppeld aan deals. Scheelt me 10 uur per week.

MJ
Maria Jansen
Makelaar, Jansen & Partners
star star star star star

Link Card

Simpele navigatie cards met icon

CLN-1
description

Documentatie

Alle handleidingen en guides

arrow_forward
CLN-2
support_agent

Support

Neem contact op met ons team

arrow_forward
CLN-3
school

Academy

Leer Tesoro effectief gebruiken

arrow_forward

Button Component

Alle button varianten met sizes en icon support

Button Varianten

BTN-P
Primary
variant="primary"
BTN-S
Secondary
variant="secondary"
BTN-O
Outline
variant="outline"
BTN-G
Ghost
variant="ghost"
BTN-Gr
Gradient
variant="gradient"
BTN-W
White
variant="white"

Button Sizes

Small
size="sm"
Medium (default)
size="md"
Large
size="lg"

Buttons met Icons

Icon aan start
icon="download"
iconPosition="start"
Icon aan einde
icon="arrow_forward"
iconPosition="end"
Auto-icon (external link)
Externe link
href="https://..."
(auto: open_in_new)
Auto-icon (submit)
type="submit"
(auto: send)
Ghost met icon
variant="ghost"
icon="settings"
Icon only
icon="more_vert"
autoIcon=

States & Special Cases

Disabled
disabled
Full width
fullWidth
Als link (href)
Naar pricing
href="/pricing"
(renders <a> tag)
Modal trigger
data-modal-target="..."
(auto: mail icon)

Gebruik Richtlijnen

done

Primary Button

Gebruik voor de belangrijkste actie op een pagina. Maximaal 1 per scherm.

Voorbeeld: "Aanmelden", "Kopen", "Start nu"

done

Secondary Button

Gebruik voor secundaire acties die minder belangrijk zijn dan primary.

Voorbeeld: "Meer info", "Download", "Contact"

done

Outline Button

Gebruik voor tertiaire acties of als alternatief naast een primary button.

Voorbeeld: "Annuleren", "Terug", "Overslaan"

done

Ghost Button

Gebruik voor minimale acties, utility buttons of icon-only buttons.

Voorbeeld: "Sluiten", "Instellingen", "Menu"

done

Gradient Button

Gebruik spaarzaam voor speciale CTAs die extra aandacht verdienen.

Voorbeeld: "Probeer gratis", "Start demo"

done

White Button

Gebruik alleen op donkere achtergronden voor goede contrast.

Voorbeeld: In hero sections, CTA secties