Weebly Design System Deep-Dive

1. Brand Overview

Weebly’s design language is what you’d expect from a platform aimed at non-technical users who want to publish quickly: clean, approachable, and just enough visual polish to feel professional without intimidating. The vibe is friendly SaaS with a tech backbone — think Squarespace’s minimalism but with less preciousness, more utilitarian clarity.

On the Singapore landing page, everything is tuned to make “Sign Up” the obvious next step. Blue is everywhere — not a corporate navy, but a saturated, almost playful #3374ff. This isn’t a “trust us, we’re a bank” blue; it’s more “click me, I’m safe and fun.” The rest of the palette sits quietly in the background: greys for text, dark neutrals for navigation, and white space as the canvas.

Typography is consistent and branded. They’re using “SQMarket” and “SQMarket-Medium” — clearly custom, not Google or Adobe stock — with a fallback stack to Helvetica Neue, Helvetica, Arial. It’s sans-serif, geometric, and modern, but with a touch of warmth. Line heights are tight for headings, looser for body, keeping everything feeling solid and readable.

Spacing is on a mostly-8px grid, but with some odd values (7px, 10px) that feel inherited from legacy code or very specific visual tweaks. Border radii are functional — 2px, 4px, 100% for circles — nothing overly rounded. Shadows are rare; this is essentially a flat design system with minimal depth.

