Design system
Tokens & primitives
Brand ramp
The partner design system's own scale. 700 is the wordmark navy, 500 the electric indigo it bends through, 400 the lift used on dark grounds. The ramp does not change between themes.
--brand-50--brand-100--brand-200--brand-300--brand-400--brand-500--brand-600--brand-700--brand-800--brand-900--brand-950Brand roles
--slab--slab-deep--on-brand--brand-aqua--brand-sky--brand-lilacSemantic tokens
--background--foreground--card--primary--primary-foreground--secondary--muted--muted-foreground--accent--destructive--border--ringType scale
text-displaySichtbar werden
text-h1Sichtbar werden
text-h2Sichtbar werden
text-h3Sichtbar werden
text-leadWir prüfen dein Profil.
text-baseWir prüfen dein Profil.
text-smWir prüfen dein Profil.
Eyebrow (text-eyebrow + uppercase)Kostenloser Check
Radii & shadows
rounded-smrounded-mdrounded-lgrounded-xlrounded-2xlrounded-3xlrounded-4xlrounded-slabshadow-cardshadow-liftshadow-floatGrain surfaces
One SVG turbulence tile blended over whatever the surface is painted with. Tone picks what sits underneath; weight picks how big the tile is scaled and how hard it reads.
coarse grain
slab
coarse grain
slab-deep
fine grain
mesh
fine grain
mesh-soft
grain=none
Bare mesh
grain=fine
Card weight
grain=coarse
Slab weight
Wordmark
An alpha mask filled with currentColor, not a picture, so one file is navy on the page and white on a slab. The caller sets a height and the source aspect does the rest.
Photographic grounds
Rendered blue gradients, 10 KB each, behind the same veil the mesh tones do without: each was graded for looks rather than for type, so the tone carries enough navy over it that white copy clears 4.5:1 on the brightest pixel in the file. They take grain like any other tone - the grain the renders shipped with was blurred out on the way in.
photo-rise
Sichtbar werden
Light climbs to the top-right corner, floor stays navy.
photo-sweep
Sichtbar werden
Brightest of the four. Cyan down the left edge.
photo-bloom
Sichtbar werden
Two soft blooms, off opposite corners.
photo-bloom-close
Sichtbar werden
Same file at 200%, anchored on the lower bloom.
Buttons
On a slab
Score ring
Colour is the grade, so the ring and the word under it say one thing rather than two. Below the size where the readout fits it drops it: at that scale the ring is a mark next to a number somebody else is printing, which is how a category header uses it.
Check rows
The report's findings list. A pass is a disc and a title and nothing else; only a failure spends a second line and a tint, so the shape of a category can be read off the amount of colour in it. Everything else - who fixes it, how long it takes, what we measured - waits behind the chevron.
CTA banners
A call to action to drop anywhere - the end of a report, between landing sections, under a tool. The photo is cropped by the slab rather than fitted into it, so the banner keeps its shape whatever the image is, and it is dropped below mdrather than stacked: a letterboxed strip above a headline reads as a mistake.
Mit Bild
Demo buchen. Alle Funktionen kennenlernen.
In einer persönlichen Vorstellung zeigen wir dir alles — kostenlos, unverbindlich und auf deinen Betrieb zugeschnitten.
Demo buchen
Auf einem Verlauf, ohne Bild
Dein Auftritt, in einer Minute geprüft
Google-Profil, Bewertungen und Website — wir schauen sie uns an und sagen dir, was zuerst dran ist.
Check startenInk, mit Bild
Demo buchen. Alle Produkte und Funktionen kennenlernen.
Near-black statt Navy: für einen Abschluss, der sich von den Markenflächen darüber absetzt.
Demo buchenOhne Bild, mittig
Ohne etwas daneben bleibt die Spalte trotzdem schmaler als die Fläche: eine Überschrift über 1300px ist nicht lesbar.
Mehr erfahrenSection · align=center
Wie sichtbar ist dein Betrieb?
Eyebrow, oversized headline, body copy at reduced opacity. The slab is flat colour plus coarse grain, with the top corners rounded.
Section · visual bleed
Der Report, den du bekommst
The visual slot runs past the section's right and bottom edges and is cropped by the slab, tilted three degrees. This slab also has lip: it is pulled up over the one above by exactly its own corner radius.
- Google-Profilgeprüft
- Bewertungengeprüft
- Websitegeprüft
Section · mesh-soft
Dieselbe Hülle, heller Grund
The light mesh keeps a feature block from punching a dark hole in the page when it follows a slab.
Section · photo-bloom
Wie sichtbar ist dein Betrieb?
The same shell as the flat slab, wearing a rendered gradient instead of one colour. Cover-sized and centred, so the two blooms stay in frame from a phone up to a wide desktop.
Feature cards
Karten mit Produkt-Mock
Online-Auftritt
Ein Auftritt, den man findet
Profil, Bewertungen und Website an einer Stelle gepflegt - statt auf fünf Portalen einzeln.
Angebote
Aus der Anfrage wird ein Angebot
Beschreib den Auftrag, auch per Sprachnachricht. Positionen, Mengen und Preise stehen fertig da - als PDF mit deiner Angebotsnummer.
Leads
Alle Portale, ein Posteingang
MyHammer, Check24 und TrustLocal holt Smalt selbst ab. Was per Mail kommt, liegt daneben - kein Copy-and-paste.
Kommunikation
Nachfassen, ohne dran zu denken
WhatsApp und E-Mail in einem Verlauf. Nach der Abnahme fragt Smalt automatisch nach der Bewertung.
Feature split
Anfragen
Jede Anfrage landet an einer Stelle
MyHammer, Check24 und TrustLocal holt Smalt alle zehn Minuten selbst ab. Was über deine Website, per Telefon oder per Mail kommt, liegt daneben – im selben Posteingang, ohne Copy-and-paste.
Angebote
Das Angebot schreibt sich selbst
Beschreib den Auftrag – tippen oder diktieren, Smalt macht Text daraus. Die Positionen kommen aus deiner Preisliste, mit deinen Einheiten und deinen Preisen, und am Ende steht ein PDF mit deiner Angebotsnummer.
Feature split · side=left, mit Link
Dieselbe Hülle, gespiegelt
Die Seite ist ein Prop, kein zweites Layout. Unter lg liegt die Fläche immer unter dem Text — in der DOM-Reihenfolge steht die Copy zuerst, egal auf welcher Seite die Fläche sitzt.
Zur ÜbersichtGanz oben, wenn jemand in deiner Stadt sucht
Vollständiges Profil, echte Bewertungen, die richtigen Kategorien — und dein Betrieb steht da, wo gesucht wird.
Split text
Stat band
Zahlen, die hochzählen
11
Portale, die Smalt für dich beobachtet
10 Min.
Takt, in dem neue Anfragen abgeholt werden
57
Prüfpunkte im Marketing-Check
Ø 4.820 €
Angebotswert im Beispielbetrieb
Marquee
Elf Portale, eine Reihe
Vorher / Nachher
Derselbe Betrieb, zwei Wochen später
Paired rows, not two lists: the point is made by the pairing, so the two halves of a row have to look like one row.
Heute
Mit Smalt
- Angebote abends am Küchentisch, Preise aus dem KopfKalkulation und Angebot aus deiner Preisliste, in Minuten
- Anfragen in vier Postfächern, eins davon auf dem HandyJede Anfrage vorqualifiziert, an einer Stelle
- Der Lieferschein liegt noch im AutoBeleg fotografiert, Felder stehen im System
Ablauf
Von der Anfrage zur bezahlten Rechnung
Fünf Schritte, die heute über vier Werkzeuge verteilt sind.
- 1
Anfrage kommt rein
AutomatischAus dem Portal, von der Website, per Telefon oder Mail — alles landet im selben Posteingang.
- 2
Kunde und Projekt
10 Sek.Smalt erkennt Bestandskunden, legt neue an und hängt die Anfrage ans richtige Projekt.
- 3
Angebot
MinutenAuftrag beschreiben oder diktieren. Die Positionen kommen aus deiner Preisliste, mit deinen Einheiten.
- 4
Termin
Im PlanDer angenommene Auftrag geht in die Woche, auf den Monteur, der frei ist.
- 5
Rechnung
Ohne NachdenkenAus dem Auftrag wird die Rechnung, aus der Frist die Erinnerung.
Sticky feature
Das Büro läuft mit
Während du auf der Baustelle bist, macht Smalt den Papierkram, den du sonst abends machst.
Die Woche plant sich
Aufträge landen auf dem Tag und dem Monteur, der frei ist.
Belege tragen sich ein
Foto vom Lieferschein, Felder stehen im System.
Stunden stehen am Freitag
Gestempelt statt nachgetragen — die Woche ist am Freitag fertig.
Bento
Der Rest, in Kacheln
Disposition
Die Woche auf einen Blick, jeder Monteur auf seinem Tag.
Zeiterfassung
Gestempelt, nicht nachgetragen.
Belege
Foto rein, Felder raus.
Rechnungslauf
Rechnung, Erinnerung, bezahlt — ohne dass jemand nachhalten muss.
Quote card
Ich hab die Angebote früher abends geschrieben. Jetzt steht das Ding, bevor ich vom Kunden zurück bin.