Pulliv0.1
8px
11.02 — Showcase · Mobile

Mobile application.

Three screens at comfortable density. Small surfaces are where target sizes stop being a checklist item and start deciding the layout, and where the expressive layer has to be spent in exactly one place — onboarding — or not at all.

The surface

Density
comfortable · P = 10
Fork
ilai · leaf
Pattern coverage
onboarding only
New tokens needed
none
Density
9:41

One line, every morning

Draw a kolam each day. Each one is stored as a seed, so a year of patterns takes less space than a photograph.

Onboarding — the one screen with a pattern budget

9:41

Library

30 saved
Margazhi 127 × 7 · seed 4471
Closed
Margazhi 119 × 9 · seed 1188
Closed
Doorstep study5 × 5 · seed 302
Draft
Margazhi 107 × 7 · seed 8890
Closed

Library — pattern as identity, at thumbnail size

9:41

Margazhi 12

  • Grid7 × 7
  • Seed4471
  • SymmetryD4
  • Segments84

Detail — full pattern, with its parameters as content

The fork

Same shape as the dashboard fork, different palette. Fifteen lines, no primitives touched.

#mobileSurface{
  --ilai-100: #E4F0E8;  --ilai-500: #2E6B45;
  --ilai-700: #286038;  --ilai-300: #84C291;
  --ilai-900: #182318;

  --color-accent:        var(--ilai-500);
  --color-accent-hover:  var(--ilai-700);
  --color-accent-subtle: var(--ilai-100);
  --color-on-accent:     var(--maa-50);
  --color-kolam-line:    var(--ilai-500);
}
:root[data-theme="dark"] #mobileSurface{
  --color-accent:        var(--ilai-300);
  --color-accent-subtle: var(--ilai-900);
  --color-on-accent:     var(--mann-900);
}
--color-kolam-line is a semantic role, not an afterthought. Forking the accent without forking the pattern colour would leave green buttons next to an ochre kolam. The pattern layer participates in theming like everything else.

What it stresses

Held up

  • Comfortable density on a small screen. P = 10 gives 55px controls and generous list rows without any mobile-specific tokens. The tier exists exactly for this.
  • Pattern at thumbnail scale. A 5×5 kolam at 60px still reads as a distinct figure — because it is generated from a stable seed per item, the same row always looks the same, which is what makes it usable as identity rather than decoration.
  • The switch component works unchanged in a settings row, with the label stretched and the control right-aligned. No variant needed — just a flex container.
  • Full-width buttons via btn-block, keeping the same height token as everywhere else.

Broke, and the fix

  • The tab bar had no safe area. At comfortable density the bar looked generous, which disguised the fact that it sat flush against the bottom edge — where a home indicator lives on real hardware. Fixed by raising the bottom inset to --space-inset-md. Density is not a substitute for a safe area, and a generous-looking layout is the easiest place to miss one.
  • The back button used btn-sm and was a 40px target. It now carries explicit min-height and min-width of --alavu-md. Icon-only controls are the most common place the visual-size trap catches people.
One pattern budget, spent on onboarding. The library and detail screens use kolams as content — thumbnails and the thing being viewed — not as ground. Onboarding is the only screen where the pattern is decoration, and it is also the only screen the user sees once.