Skip to content
Gallery
Business Development
OpalWave Company info 👋🏾
Design System: Style guides
Web Dev
12dd Timeline
Client Development
Share
Explore

icon picker
Design System: Style guides

For business use only. This document contains everything you need to know about our business, client onboarding, client demographics, business plan, service offerings

(1) Style selector


CLASS - blue

Variable folders and components become custom classes.

HTML ELEMENT TAG - pink

Variable folders and components become custom classes.

PSEUDO CLASS - green

Used to change element state - hover, pressed, none

Custom classes - blue (used to primarily name all elements on page)
Section
Cards
Buttons
Repeated components

Combo classes - blue (primarily a utility class. Custom class is combined with a utility class to make a combo class)
Body

Utility classes - blue (primarily used to name elements to be represented all through the site. Used after custom class)
Paragraph
para_main - all black paragraph
para_other - all other colored paragraphs
H1 - H6
Global classes - are used inside sections (like components)

(2) Spacing:

For desktop, tablet and mobile

Max width : 1440px (90 rem)
Grid gap: 32
Section Padding-main (H) - 56px
Section Padding (Vertical) -
X small: 4px (ex: btwn buttons, tight spaces)
Small: 24px (ex: btwn stacked elements)
Main: 48px (ex: btwn stacked elements-text and buttons)
Large:
Radius:
Small:
Main:
SVG stroke width: 1px

(2) Typography:


Select site/web app archetype
Marketing page - High type ratio
Blog page - Medium type ratio
Product page - Low type ratio
1.067 - Minor Second 1.125 - Major Second 1.200 - Minior Third 1.250 - Major Third 1.333 - Perfect Fourth 1.414 - Augmented Fourth 1,500 - Perfect Fifth 1.618 - Golden Ratio

Header Tags
Text Tag
Font size
Font family
Font weight
Letter spacing
Description
1
H1
48
Product Sans
Medium
1 rem
​
2
H2
40
Product Sans
Medium
1 rem
​
3
H3
34
​
​
​
​
4
H4
28
​
​
​
​
5
H5
23
​
​
​
​
6
H6
19
​
​
​
​
7
P1
16
​
​
​
Base fint
8
P2
12
​
​
​
​
9
P3
8
​
​
​
Button font
There are no rows in this table
⁠
Resources
⁠
https://medium.com/sketch-app-sources/exploring-responsive-type-scales-cf1da541be54
⁠
⁠
⁠
https://cieden.com/book/sub-atomic/typography/different-type-scale-types
⁠



(3) Colours:


Background color (Light): color 100
Text color: color
Interactive components: color 300
Background color (dark): color 900
Transparent:
Buttons
Primary: default, hover, active, disabled
Secondary: “, “,”,”,”
Brand color



(primary-main, secondary- xxx, buttons,)
⁠
https://uicolors.app/create
⁠
⁠
⁠
https://www.radix-ui.com/colors/custom
⁠
⁠
Colour palette
Buttons (primary, secondary, tertiary)
⁠
https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale
⁠
⁠





⁠
image.jpeg
⁠
⁠
image.jpeg
⁠
⁠


Design Assets

jpeg images
webp images
Compress

​Icons

jpeg images
webp images
Compress
Gradients
Buttons




Pre-Design Setup
Size/Type
Category
Value
Description
1
Certainly. I'll reorganize the table to make the category the second column. Here's the revised table structure:
​
​
​
2
​
​
​
​
3
| Size/Type | Category | Value | Description |
​
​
​
4
|-----------|----------|-------|-------------|
​
​
​
5
| X Small | Spacing | 4px | Between buttons, tight spaces |
​
​
​
6
| Small | Spacing | 24px | Between stacked elements |
​
​
​
7
| Main | Spacing | 48px | Between stacked elements (text and buttons) |
​
​
​
8
| Large | Spacing | - | No value provided |
​
​
​
9
| Grid Gap | Spacing | 32px | Spacing between items in a grid layout |
​
​
​
10
| Vertical - Small | General Section Padding | 24px | For under sections |
​
​
​
11
| Vertical - Main | General Section Padding | 48px | For top of sections |
​
​
​
12
| Vertical - Large | General Section Padding | - | For biggest spaces |
​
​
​
13
| Horizontal - Standard | General Section Padding | 32px | Standard horizontal padding |
​
​
​
14
| Small | Radius | 12px | For buttons |
​
​
​
15
| Large | Radius | 24px | For cards |
​
​
​
16
| Select Base Font | Typography | 16px | Default base font size |
​
​
​
17
| Marketing page | Site/Web App Archetype | - | High type ratio |
​
​
​
18
| Blog page | Site/Web App Archetype | - | Medium type ratio |
​
​
​
19
| Product page | Site/Web App Archetype | - | Low type ratio |
​
​
​
20
| H1 | Typography | - | Heading 1 |
​
​
​
21
| H2 | Typography | - | Heading 2 |
​
​
​
22
| H3 | Typography | - | Heading 3 |
​
​
​
23
| H4 | Typography | - | Heading 4 |
​
​
​
24
| p1 | Typography | 16px | Base font |
​
​
​
25
| p2 | Typography | - | Paragraph 2 |
​
​
​
26
| p3 | Typography | - | Button font |
​
​
​
27
| 1 | Color Scale | - | App background |
​
​
​
28
| 2 | Color Scale | - | Subtle background |
​
​
​
29
| 3 | Color Scale | - | UI element background |
​
​
​
30
| 4 | Color Scale | - | Hovered UI element background |
​
​
​
31
| 5 | Color Scale | - | Active / Selected UI element background |
​
​
​
32
| 6 | Color Scale | - | Subtle borders and separators |
​
​
​
33
| 7 | Color Scale | - | UI element border and focus rings |
​
​
​
34
| 8 | Color Scale | - | Hovered UI element border |
​
​
​
35
| 9 | Color Scale | - | Solid backgrounds |
​
​
​
36
| 10 | Color Scale | - | Hovered solid backgrounds |
​
​
​
37
| 11 | Color Scale | - | Low-contrast text |
​
​
​
38
| 12 | Color Scale | - | High-contrast text |
​
​
​
39
​
​
​
​
40
I've rearranged the columns so that the category is now the second column, as requested. The table now follows the order: Size/Type, Category, Value, Description. This arrangement groups items by their specific type or size while still allowing you to see which category each item belongs to.
​
​
​
41
​
​
​
​
42
Let me know if you want any further adjustments to the table structure or content.
​
​
​
There are no rows in this table
⁠




