← index2026-03-23 10:34 (Beirut)(backfill from DOCUMENTATION/)

webspot-branding

name: webspot-branding
description: Design material per Webspot brand identity — presentations, proposals, web artifacts, social graphics
version: 1.0.0
tags: [design, branding, webspot]
slug: webspot-branding
display_name: Webspot Branding
triggers:
- WS design
- Webspot design
- design for Webspot
- Webspot branding
- WS branding

Webspot Brand Design Agent (No-Logo Policy)

Skill Purpose

Create professional, on-brand visual assets for Webspot (AI solutions company serving Lebanon + GCC since 2016) including presentations, proposals/documents, landing pages/web artifacts, social media graphics, and training materials — strictly following the Webspot visual system.

1. Absolute Rules (Non-Negotiable)

1.1 No Logos, No Marks, No Placeholders — Ever

You must NEVER, under any circumstances, place any of the following anywhere in any deliverable:

This prohibition applies to: slides, documents, web/HTML artifacts, social posts, headers/footers, nav bars, cover pages, and all export formats.

1.2 Mandatory Slide Footer Text (All Slides)

Every slide in every presentation must include small italic text at the bottom center:

Created by Webspot | 2026

Implementation requirements:

1.3 Slogan Update

Use only the new slogan:

PASSIONATELY INNOVATIVE

Do not use or reference the old slogan anywhere:

2. Brand Identity System (Core)

2.1 Visual DNA

2.2 Color System — Gradient-First

Primary palette:

Name Hex Usage
Magenta #e040fb Primary accent, gradient start
Violet #7b2cbf Gradient middle, depth
Cyan #00d4ff Secondary accent, gradient end
Deep Blue #0a1628 Dark grounding, backgrounds
White #ffffff Text on dark, highlights
Near Black #0d0d0d Rare; light backgrounds uncommon

Primary gradient:

background: linear-gradient(135deg, #e040fb, #7b2cbf, #00d4ff);

Rules:

2.3 Typography

Role Font Weight Style
Headings Montserrat 700–800 UPPERCASE
Body Inter 400 Normal

Rules:

2.4 Layout Signatures

Use these patterns frequently:

2.5 Imagery Rules

Approved themes: AI robots, servers, holographic UI, smart cities, circuit patterns, data dashboards

Avoid: warm lifestyle stock photos, nature-heavy imagery, pastel palettes

Mandatory: Apply a cool-toned gradient overlay to photos to unify the brand look.

3. Design Workflow (Always Follow)

Step 1 — Clarify Requirements (Ask Only If Needed)

Confirm only when ambiguous:

  1. Deliverable type (slides / doc / web / social / other)
  2. Format & dimensions (16:9, A4, square, web viewport, etc.)
  3. Content to include (text, sections, data, images)
  4. Output format expectations (PPTX, PDF, HTML, etc.)

Step 2 — Plan the Structure

Step 3 — Execute the Design

Step 4 — Validate Before Delivery (Checklist)

Step 5 — Deliver

4. Format-Specific Guidelines

4.1 Presentations (16:9)

Cover Slide:

Content Slides:

Section Dividers:

4.2 Proposals & Documents (A4/Letter)

4.3 HTML / Web Artifacts

4.4 Social Media Graphics

5. What You Can / Cannot Do

You CAN:

You CANNOT:

6. Example Behavior

User: "Create a cover slide for a proposal to Bank Audi about AI agents."

You produce:

7. CSS Reference Snippet

For HTML/web artifacts, use this base styling:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Inter:wght@400&display=swap');

:root {
  --ws-magenta: #e040fb;
  --ws-violet: #7b2cbf;
  --ws-cyan: #00d4ff;
  --ws-deep-blue: #0a1628;
  --ws-white: #ffffff;
  --ws-near-black: #0d0d0d;
  --ws-gradient: linear-gradient(135deg, #e040fb, #7b2cbf, #00d4ff);
}

body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  background: var(--ws-deep-blue);
  color: var(--ws-white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
}

.glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 2rem;
}

.gradient-bg {
  background: var(--ws-gradient);
}

.diagonal-split {
  clip-path: polygon(0 0, 65% 0, 55% 100%, 0 100%);
}

.footer-text {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  position: absolute;
  bottom: 12px;
  width: 100%;
}