New
10
.00
Name/description here for max. 3 lines then truncate the rest of the name.
Breadfast Design System
Base Components UI Library Reference
Use with AI
Build screens instantly with Claude, Codex, or Antigravity. Paste this context URL into your AI tool:
https://ui.breadfast.app/ai-context.md
Or clone the repo for Claude Code (CLAUDE.md auto-loads) · Copy compact prompt
Colors
Core color palette extracted from the Breadfast Design System (Figma).
Brand (Primary)
Primary
#AA0082
Dark
#9C0062
Darker
#7C0E52
Light
#FBB3E1
Lighter
#FFD6E8
Lightest
#FFF0F7
Success
Success
#108723
Dark
#0E6027
Light
#6FDC8C
Lightest
#E8FFED
Error
Error
#DA1E28
Dark
#A2191F
Light
#FFB3B8
Lightest
#FFF1F1
Warning
Warning
#BA4E00
Light
#FFB784
Lightest
#FFF2E8
Progress (Info)
Progress
#0F62FE
Light
#A6C8FF
Lightest
#EDF5FF
Text
Default
#212121
Secondary
#6F6F6F
Tertiary
#B7B7B7
Disabled
#D8D8D8
Background
Default
#FFFFFF
Secondary
#F3F4F5
Tertiary
#EBEBEB
Brand
#FFF0F7
Dark
#212121
Interaction States
Primary Default
#AA0082
Primary Pressed
#9C0062
Primary Disabled
#D8D8D8
Secondary Default
#FFF0F7
Secondary Pressed
#FFD6E8
Typography
Font: Faro (Lucky variants). Supports EN and AR with localization variables.
Display
Display Large
Display Medium
Display Small
Display X Small
Heading
Heading XX Large
Heading X Large
Heading Large
Heading Medium
Heading Small
Heading X Small
Label
Label Large — Semibold
Label Medium — Semibold
Label Small — Semibold
Label X Small — Semibold
Paragraph
Paragraph XX Large
Paragraph Large — Regular weight for body text.
Paragraph Medium — Default body text size for most content.
Paragraph Small — For secondary information and captions.
Paragraph X Small — Footnotes and fine print.
Pricing
1,234.99
567.50
89.00
Spacing & Radius
Consistent spacing scale and border radius tokens.
Border Radius
0
4px
8px
12px
16px
20px
full
Spacing Scale
4px
8px
12px
16px
24px
32px
48px
64px
Icons
29 icons extracted from the Figma Design System (node 1959:6567). All icons use fill: currentColor and inherit their parent's text color.
Sizes
Figma defines 4 sizes: Small (16px), Medium (20px), Large (24px, default), X-Large (32px).
Icon Gallery (29 icons)
Buttons
All button variants, sizes, and states.
Variants
Sizes
States
Full Width
Field Inputs
Form controls for text, selections, and user input.
Floating Label — Default (Empty)
We'll never share your email.
Floating Label — Filled (Inactive)
Error State
Please enter a valid phone number.
Success State
Code applied! 20% off your order.
Disabled
Sizes
Select
Textarea
Checkbox & Radio
Top App Header
Top navigation/header component from the Breadfast app shell. The library now follows the Figma documentation API for size, localization, clickable title, optional leading icon, one to three trailing icons, optional status bar, and optional subtitle.
Centered / EN / 1 trailing icon
Centered / AR / 1 trailing icon
Small / EN / 2 trailing icons
Small / AR / 2 trailing icons
Large / EN / subtitle on
Title here
Subtitle here
Large / AR / subtitle on
اسم الصفحة هنا
عنوان فرعي هنا
Clickable Title / EN
Clickable Title / AR
Product Card
Compact merchandising card from the Figma design system. Supports grid and horizontal-scroll containers, add and notify actions, quantity stepper, variants pill, and loading state.
Badge Variants
Sponsored
2x Points
Sold out
Discount
Success
New
Grid
New
1
10
.00
Name/description here for max. 3 lines then truncate the rest of the name.
Discount
2
10
.00
Name/description here for max. 3 lines then truncate the rest of the name.
Sold out
10
.00
Name/description here for max. 3 lines then truncate the rest of the name.
Success
10
.00
Name/description here for max. 3 lines then truncate the rest of the name.
Horizontal Scroll
New
10
.00
Name/description here for max. 3 lines then truncate the rest of the name.
2x Points
1
10
.00
Name/description here for max. 3 lines then truncate the rest of the name.
Discount
2
10
.00
Name/description here for max. 3 lines then truncate the rest of the name.
Sold out
10
.00
Name/description here for max. 3 lines then truncate the rest of the name.
Sponsored
10
.00
Name/description here for max. 3 lines then truncate the rest of the name.
Toast / Snack Bar
Single-line notification bars. 44px height, 8px radius, no border. Layout: [icon] [message] [action button]. Figma node 1915:6491.
Error
Message written here.
Success
Message written here.
Warning
Message written here.
Informative Dark
Message written here.
Informative Light
Message written here.
Informative Magenta (Brand)
Message written here.
Tab Bar
Bottom navigation tab bar from Figma (node 7808:395). Supports LTR and RTL layouts with active/inactive states.