Phone frame
402×874 preview shell for landing screenshots.
Quiet Bloom · Primary
Reveal the hidden pattern.
Elegant discovery in an aperiodic mosaic. A calm game of attention — not a geometry lesson.
01 · Colours
Semantic tokens
02 · Typography
Type scale
Reveal the pattern.
Two rhombs. That is all.
Every mosaic in Tessra is built from exactly two shapes — a thick rhomb at 72° and a thin rhomb at 36°.
Simple pieces, placed by simple rules, that never settle into ordinary repetition. The further the pattern grows, the more it reveals.
The rule
03 · Components
UI elements
72° thick
36° thin
No timer
20
gentle lessons
365
patterns a year
∞
mosaics to explore
04 · Mosaic
Tile material
Thick · 72°
Thin · 36°
05 · Patterns
Layout specimens
Accent wash
Only the #pattern section uses an opaque accent background — navy text on warm wash.
06 · Colour moods
Secondary themes
07 · Guidelines
Do's and don'ts
Do
- Lead with the live mosaic as the primary visual asset.
- Use Fraunces for emotion, JetBrains Mono for precision.
- Keep copy short — one feeling per screen.
- Respect prefers-reduced-motion.
- Align landing tokens with game themes.js picker.
Don't
- Position as a math app or education tool.
- Use gradient blob backgrounds.
- Render the infinite plane on marketing surfaces.
- Put "Penrose" in the product name.
- Add timers, lives, or competitive pressure.