# TechWyse Design System

An evolution of the TechWyse Internet Marketing brand into a premium, editorial,
motion-led design system — built for an immersive, cinematic website experience
while staying grounded in the company's real logo, colours and type.

## About TechWyse

**TechWyse Internet Marketing** is an established, full-service digital / internet
marketing agency (SEO, PPC, paid social, web design & development, content, and
proprietary reporting technology). The brand positioning is **results-driven,
strategic, and enterprise-capable** — a confident agency that delivers complex work
and measurable ROI for its clients.

This design system reframes that positioning for a **design-led, editorial website**:
large kinetic typography, art-directed imagery, scroll-driven motion, and quiet
negative space — premium and modern, never a stacked-corporate-template look.

## Sources provided
- `uploads/TW assets (2)/Brand Guidline.jpg` — the official Brand Colour Palette sheet
  (logo colours + primary + secondary colours). This is the authoritative colour source.
- `uploads/TW assets (2)/TechWyse-Logo-internet-marketing-01.svg` — primary vector logo
  (blue "TechWyse" wordmark + green house/arrow mark). Copied to `assets/techwyse-logo.svg`.
  The source SVG referenced `.st0`/`.st1` classes with no fill rules; brand fills
  (green `#8CC63E`, cobalt `#1B3E93`) were added so it renders standalone.
- `uploads/TW assets (2)/TechWyse-White-Logo-internet-marketing.png` — white logo for
  dark backgrounds → `assets/techwyse-logo-white.png`.
- `uploads/TW assets (2)/client logos/` and `Client logos black and white/` — real client
  logos (Amego, Clear Window, Coja, Giddy YoYo, Jiffy, Junk It, Killarney, Physiomed) →
  `assets/clients/`.
- `uploads/TW assets (2)/Fonts/` — **Bebas Neue** and the full **Poppins** family (TTF).
- `uploads/drive-download-20260724T043514Z-1-001/` — **empty / no readable content** on
  the filesystem. If this was meant to contain more material, please re-attach it.

No codebase or Figma file was provided, so components and the website UI kit are an
**intentional forward evolution** of the brand guidance rather than a code recreation.

## Brand mark
A real vector logo IS provided (`assets/techwyse-logo.svg` + white PNG). No logo was
drawn or reconstructed. Where a compact mark is needed the "house/arrow" glyph portion
of the logo is used with the "TechWyse" wordmark in Bebas/Poppins.

---

## CONTENT FUNDAMENTALS — how TechWyse writes

**Voice.** Confident, direct, results-oriented. TechWyse speaks as an expert partner who
has done this many times — assured but not boastful, plain-spoken but polished. The tone
is **professional and strategic**, never cutesy or overly playful.

**Person.** Addresses the reader as **"you" / "your business"**, and refers to the agency
as **"we" / "our team"**. Copy is outcome-focused: it talks about the client's growth,
traffic, leads and revenue rather than the agency's ego.

**Casing.** Sentence case for body and sub-heads. **Display headlines are set in
ALL CAPS** (driven by Bebas Neue) for impact. Eyebrow labels are UPPERCASE and letter-spaced.

**Length & density.** Short. Headlines are 2–6 words. Section intros are 1–2 sentences.
Body blocks stay tight — the visual system and motion carry the story, so copy never has to.

**Numbers & proof.** Concrete metrics are a core device — "20+ years", "500+ clients",
"3.4× ROI", real percentages. Stats are shown large and confident, paired with a short label.

**Emoji.** Not used. The brand is sophisticated; personality comes from typography and
motion, not emoji.

**Example voice:**
- Eyebrow: `RESULTS-DRIVEN DIGITAL MARKETING`
- Headline: `WE GROW BRANDS THAT REFUSE TO SIT STILL`
- Sub-head: `Strategy, search and creative — engineered around your revenue, not vanity metrics.`
- CTA: `Start your growth plan` · `See the work` · `Talk to a strategist`

---

## VISUAL FOUNDATIONS

**Colour.** Two primaries own the brand: **Cobalt `#1B3E93`** (trust, depth, the wordmark)
and **Android Green `#8CC63E`** (energy, growth, the mark). Cobalt dominates large surfaces
and dark folds; green is the signature accent for emphasis, highlights, active states and
the occasional full-bleed statement. Secondary colours (sky blue, orange, gold, leaf/grass
greens) are used sparingly — for data, tags and warm accents. Neutrals are a cool near-black
ink (`#292929`/`#141A24`) on white and very faint blue papers (`#F1F9FF` Zircon,
`#F4F4F4` White Smoke). **Max 1–2 background colours per view.**

**Type.** Display = **Bebas Neue**: condensed, all-caps, tight leading (0.92), used huge for
hero and section-intro moments and as kinetic typography. Supporting = **Poppins**: geometric,
highly readable, used for sub-heads, body, nav, labels, buttons, captions. Strong contrast
between the two is intentional — that contrast IS the type system. Keep weights limited
(Light/Regular/Medium/SemiBold/Bold).