The components are straightforward: primary buttons are vivid blue (#3374ff) with white text, secondary buttons invert that with transparent backgrounds and blue borders, and links follow the same color cues. There’s no wild hover animation — states are subtle or even absent, relying on color and layout to guide the user.

If you’re building in Weebly’s visual language, you’re aiming for clarity, trust, and speed. No decorative flourishes, no gradient experiments. The system is opinionated in its restraint: blue means action, grey means supporting content, white means space. It’s a “get out of the way” brand design — and it works.

2. Color System

2.1 Primary Colors

The main brand color is rgb(51, 116, 255) (#3374ff). Saturated, bright, and unmistakably digital. Psychologically, bright blues like this signal trust, but also energy — it’s less serious than a deep corporate blue. Competitors like Squarespace lean into monochrome; Wix uses yellows and blacks. Weebly’s choice sets it apart as approachable and clickable.

Primary usage: CTAs, key navigation accents, focus outlines, primary buttons.

2.2 Complete Palette

2.3 Color Relationships

Blue + white = high contrast. Blue on white meets WCAG AA easily for large and small text. Dark neutral text on white is also safe. However, the #2990ea accent blue on white is borderline for small text — it’s vivid, but slightly lighter than the primary, so check accessibility for body copy.

Hover states use a translucent blue tint over white — subtle, not heavy. Dark mode isn’t evident in this system; everything assumes a light background.

2.4 Usage Guide

• Good combos: Primary blue (#3374ff) with white text; dark neutral (#2f3337) on white; light grey (#9ba0a3) for secondary text.
• Avoid: Accent blue (#2990ea) on primary blue — too little contrast.
• Borders should be greys (#c9cdcf, #d8d8d8), not blues, unless highlighting active states.
• Keep hover backgrounds light (#e6eeff), not full saturation.

3. Typography

3.1 Font Families

Primary font: SQMarket and SQMarket-Medium — custom, geometric sans.
Fallbacks: Helvetica Neue, Helvetica, Arial.
No Google Fonts or Adobe Fonts detected. No variable fonts.

3.2 Type Scale

3.3 Hierarchy

Biggest heading (44px / 1.09) is tight and impactful. Step-down sizes (30px, 22px) keep hierarchy clear without huge jumps. Body/link sizes cluster at 18px and 16px — solid for legibility. Captions and labels at 14px and 12px are consistent; uppercase small caps for metadata.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid with deviations.

4.2 Layout

No breakpoints detected in data — responsive likely handled elsewhere. Containers: fixed widths (410px, 450px) in some elements, likely modals/forms.

5. Visual Elements

• Border Radius:

  • 2px — Lists, buttons, badges, textareas.
  • 3px — Buttons, divs (rare).
  • 4px — Inputs, spans, buttons, links.
  • 100% — Circles (avatars, icons).

• Shadows: Minimal:

  • rgba(0, 0, 0, 0.1) 0px 2px 20px 0px, rgba(0, 0, 0, 0.2) 0px 0px 0px 1px — subtle depth.
  • rgb(128, 128, 128) 0px 0px 5px 0px — rare.

• Borders:

  • 1px solid primary blue for buttons.
  • 1px solid greys for inputs/lists.
  • Bottom borders in nav: dark neutrals/black.

6. Components

6.1 Buttons

Overlay Navbar Button

• Default:
  • Background: transparent
  • Text: #3374ff
  • Padding: 0
  • Border-radius: 4px
  • Border: 1px solid #3374ff
  • Font: 16px, weight 500

Primary CTA (masthead)

• Default:
  • Background: #3374ff
  • Text: #2990ea (odd choice — blue on blue, likely white in final render?)
  • Padding: 8px 20px
  • Border-radius: 4px
  • Border: none
  • Font: 18px, weight 400

CTA Section Button

• Default:
  • Background: #f5f6f7
  • Text: #000000
  • Padding: 0
  • Border-radius: 0
  • Font: 18px, weight 400

No hover/active/focus styles in data — probably handled globally.

6.2 Links

Variants:

• Dark neutral (#2f3337), weight 500
• Primary blue (#3374ff), weight 500
• Accent blue (#2990ea), weight 400
• White (#ffffff), weight 500
• Dark neutral (#323b44), weight 500
• Neutral grey (#70767c), weight 400
• Light grey (#9ba0a3), weight 400

No text decoration, no hover change detected.

6.3 Forms

Inputs detected with 1px solid grey (#c9cdcf) borders, radius 4px. Textareas: 1px solid grey (#c1c1c1), radius 2px. No focus styles found in data.

6.4 Cards

No explicit card component in data — likely divs with border-radius 4px, shadows minimal or absent.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #3374ff;
  --color-accent-blue: #2990ea;
  --color-grey-light: #9ba0a3;
  --color-grey-mid: #666c70;
  --color-neutral-dark: #323b44;
  --color-neutral-darker: #2f3337;
  --color-white: #ffffff;
  --color-grey-neutral: #70767c;
  --color-hover-blue-tint: #e6eeff;
  --color-border-grey: #c9cdcf;
  --color-divider-dark: #323b44;
  --color-divider-black: #000000;
  --color-divider-light: #d8d8d8;
  --color-textarea-border: #c1c1c1;

  /* Typography */
  --font-family-primary: "SQMarket", "Helvetica Neue", Helvetica, Arial;
  --font-family-primary-medium: "SQMarket-Medium", "SQMarket", "Helvetica Neue", Helvetica, Arial;
  --font-size-h1-lg: 2.75rem;
  --font-size-h1-md: 1.88rem;
  --font-size-h1-sm: 1.38rem;
  --font-size-body-lg: 1.13rem;
  --font-size-body-md: 1rem;
  --font-size-body-sm: 0.88rem;
  --font-size-caption: 0.75rem;

  /* Spacing */
  --space-4: 4px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-38: 38px;
  --space-40: 40px;
  --space-42: 42px;
  --space-48: 48px;
  --space-60: 60px;
  --space-64: 64px;
  --space-72: 72px;
  --space-410: 410px;
  --space-450: 450px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-full: 100%;

  /* Shadows */
  --shadow-soft: rgba(0, 0, 0, 0.1) 0px 2px 20px 0px, rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
  --shadow-grey: rgb(128, 128, 128) 0px 0px 5px 0px;
}

8. AI Coding Assistant Prompt

# Weebly Design System Specification

You are a Weebly design expert. Build UIs matching their visual language exactly.

## Brand Context
Weebly’s design is clean, approachable, and action-driven. Blue means "click me" and is reserved for primary actions. Neutrals support content; white space keeps layouts open.

## Color Palette
- Primary Blue: #3374ff — CTAs, primary buttons, overlay navbar accents
- Accent Blue: #2990ea — Secondary CTAs, subnav links
- Light Grey: #9ba0a3 — Subnav link text
- Mid Grey: #666c70 — General UI text
- Dark Neutral: #323b44 — Navigation links, body text
- Darker Neutral: #2f3337 — Navigation links, secondary elements
- White: #ffffff — Backgrounds, button text
- Neutral Grey: #70767c — Secondary text
- Hover Blue Tint: #e6eeff — Hover/focus backgrounds
- Border Grey: #c9cdcf — Inputs, lists
- Divider Dark: #323b44 — Nav dividers
- Divider Black: #000000 — Misc dividers
- Divider Light: #d8d8d8 — Section dividers
- Textarea Border Grey: #c1c1c1 — Textarea borders

## Typography
- Fonts: "SQMarket", "SQMarket-Medium" — fallback: Helvetica Neue, Helvetica, Arial
- Sizes:
  - H1 Large: 44px / 500 / 1.09
  - H1 Medium: 30px / 500 / 1.33
  - H1 Small: 22px / 500 / 1.82
  - Body: 18px / 400 / 1.50
  - Body: 16px / 400-500 / 1.50
  - Caption: 14px / 400-500 / 1.10-1.71
  - Metadata: 12px / 500 / 1.00 / Uppercase

## Spacing & Grid
Base: 8px grid with some custom values (7px, 10px).
Scale: 4px, 7px, 8px, 10px, 15px, 16px, 18px, 20px, 24px, 32px, 38px, 40px, 42px, 48px, 60px, 64px, 72px.
Use multiples for padding, margins, and gaps.

## Border Radius
- sm: 2px — list items, buttons, badges
- md: 3px — rare buttons/divs
- lg: 4px — inputs, links
- full: 100% — avatars, circular icons

## Shadows & Depth
Minimal shadows:
- Soft: rgba(0,0,0,0.1) 0px 2px 20px, rgba(0,0,0,0.2) 0px 0px 0px 1px
- Grey: rgb(128,128,128) 0px 0px 5px

## Component Specifications

### Primary Button
Default:
```css
background: #3374ff;
color: #ffffff;
padding: 8px 20px;
border-radius: 4px;
border: none;
font-weight: 400;
font-size: 18px;
transition: background 150ms ease;
```
Hover: darken background slightly.  
Focus: outline 1px solid #3374ff.  
Disabled: opacity 0.5, cursor not-allowed.

### Secondary Button
Default:
```css
background: transparent;
color: #3374ff;
padding: 0;
border-radius: 4px;
border: 1px solid #3374ff;
font-weight: 500;
font-size: 16px;
```

### Navigation Links
Color variants as listed above. No underline. Hover: subtle background tint (#e6eeff).

### Input Fields
```css
border: 1px solid #c9cdcf;
border-radius: 4px;
padding: 10px;
font-size: 16px;
```
Focus: border-color #3374ff.

### Cards
Background: #ffffff; border-radius: 4px; padding: 20px; optional soft shadow.

## Layout & Responsive Rules
Max content width: 450px for forms.  
Page padding: 16px mobile, 24px desktop.  
Grid gap: multiples of 8px.

## Interaction Rules
Transitions: 150ms ease for hover/focus.  
Focus indicators: visible outlines in primary blue.  
Loading states: reduce opacity of elements.

## DO List
- Use only palette colors.
- Reserve primary blue for interactive elements.
- Maintain spacing multiples of 8px.
- Use SQMarket for all text.
- Keep corners consistent (2px, 4px, or full).

## DON'T List
- Don't introduce new colors.
- Don't mix sharp and rounded corners in one component.
- Don't add heavy shadows.
- Don't use gradients.
- Don't use accent blue for body text.

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #3374ff;
  color: #ffffff;
  padding: 8px 20px;
  border-radius: 4px;
  border: none;
  font-size: 18px;
  font-weight: 400;
}
.btn-primary:hover { background: #2990ea; }
.btn-primary:focus { outline: 1px solid #3374ff; }
```

Secondary Button:
```css
.btn-secondary {
  background: transparent;
  color: #3374ff;
  border: 1px solid #3374ff;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
}
```

Input:
```css
.input {
  border: 1px solid #c9cdcf;
  border-radius: 4px;
  padding: 10px;
  font-size: 16px;
}
.input:focus { border-color: #3374ff; }
```

9. Summary

TL;DR: Weebly’s design is a restrained, blue-driven system built for clarity. Primary blue drives interaction, greys keep content readable, and spacing is functional. Typography is custom sans-serif, sharp but friendly, with consistent scales.

Brand Keywords:

• approachable-tech
• blue-forward
• flat-functional
• clarity-first