Add Grubflip design system v2.0 — brand tokens + component styles
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>
This commit is contained in:
commit
ae81986c7d
2 changed files with 1434 additions and 0 deletions
355
grubflip/design-system/brand-tokens.json
Normal file
355
grubflip/design-system/brand-tokens.json
Normal file
|
|
@ -0,0 +1,355 @@
|
|||
{
|
||||
"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
|
||||
}
|
||||
}
|
||||
1079
grubflip/design-system/grubflip-design-system.html
Normal file
1079
grubflip/design-system/grubflip-design-system.html
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Add table
Reference in a new issue