Pocket Garden

My plants Today Paper

6 plants · 2 need water

Monstera "Swiss"

Living room · water every 7 days

Prickly Pete

Window sill · water every 21 days

Violet the Violet

Desk · water every 4 days

Light check

Your living room gets about 4 hours of bright, indirect light. Monstera would like a little more.

Remind me at sunset

Today

Water MonsteraOverdue by 1 day
Water VioletDue this afternoon
Mist the fernHumidity is low (31%)
Rotate Prickly PeteLeaning towards the light

Swipe to dismiss was on the phone. Here, tap Done.

Everything is paper

Material surfaces sit at a height measured in dp. The higher the sheet, the softer and wider its shadow: one key light from above, one ambient light all around.

0dpWindow
1dpSearch bar
2dpCard
4dpApp bar
6dpFAB, snackbar
8dpMenu, raised card
16dpDrawer
24dpDialog

Log a photo
Water all
New plant

Plant watered

--dp-1: 0 1px 1px 0 rgb(0 0 0 / 0.14), 0 2px 1px -1px rgb(0 0 0 / 0.12), 0 1px 3px 0 rgb(0 0 0 / 0.2); --dp-2: 0 2px 2px 0 rgb(0 0 0 / 0.14), 0 3px 1px -2px rgb(0 0 0 / 0.2), 0 1px 5px 0 rgb(0 0 0 / 0.12); --dp-4: 0 4px 5px 0 rgb(0 0 0 / 0.14), 0 1px 10px 0 rgb(0 0 0 / 0.12), 0 2px 4px -1px rgb(0 0 0 / 0.2); --dp-6: 0 6px 10px 0 rgb(0 0 0 / 0.14), 0 1px 18px 0 rgb(0 0 0 / 0.12), 0 3px 5px -1px rgb(0 0 0 / 0.2); --dp-8: 0 8px 10px 1px rgb(0 0 0 / 0.14), 0 3px 14px 2px rgb(0 0 0 / 0.12), 0 5px 5px -3px rgb(0 0 0 / 0.2); --dp-12: 0 12px 17px 2px rgb(0 0 0 / 0.14), 0 5px 22px 4px rgb(0 0 0 / 0.12), 0 7px 8px -4px rgb(0 0 0 / 0.2); --dp-16: 0 16px 24px 2px rgb(0 0 0 / 0.14), 0 6px 30px 5px rgb(0 0 0 / 0.12), 0 8px 10px -5px rgb(0 0 0 / 0.2); --dp-24: 0 24px 38px 3px rgb(0 0 0 / 0.14), 0 9px 46px 8px rgb(0 0 0 / 0.12), 0 11px 15px -7px rgb(0 0 0 / 0.2);

/** Ink spreads from where the finger touched, sized to reach the far corner. */ function ripple(e: PointerEvent) { const host = (e.target as HTMLElement).closest<HTMLElement>('.ripple') if (!host || !root.contains(host) || quiet()) return // A button inside a card ripples on its own; do not ripple the card too. if (host.classList.contains('md__card') && (e.target as HTMLElement).closest('button')) return const r = host.getBoundingClientRect() const x = e.clientX - r.left const y = e.clientY - r.top const d = 2 * Math.hypot(Math.max(x, r.width - x), Math.max(y, r.height - y)) const ink = document.createElement('span') ink.className = 'md__ripple' ink.style.cssText = `--x:${x}px;--y:${y}px;--d:${d}px` host.append(ink) ink.addEventListener('animationend', () => ink.remove()) }

.md__field { position: relative; padding-top: 16px; margin-bottom: 8px; input { width: 100%; box-sizing: border-box; height: 40px; padding: 8px 0; border: 0; border-bottom: 1px solid rgb(0 0 0 / 0.42); border-radius: 0; background: transparent; color: inherit; font: inherit; font-size: 16px; outline: none; } label { position: absolute; left: 0; top: 26px; color: var(--md-ink-54); font-size: 16px; pointer-events: none; transform-origin: 0 0; transition: transform 150ms var(--md-ease), color 150ms; } /* The underline grows from the centre when focused. */ &::after { content: ''; position: absolute; left: 0; right: 0; top: 54px; height: 2px; background: var(--md-primary); transform: scaleX(0); transition: transform 200ms var(--md-ease); } &:focus-within::after { transform: scaleX(1); } input:focus + label, input:not(:placeholder-shown) + label { transform: translateY(-22px) scale(0.75); } input:focus + label { color: var(--md-primary-text); } small { display: block; margin-top: 4px; color: var(--md-ink-54); font-size: 12px; } }

<div class="md__fab-wrap" data-trait="fab"> <ul class="md__dial" id="md-dial" aria-label="Quick actions"> <li><span>Log a photo</span><button class="md__mini ripple" type="button" aria-label="Log a photo" style="--i:2"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="13" r="3.2"/><path d="M9 3 7.2 5H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-3.2L15 3H9zm3 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/></svg></button></li> <li><span>Water all</span><button class="md__mini ripple" type="button" aria-label="Water all plants" data-water="all 6 plants" style="--i:1"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2s-6 7-6 12a6 6 0 0 0 12 0c0-5-6-12-6-12z"/></svg></button></li> <li><span>New plant</span><button class="md__mini ripple" type="button" aria-label="Add a new plant" data-open-dialog style="--i:0"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M11 22v-7.1C7.6 14.4 5 11.5 5 8c3.6 0 6.5 2.7 6.9 6.2C12.4 10.7 15.4 8 19 8c0 3.5-2.6 6.4-6 6.9V22z"/></svg></button></li> </ul> <button class="md__fab ripple" type="button" id="md-fab" aria-expanded="false" aria-controls="md-dial" aria-label="Quick actions"> <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"/></svg> </button> </div>