Registuroturo · Design System

01 · Color

Three labels, one shelf.

The palette is lifted straight from the jars. Chili-crunch brands go loud and red — this one goes soft. Each flavor owns a pastel surface; charcoal does all the reading; two accents carry action and heat.

Kanin Cream

#EDECDD

Rosas Blush

#F2D6E2

Kalamansi Mint

#B7E9BC

Colors

Surface palette

One pastel per flavor, sampled from the labels. Cream is the primary ground; blush and mint alternate section bands. Never mint on mint.

Uling · #2B211C

Every word of body copy, every outline. 11.5:1 or better on all three surfaces.

70%45%15%8%

Colors

Ink and its tints

Charcoal at four opacities: 70% for secondary text, 45% for disabled, 15% for rules, 8% for fills. No greys outside this ladder.

Turo Pink · #E63E97

Fills and badges only

Turo Pink Deep · #B01A63

Pink text and links

Sili Red · #C33A1E

Heat and sale semantics

Colors

Accents

Two voices: pink is the pointing accent, red is heat. One accent per view — they never compete in the same block.

Correct

Track my order

Incorrect

Track my order 3.82:1

Colors

Fill pink vs text pink

Turo Pink behind charcoal passes as a button. Turo Pink as text on a light ground does not — swap to Turo Pink Deep every time.

Foreground	Background	Ratio	Rating	Preview
Uling	Kanin Cream	13.20	AA body	Anak
Uling	Rosas Blush	11.59	AA body	Anak
Uling	Kalamansi Mint	11.51	AA body	Anak
Turo Pink Deep	White	6.62	AA body	Buy
Turo Pink Deep	Kanin Cream	5.56	AA body	Buy
White	Sili Red	5.32	AA body	Sale
Uling	Turo Pink	4.11	Large / UI only	Buy now
Turo Pink	White	3.82	Fill only — not text	avoid

Colors

Measured contrast

Every pairing the storefront is allowed to ship, with its WCAG 2.1 ratio. Anything not on this table needs measuring before it goes in.

02 · Typography

A grotesque, a workhorse, and a stamp.

Three roles, chosen against the grain of the usual food-brand serif: a quirky grotesque for personality, a warm humanist for reading, and a mono that behaves like the net-weight stamp on a jar.

Display

Extra Spicy Crunch

Bricolage Grotesque
Weights 700–800 · tracking −0.02em
Headlines and flavor names only

Type

Display face

Set big and sparingly — one display moment per screen. Never below 1.6rem, never for running text.

Body

Crispy garlic and shallot with a balanced, everyday heat — the perfect crunch for rice, noodles, eggs, or anything you crave.

Hanken Grotesk
Weights 400–700 · line-height 1.5
Measure capped at ~64ch

Type

Body face

Carries every word a customer reads. Sentence case, charcoal ink, generous leading; bold for emphasis rather than color.

Label

Net Wt 14 OZ
Batch No. 007
Signature

Space Mono
Uppercase · tracking 0.1–0.2em
Eyebrows, specs, codes

Type

Label face

The packaging-stamp voice. The only place all-caps is allowed, and the only place letter-spacing goes above 0.02em.

Mega · heroTuro·Turo

XL · group h2Three labels

L · card h3Flavor name

M · ledeEveryday heat

Body · 1.05remThe original. Crispy garlic and shallot.

Label · 0.74remComing Soon · 14 OZ

Type

Scale

Six steps, all fluid with clamp(). Skip a step rather than inventing one between two.

03 · Brand device

Turo means point.

The brand is named for the turo-turo — the eatery where you point at the food behind the glass. Two marks carry that idea everywhere: the manicule and the interpunct that already lives inside "Turo·Turo".

Do point at exactly one thing per screen.
Do render in Turo Pink or Uling only.
Don't use it as a repeating list bullet.

Brand

The manicule

A single pointing hand marks what matters: the featured jar, the active nav item, the primary action. A spotlight, not a bullet.

Point · Pick · Eat

Eyebrow Filipino chili crunch · Small batch
Specs Net Wt 14 OZ · Batch 007
Mark Registuro·turo

Brand

The interpunct

The brand's connective tissue — always Turo Pink, always with a hair of space on each side, never doubled as a bullet list.

Signature

Kanin Cream · 14oz

Extra Spicy

Rosas Blush · 14oz

Avocado Oil

Kalamansi Mint · 8oz

Brand

The jar as artwork

Until photography exists, the drawn jar stands in: charcoal lid, outlined glass, translucent band. Flavor color drives the fill, nothing else.

04 · Components

The counter, assembled.

Every control inherits the soft radius of the labels, the charcoal outline and the one-accent rule. Pink fills the primary action; red means heat.

Components

Buttons

Four variants, one shape: pill, 1.5px charcoal outline, 2px lift on hover. One primary per view.

Turo·Turo Sale Coming Soon Limited · Seasonal

Components

Badges

Mono, uppercase, pill. Status only — never decoration, and never more than one per product card.

Signature · Everyday heat

Extra Spicy · Serious kick

Avocado Oil · Mellow

Components

Spice meter

