Lacocon

Lacocon — design system

The tokens, foundations, and reusable components behind the Lacocon household app — a warm, kitchen-appropriate palette in the spirit of Le Maé by Lindye. Depth from hairlines and soft tinted fills, never heavy shadow.

Brand

Lacocon

A thin nested-arch outline in clay — a sheltering cocoon niche, echoing Lindye's signature arches — from French cocon, "cocoon": the warm, safe center of the home. Wordmark set in EB Garamond (timeless heirloom serif), light weight; "La" stays ink, "cocon" takes brand clay.

Logo & wordmark

Cocoon mark + Lacocon logotype

Navigation

scan

pantry

plan

list

Actions

rename

remove

↻cadence

+add

×cancel

→advance

Iconography

One thin monoline set, single tonal color — no emoji, no multicolor

Type

display · serifScan the shelvesGaramond 500

wordmarkLacoconGaramond 500

headingThis week's mealssans 16 / 600

bodyEverything's editable — rename, adjust the level.sans 14 / 400

captionscan · plan · auto-cartsans 12 / 400

Type scale

EB Garamond serif display + system sans body

table head · caps .4px

Item · Category · On hand · Brand · Reorder via

day label · caps .5px / 700

MON TUE WED

mono · counts & calc

need 3 bunches · have 0 → ×3

Uppercase labels & mono

Tracked caps for table heads + day labels

Colors

paper

#f3ede2

surface

#fcf9f3

surface-sunk

#eae0d1

surface-mute

#e2d7c4

ink

#2c2620

muted

#6e6353

hint

#9c9080

Oat neutrals

Warm cream paper, surfaces & espresso ink scale

clay (brand)

#a85d3e / #efdccd

sage (action)

#6f7b4e / #e6e7d3

ochre · soft

#bb8a32 / #f3e7c4

rust · soft

#8a3d28 / #eed8cc

Clay is the brand identity (logo, wordmark); sage is the action + in-stock accent (buttons, inputs). Status → sage in stock · ochre low · rust out.

Accents & status

Clay (brand) + sage (action) + ochre / rust status

kids

#7e6491 / #e8e1ef

Anika

#a4607a / #f0e0e7

you pick

#4f7387 / #dde7ec

from Google Calendarshe picksyou pick

Owner accents

Per-person section colors: kids, Anika, you-pick

Spacing

1
4

3
8

5
12

7
16

9
22

10
24

12
32

Spacing scale

4 → 32px rhythm

--radius
12px

--radius-sm
8px

--radius-pill
999px

Radii

12px cards · 8px controls · pill

Card — 1px --line, no shadow

surface · radius 12

Note — 3px left rule, sunk fill

surface-sunk · radius-sm

Frosted sticky bar

blur(8px) · bar-bg .92

Surfaces & borders

Card, note, frosted bar — depth from hairlines, not shadow

Components

Buttons

Icon

Inputs

Range60%

Number%lb

Switch

Buttons & inputs

Button, IconButton, Input, Select, RangeInput, NumberInput, Switch

Statusin stocklowoutnew

Ownerfrom Google Calendarshe picksyou pick

Levels

stocked

half

low

Cadence↻ weekly↻ oncetap to cycle →

Badges, levels & cadence

Status/owner pills, on-hand bars, cadence chip

Adaptive tagging: decanted jars have no label, so the model flags them. You tag once; it remembers the jar by location + look. A content tripwire re-asks only if a jar's contents look different later.

Meal cancelled · Google Calendar updated · list adjusted

Note & Toast

Inset explanatory callout + calendar-sync confirmation

Tag this jar

Top shelf, back-right · looks like small kernels

Contents

Fill level

Dialog

Centered modal over a dimmed warm backdrop

This pass

7 items found, 2 need you.

Basmati rice

in stock

Tilda · reorder via Kesar

Card surface

Base white surface — 12px radius, hairline border, no shadow

Tab bar

Primary pill tabs — active tab solid ink, monoline icons