Version 1.0 · for the Alewa app
Alewa handles someone's working day, so the interface has to feel dependable before it feels clever. This system keeps the warmth of the brand while behaving like software people trust with their contracts.
tokens.css
alewa.css
icons.svg
01 · Principles
No traffic lights, no fake title bars, no screenshots of the product inside the product. Interfaces sit on the page directly and own the space they are in.
Emoji are not iconography. Use the stroked set in icons.svg, which inherits colour and weight from its context. The sparkle is banned outright.
Prefer a real, clickable thing over a picture of one. If a state exists, it should be reachable, not illustrated.
The friendliness lives in the letterforms. The composition stays restrained, so the product reads as one with real customers rather than one performing personality.
Display type balances its lines and body copy never strands a single word. Where balance splits a sentence badly, break it by hand with .a-line.
Every button is a pill and every container is softer than feels necessary. Radius carries as much of the brand as colour does.
Anything Alewa ranks, surfaces or drafts carries its reason in plain words. Ranking without a reason is magic, and magic is not trustworthy.
No surface may send, delete or commit on its own. Every outbound action passes through an explicit approval, and the interface says so before it is asked.
02 · Colour
A row is amber because it needs you, not because amber looks nice. Naming colour by its job is what keeps the palette honest as the app grows.
Colour never carries a meaning alone. The ranked row pairs amber with a number and a written reason, so it still reads correctly in greyscale or with colour blindness.
03 · Type
Jakarta carries the warmth in its round, open letterforms. Public Sans underneath is deliberately plain, and that contrast is what lets the page feel friendly at headline size and sober everywhere someone actually reads.
.a-display-m.a-title.a-subtitle.a-body.a-meta.a-label04 · Icons
Drawn on a 24 grid and coloured by currentColor, so a single file serves every size and both themes.
Missing on purpose: the four point sparkle. It has become the universal badge for "a machine wrote this", and Alewa earns that trust by explaining itself in words instead.
05 · Components
Labels name what the person is doing, not what the system is doing. "Approve & send" rather than "Submit", "Not today" rather than "Dismiss".
The reason chip is the signature component. If Alewa moved something to the top, this is where it says why in a full sentence.
That second switch is a deliberate joke and must never ship. Nothing in Alewa may offer to send unattended.
Nothing needs you.
Alewa read everything that came in and none of it wants your attention today. Enjoy the quiet.
An empty inbox is the product succeeding. Say it warmly and never apologise for having nothing to show.
06 · Patterns
This is the whole product in one interaction, so it is a pattern rather than a component. Rank, explain, draft, and wait. Click a row to see it run.
Note what the pattern refuses to do. It never sends on a timer, never pre-selects approve, and never hides the reason it ranked something. Removing any of those breaks the promise the product is sold on.
07 · Voice
Write "It drafts, but it never sends" rather than stapling two fragments together with a dash. Em dashes are rare, and only where the pause does real work.
The product has a name and a job. Where the mechanism matters, call it intelligence and explain what it read.
"Why it's first: a deadline is inside" beats "Priority: high". The person should be able to disagree with the reasoning, which means they have to see it.
This software handles contracts and money. Report what happened plainly and let the usefulness carry the enthusiasm.
08 · Do & don't
Rows, panels and drafts sit directly on the background and own their space.
Traffic lights and title bars around a demo read as generated the moment anyone looks.
Stroked SVG from the set, inheriting colour and weight from its container.
📄 and ✨ are not iconography. They break at every size and belong to no brand.
"It knows who you mail. / All of them." breaks where the meaning breaks.
"It knows who you / mail. All of them." is even in width and wrong in sense.
Warmth in the letterforms, restraint in the layout, so the product reads as established.
A display face with loud personality makes a serious tool look like a weekend project.