Three chilis, filled in Sili Red. The words carry the meaning too, so heat never depends on color alone.

Get first dibs

Components

Email capture

Mono label above, outlined field, primary action inline. The only form the storefront needs before checkout.

Components

Store bar

A single pill holding the wordmark, two links and the cart. It shrinks on scroll but never changes color.

Coming Soon

Extra Spicy

Extra Spicy Garlic & Shallot

Chili Crunch · 14 oz

$22.00

Components

Product card · pre-order

Surface matches the flavor. Badge top-right, jar centered, price and heat on one baseline.

Sale

Signature

Signature Garlic & Shallot

Chili Crunch · 14 oz

$20.00 ~~$22.00~~

Components

Product card · buyable

Same anatomy, action in place of the meter. Struck price in 45% ink, new price in display weight.

05 · Motion

Point, then reveal.

Motion serves the pointing metaphor and the scroll-driven storefront — never decoration. One orchestrated moment per group beats a dozen scattered effects.

↑ 22px

Content rises and fades as it enters view; flavor names travel further for parallax. The homepage's core gesture.

Motion

Scroll reveal

.6s on the brand ease, triggered once at 12% visibility. Never re-runs on scroll back.

→ 4px

The manicule taps toward its target on a slow loop — a gentle "over here", never a flash.

Motion

The point-nudge

Only the active pointer animates, at 1.6s per cycle. One on screen at a time.

−2px

Cards and buttons lift 2–4px in .15–.25s, then return flush on press.

Motion

Hover lift

Transform only — no shadow growth, no color jump beyond the variant's own hover fill.

prefers-reduced-motion: reduce

Off reveals, nudges, lifts
Keeps full content, at rest, instantly

Motion

Reduced motion

Every animation is gated behind the query. Ease cubic-bezier(.22,.61,.36,1) everywhere else.

06 · Voice & copy

Talks like a lola who feeds you.

Warm, plainspoken, a little cheeky. Care first, heat second. The whole brand answers one question before you ask it.

"Anak, did you eat?" Food as love, said plainly

Voice

North star line

Every piece of copy is measured against it: would a lola feeding you say it this way?

Do

Name real food: rice, noodles, fried egg, sinangag.
Be direct — "The original. Everyday heat."
Let warmth carry the sell, not hype.

Don't

Chase "artisanal / elevated / curated" filler.
Over-promise scoville drama on a soft brand.
Explain the culture like an outsider.

Voice

Do and don't

Sentence case everywhere except mono labels. Shouting belongs on the stamp, not in the sentence.

Empty cartNothing here yet. Go point at something.

Added to cartIn the bag. Anak, you chose well.

Sold outGone for now — small batch means small batch. We'll tell you when it's back.

Shipping nudgeBuy 4, shipping's on us.

Voice

Microcopy

The system states in voice. Each one says what happened, then what to do next — in that order.

07 · Accessibility

WCAG 2.1 AA, built in — not bolted on.

The pastel palette forces discipline: soft colors can't carry text, so the system pins text to charcoal and reserves the brights for fills. These are the non-negotiables the storefront ships against.

11.5:1

Body text is always Uling. Turo Pink is a fill; pink text uses Turo Pink Deep. Controls and dots clear 3:1.

Accessibility

Charcoal reads, pink fills

The floor for every surface in the palette, measured — not assumed.

prefers-reduced-motion

All reveals, nudges and lifts are gated. Reduced-motion users get the content at rest, instantly.

Accessibility

Motion is optional

No animation is load-bearing; nothing is only understandable while moving.

h1 one per page
Order no skipped heading levels
Skip first focusable element

Accessibility

Structure & skip link

Landmark regions on every band, so screen-reader users can jump the same way the index does.

aria-hidden="true"

Manicules, interpuncts, jars and chilis are decorative and hidden from assistive tech; meaning lives in the text beside them.

Accessibility

Decoration is silent

If an icon is the only thing saying something, it isn't decoration — label it.

Every control is reachable and operable by keyboard, with a visible 3px ring and never a suppressed outline.

Accessibility

Keyboard operability

Focus order follows reading order; the ring uses Turo Pink Deep on light, blush on dark.

Sale Serious kick

Heat, sale and status always carry a word or a shape as well as a hue.

Accessibility

Never color alone

Removes the palette as a single point of failure for colorblind and low-vision customers.

Heat, handed over with tenderness.

Three labels, one shelf.

Surface palette

Ink and its tints

Accents

Fill pink vs text pink

Measured contrast

A grotesque, a workhorse, and a stamp.

Display face

Body face

Label face

Scale

Turo means point.

The manicule

The interpunct

The jar as artwork

The counter, assembled.

Buttons

Badges

Spice meter

Email capture

Store bar

Product card · pre-order

Product card · buyable

Point, then reveal.

Scroll reveal

The point-nudge

Hover lift

Reduced motion

Talks like a lola who feeds you.

North star line

Do

Don't

Do and don't

Microcopy

WCAG 2.1 AA, built in — not bolted on.

Charcoal reads, pink fills

Motion is optional

Structure & skip link

Decoration is silent

Keyboard operability

Never color alone