A listing card
Town, Country
This sample shows the parts of a listing. The words of a real listing come from the listing itself.
This listing asks for a fee. Many kalyanamitta on this website do not ask for a fee.
Design language
Shore
The look the current website is reaching for, built as one system. A person who knows the site sees the same shore. The parts now have honest names, one definition each, and a dusk.
The idea and the voice
Five lines
- It is the same shore the website has now: pale sky, pale sand, deep teal for actions, a little terracotta for labels.
- It is one system. Each colour, size and duration has one honest name, and each component has one definition.
- Day and dusk are the same place. At dusk the water goes dark, the sky keeps its glow, and the actions light up.
- Things land. The wash drifts, cards settle, and map dots arrive from west to east. Nothing else moves without a press.
- The voice is short, literal and warm. It says “join for free”, and it says so when a listing asks for a fee.
Colour
Day, and dusk on the same shore
The palette names a colour for what it looks like: teal, terracotta, shell pink, sea glow. A role names what the colour is for. The interface uses roles only. The hex values below are read from tokens.css as you look.
Daycolor-scheme: light
Duskcolor-scheme: dark
Type
A serif headline over a clean sans
Seven sizes, and nothing between them. Georgia for headlines. Avenir Next, then the system sans, for everything else. No font files.
Practice the Dhamma together
Find a sangha or a kalyanamitta
Talk with others
Meet people who follow the Dhamma, the words of the Buddha.
A kalyanamitta is a good Dhamma friend. Most kalyanamitta do not ask for a fee.
Buttons, navigation, places and card details
A friendly Buddhist community
--font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", ui-serif, serif
--font-sans: "Avenir Next", Avenir, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif
--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace
Space, radius, shadow
A 4px grid and four corners
8px · buttons, fields
14px · cards, map
18px · bands
chips, tags
a card at rest
hover only
menu, toast, map card
Buttons
A button says what it does
44px tall, 36px in the header and on cards. Each one gives under a press.
Cards
Flat, white, one thin line
Form fields, tags, notices
Fields that answer
A hint sits under the field in soft ink.
Write an email address, for example name@example.org.
A plain notice. It states one fact.
“Good friendship is the whole of the spiritual life.”The Buddha, SN 45.2
Motion
Things land. Nothing teleports.
One thing moves by itself: the wash, with its tide line. Everything else moves because a person did something or a thing arrived.
One
Two
Three
The wash. It takes 46 seconds to cross, so you feel it more than you see it.
A press is always answered. A toast lands, says one thing in plain words, and leaves after about four seconds.
A press gives. Buttons, chips and cards shrink a little under the finger.
Hover and colour changes.
A thing slides to a new place: the list and map switch, an arrow, an underline.
A thing arrives: it rises 26px and settles a little past its place. Cards, map dots, the map card, the toast.
The gap between things that arrive together.
The wash crosses once. With the tide line, it is the only thing that moves without being asked.
The landing curve. It goes a little past, then rests.
Every duration becomes zero and the wash holds still. Nothing is hidden.
Voice
Short, literal, warm
We write
- Join for free.
- Some listings ask for a fee.
- Find a kalyanamitta, a good Dhamma friend.
- Open the map.
We do not write
- Start your journey today.
- Premium options are available.
- Find a teacher or a mentor.
- Explore our interactive experience.