Component

Card

A gangsa or a pattern as a tile in a picker: a picture or a preview on top, the name in Katibeh, and a line or two about it.

Designed, not built yet

Preview

Gangsa photo

Pemade 1

Last used 2 days ago

80% total accuracy

Gangsa · Photo flush with the top edge, sharing the card's corners.

Ubitan Nyendok

96 BPM · best 64%

Pattern · A preview of the figure: polos on top, sangsih below, the cursor where the cycle is.

Specs

Corner radius: 24pt
Padding: 16pt
Inner shapes: 24 − 16 = 8pt, concentric with the card (ConcentricRectangle)
Photo: Flush to the top and sides, sharing the card's top corners
Title: Katibeh 34/41, TitleText
Title to text: 8pt
Metadata: SF Pro 15/20, DescriptionText; the number in semibold
Surface: Card #3D322C, on the ground

Usage

Do

Keep to the 8-point grid inside the card: 16 padding, 8 between title and text.
Give anything nested in a card the concentric radius, not one of its own.

Don't

Put a glass button on a card; cards are content.
Add a hairline border; the step from ground to card already separates it.