**Spacing & layout.** Editorial grid, not a rigid corporate stack. Generous fold padding
(`--fold-pad-y`), large negative space, asymmetry, overlaps, split-screen and full-bleed
moments. `--content-max` 1240px for text-led content; visuals break the grid and bleed to
the edge. 4px spacing base.

**Backgrounds.** Mostly flat colour — white / faint blue paper for light folds, cobalt or
ink for dark folds. **No heavy gradients on every section** and no glassmorphism overuse;
gradients appear only as subtle image-protection scrims and rare cobalt→ink transitions.
Imagery is art-directed: cropped dramatically, layered behind type, revealed through masks,
scaled on scroll — not dropped into rounded cards.

**Motion.** Central, not decorative. Smooth and deliberate — line/word text reveals,
scroll-triggered enter/scale/fade, pinned sections, mask/clip image reveals, subtle parallax,
scale-to-fill transitions, horizontal-on-vertical-scroll. Easing is `--ease-out`
`cubic-bezier(.16,1,.3,1)` (never bouncy). Durations 180–900ms; big storytelling moments get
the slow reveals, small UI gets fast. Everything respects `prefers-reduced-motion`.

**Hover.** Primary buttons darken cobalt and slide an arrow; secondary/outline buttons fill
(outline→filled); links draw an underline or shift to green; cards lift with `--shadow-lg` and
reveal imagery. **Press** states shrink slightly (`scale(.98)`) and deepen colour.

**Borders.** Thin (`1px`), subtle ink `--border-subtle`; brand borders use cobalt. Corners are
largely **square to lightly rounded** — `--radius-sm/md` on UI, `--radius-lg` on cards; the
brand is not a pill-heavy or bubbly system. CTAs may use full pills for the "circular icon" look.

**Shadows.** Soft, cobalt-tinted elevation (`--shadow-sm/md/lg`), plus a stronger
`--shadow-brand` for floating CTAs. No hard drop shadows.

**Imagery vibe.** Bright, confident, real — warm-to-neutral, high clarity. B&W client logos
are used as a restrained "trusted by" wall. No generic purple-gradient stock.

**Cards.** White surface, `--radius-lg`, `--shadow-md`, thin subtle border optional; hover
lifts to `--shadow-lg`. Used sparingly — the system favours editorial composition over
repeated card rows.

---

## ICONOGRAPHY

No custom icon set was provided in the source assets. The brand's own graphic language is the
**"house / upward-arrow" mark** from the logo (a chevron roof over a dot) — a motif that can be
reused as a bullet, a scroll cue, or a decorative accent.

For UI glyphs (arrows, menu, close, chevrons, form/validation icons) the system uses
**[Lucide](https://lucide.dev)** via CDN — a clean, modern, consistent 1.75px-stroke outline
set that matches TechWyse's geometric Poppins/premium feel. **This is a substitution** (no
brand icon font existed); if TechWyse has a preferred icon library, supply it and it will
replace Lucide.

- Icon style: **outline, ~1.75px stroke, rounded joins**, sized 16/20/24px.
- Emoji: **never** used as icons.
- Unicode arrows (→ ↗) are acceptable inline in kinetic display type and CTAs.
- Client logos live in `assets/clients/` and are shown as flat marks, not inside icon frames.

---

## Index / manifest
- `styles.css` — global entry (import list only).
- `tokens/` — `fonts.css`, `colors.css`, `typography.css`, `layout.css`.
- `fonts/` — Bebas Neue + Poppins (Light/Regular/Medium/SemiBold/Bold) TTFs.
- `assets/` — `techwyse-logo.svg`, `techwyse-logo-white.png`, `clients/` (8 client logos).
- `components/` — reusable React primitives (see below).
- `ui_kits/website/` — the marketing-website UI kit (hero, work, services, footer).
- `foundations/` — specimen cards for the Design System tab (colours, type, spacing).
- `thumbnail.html` — homepage tile.
- `SKILL.md` — Agent-Skill wrapper.

### Components
Button, Eyebrow, StatBlock, Tag, Card, ServiceLink, Accordion, Input, Textarea,
ScrollIndicator, Testimonial, CaseStudyPreview — grouped under `components/`.

### UI kit
`ui_kits/website/` — TechWyse marketing homepage: pinned hero, "trusted by" logo wall,
services list, case-study previews, stats, testimonial, contact form, footer.

---

## CAVEATS / SUBSTITUTIONS
- **Lucide icons** substituted for UI glyphs (no brand icon set provided).
- `drive-download-…` upload folder was empty — re-attach if it should contain material.
- No codebase/Figma — components are a forward-looking evolution, not a code recreation.