HeyAlpha AI Kiosk Design System v1.2

Click to expand

This design system is built for AI-driven, touchless, and conversational food ordering interfaces, where UI dynamically adapts based on user intent and context.

Typography

DisplayInter · 32--36px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

SectionInter · 24px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

BodyInter · 16--18px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CaptionInter · 12--14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

This design system is built for AI-driven, touchless, and conversational food ordering interfaces, where UI dynamically adapts based on user intent and context.

Do's & Don'ts

Do

Provide minimum 48px touch targets

Ensure high contrast

Follow voice-first design

0. System Intent

This design system is built for AI-driven, touchless, and conversational

food ordering interfaces, where UI dynamically adapts based on user

intent and context.

Primary use cases: - Voice-based food ordering\

• Kiosk interaction\

• Conversational UI systems

------------------------------------------------------------------------

1. Core Principles

• Intent-driven UI → Interface adapts to user input\

• Zero hesitation design → Reduce decision time\

• Touchless-first interaction → Voice + minimal taps\

• Instant feedback loops → Every action is visible\

• Progressive disclosure → Show only relevant options

------------------------------------------------------------------------

2. Visual Foundations

### Colors

• Primary: #8B5E3C (Brand)\

• Interaction: #2BA8A2 (Active / Highlight)\

• Accent: #FFD23F (CTA emphasis)\

• Background: #F7F5F2 (Surface)

#### Semantic Colors

• Success: #22C55E\

• Error: #EF4444\

• Warning: #F59E0B

------------------------------------------------------------------------

### Typography

#### Display (32--36px)

Order your favorite food instantly

#### Section (24px)

Choose your category

#### Body (16--18px)

Select items based on your preference

#### Caption (12--14px)

Quick, easy, and personalized ordering

------------------------------------------------------------------------

3. Interaction Primitives

### AI Trigger Button (Mic)

States: - Idle\

• Listening\

• Processing\

• Error

------------------------------------------------------------------------

### Dynamic Action Button

States: - Default\

• Loading\

• Disabled

------------------------------------------------------------------------

6. Dynamic UI Rules

• UI assembled from reusable components\

• Based on intent and context

------------------------------------------------------------------------

7. Navigation Model

Discover → Select → Customize → Confirm

------------------------------------------------------------------------

8. Accessibility

• Minimum 48px touch targets\

• High contrast\

• Voice-first

------------------------------------------------------------------------

9. Data Contracts

### FoodCard

• id\

• name\

• price\

• image\

• tags\

• availability

------------------------------------------------------------------------

10. System Philosophy

UI adapts to conversation, not fixed flows.

Download .md

mahimaalphadroid015-eng @mahimaalphadroid015-eng

License MIT

Uploaded 3 weeks ago

Version v1

File size 2.9 KB

Downloads 46

Copies 11

conversational-ui food-ordering saas touchless voice-first

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/mahimaalphadroid015-eng/heyalpha-ai-kiosk-design-system-v1-2 and implement it in my code

Don't have the MCP? Install it here