Ava
ae81986c7d
Full design token file with colors, typography, spacing, shadows, breakpoints, animation, z-index, and component-level specs for: buttons, cards, inputs, badges, navbar, sidebar, tables, modals, toasts, avatars, menus, chips, ratings, and price tags. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
355 lines
9.5 KiB
JSON
355 lines
9.5 KiB
JSON
{
|
||
"brand": "Grubflip",
|
||
"version": "2.0.0",
|
||
"created": "2026-03-25",
|
||
"updated": "2026-03-25",
|
||
"author": "Ava (Designer)",
|
||
|
||
"colors": {
|
||
"primary": {
|
||
"base": "#FF6B35",
|
||
"light": "#FF8F66",
|
||
"dark": "#D94E1F",
|
||
"bg": "#FFF3ED",
|
||
"description": "Warm orange — appetite, energy, action"
|
||
},
|
||
"secondary": {
|
||
"base": "#2D6A4F",
|
||
"light": "#40916C",
|
||
"dark": "#1B4332",
|
||
"bg": "#EDF5F0",
|
||
"description": "Deep green — fresh food, trust, growth"
|
||
},
|
||
"accent": {
|
||
"base": "#FFBA08",
|
||
"light": "#FFD166",
|
||
"dark": "#E0A100",
|
||
"bg": "#FFF8E1",
|
||
"description": "Golden yellow — highlight, badges, stars"
|
||
},
|
||
"semantic": {
|
||
"success": { "base": "#2ECC71", "bg": "#EAFAF1" },
|
||
"warning": { "base": "#F39C12", "bg": "#FEF5E7" },
|
||
"error": { "base": "#E74C3C", "bg": "#FDEDEC" },
|
||
"info": { "base": "#3498DB", "bg": "#EBF5FB" }
|
||
},
|
||
"neutrals": {
|
||
"50": "#FAFAFA",
|
||
"100": "#F5F5F5",
|
||
"200": "#E5E5E5",
|
||
"300": "#D4D4D4",
|
||
"400": "#A3A3A3",
|
||
"500": "#737373",
|
||
"600": "#525252",
|
||
"700": "#404040",
|
||
"800": "#262626",
|
||
"900": "#171717"
|
||
},
|
||
"background": {
|
||
"default": "#FFFFFF",
|
||
"subtle": "#FAFAFA",
|
||
"muted": "#F5F5F5",
|
||
"dark": "#1A1A2E"
|
||
}
|
||
},
|
||
|
||
"typography": {
|
||
"fontFamily": {
|
||
"heading": "'Plus Jakarta Sans', sans-serif",
|
||
"body": "'Inter', sans-serif",
|
||
"mono": "'JetBrains Mono', monospace"
|
||
},
|
||
"scale": {
|
||
"xs": { "size": "0.75rem", "lineHeight": "1rem" },
|
||
"sm": { "size": "0.875rem", "lineHeight": "1.25rem" },
|
||
"base": { "size": "1rem", "lineHeight": "1.5rem" },
|
||
"lg": { "size": "1.125rem", "lineHeight": "1.75rem" },
|
||
"xl": { "size": "1.25rem", "lineHeight": "1.75rem" },
|
||
"2xl": { "size": "1.5rem", "lineHeight": "2rem" },
|
||
"3xl": { "size": "1.875rem", "lineHeight": "2.25rem" },
|
||
"4xl": { "size": "2.25rem", "lineHeight": "2.5rem" },
|
||
"5xl": { "size": "3rem", "lineHeight": "1" }
|
||
},
|
||
"weight": {
|
||
"regular": 400,
|
||
"medium": 500,
|
||
"semibold": 600,
|
||
"bold": 700,
|
||
"extrabold": 800
|
||
}
|
||
},
|
||
|
||
"spacing": {
|
||
"unit": "0.25rem",
|
||
"scale": {
|
||
"0": "0", "1": "0.25rem", "2": "0.5rem", "3": "0.75rem",
|
||
"4": "1rem", "5": "1.25rem", "6": "1.5rem", "8": "2rem",
|
||
"10": "2.5rem", "12": "3rem", "16": "4rem", "20": "5rem",
|
||
"24": "6rem"
|
||
}
|
||
},
|
||
|
||
"borderRadius": {
|
||
"sm": "0.375rem",
|
||
"md": "0.5rem",
|
||
"lg": "0.75rem",
|
||
"xl": "1rem",
|
||
"2xl": "1.5rem",
|
||
"full": "9999px"
|
||
},
|
||
|
||
"shadows": {
|
||
"sm": "0 1px 2px rgba(0,0,0,0.05)",
|
||
"md": "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)",
|
||
"lg": "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)",
|
||
"xl": "0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)",
|
||
"card": "0 2px 8px rgba(0,0,0,0.08)"
|
||
},
|
||
|
||
"components": {
|
||
"button": {
|
||
"primary": {
|
||
"bg": "#FF6B35",
|
||
"text": "#FFFFFF",
|
||
"hoverBg": "#D94E1F",
|
||
"activeBg": "#B8421A",
|
||
"disabledBg": "#FFB899",
|
||
"disabledText": "#FFFFFF",
|
||
"borderRadius": "0.5rem",
|
||
"paddingX": "1.5rem",
|
||
"paddingY": "0.75rem",
|
||
"fontSize": "1rem",
|
||
"fontWeight": 600,
|
||
"transition": "all 0.2s ease"
|
||
},
|
||
"secondary": {
|
||
"bg": "transparent",
|
||
"text": "#FF6B35",
|
||
"border": "2px solid #FF6B35",
|
||
"hoverBg": "#FFF3ED",
|
||
"hoverText": "#D94E1F",
|
||
"hoverBorder": "#D94E1F",
|
||
"borderRadius": "0.5rem",
|
||
"paddingX": "1.5rem",
|
||
"paddingY": "0.75rem",
|
||
"fontSize": "1rem",
|
||
"fontWeight": 600
|
||
},
|
||
"ghost": {
|
||
"bg": "transparent",
|
||
"text": "#737373",
|
||
"hoverBg": "#F5F5F5",
|
||
"hoverText": "#404040",
|
||
"borderRadius": "0.5rem",
|
||
"paddingX": "1rem",
|
||
"paddingY": "0.5rem",
|
||
"fontSize": "0.875rem",
|
||
"fontWeight": 500
|
||
},
|
||
"sizes": {
|
||
"sm": { "paddingX": "1rem", "paddingY": "0.5rem", "fontSize": "0.875rem" },
|
||
"md": { "paddingX": "1.5rem", "paddingY": "0.75rem", "fontSize": "1rem" },
|
||
"lg": { "paddingX": "2rem", "paddingY": "1rem", "fontSize": "1.125rem" }
|
||
}
|
||
},
|
||
|
||
"card": {
|
||
"bg": "#FFFFFF",
|
||
"borderRadius": "0.75rem",
|
||
"shadow": "0 2px 8px rgba(0,0,0,0.08)",
|
||
"hoverShadow": "0 4px 12px rgba(0,0,0,0.12)",
|
||
"padding": "1.5rem",
|
||
"border": "1px solid #E5E5E5",
|
||
"transition": "box-shadow 0.2s ease"
|
||
},
|
||
|
||
"input": {
|
||
"bg": "#FFFFFF",
|
||
"text": "#262626",
|
||
"placeholder": "#A3A3A3",
|
||
"border": "1px solid #D4D4D4",
|
||
"focusBorder": "#FF6B35",
|
||
"focusRing": "0 0 0 3px rgba(255,107,53,0.15)",
|
||
"errorBorder": "#E74C3C",
|
||
"errorRing": "0 0 0 3px rgba(231,76,60,0.15)",
|
||
"borderRadius": "0.5rem",
|
||
"paddingX": "1rem",
|
||
"paddingY": "0.75rem",
|
||
"fontSize": "1rem",
|
||
"lineHeight": "1.5",
|
||
"transition": "border-color 0.2s ease, box-shadow 0.2s ease"
|
||
},
|
||
|
||
"badge": {
|
||
"variants": {
|
||
"default": { "bg": "#F5F5F5", "text": "#525252" },
|
||
"primary": { "bg": "#FFF3ED", "text": "#D94E1F" },
|
||
"success": { "bg": "#EAFAF1", "text": "#1B8A4A" },
|
||
"warning": { "bg": "#FEF5E7", "text": "#B87A0D" },
|
||
"error": { "bg": "#FDEDEC", "text": "#C0392B" },
|
||
"info": { "bg": "#EBF5FB", "text": "#2471A3" },
|
||
"accent": { "bg": "#FFF8E1", "text": "#B8860B" }
|
||
},
|
||
"borderRadius": "9999px",
|
||
"paddingX": "0.75rem",
|
||
"paddingY": "0.25rem",
|
||
"fontSize": "0.75rem",
|
||
"fontWeight": 600,
|
||
"textTransform": "uppercase",
|
||
"letterSpacing": "0.05em"
|
||
},
|
||
|
||
"navbar": {
|
||
"bg": "#FFFFFF",
|
||
"height": "4rem",
|
||
"shadow": "0 1px 3px rgba(0,0,0,0.08)",
|
||
"linkColor": "#525252",
|
||
"linkHover": "#FF6B35",
|
||
"linkActive": "#FF6B35",
|
||
"linkFontWeight": 500,
|
||
"logoHeight": "2rem"
|
||
},
|
||
|
||
"sidebar": {
|
||
"bg": "#1A1A2E",
|
||
"width": "16rem",
|
||
"collapsedWidth": "4.5rem",
|
||
"textColor": "#D4D4D4",
|
||
"activeItemBg": "rgba(255,107,53,0.15)",
|
||
"activeItemText": "#FF6B35",
|
||
"hoverItemBg": "rgba(255,255,255,0.05)",
|
||
"sectionTitleColor": "#737373",
|
||
"sectionTitleSize": "0.75rem"
|
||
},
|
||
|
||
"table": {
|
||
"headerBg": "#F5F5F5",
|
||
"headerText": "#525252",
|
||
"headerFontWeight": 600,
|
||
"headerFontSize": "0.75rem",
|
||
"headerTextTransform": "uppercase",
|
||
"headerLetterSpacing": "0.05em",
|
||
"rowBg": "#FFFFFF",
|
||
"rowAltBg": "#FAFAFA",
|
||
"rowHoverBg": "#FFF3ED",
|
||
"cellPadding": "0.75rem 1rem",
|
||
"borderColor": "#E5E5E5",
|
||
"fontSize": "0.875rem"
|
||
},
|
||
|
||
"modal": {
|
||
"overlayBg": "rgba(0,0,0,0.5)",
|
||
"bg": "#FFFFFF",
|
||
"borderRadius": "1rem",
|
||
"shadow": "0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)",
|
||
"padding": "2rem",
|
||
"maxWidth": "32rem",
|
||
"headerFontSize": "1.25rem",
|
||
"headerFontWeight": 700
|
||
},
|
||
|
||
"toast": {
|
||
"borderRadius": "0.5rem",
|
||
"shadow": "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)",
|
||
"padding": "1rem 1.5rem",
|
||
"maxWidth": "24rem",
|
||
"fontSize": "0.875rem",
|
||
"variants": {
|
||
"success": { "bg": "#EAFAF1", "border": "1px solid #2ECC71", "icon": "✓" },
|
||
"error": { "bg": "#FDEDEC", "border": "1px solid #E74C3C", "icon": "✕" },
|
||
"warning": { "bg": "#FEF5E7", "border": "1px solid #F39C12", "icon": "⚠" },
|
||
"info": { "bg": "#EBF5FB", "border": "1px solid #3498DB", "icon": "ℹ" }
|
||
}
|
||
},
|
||
|
||
"avatar": {
|
||
"sizes": {
|
||
"xs": "1.5rem",
|
||
"sm": "2rem",
|
||
"md": "2.5rem",
|
||
"lg": "3.5rem",
|
||
"xl": "5rem"
|
||
},
|
||
"borderRadius": "9999px",
|
||
"fallbackBg": "#FF6B35",
|
||
"fallbackText": "#FFFFFF",
|
||
"fallbackFontWeight": 600
|
||
},
|
||
|
||
"menuItem": {
|
||
"bg": "#FFFFFF",
|
||
"hoverBg": "#FFF3ED",
|
||
"activeBg": "#FFE5D6",
|
||
"text": "#262626",
|
||
"secondaryText": "#737373",
|
||
"padding": "0.75rem 1rem",
|
||
"borderRadius": "0.375rem",
|
||
"fontSize": "0.875rem",
|
||
"iconSize": "1.25rem",
|
||
"iconColor": "#737373"
|
||
},
|
||
|
||
"chip": {
|
||
"bg": "#F5F5F5",
|
||
"text": "#525252",
|
||
"selectedBg": "#FF6B35",
|
||
"selectedText": "#FFFFFF",
|
||
"borderRadius": "9999px",
|
||
"paddingX": "0.75rem",
|
||
"paddingY": "0.375rem",
|
||
"fontSize": "0.875rem",
|
||
"fontWeight": 500,
|
||
"gap": "0.5rem"
|
||
},
|
||
|
||
"rating": {
|
||
"starSize": "1.25rem",
|
||
"filledColor": "#FFBA08",
|
||
"emptyColor": "#D4D4D4",
|
||
"gap": "0.125rem"
|
||
},
|
||
|
||
"priceTag": {
|
||
"fontSize": "1.25rem",
|
||
"fontWeight": 700,
|
||
"color": "#2D6A4F",
|
||
"strikethroughColor": "#A3A3A3",
|
||
"discountBg": "#FDEDEC",
|
||
"discountText": "#E74C3C",
|
||
"discountFontSize": "0.75rem"
|
||
}
|
||
},
|
||
|
||
"breakpoints": {
|
||
"sm": "640px",
|
||
"md": "768px",
|
||
"lg": "1024px",
|
||
"xl": "1280px",
|
||
"2xl": "1536px"
|
||
},
|
||
|
||
"animation": {
|
||
"duration": {
|
||
"fast": "150ms",
|
||
"normal": "200ms",
|
||
"slow": "300ms"
|
||
},
|
||
"easing": {
|
||
"default": "cubic-bezier(0.4, 0, 0.2, 1)",
|
||
"in": "cubic-bezier(0.4, 0, 1, 1)",
|
||
"out": "cubic-bezier(0, 0, 0.2, 1)",
|
||
"bounce": "cubic-bezier(0.34, 1.56, 0.64, 1)"
|
||
}
|
||
},
|
||
|
||
"zIndex": {
|
||
"dropdown": 1000,
|
||
"sticky": 1020,
|
||
"fixed": 1030,
|
||
"modalBackdrop": 1040,
|
||
"modal": 1050,
|
||
"popover": 1060,
|
||
"tooltip": 1070,
|
||
"toast": 1080
|
||
}
|
||
}
|