How Tilta looks, sounds and shows up.
Our logo, colours, type, imagery and voice in one place. For everyone who designs, builds or writes for Tilta.
Version
October 2026
Maintained by
Tilta design team
Source files
Google Drive, Design / Branding
A bridge between your invoices and your cash.
Tilta means bridge in Latvian.
What we do
Tilta turns invoices into liquidity. We assess buyers, pay out receivables in full, insure them and take care of collections, so SMEs get paid on time.
Who we serve
CEOs and CFOs of ambitious European SMEs: manufacturers, wholesalers and online sellers who sell on payment terms and want working capital without the paperwork.
How we come across
Serious and human. We show real people and the real product, and we explain things plainly. Inviting, never playful.
Logo
A bridge, in four parts.
The brandmark is a bridge, the meaning of Tilta in Latvian. Use the combined logo wherever there’s room, and always use the files as supplied.
Versions
Two-tone is our primary logo: the three left parts carry the accent, the arrow and the wordmark carry the ink. On light backgrounds that is violet and branded black, on dark ones violet and white, on brand violet white and branded black. Where only one colour is possible, the violet part turns fully black or white, never grey.
Two-tone logo
Our primary logo, on white and light surfaces.
Two-tone on dark
Violet and white, on branded black and other dark surfaces.
On brand violet
The three left parts turn white, the arrow and the wordmark stay branded black. Only on brand violet 500.
One colour
Only where colour isn’t possible. The violet part turns fully black, never grey.
Brandmark
Two-tone, for small and square spaces.
Wordmark
Same height as the brandmark, so both line up in the combined logo.
Favicon and app icon
Two-tone brandmark on a branded black tile.
Clear space
Keep free space of half the asset’s height on all four sides. The same rule applies to the combined logo, the brandmark and the wordmark.
The rule
Clear space x is half the height of the asset you use.
Measure from the artwork, not from the file’s bounding box.
At master size every asset is 450 units tall, so x is 225 units.
Shown in the diagrams as the shaded band and corner squares.
Minimum sizes
Below these sizes the gaps in the brandmark start to close up. Below 24px, use the favicon instead of the brandmark.
Asset
Combined logo
Wordmark
Brandmark
Favicon and app icon
A dedicated tile for browser tabs, bookmarks and home screens. It uses the two-tone brandmark, so it reads on light and dark browser chrome alike.
Specification
640 × 640 tile with a corner radius of 120 (18.75%).
Branded black background, two-tone brandmark.
Brandmark inset by 80 on each side, one sixth of its width.
Exported at 16, 32, 48, 180, 192 and 512 px, plus ICO and SVG. The 180 px Apple touch icon is square, because iOS applies its own corner mask.
64 px
48 px
32 px
16 px
Don’t
Use the files as supplied. These are the mistakes we see most often.
Don’t stretch or squash it.
Don’t rotate it.
Don’t change the brand violet.
Don’t turn the violet part grey.
Don’t add shadows or effects.
Don’t rearrange the parts.
Colour
One hue, pinned at 285.5.
Every colour is defined in OKLCH and shares the brand hue. Hex and RGB are derived from it and are exact. Print values follow.
Core colours
Three colours carry the brand. Everything else is derived from them.
3.34:1 on white
Aa
Brand
The brand hue at full strength. Accents, illustrations, icons and text from 24px.
OKLCH
0.658 0.189 285.5
Hex
#8A7AFE
RGB
138 122 254
4.51:1 on white
Aa
Brand, darker for contrast
Same hue and chroma, only darker. Buttons with white labels, links and text.
OKLCH
0.584 0.189 285.5
Hex
#7563E4
RGB
117 99 228
18.92:1 on white
Aa
Branded black
Text and dark surfaces, used instead of pure black.
OKLCH
0.179 0.018 285.5
Hex
#101019
RGB
16 16 25
Ramps
Eleven steps each, from 50 to 950. Brand sits at 500, its darker partner at 600, branded black closes the neutral ramp at 950. Lightness is evenly stepped and chroma tapers towards both ends, so every step stays inside the screen gamut.
Violet
50
#F4F4FF
100
#E9EAFE
200
#D7D7FF
300
#BFBDFE
400
#A39DFF
500
#8A7AFE
600
#7563E4
700
#5E4DBE
800
#493B97
900
#352A70
950
#221B4B
Neutral
50
#FAFAFB
100
#F3F3F5
200
#E6E6E9
300
#D3D4D9
400
#8B8B92
500
#727279
600
#5D5D64
700
#47474F
800
#32323A
900
#201F28
950
#101019
Status
For states in the product and in data. The bright base colour is for fills, dots, charts and dark backgrounds. On light backgrounds, icons and text use the text colour, which passes 4.5:1 on white and on the soft background.
Success
Base
#09E36B
Text
#01813A
Soft
#DAFFE0
Settled
Warning
Base
#FF7E21
Text
#B15203
Soft
#FFEEE5
Due in 3 days
Error
Base
#FB3560
Text
#CE274D
Soft
#FFEBEB
Overdue
Roles
Designs and code use roles, not ramp steps. Every text pairing meets WCAG AA: 4.5:1 for text, 3:1 for icons and text from 24px. Never put white text on brand violet below 24px; use the darker brand colour instead.
White
Neutral 950
Neutral 950
Neutral 50
Neutral 50
Neutral 900
Neutral 200
Neutral 800
Neutral 500
Neutral 400
Neutral 400
Neutral 500
Neutral 600
Neutral 300
Violet 500
Violet 500
Violet 600
Violet 500
White
Neutral 950
Violet 50
Violet 950
Violet 700
Violet 200
Violet 500
Violet 400
Formats for screen and print
Use the format your tool needs, always derived from the OKLCH source.
Source of truth
OKLCH
Defines every colour. Use it in CSS and in the token file.
Screens
Hex and RGB
For Figma, Framer, slides, email and anything that doesn’t read OKLCH. Exact, because every colour sits inside sRGB.
Print, in progress
CMYK
Converted with ICC profiles: PSO Coated v3 for coated paper, PSO Uncoated v3 for uncoated. Never by formula.
Spot colour, in progress
Pantone
Matched by a designer against a physical swatch book, for signage, merchandise and premium print.
Typography
Söhne for what we say, Inter for what we show.
Söhne carries all content. Söhne Mono sets code and live figures. Inter appears only inside product screens, set exactly like the Tilta app.
Families
Söhne
Content, by Klim Type Foundry
Aa
Buch
Buch Kursiv
Kräftig
Kräftig Kursiv
Söhne Mono
Code and live figures
Aa
Buch 0123456789
Kräftig 0123456789
Inter
Product screens only
Aa
Regular
Medium
Semibold
Content scale, Söhne
Sizes are given for desktop / tablet / phone. Headings use Kräftig 500, everything you read at length uses Buch 400.
Display L
60 / 48 / 38, lh 1.05, ls -0.02em, 500. Hero headline only.
Heading L
40 / 34 / 28, lh 1.1, ls -0.015em, 500. Section titles. Also as Muted and Inverse.
Heading M
24 / 22 / 20, lh 1.25, ls -0.01em, 500. Lead tiles and cards.
Heading S
18, lh 1.35, 500. Tile titles and names.
Body L
19 / 18 / 17, lh 1.55, 400. Section intros. Also as Inverse.
Body M
16, lh 1.6, 400. Tile copy.
Body S
14, lh 1.5, 400. Roles and secondary lines.
Caption
13, lh 1.4, 400. Footnotes and credits.
Quote
26 / 22 / 20, lh 1.35, ls -0.01em, 500.
Button
15, lh 1, 500. Text links and button labels.
Code
Söhne Mono 13, lh 1.6, 400. API samples, usually on dark.
POST /v1/invoices 201 Created
UI layer, Inter
Only inside product screens. Six styles that copy the Tilta app one to one: Tailwind’s default sizes, no OpenType features, tight tracking only on titles and figures.
Settled
Rules
Weights
Headings in Kräftig 500, text in Buch 400. Söhne stops at 500, so hierarchy comes from size and colour, not weight.
Features
No OpenType features. The one exception is tabular figures for numbers in tables, tickers and data.
Emphasis
Use the italic or the weight of the same family. Never mix in a second family for effect.
Layout and shape
Bright pages on a quiet grid.
Content sits in one column framed by hairlines, like this page. Pages are bright; a dark section is the exception, used once per page at most.
Grid lines
Hairlines in Neutral 200 frame a 1200px column. Horizontal rules run edge to edge between sections.
24px
between the grid lines and tiles
16px
between tiles
28px
inside tiles
88px
above and below each section
Spacing
A small set of values, reused everywhere. Tiles align to the grid, never to the page edge.
10px
Tiles
8px
Inner cards, images
6px
Buttons
3px
Status chips
Corner radius
Small radii keep things precise. Nested elements always get the smaller radius, so corners stay concentric.
White
Page
Neutral 50
Tiles
Neutral 950
Dark section
Surfaces
White for pages, Neutral 50 with a hairline for tiles, branded black for the one dark section a page may have.
Product
Show the real thing.
Product screens on our website are rebuilt from the Tilta app, with its real patterns and believable SME data. Without them we look like a consultancy, not a software company.
Rebuilt from the app
Screens use the Tilta app’s own components and wording, never mock-ups or placeholder UI.
Set like the app
Inter at the app’s sizes and weights, so what people see on the website is what they get after signing.
Believable data
European SME names, real invoice formats and plausible amounts. Label sample figures as sample data.
Movement with a purpose
Animation shows what the product does, like the live ticker of agent activity on the homepage.
The one dark section on the homepage: code in Söhne Mono on branded black, for a technical audience.
Photography
Real people, real work.
We show the people behind European SMEs at work: workshops, production floors and offices. Warm light from a low evening sun or lamps, soft blacks and true colours. No filters, no abstract stock.
Craft: the person in focus, hands on the task.
Workshop: seen through the space, lit by a single bulb.
Do
Show people wherever we can.
Choose warm light: a low evening sun or warm lamps.
Prefer soft, lifted blacks and true colours.
Don’t
Add filters, tints or heavy grading.
Use cold, flat light or abstract stock.
Show software alone, without the people and places behind it.
Voice and tone
Inviting, never playful.
Tilta is the friend next door: simple wording, short sentences and everyday language that the widest possible audience understands. Our tone sits on four scales from the Nielsen Norman Group.
Funny
Serious
Weight language to match the subject. Inform and educate rather than entertain.
Formal
Casual
Contractions and everyday words, conversational and easy to follow. Casual means plain, never jokey.
Irreverent
Respectful
Treat the subject and the reader with dignity. Tactful and neutral, without strong language.
Enthusiastic
Matter-of-fact
Stay objective and keep feelings out of it. Neutral, realistic information builds credibility.
One message, four tones
The message is “An error has occurred.” Only the second version is Tilta.
Short and plain
Short sentences and paragraphs. Everyday words over jargon, even for finance topics.
Contractions
We’re, you’ll, it’s. They keep sentences natural without being casual about the subject.
No dashes
No em or en dashes. Use a comma, a colon or a new sentence instead.
Downloads
Everything in one place.
Use these files instead of copies from slides or old documents. The masters live in Google Drive under Design / Branding.
ZIP, 398 KB
Logo kit
Logo, brandmark and wordmark in two-tone and one colour, for light, dark and brand violet backgrounds. SVG, PNG and PDF, plus the full favicon set.
Download logo kit
JSON, 24 KB
Colour tokens
Every colour in OKLCH with its exact hex value, plus the light and dark roles. W3C Design Tokens format, ready for Style Dictionary.
Download tokens
Licensed
Fonts
Söhne and Söhne Mono are licensed from Klim Type Foundry and can’t be shared. Ask the design team for access. Inter is free from Google Fonts.
Inter on Google Fonts
Brand guidelines, October 2026
Questions? Ask the Tilta design team.