Widget Style Defaults
Screenshot: Widget Style Defaults
Description for designer/dev:
Capture the Widget Style Defaults settings page showing three main areas in a single view:
- Color Scheme Section (top/left)
- Title:
Default Color Scheme - Five labeled color pickers in a vertical or grid layout:
- Primary Color – swatch showing
#000000(Black) - Background Color – swatch showing
#FFFFFF(White) - Text Color – swatch showing
#000000(Black) - Border Color – swatch showing
#E5E7EB(Light gray) - Accent Color – swatch showing
#2563EB(Blue) - Each row should show:
- Label (e.g., "Primary Color")
- Color preview square/circle
- Hex input field prefilled with the default value
- Typography Defaults Section (middle)
- Title:
Default Typography - Fields/controls visible:
- Heading Font Size: input set to
24px - Body Font Size: input set to
14px - Font Family: dropdown showing something like
System (theme default)selected - Font Source: read-only or dropdown showing
system
- Custom Fonts Area (right or below typography)
- Subheading:
Custom Fonts - A primary button:
Upload Font - Below the button, a table or list with columns:
- Font Name
- Format (e.g.,
woff2) - File Size (e.g.,
32 KB) - Used In (optional, e.g.,
3 bundles) - Actions column with a trash/delete icon
- At least one sample font row, e.g.:
Acme Sans|woff2|32 KB|3 bundles| [trash icon]- When hovering the trash icon, show a confirmation tooltip or a modal in the screenshot if possible.
- Somewhere near this list, include a subtle warning text:
Deleting a custom font that's currently used by active bundles will cause those bundles to fall back to the system default font.
- Layout Defaults Section (bottom)
- Title:
Default Layout Settings - Three numeric inputs or sliders:
- Border Radius:
8px - Padding:
16px - Gap:
12px - Optional helper text under the section:
- "These values create a clean, modern appearance with subtle rounding and comfortable spacing. Adjust them to match your store's design language."
- Context / Page Framing
- Page breadcrumb or heading at the top:
Settings > Widget Style Defaults - A short explanatory blurb near the top:
- "Widget style defaults define the initial appearance for new bundles. New bundles inherit these defaults, but you can customize each bundle individually without affecting other bundles or the global defaults."
- No other unrelated settings visible; crop to focus on this section.
This screenshot should clearly show the color pickers, typography controls, and the custom font upload area together so users understand where to configure global widget styles.
widget-style-defaults-screenshot-spec.json
json
1{2 "page": "Settings > Widget Style Defaults",3 "sections": {4 "colorScheme": {5 "title": "Default Color Scheme",6 "fields": [7 { "label": "Primary Color", "value": "#000000" },8 { "label": "Background Color", "value": "#FFFFFF" },9 { "label": "Text Color", "value": "#000000" },10 { "label": "Border Color", "value": "#E5E7EB" },11 { "label": "Accent Color", "value": "#2563EB" }12 ]13 },14 "typography": {15 "title": "Default Typography",16 "headingFontSize": "24px",17 "bodyFontSize": "14px",18 "fontFamily": "System (theme default)",19 "fontSource": "system"20 },21 "customFonts": {22 "title": "Custom Fonts",23 "uploadButtonLabel": "Upload Font",24 "supportedFormatsNote": "Supported formats: .woff, .woff2, .ttf, .otf",25 "fonts": [26 {27 "name": "Acme Sans",28 "format": "woff2",29 "fileSize": "32 KB",30 "usedIn": "3 bundles",31 "actions": ["delete"]32 }33 ],34 "warning": "Deleting a custom font that's currently used by active bundles will cause those bundles to fall back to the system default font."35 },36 "layout": {37 "title": "Default Layout Settings",38 "borderRadius": "8px",39 "padding": "16px",40 "gap": "12px"41 }42 },43 "behaviorNote": "Style defaults are applied only when a new bundle is created. Existing bundles keep their current styles unless edited directly."44}45