@@ -8,21 +8,21 @@ marketplace icon, web page favicon, README banner, …).
88
99### SVG variants
1010
11- | File | Layers | Color | viewBox |
12- | -------------------------------- | -------------------- | ------------------------------------------ | ------------------- |
13- | ` socket-icon.svg ` | 1 (bolt is a cutout) | ` currentColor ` | ` 0 0 181.41 240 ` |
14- | ` socket-icon-square.svg ` | 1 | ` currentColor ` | ` -29.295 0 240 240 ` |
15- | ` socket-icon-shield.svg ` | 2 (shield + bolt) | shield: ` currentColor ` , bolt: ` #fff ` | ` 0 0 181.41 240 ` |
16- | ` socket-icon-shield-square.svg ` | 2 | shield: ` currentColor ` , bolt: ` #fff ` | ` -29.295 0 240 240 ` |
17- | ` socket-icon-brand.svg ` ★ | 2 | shield: pink→purple gradient, bolt: ` #fff ` | ` 0 0 181.41 240 ` |
18- | ` socket-icon-brand-square.svg ` ★ | 2 | shield: pink→purple gradient, bolt: ` #fff ` | ` -29.295 0 240 240 ` |
11+ | File | Layers | Color | viewBox |
12+ | ---| ---| ---| ---|
13+ | ` socket-icon.svg ` | 1 (bolt is a cutout) | ` currentColor ` | ` 0 0 181.41 240 ` |
14+ | ` socket-icon-square.svg ` | 1 | ` currentColor ` | ` -29.295 0 240 240 ` |
15+ | ` socket-icon-shield.svg ` | 2 (shield + bolt) | shield: ` currentColor ` , bolt: ` #fff ` | ` 0 0 181.41 240 ` |
16+ | ` socket-icon-shield-square.svg ` | 2 | shield: ` currentColor ` , bolt: ` #fff ` | ` -29.295 0 240 240 ` |
17+ | ` socket-icon-brand.svg ` ★ | 2 | shield: pink→purple gradient, bolt: ` #fff ` | ` 0 0 181.41 240 ` |
18+ | ` socket-icon-brand-square.svg ` ★ | 2 | shield: pink→purple gradient, bolt: ` #fff ` | ` -29.295 0 240 240 ` |
1919
2020### Wordmark variants (shield + "Socket" text, 840×240 landscape)
2121
22- | File | Layers | viewBox |
23- | ----------------------- | --------------------------------------------------- | ------------- |
22+ | File | Layers | viewBox |
23+ | ---| ---| ---|
2424| ` socket-logo-light.svg ` | shield (gradient) + bolt (white) + text (slate-900) | ` 0 0 840 240 ` |
25- | ` socket-logo-dark.svg ` | shield (gradient) + bolt (white) + text (slate-50) | ` 0 0 840 240 ` |
25+ | ` socket-logo-dark.svg ` | shield (gradient) + bolt (white) + text (slate-50) | ` 0 0 840 240 ` |
2626
2727"Light" and "dark" refer to the ** page background** the wordmark sits
2828on — light wordmark has dark text (for use on white/light bg); dark
@@ -33,38 +33,32 @@ color-scheme preference:
3333
3434``` html
3535<picture >
36- <source
37- media =" (prefers-color-scheme: dark)"
38- srcset =" assets/socket-logo-dark-840.png"
39- />
40- <source
41- media =" (prefers-color-scheme: light)"
42- srcset =" assets/socket-logo-light-840.png"
43- />
44- <img alt =" Socket" width =" 420" src =" assets/socket-logo-light-840.png" />
36+ <source media =" (prefers-color-scheme: dark)" srcset =" assets/socket-logo-dark-840.png" >
37+ <source media =" (prefers-color-scheme: light)" srcset =" assets/socket-logo-light-840.png" >
38+ <img alt =" Socket" width =" 420" src =" assets/socket-logo-light-840.png" >
4539</picture >
4640```
4741
4842### PNG variants
4943
5044Brand-square (favicons + marketplace listing):
5145
52- | File | Use |
53- | --------------------------- | ------------------------------------- |
54- | ` socket-icon-brand-16.png ` | Favicon (small) |
55- | ` socket-icon-brand-32.png ` | Favicon (standard) |
56- | ` socket-icon-brand-64.png ` | README badges, GitHub social previews |
57- | ` socket-icon-brand-128.png ` | Docs, OG cards |
58- | ` socket-icon-brand-256.png ` | VSCode marketplace listing |
59- | ` socket-icon-brand-512.png ` | High-DPI, hero images, press kit |
46+ | File | Use |
47+ | ---| ---|
48+ | ` socket-icon-brand-16.png ` | Favicon (small) |
49+ | ` socket-icon-brand-32.png ` | Favicon (standard) |
50+ | ` socket-icon-brand-64.png ` | README badges, GitHub social previews |
51+ | ` socket-icon-brand-128.png ` | Docs, OG cards |
52+ | ` socket-icon-brand-256.png ` | VSCode marketplace listing |
53+ | ` socket-icon-brand-512.png ` | High-DPI, hero images, press kit |
6054
6155Wordmark (README hero banners, in light/dark pairs):
6256
63- | File | Width | Use |
64- | ----------------------------------- | -------- | ------------------------- |
65- | ` socket-logo-{light,dark}-420.png ` | 420×120 | README hero (1× display) |
66- | ` socket-logo-{light,dark}-840.png ` | 840×240 | README hero (2× / Retina) |
67- | ` socket-logo-{light,dark}-1680.png ` | 1680×480 | Press kit, hero images |
57+ | File | Width | Use |
58+ | ---| ---| ---|
59+ | ` socket-logo-{light,dark}-420.png ` | 420×120 | README hero (1× display) |
60+ | ` socket-logo-{light,dark}-840.png ` | 840×240 | README hero (2× / Retina) |
61+ | ` socket-logo-{light,dark}-1680.png ` | 1680×480 | Press kit, hero images |
6862
6963## Variant semantics
7064
0 commit comments