Skip to content
Can You Have? Back to app

Version 1.0

A clear, vibrant system for sensitive decisions

Canonical foundations and components for building consistent, accessible Can You Have? experiences from 320px upward.

View foundations

Foundations

Colour and typography

A playful turquoise, sky aqua, rose and thistle palette. Accessible ink colours are paired with these bright surfaces so controls and statuses remain easy to read.

White

#FFFFFF

Turquoise

#81F4E1

Sky aqua

#56CBF9

Rose kiss

#FF729F

Thistle

#D3C4D1

Display · Manrope

Clear answers, kindly given.

Body · Inter

Can You Have? helps people share dietary guidance with confidence while keeping uncertainty visible and easy to act on.

Body copy uses a comfortable line height and never relies on colour alone to communicate meaning.

Interaction

Headers, buttons and forms

Food profile

David’s guidance

Manage the rules visitors use when they ask what David can have.

Buttons

Form fields

Labels stay visible and guidance sits beside the control.

Use the name people are most likely to ask about.

Visible to visitors when this rule is matched.

Smart source entry

One owner control for pasted guidance or a private file upload. Routes to the existing extraction actions; proposals stay non-authoritative until approve.

Add guidance from text or a file

Paste notes, or drop a private JPEG, PNG, WebP, PDF, TXT, CSV, or Word (DOCX) file. AI proposes structured rules for your review — nothing becomes authoritative until you approve it.

Type or paste free-text guidance. Leave empty if you are uploading a file instead.

Drop a file here, or choose one

Recent queries

Device-local history under the public ask form. Selecting one restores the saved result without re-checking the server.

Recent on this device

Validation

Summarise errors and identify each invalid field inline.

Content

Cards, tables and states

Approved rules

24
Three were updated this week.

Visitor questions

138
82% answered from saved guidance.

Needs attention

6 unsure
Add guidance for frequently asked foods.

Food rules

Pad the card around the shadcn table. Keep Edit/Delete beside each food name so the table never needs horizontal scrolling.

David’s current food guidance
Food or ingredient Status
Peanuts
 Cannot have
Eggs
 Can have
Soy sauce
 Unsure

Guidance result marks

YES, NO, and UNSURE always pair colour with an icon and explicit text. Match confidence stays a quiet detail.

  • No

    Flour

    NO

    Match confidence HIGH
  • Yes

    Yeast

    YES

    Match confidence MEDIUM
  • Unsure

    Salt

    UNSURE

    Match confidence LOW

Empty state

No guidance yet

Add the first food rule to start answering visitor questions.

Loading state

Loading food rules

System

Dialogs, notifications and mobile navigation

Dialog

Use a focused confirmation for consequential or destructive actions.

Notifications

Toast messages confirm background outcomes without interrupting the task.

Mobile navigation

Keep the five most important destinations within thumb reach. Labels remain visible and the current page is communicated with colour, background and aria-current.

Can You Have?

Your food profile

24 approved rules

Usage principles

Accessible by default

Meaning beyond colourPair every status colour with text and an icon.

Visible focusEvery interactive element keeps a high-contrast focus ring.

Responsive firstLayouts work at 320px before adding wider-screen enhancements.

Marketing

Landing patterns

The home page leads with brand typography, one promise, one primary CTA, and a single illustration. Status demos always pair colour with text and an icon.