Payanam design system
கோலம் & கோவில் Kolam & Kovil
Tokens and motifs drawn from the morning kolam at the doorstep, the temple gopuram, Kanchipuram silk, turmeric, kungumam and jasmine. The same components exist in the Flutter app (shared/kovil).
Colour tokens
Light and dark values. Tailwind utilities: bg-kungumam, text-pattu-teal, border-zari …
kungumam குங்குமம்
#B3261E · #FF8A7D
primary actions, brand
manjal மஞ்சள்
#E0A526 · #F2C14E
accent, highlights, ratings
pattu-teal பட்டு
#0F6B5C · #5CC5B0
secondary, plantation, eco
pattu-magenta பட்டு
#A3195B · #F07AAE
festivals, community, artisan
zari சரிகை
#C9A227 · #E3C565
premium, UNESCO, stamps (decorative)
zari-ink சரிகை
#7A5C0E · #E3C565
zari-coloured text
karungal கருங்கல்
#3A3633 · #F3EBDD
text
karungal-muted கருங்கல்
#5E5650 · #B5AA9A
secondary text
sandstone மணற்கல்
#E8DCC8 · #3A332C
cards, neutrals
surface
#FFFFFF · #221E1B
cards, sheets
malli மல்லி
#FFFDF6 · #171412
page background
kolam-flour அரிசி மாவு
#F7F1E3 · #F7F1E3
kolam line
red-oxide காவி தரை
#6E2C1E · #4A1E15
kolam ground (doorstep)
| Pair | Sample | Ratio | WCAG |
|---|---|---|---|
| text on page | Aa அ | 11.75:1 | AAA |
| text on sandstone | Aa அ | 8.83:1 | AAA |
| muted on page | Aa அ | 7.06:1 | AAA |
| muted on sandstone | Aa அ | 5.30:1 | AA |
| on-primary on kungumam (button) | Aa அ | 6.54:1 | AA |
| kungumam link on page | Aa அ | 6.42:1 | AA |
| white on pattu-teal | Aa அ | 6.41:1 | AA |
| white on pattu-magenta | Aa அ | 7.38:1 | AAA |
| karungal on manjal | Aa அ | 5.46:1 | AA |
| zari-ink on page | Aa அ | 6.13:1 | AA |
| kolam flour on red oxide | Aa அ | 9.13:1 | AAA |
| dark · text on page | Aa அ | 15.49:1 | AAA |
| dark · text on surface | Aa அ | 13.97:1 | AAA |
| dark · muted on surface | Aa அ | 7.23:1 | AAA |
| dark · on-primary on primary (button) | Aa அ | 7.45:1 | AAA |
| dark · primary link on page | Aa அ | 8.02:1 | AAA |
| dark · teal on page | Aa அ | 8.79:1 | AAA |
| dark · zari on surface | Aa அ | 9.80:1 | AAA |
| dark · text on sandstone | Aa அ | 10.50:1 | AAA |
| dark · kolam flour on red oxide | Aa அ | 12.53:1 | AAA |
Typography
Arima (Madurai) for Tamil display, Noto Sans Tamil for Tamil body, Inter for Latin.
font-tamil-display · Arima Madurai
பயணம்
காலை வணக்கம்
நன்றி · மீண்டும் வருக
font-sans (ta) · Noto Sans Tamil
தஞ்சாவூர் பெரிய கோவிலில் காலை ஆறு மணிக்குத் தொடங்கும் வழிகாட்டிச் சுற்றுலா. குடிநீர், தொப்பி கொண்டு வாருங்கள்.
font-display / font-sans · Inter
Brihadeeswarar
A guided dawn walk round the Big Temple, Thanjavur. Bring water and a hat.
Components
Left: light · Right: dark (forced with a .dark wrapper). Language follows the switcher in the header.
KolamPattern · flour / ink / zari
KolamLoader
GopuramSkyline · granite / kungumam
KaaviStripes
Thoranam
SilkBorder · magenta / kungumam / teal
UNESCO
Great Living Chola Temples
Verified host
Meenakshi Homestay
Passport
Pallava Coast trail
PassportStamp · zari / kungumam / teal
CategoryIcon · 24 / 32 / 48
ThirukkuralCard
அகர முதல எழுத்தெல்லாம் ஆதி
பகவன் முதற்றே உலகு.
A, as its first of letters, every speech maintains; The "Primal Deity" is first through all the world's domains.
TamilDateChip
JasmineBurst
நன்றி!
Booking confirmed
KolamPattern · flour / ink / zari
KolamLoader
GopuramSkyline · granite / kungumam
KaaviStripes
Thoranam
SilkBorder · magenta / kungumam / teal
UNESCO
Great Living Chola Temples
Verified host
Meenakshi Homestay
Passport
Pallava Coast trail
PassportStamp · zari / kungumam / teal
CategoryIcon · 24 / 32 / 48
ThirukkuralCard
அகர முதல எழுத்தெல்லாம் ஆதி
பகவன் முதற்றே உலகு.
A, as its first of letters, every speech maintains; The "Primal Deity" is first through all the world's domains.
TamilDateChip
JasmineBurst
நன்றி!
Booking confirmed
English and Tamil
Text-bearing components in both languages.
lang=en
அகர முதல எழுத்தெல்லாம் ஆதி
பகவன் முதற்றே உலகு.
A, as its first of letters, every speech maintains; The "Primal Deity" is first through all the world's domains.
lang=ta
அகர முதல எழுத்தெல்லாம் ஆதி
பகவன் முதற்றே உலகு.
A, as its first of letters, every speech maintains; The "Primal Deity" is first through all the world's domains.