# Weetechsolution Design System

> High-contrast corporate tech canvas defined by deep teal accents, generous white space, and a structured geometric hierarchy.

**Source:** https://weetechsolution.com | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Weetechsolution employs a professional, high-clarity design system rooted in a monochrome foundation of pure white (#ffffff) and charcoal (#333333). The primary brand energy is delivered through a vibrant teal accent (#00a3a5), used consistently for interactive elements, iconography, and key headings. Typography is unified under the CerebriSans family, utilizing bold weights (700) for display and medium weights (400-600) for body and UI labels. Layouts are characterized by significant vertical breathing room (100px section padding) and a card-based information architecture that utilizes soft shadows and 15px corner radii to create depth against the flat canvas.

## Signature DNA
1. **Teal-on-White Interaction** (The primary brand move uses #00a3a5 for buttons and icons against #ffffff surfaces, ensuring high visibility and brand recall.)
2. **CerebriSans Display Hierarchy** (Heavyweight 700 headings at 40px with generous 56.4px line heights create a structured, authoritative reading path.)
3. **Soft-Depth Cards** (Content is grouped in cards with 15px radii and subtle `rgba(0, 0, 0, 0.08)` shadows, lifting technical content off the background.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Page background, button text, card surfaces | 75 | 1 | `--bs-white` |
| `{color.charcoal}` | `#333333` | Primary text, headings | 46 | 0.8 | Computed |
| `{color.gray}` | `#696969` | Secondary body text, theme color | 172 | 1 | `--themeColor` |
| `{color.off-white}` | `#f9fafb` | Section backgrounds | 2 | 1 | `--section-bg` |
| `{color.border}` | `#e9eaf0` | Dividers, subtle borders | 1 | 1 | `--border-color` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#00a3a5` | Primary CTA, icons, active text | 82 | 1 | `--primary-color` |
| `{color.decorative}` | `#03c4eb` | Decorative search highlights | 0 | 0.9 | brand_page (decorative_only) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|---|
| CerebriSans | 400, 500, 600, 700 | All UI, Headings, Body | Inter | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 40px | 56.4px | normal | 700 | Hero/Section Headings | `h2.wp-block-heading.heading` |
| `{type.h3}` | 38px | 53.58px | normal | 700 | Sub-section Headings | `h3.wp-block-heading` |
| `{type.h4}` | 24px | 33.84px | normal | 700 | Testimonial/Card Titles | `h3.testimonial-subject` |
| `{type.h5}` | 20px | 28.2px | normal | 700 | Small Headings | `h3.has-text-align-center` |
| `{type.body-lg}` | 18px | 32.04px | normal | 600 | Lead Paragraphs | `p.mx-0.mt-0` |
| `{type.body}` | 16px | 27.84px | normal | 400 | Standard Body Text | `article` |
| `{type.button}` | 15px | 50px | normal | 500 | CTA Labels | `a.wp-block-button__link` |
| `{type.caption}` | 14px | 20.02px | 3px | 700 | Section Sub-titles | `p.section-sub-title` |

### Principles
1. **Uppercase Tracking:** Captions and sub-titles use 3px letter spacing to differentiate from standard body text.
2. **Vertical Rhythm:** Line heights for display text are consistently 1.4x the font size.
3. **Weight Contrast:** Headings strictly use 700 weight, while body text alternates between 400 and 600 for hierarchy.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 25 |
| `{space.sm}` | 16px | 13 |
| `{space.md}` | 24px | 11 |
| `{space.lg}` | 32px | 15 |
| `{space.section}` | 100px | 9 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sm}` | 5px | Input fields, small cards | `radius: 5px` |
| `{radius.md}` | 8px | Primary buttons | `radius: 8px` |
| `{radius.lg}` | 15px | Feature cards | `radius: 15px` |
| `{radius.full}` | 50% | Icon containers, avatars | `radius: 50%` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `rgba(0, 0, 0, 0.08) 1px 1px 14px 0px` | Feature/Service cards | Card component |
| `{shadow.deep}` | `rgba(113, 113, 113, 0.12) -2px 2px 15px -1px` | Floating UI elements | Card component (5 occurrences) |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary site actions and conversions.
**Pages observed:** 1
**Spec:** Background: `#00a3a5` | Text: `#ffffff` | Border: `2px solid rgba(0,0,0,0)` | Radius: `8px` | Padding: `0px 22px` | Typography: `15px/500`
**States observed:** Default | Hover: Not captured | Active: Not captured

#### Surface
**Role:** Structural layout containers.
**Pages observed:** 1
**Spec:** Background: `#ffffff` | Text: `#696969` | Radius: `0px` | Padding: `0px`
**States observed:** Default: captured

### Tier 2: Patterns

#### Service Card
**Role:** Grouping service offerings with iconography.
**Pages observed:** 1
**Spec:** Background: `#ffffff` | Radius: `15px` | Shadow: `rgba(0, 0, 0, 0.08) 1px 1px 14px 0px` | Padding: `16px`
**States observed:** Default: captured

#### Step Indicator
**Role:** Numerical process steps.
**Pages observed:** 1
**Spec:** Background: `#00a3a5` | Text: `#ffffff` | Radius: `50%` | Typography: `22px/700`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Section Container
**Role:** Major page divisions.
**Pages observed:** 1
**Spec:** Background: `#f9fafb` | Padding: `100px 0px`
**States observed:** Default: captured

#### Testimonial Card
**Role:** Social proof display.
**Pages observed:** 1
**Spec:** Background: `#ffffff` | Radius: `15px` | Padding: `50px 30px 63px` | Shadow: `none`
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max-width | 1320px (standard Bootstrap container) |
| Section Gap | 100px |
| Grid | 12-column |

## Do's
- Use `#00a3a5` for all primary conversion buttons.
- Apply `{radius.lg}` (15px) to all content-heavy cards.
- Maintain 100px vertical padding between major sections.
- Use CerebriSans 700 for all headings to maintain brand authority.
- Ensure all body text uses `#696969` for optimal readability against white.

## Don'ts
- **Wrong:** Using `#0d6efd` (Bootstrap Blue) for buttons. **Right:** Use `{color.primary}` (#00a3a5). **Reason:** Bootstrap defaults dilute the custom brand identity.
- **Wrong:** Applying sharp corners to cards. **Right:** Use 15px radius. **Reason:** The brand uses soft geometry to appear approachable.
- **Wrong:** Using the sub-brand blue `#03c4eb` for primary CTAs. **Right:** Use teal `#00a3a5`. **Reason:** Teal is the validated primary conversion color.
- Do not use shadows on the main page background; keep the canvas flat.
- Do not reduce line height below 1.4x for display typography.

## Quick start

```css
/* CSS Variables */
:root {
  --primary: #00a3a5;
  --text-main: #333333;
  --text-body: #696969;
  --bg-section: #f9fafb;
  --radius-card: 15px;
  --shadow-subtle: 1px 1px 14px 0px rgba(0, 0, 0, 0.08);
}
```

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the static evidence.
- Mobile-specific breakpoint transitions for the 100px section padding were not fully documented.
- Dark mode variants were not observed.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://weetechsolution.com | Desktop 1440px | 2026-06-06 |
| Homepage Mobile | https://weetechsolution.com | Mobile 390px | 2026-06-06 |