@@ -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,32 +33,38 @@ color-scheme preference:
3333
3434``` html
3535<picture >
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" >
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" />
3945</picture >
4046```
4147
4248### PNG variants
4349
4450Brand-square (favicons + marketplace listing):
4551
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 |
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 |
5460
5561Wordmark (README hero banners, in light/dark pairs):
5662
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 |
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 |
6268
6369## Variant semantics
6470
0 commit comments