122 lines
3.1 KiB
Markdown
122 lines
3.1 KiB
Markdown
# App Design Guidelines
|
|
|
|
Based on the codebase analysis, here are the key design patterns and colors used across the application:
|
|
|
|
## Color Palette
|
|
|
|
**Primary Green**: `#008060` (shopify green, primary actions, buttons)
|
|
**Dark Green**: `#004c3f` (hover states, darker variations)
|
|
**Light Green**: `#e3f5ef` (background accents)
|
|
|
|
**Text Colors**:
|
|
- Primary: `#0f172a` (dark text)
|
|
- Secondary: `#6b7280` (muted text)
|
|
- Success: `#10B981` or `#059669`
|
|
- Error: `#EF4444` or `#b91c1c`
|
|
|
|
**Background Colors**:
|
|
- Primary: `#ffffff` (white)
|
|
- Secondary: `#f8fafc` (light gray)
|
|
- Input focus border: `#008060`
|
|
|
|
**Border Colors**:
|
|
- Primary: `#e5e7eb`
|
|
- Secondary: `#d1d5db`
|
|
|
|
## Typography
|
|
|
|
**Font Families**:
|
|
- Primary: `'Inter', system-ui, -apple-system, sans-serif`
|
|
- Accent: `'Space Grotesk'` (used in topup.html)
|
|
|
|
**Font Sizes**:
|
|
- Body: `14px`
|
|
- Button: `14px`
|
|
- Small text: `12px`, `13px`
|
|
- Titles: `18px`, `24px`, `28px`
|
|
|
|
## Border Radius
|
|
|
|
- Cards: `12px`
|
|
- Buttons: `8px`
|
|
- Small elements: `6px`
|
|
- Pills/Badges: `999px` (fully rounded)
|
|
|
|
## Shadow & Elevation
|
|
|
|
**Box Shadows**:
|
|
- Card: `0 1px 3px rgba(0, 0, 0, 0.05)`
|
|
- Modal: `0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)`
|
|
- Primary button hover: `0 6px 16px rgba(0, 128, 96, 0.25)`
|
|
|
|
**Backdrops**:
|
|
- Modal overlay: `rgba(15, 23, 42, 0.7)` with `backdrop-filter: blur(8px)`
|
|
- Glass effect: `backdrop-filter: blur(12px)`
|
|
|
|
## Button Styles
|
|
|
|
**Primary Button**:
|
|
- Background: `--green` (`#008060`)
|
|
- Color: White
|
|
- Hover: `--green-dark` (`#004c3f`)
|
|
- Shadow: `0 4px 12px rgba(0, 128, 96, 0.15)`
|
|
|
|
**Secondary Button**:
|
|
- Background: White
|
|
- Border: `--border` (`#e5e7eb`)
|
|
- Hover: `#f8fafc`
|
|
|
|
## Card & Panel Styles
|
|
|
|
**Cards**:
|
|
- Background: White
|
|
- Border: `1px solid var(--border)`
|
|
- Border-radius: `12px`
|
|
- Padding: `24px`
|
|
- Shadow: `0 1px 3px rgba(0, 0, 0, 0.05)`
|
|
- Footer border: `1px solid var(--border)` with `margin-top: 20px`
|
|
|
|
## Input Styles
|
|
|
|
**Text Input & Select**:
|
|
- Border: `1px solid var(--border)` (`#e5e7eb`)
|
|
- Border-radius: `8px`
|
|
- Padding: `10px 14px`
|
|
- Font-size: `14px`
|
|
- Focus: Border color becomes `--green` (`#008060`)
|
|
- Focus box-shadow: `0 0 0 3px rgba(0, 128, 96, 0.1)`
|
|
|
|
## Modal Styles
|
|
|
|
**Overlay**:
|
|
- Background: `rgba(15, 23, 42, 0.7)` with `backdrop-filter: blur(8px)`
|
|
- Z-index: `100000`
|
|
|
|
**Modal Container**:
|
|
- Background: `#fff`
|
|
- Border-radius: `16px`
|
|
- Max-width: `500px`
|
|
- Padding: `24px`
|
|
- Shadow: `0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)`
|
|
|
|
## Spacing & Layout
|
|
|
|
- Card gap (grid): `24px`
|
|
- Button gap: `12px` or `8px`
|
|
- Field gap: `8px`
|
|
- Card padding: `24px`
|
|
- Shell/container padding: `32px 20px 48px`
|
|
|
|
## Application Pages
|
|
|
|
The inline checkout theming should align with these app design principles across:
|
|
1. **select-plan.html** - Plan selection with inline checkout
|
|
2. **settings.html** - Account settings with subscription management
|
|
3. **topup.html** - Token top-up purchases
|
|
|
|
All implementations use consistent styling including:
|
|
- Same green color scheme (`#008060`)
|
|
- Inter font family
|
|
- 8px border radius for consistency
|
|
- Consistent spacing and shadows
|
|
- Glass morphism effects with backdrop filters |