*{margin:0;padding:0;box-sizing:border-box} body{background:#081220;color:#DCE8F2;font-family:'Quicksand','Trebuchet MS',Arial,sans-serif;font-weight:500;line-height:1.6} .wrap{max-width:1060px;margin:0 auto;padding:0 28px} .hero{background:radial-gradient(1200px 500px at 50% -10%,#123352 0%,#081220 60%);padding:72px 0 56px;text-align:center;border-bottom:1px solid rgba(45,212,191,.14)} .hero .lock{max-width:780px;margin:0 auto} .hero svg{width:100%;height:auto} .hero h1{font-size:15px;font-weight:700;letter-spacing:.35em;color:#2DD4BF;text-transform:uppercase;margin-top:34px} .hero p{color:#8AA3BC;font-size:15px;margin-top:6px} section{padding:52px 0} h2{font-size:13px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:#2DD4BF;margin-bottom:26px} .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px} .card{background:#0E1B2E;border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:24px} .card b{color:#F4FAFC;font-size:16px;font-weight:700} .card p{color:#8AA3BC;font-size:14px;margin-top:6px} .tile{border-radius:16px;border:1px solid rgba(255,255,255,.07);padding:34px;display:flex;align-items:center;justify-content:center} .tile svg{width:100%;height:auto;max-width:340px} .tile.dark{background:linear-gradient(135deg,#0F2C46,#07131F)} .tile.light{background:#F4FAFC} .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px} .cap{font-size:12.5px;color:#6E87A0;margin:10px 2px 0;letter-spacing:.06em} .swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px} .sw{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.07)} .sw .chip{height:92px} .sw .meta{padding:12px 14px;background:#0E1B2E} .sw .meta b{display:block;font-size:14px;color:#F4FAFC;font-weight:700} .sw .meta span{font-size:12.5px;color:#8AA3BC;letter-spacing:.08em} .type{background:#0E1B2E;border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:30px} .type .big{font-size:42px;font-weight:700;color:#F4FAFC} .type .mid{font-size:20px;font-weight:500;color:#8AA3BC;margin-top:6px} .type .tag{font-size:13px;letter-spacing:.35em;color:#2DD4BF;margin-top:10px;text-transform:uppercase} ul.rules{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px} ul.rules li{background:#0E1B2E;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:14px 18px;font-size:14px;color:#B9CBDC} ul.rules li b{color:#2DD4BF;font-weight:700} footer{border-top:1px solid rgba(255,255,255,.06);padding:30px 0 46px;color:#6E87A0;font-size:13px} code{background:#0E1B2E;border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:2px 7px;font-size:12px;color:#9FB6CB}

Brand & Logo Marks

Version 1.0 — technology consulting, with a cat in the machine.

The concept

Code-bracket eyes

The face squints >.< — a happy cat whose eyes are angle brackets, the oldest symbol in computing.

Circuit whiskers

Each whisker is a PCB trace ending in a solder pad — the cat is literally wired into your stack.

App-ready badge

The rounded square works as an app icon, favicon and social avatar at any size.

Marks

Primary icon — badges, avatars, app icons

Standalone mark — light backgrounds

Horizontal lockup — dark backgrounds

Horizontal lockup — light backgrounds

Palette

Deep Navy#0A1A2F

Badge Gradient#0F2C46 → #07131F

Circuit Teal#2DD4BF

Deep Teal#0D9488

Cloud White#F4FAFC

Field Slate#566F8A

Typography

technocat

Quicksand Bold — rounded geometry: friendly like a cat, precise like a spec.

Technology Consulting

Usage

Clear space — keep at least 25% of the logo's height free on all sides.
Minimum size — icon at 24 px, horizontal lockup at 140 px wide.
Do — use the dark lockup on navy, the light lockup on white, the mark on light photography.
Don't — recolor, outline, stretch, rotate, or place the teal whiskers on busy backgrounds.