1. Pre-Design Setup

⁠

Create a inspiration list with design inspiration. Everything you need
Create styleguide:
Color scales
Typography
H1 Spacing
Buttons
General section padding
Gather all necessary content (text, images, logos)

2. Wix Studio Setup

⁠

Create a new project in Wix Studio
Set up responsive breakpoints: - 1587px and up (Desktop) - 1280px (1585px - 1001px) (Tablet Landscape) - 735px (1000px - 750px) (Tablet Portrait) - 420px (749px - 320px) (Mobile)


3. Global Design Elements

⁠

⁠
Set up color palette using Wix Studio's design system
Configure typography:
H1, H2, H3, H4 for headings\
P1, P2, P3 for body text

Select Base font (16px)
Select site/web app archetype
Marketing page - High type ratio
Blog page - Medium type ratio
Product page - Low type ratio
Typographic Heirachy
Set text sizes (use claude calculator)


Create reusable components for common elements (buttons, cards, etc.)
Set standard measurements:
Gap size for stacks (in px)
Margin size for page sections
Padding (20px standard)


4. Layout and Structure

⁠

Build main sections laterally (side-by-side) rather than vertically
Use Viewport Height (vh) for section heights across breakpoints
Implement percentage (%) for grid layouts
Use fractional units (fr) for width measurements (e.g., 2fr)
Set up grids:
Symmetrical grids: Use fixed percentages (e.g., 50% x 2 for 2x2)
Asymmetrical grids: Use vh/max-content (e.g., 50vh/max c x 2)
Ensure equal and balanced spacing between sections and elements


5. Mobile-Specific Design

⁠

Set all mobile images to 40vh height
Implement 32px standard spacing for mobile stacks
Adjust layouts for optimal mobile viewing



6. Content Implementation

⁠

Add and style text content using predefined typography
Upload and place images, ensuring they're optimized for web
Add alt text to all images for accessibility
Implement icons using pixel measurements



## 7. Interactions and Animations - [ ] Add smooth page transitions - [ ] Implement hover effects on interactive elements - [ ] Use scale properties for card corner transitions across breakpoints
## 8. Functionality - [ ] Set up navigation menu - [ ] Create and test contact forms - [ ] Implement search functionality (if required) - [ ] Add clear calls-to-action (CTAs) on each page
## 9. SEO and Performance - [ ] Optimize page titles and meta descriptions - [ ] Ensure Largest Contentful Paint (LCP) is text-based - [ ] Compress and optimize all images - [ ] Minimize custom code usage
## 10. Responsive Testing - [ ] Test layout and functionality across all breakpoints - [ ] Check website in different browsers (Chrome, Safari, Firefox, Edge) - [ ] Test in incognito/private browsing mode
## 11. Final Touches - [ ] Create a custom 404 error page - [ ] Design an informative footer - [ ] Add page transitions for a polished feel - [ ] Implement any required third-party integrations (e.g., analytics, marketing tools)
## 12. Pre-Launch Checklist - [ ] Proofread all content - [ ] Check all links and forms - [ ] Ensure all pages have appropriate meta tags - [ ] Set up Google Analytics and Search Console - [ ] Create and link Privacy Policy and Terms of Service pages
## 13. Launch and Post-Launch - [ ] Publish the website - [ ] Submit sitemap to search engines - [ ] Perform final cross-device and cross-browser checks - [ ] Set up regular content update schedule - [ ] Plan for ongoing performance monitoring and optimization
## Troubleshooting Tip - For layout bugs: temporarily set section or container to 'auto', then revert to vh
Remember to leverage Wix Studio's built-in features for responsive design, performance optimization, and SEO throughout the process. This will help ensure your website is not only visually appealing and professional but also well-optimized for search engines and user experience.

2) Development Checklist🏅


Set breakpoints - 4 total (all standard breakpoints max and min)
Icons should be in pixels
Build sections laterally vs vertical (top-bottom)
Build with breakpoint measurements -
1587 and up
1280 (1585 - 1001)
735 (1000 - 750)
420 (749 - 320)

Set draft page - Create style guide
Start building home page


Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.