Ultramarine & Acid

Loud on the outside, honest on the inside

Canonical foundations and components for Can You Have?, ported from the redesign design system. Build from these primitives; never hard-code colours.

View foundations

Foundations

Colour and typography

Ultramarine & Acid: loud, confident and a little techy on the outside; calm and honest answers on the inside. No drop shadows — separate with a fill or a 2px line.

Brand

Ultramarine and lime never mean Yes or No.

ultramarine Brand, primary action, links

lime Accent: stickers, snap, nudges

ink Text, ink buttons, dark bands

lavender Brand tint, selected cards

Surfaces and lines

App screens sit on surface-subtle with white cards.

white Page and card ground

surface-subtle App screen ground

surface-sunken Soft cards, tracks

line Dividers, 2px outlines

Type scale

Bricolage Grotesque 800 for headlines; DM Sans for everything else.

hero: Stop explaining your plate.
section: Same label. Your rules.
screen-title: Your food guidance
verdict: No
card-title: Your guests never hit a paywall
lead: Add what you can’t eat and share one link.
body: Type it in your own words, or upload a photo.
caption: A guide from Sam, not a guarantee.
overline: Why

Radius

Rounded, never sharp: pills for marketing and status, soft squares in the app.

2xl

3xl

5xl

full

Bento logo

Set the ground it sits on and the pieces recolour by the brand rules.

Can You Have?

Interaction

Headers, buttons and forms

One primary (ultramarine) action per view. Rounded 14px controls in the app, pills on the site. Everything tappable is at least 44px.

Screen header

Owner dashboard

Your food guidance

Review anything needing attention, add guidance, then share your profile.

Buttons

variant × shape × size. Icon-only buttons always carry a label.

Fields

Labels always visible. The one field that matters gets the ink edge.

Answering mode

RadioCardGroup with native radios.

Answering mode Strict Safest Everything not explicitly Yes or No says Ask Sam. Safest for allergies. Balanced Careful best guess Ordinary unmatched ingredients may show Probably fine; items related to can't-have guidance may show Probably not. Never invents a hard Yes from missing guidance. Relaxed Leans to Probably fine Unmatched items default to Probably fine unless they look like a possible No from saved guidance. Probably fine stays non-definitive and never becomes Yes without explicit saved guidance.

Composer

Type, or add a photo or document. The camera is the lime snap button.

Type a food or list, or add a photo. You can do either — or both.

Recent checks

Only on this device; the selected row gets an ultramarine edge.

Recent on this device

Only on this phone

Validation and outcomes

Errors add an icon and words, never colour alone.

Check the highlighted fields

Enter a food or ingredient
Shorten the explanation to 280 characters

Food or ingredient

Enter a food or ingredient

Guidance added to your profile.

Link field

A read-only link with an inline lime Copy button.

https://canyouhave.com/p/sam-7f3k

Content

Cards, tables and states

Five answers, each with its own colour, Bento piece and word, so meaning never rests on colour alone. Brand colours stay off answers.

Answers

AnswerPill draws the fill, the piece and the word together.

Yes Sam has said it’s fine
Probably fine Nothing on Sam’s list is usually in it
Ask Sam Sam’s guidance doesn’t cover it
Probably not It often contains something Sam avoids
No It contains something Sam can’t have

Yes Probably fine Ask Sam Probably not No

Can have Can't have Unsure Sam's rule On the label Usual recipe Inferred

Pesto Based on saved guidance

No

Why

Pine nuts
Sam can’t have tree nuts Sam's rule

Very sure. Matched Sam’s rule.

Sesame snaps Not covered

Ask Sam

Best to ask Sam before serving this.

A guide from Sam, not a guarantee. If in doubt, ask Sam.

Owner app

ReviewBanner, SuggestionCard and ShareLinkCard on the owner dashboard.

Review 3 extracted sources Nothing changes until you approve.

Peanuts From dietitian-letter.pdf Can't have

Balanced answers

Anyone with this link can ask questions.

Cards and rows

White on surface-subtle in the app; sunken on white on the site.

Saved guidance

Owner-approved rules visitors see.

Food	Status
Eggs Owner rule	Can't have
Oats Approved suggestion	Can have
Soy sauce Imported guidance	Unsure

Current session Updated 5 Oct 2026, 19:20

Sign out

Balanced Save 39% Plus Free Draft Ask Sam

Step 1:Add what you avoid

Type it in your own words, or upload a photo.

Notices

Tip

Snap the label for an exact answer.

Looks like your existing rule “Dairy”. Merge to add these as aliases.

Contradictory proposals were flagged.

Extraction failed

Try a clearer file, or add guidance manually.

Empty and loading

No guidance saved yet

Add the first owner-approved food rule above.

System

On phones, dialogs rise from the bottom as sheets over the scrim; from tablet width up they are centred panels. Toasts confirm outcomes with an icon and words.

Dialog / bottom sheet

Use a focused confirmation for consequential or destructive actions.

Notifications

Toasts sit top-right on white with a line edge.

Bottom navigation

The owner app's four tabs; the current tab is ultramarine and carries aria-current.

Rules

24 approved rules

Usage principles

Accessible by default

Meaning beyond colourEvery answer pairs its colour with its Bento piece and its word.

Visible focusA 3px ultramarine ring at 2px offset; lime on ultramarine and ink grounds.

Responsive firstLayouts work at 320px before adding wider-screen enhancements; tap targets are at least 44px.