The idea

Learning goes one step at a time. The mark is three rising steps: build, publish, teach for the people who run a school, and start, practise, finish for the people who take its courses. The last step is saffron, the colour Trilko keeps for the moment someone gets there. The same saffron dots the i in the wordmark.

Logo

The logo is the mark and the wordmark together. Use it as supplied, on paper, white or deep green. On anything else, put it on a panel of one of those.

Logo (SVG) Wordmark (SVG)

Mark (SVG) App icon (PNG)

Reversed logo (SVG)

Space and size

Keep clear space around the logo at least the height of the wordmark's o.
Show the full logo at least 96px wide on screen, 25mm in print.
Below that, use the mark alone. It holds down to 16px.
The mark alone is for icons, favicons and avatars. Everywhere else, use the full logo.

Don't stretch, squash or rotate it.

Don't change its colours.

Don't put it straight onto photos or patterns.

Colour

Warm paper and deep green carry almost everything. Saffron is the accent, used sparingly for progress, achievement and focus, so it always means something.

Paper#FBF8F2The background for pages.
Ink#13201DText and headings.
Trilko green#0D6B56Buttons, links and anything to act on.
Deep green#0A4F40Hovers, dark panels and the reversed logo.
Saffron#F3B13AProgress, achievement and focus rings. Never for text.
Mint#DDEFE6Tints, selected rows and success.
Sand#F3ECDFQuiet surfaces and disabled states.
Muted#55625ESecondary text.

A rough balance: paper 60%, ink 25%, green 12%, saffron 3%. Ink, muted text and Trilko green all pass WCAG AA on paper and white. Errors use #B3261E.

Type

Two typefaces, both free under the SIL Open Font License. Bricolage Grotesque gives the headings their character. Figtree does the reading and the interface, where clarity matters most.

Aa Bricolage

Bricolage Grotesque

Headings only, ExtraBold (800) for page and section titles and Bold (700) for smaller ones. Set it tight, at −0.02em, and keep headings short.

Aa Figtree

Figtree

Everything else: body text, buttons, labels and the whole product interface. Regular (400) to read, SemiBold (600) and Bold (700) to label and emphasise.

3xl · 40–64px

Teach what you know.

2xl · 32–46px

Three steps to a course

xl · 24–30px

Build your first lesson

lg · 20px

Shaping a loaf

md · 17px

Body text. Fold the dough towards you, turn it and fold again, until the surface is tight.

sm · 15px

Interface text, buttons and table cells.

xs · 13px

Labels, badges and captions.

Voice

Trilko sounds like a good teacher: clear, warm and on your side. It explains plainly, gets to the point, and never oversells.

Plain

Your course is live.
Your learning experience has been successfully deployed.

Warm

Nice work, that's lesson 4 done.
Lesson completion recorded.

Honest

That payment didn't go through. Try another card.
Oops! Something went wrong!

A few rules

Write in sentence case, headings and buttons included.
Name buttons for what they do: "Publish course", not "Submit".
Say "you" to the person reading. Trilko is "we" only when it has to be.
Celebrate finishing, not clicking. Save saffron and cheer for real milestones.

Components

The pieces the product is built from. They use the tokens below and are styled in this site's CSS, so the LMS can start from the same rules.

Buttons

Publish course Preview Cancel

Mark as done Unavailable

One primary button per view. Buttons are pills, 44px tall, 36px when small.

Badges

Published Completed Draft Payment failed

For status only. Saffron is for completion and achievement.

Form fields

Course name Students see this on your school and their certificate.

Price Enter a price, like 49 or 49.99.

Notices

Your course is live. Students can buy it now.

Two lessons have no content yet.

That payment didn't go through. Try another card.

Published

Bread at home

5 lessons · 1 hour 20 minutes

Progress

Started

3 of 5 lessons done

Finished

Green while in progress, saffron once finished.

Lessons

Done
Current
Next
Locked

Tokens

The values behind everything above. The site's source has them as CSS custom properties and as JSON, for the product to use.

Group	Tokens
Space, on a 4px base	`4 · 8 · 12 · 16 · 24 · 32 · 48 · 64`
Corners	`8px` fields and small pieces · `12px` media · `20px` cards and panels · pills for buttons and badges
Shadow	One, for raised windows and menus: `0 1px 2px / 6%, 0 8px 24px / 8%` in ink
Layout	Content caps at `72rem`, reading text at `38rem`, with `16–40px` gutters
Focus	A `3px` saffron ring, offset by `2px`, on everything that takes focus