@lacspace/logo 1.0.0 β 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +47 -0
- package/dist/index.cjs +159 -4
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +57 -1
- package/dist/index.d.ts +57 -1
- package/dist/index.js +157 -5
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -63,6 +63,43 @@ suggest({ name: "Ledgerly", keywords: "fintech trust money" });
|
|
|
63
63
|
// notes: ["mood \"Finance\" from keywords", "palette Deep Indigo", ...] }
|
|
64
64
|
```
|
|
65
65
|
|
|
66
|
+
## π Brand-in-a-box (v1.1.0)
|
|
67
|
+
|
|
68
|
+
One brief β a whole consistent identity: logo lockups, a favicon/app-icon set, the palette and CSS variables β all sharing the same palette, type and icon.
|
|
69
|
+
|
|
70
|
+
```ts
|
|
71
|
+
import { generateBrandKit } from "@lacspace/logo";
|
|
72
|
+
|
|
73
|
+
const kit = generateBrandKit({ name: "Orbit Labs", keywords: "ai, network, fast" });
|
|
74
|
+
kit.primary.svg; // horizontal lockup kit.stacked.svg; // icon over wordmark
|
|
75
|
+
kit.mark.svg; // app icon / avatar kit.wordmark.svg; // wordmark only
|
|
76
|
+
kit.mono.svg; // single-colour stamp kit.favicon; // { svg, sizes[], links, manifestIcons }
|
|
77
|
+
kit.colors; // [{ role, hex }, β¦] kit.css; // :root { --brand-primary: β¦ }
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
Just need a favicon set?
|
|
81
|
+
|
|
82
|
+
```ts
|
|
83
|
+
import { generateFavicon } from "@lacspace/logo";
|
|
84
|
+
const fav = generateFavicon({ name: "Nova", keywords: "tech" });
|
|
85
|
+
// fav.svg (scalable) + fav.sizes (16β¦512) + fav.links (<link> tags) + fav.manifestIcons
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
> **v1.1.0** also grows the JSON brain to **67 icons**, **36 palettes**, **18 type pairings** and new industry moods (education, legal, real-estate, kids, fitnessβ¦).
|
|
89
|
+
|
|
90
|
+
## π Animated logo reveal (v1.2.0)
|
|
91
|
+
|
|
92
|
+
Turn any logo into a **self-contained animated SVG** that crafts itself on load (wipe + scale-in + a light shimmer) β pure CSS, no JS, works in any browser, README or site, and respects `prefers-reduced-motion`.
|
|
93
|
+
|
|
94
|
+
```ts
|
|
95
|
+
import { animateLogo } from "@lacspace/logo";
|
|
96
|
+
|
|
97
|
+
const svg = animateLogo({ name: "Orbit Labs", keywords: "ai, network" }, { loop: true });
|
|
98
|
+
// drop `svg` straight into a page or save as .svg β it animates itself
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
> **v1.2.0** also grows the brain to **79 icons** (insurance, dental, eyewear, audio, construction, HR, jewelry, marine, energyβ¦).
|
|
102
|
+
|
|
66
103
|
## The five engines
|
|
67
104
|
|
|
68
105
|
| Engine | What you get |
|
|
@@ -123,6 +160,16 @@ import { PALETTES, FONTS, ICONS, MOODS } from "@lacspace/logo";
|
|
|
123
160
|
- `suggest(brief)` β the interpretation only (no render)
|
|
124
161
|
- `tokenize(brief)`, `initials(name)`, and the `PALETTES` / `FONTS` / `ICONS` / `MOODS` data
|
|
125
162
|
|
|
163
|
+
## Contributing π
|
|
164
|
+
|
|
165
|
+
This generator gets smarter the more curated data it has β and **the JSON brain is the easiest place to help.** Adding a palette, an icon (with keyword tags) or a font pairing is a small, high-impact PR:
|
|
166
|
+
|
|
167
|
+
- Palettes β `logo/src/data/palettes.json`
|
|
168
|
+
- Icons (24-grid line SVG + `keywords`) β `logo/src/data/icons.json`
|
|
169
|
+
- Fonts, moods, keyword mappings β the other files in `logo/src/data/`
|
|
170
|
+
|
|
171
|
+
See [CONTRIBUTING.md](https://github.com/lacspace/npm-packages/blob/main/CONTRIBUTING.md). New contributors welcome β open an issue or PR.
|
|
172
|
+
|
|
126
173
|
## License
|
|
127
174
|
|
|
128
175
|
[Lacspace Free Licence v1.0](https://github.com/lacspace/npm-packages/blob/main/LICENSE) β free, permissive, Lacspace-branded.
|
package/dist/index.cjs
CHANGED
|
@@ -25,7 +25,19 @@ var palettes_default = [
|
|
|
25
25
|
{ id: "amber-glow", name: "Amber Glow", mood: ["warm", "friendly", "energy", "food"], bg: "#161005", surface: "#261c0a", primary: "#f59e0b", accent: "#fcd34d", on: "#fff8e8", from: "#F59E0B", to: "#FCD34D" },
|
|
26
26
|
{ id: "aqua-marine", name: "Aqua Marine", mood: ["calm", "clean", "travel", "fresh"], bg: "#06131a", surface: "#0b2029", primary: "#06b6d4", accent: "#2dd4bf", on: "#e8fcff", from: "#06B6D4", to: "#2DD4BF" },
|
|
27
27
|
{ id: "plum-noir", name: "Plum Noir", mood: ["luxe", "creative", "mono", "elegant"], bg: "#0d0912", surface: "#181020", primary: "#a855f7", accent: "#6b7280", on: "#f2ecfb", from: "#A855F7", to: "#6B7280" },
|
|
28
|
-
{ id: "graphite-orange", name: "Graphite Orange", mood: ["industrial", "bold", "sport", "modern"], bg: "#0b0b0d", surface: "#17181c", primary: "#f97316", accent: "#e5e7eb", on: "#fafafa", from: "#F97316", to: "#E5E7EB" }
|
|
28
|
+
{ id: "graphite-orange", name: "Graphite Orange", mood: ["industrial", "bold", "sport", "modern"], bg: "#0b0b0d", surface: "#17181c", primary: "#f97316", accent: "#e5e7eb", on: "#fafafa", from: "#F97316", to: "#E5E7EB" },
|
|
29
|
+
{ id: "teal-gold", name: "Teal Gold", mood: ["luxe", "finance", "premium", "corporate"], bg: "#06130f", surface: "#0b201a", primary: "#0f9d8f", accent: "#d4af37", on: "#eafcf7", from: "#0F9D8F", to: "#D4AF37" },
|
|
30
|
+
{ id: "sunrise-coral", name: "Sunrise Coral", mood: ["warm", "food", "friendly", "energy"], bg: "#1a0e0a", surface: "#2a1710", primary: "#ff7a59", accent: "#ffd166", on: "#fff3ee", from: "#FF7A59", to: "#FFD166" },
|
|
31
|
+
{ id: "deep-forest", name: "Deep Forest", mood: ["eco", "heritage", "calm", "organic"], bg: "#071310", surface: "#0d201b", primary: "#2f855a", accent: "#a3b18a", on: "#eafaf2", from: "#2F855A", to: "#A3B18A" },
|
|
32
|
+
{ id: "neon-magenta", name: "Neon Magenta", mood: ["creative", "bold", "playful", "future"], bg: "#120a12", surface: "#201220", primary: "#e91e8c", accent: "#22d3ee", on: "#ffeef8", from: "#E91E8C", to: "#22D3EE" },
|
|
33
|
+
{ id: "arctic-blue", name: "Arctic Blue", mood: ["clean", "medical", "tech", "calm"], bg: "#07101a", surface: "#0d1d2b", primary: "#2b8fe0", accent: "#8ed1fc", on: "#eef7ff", from: "#2B8FE0", to: "#8ED1FC" },
|
|
34
|
+
{ id: "charcoal-lime", name: "Charcoal Lime", mood: ["industrial", "tech", "bold", "sport"], bg: "#0c0d0a", surface: "#171a12", primary: "#c6f135", accent: "#64748b", on: "#f6ffe6", from: "#C6F135", to: "#64748B" },
|
|
35
|
+
{ id: "lavender-dream", name: "Lavender Dream", mood: ["beauty", "playful", "calm", "friendly"], bg: "#100c18", surface: "#1b1528", primary: "#a78bfa", accent: "#f0abfc", on: "#f4efff", from: "#A78BFA", to: "#F0ABFC" },
|
|
36
|
+
{ id: "ruby-noir", name: "Ruby Noir", mood: ["luxe", "beauty", "bold", "premium"], bg: "#140708", surface: "#220d10", primary: "#e11d48", accent: "#f59e0b", on: "#ffeef1", from: "#E11D48", to: "#F59E0B" },
|
|
37
|
+
{ id: "honey-amber", name: "Honey Amber", mood: ["warm", "food", "heritage", "friendly"], bg: "#161006", surface: "#241a0a", primary: "#e0a92e", accent: "#c2703d", on: "#fff7e6", from: "#E0A92E", to: "#C2703D" },
|
|
38
|
+
{ id: "cobalt-electric", name: "Cobalt Electric", mood: ["tech", "bold", "future", "trust"], bg: "#080b1a", surface: "#101630", primary: "#2f5cff", accent: "#22d3ee", on: "#eef1ff", from: "#2F5CFF", to: "#22D3EE" },
|
|
39
|
+
{ id: "sage-earth", name: "Sage Earth", mood: ["eco", "organic", "calm", "health"], bg: "#0d120c", surface: "#171f14", primary: "#78a662", accent: "#c9a26b", on: "#f1f8ea", from: "#78A662", to: "#C9A26B" },
|
|
40
|
+
{ id: "peach-cream", name: "Peach Cream", mood: ["playful", "beauty", "friendly", "kids"], bg: "#1a1210", surface: "#2a1e18", primary: "#ff9e80", accent: "#ffcfa3", on: "#fff4ee", from: "#FF9E80", to: "#FFCFA3" }
|
|
29
41
|
];
|
|
30
42
|
|
|
31
43
|
// src/data/fonts.json
|
|
@@ -43,7 +55,11 @@ var fonts_default = [
|
|
|
43
55
|
{ id: "fraunces-craft", display: "Fraunces", body: "Newsreader", weight: 600, mood: ["organic", "heritage", "craft", "warm"], stack: "'Fraunces', Georgia, serif" },
|
|
44
56
|
{ id: "quicksand-friendly", display: "Quicksand", body: "Nunito", weight: 700, mood: ["friendly", "playful", "beauty", "calm"], stack: "'Quicksand', 'Nunito', system-ui, sans-serif" },
|
|
45
57
|
{ id: "orbitron-future", display: "Orbitron", body: "Rajdhani", weight: 700, mood: ["future", "tech", "sport", "bold"], stack: "'Orbitron', 'Rajdhani', system-ui, sans-serif" },
|
|
46
|
-
{ id: "bricolage-quirk", display: "Bricolage Grotesque", body: "Inter", weight: 700, mood: ["creative", "startup", "modern", "playful"], stack: "'Bricolage Grotesque', system-ui, sans-serif" }
|
|
58
|
+
{ id: "bricolage-quirk", display: "Bricolage Grotesque", body: "Inter", weight: 700, mood: ["creative", "startup", "modern", "playful"], stack: "'Bricolage Grotesque', system-ui, sans-serif" },
|
|
59
|
+
{ id: "lexend-clear", display: "Lexend", body: "Inter", weight: 600, mood: ["education", "clean", "friendly", "medical", "calm"], stack: "'Lexend', system-ui, sans-serif" },
|
|
60
|
+
{ id: "anton-impact", display: "Anton", body: "Inter", weight: 400, mood: ["bold", "sport", "industrial", "energy"], stack: "'Anton', 'Arial Narrow', system-ui, sans-serif" },
|
|
61
|
+
{ id: "baloo-kids", display: "Baloo 2", body: "Nunito", weight: 700, mood: ["kids", "playful", "friendly", "food"], stack: "'Baloo 2', 'Nunito', system-ui, sans-serif" },
|
|
62
|
+
{ id: "libre-editorial", display: "Libre Franklin", body: "Lora", weight: 700, mood: ["editorial", "corporate", "heritage", "elegant", "legal"], stack: "'Libre Franklin', Georgia, serif" }
|
|
47
63
|
];
|
|
48
64
|
|
|
49
65
|
// src/data/icons.json
|
|
@@ -87,7 +103,46 @@ var icons_default = [
|
|
|
87
103
|
{ key: "flame", keywords: ["fire", "energy", "hot", "cook", "passion", "grill", "heat", "bbq"], svg: "<path d='M12 21 A6 6 0 0 0 18 15 C18 10 14 9 15 4 C11 6 8 9 8 13 A4 4 0 0 0 10 16 C9 12 11 11 12 10 C12 13 15 13 14 17 A3 3 0 0 1 12 21 Z'/>" },
|
|
88
104
|
{ key: "cube", keywords: ["product", "box", "package", "build", "3d", "block", "logistics", "supply"], svg: "<path d='M12 3 L20 7.5 V16.5 L12 21 L4 16.5 V7.5 Z'/><path d='M4 7.5 L12 12 L20 7.5 M12 12 V21'/>" },
|
|
89
105
|
{ key: "eye", keywords: ["vision", "watch", "view", "security", "media", "optics", "monitor"], svg: "<path d='M2 12 C5 6 9 5 12 5 C15 5 19 6 22 12 C19 18 15 19 12 19 C9 19 5 18 2 12 Z'/><circle cx='12' cy='12' r='3'/>" },
|
|
90
|
-
{ key: "crown", keywords: ["luxe", "premium", "royal", "king", "best", "vip", "elite", "gold"], svg: "<path d='M4 18 V8 L8 12 L12 5 L16 12 L20 8 V18 Z'/><path d='M4 18 H20'/>" }
|
|
106
|
+
{ key: "crown", keywords: ["luxe", "premium", "royal", "king", "best", "vip", "elite", "gold"], svg: "<path d='M4 18 V8 L8 12 L12 5 L16 12 L20 8 V18 Z'/><path d='M4 18 H20'/>" },
|
|
107
|
+
{ key: "graduation", keywords: ["education", "school", "university", "academy", "learn", "graduate", "course", "student"], svg: "<path d='M2 9 L12 4 L22 9 L12 14 Z'/><path d='M6 11 V16 C6 17.5 9 19 12 19 C15 19 18 17.5 18 16 V11'/><path d='M22 9 V14'/>" },
|
|
108
|
+
{ key: "dumbbell", keywords: ["gym", "fitness", "workout", "sport", "health", "training", "muscle", "exercise"], svg: "<path d='M3 9 V15 M6 8 V16 M18 8 V16 M21 9 V15 M6 12 H18'/>" },
|
|
109
|
+
{ key: "scale", keywords: ["legal", "law", "justice", "balance", "attorney", "court", "lawyer", "compliance"], svg: "<path d='M12 3 V20 M5 20 H19 M12 5 L5 9 M12 5 L19 9'/><path d='M2 9 H8 L5 15 A3 3 0 0 0 8 15 Z M16 9 H22 L19 15 A3 3 0 0 0 22 15 Z'/>" },
|
|
110
|
+
{ key: "key", keywords: ["realestate", "access", "unlock", "property", "rental", "keys", "estate"], svg: "<circle cx='8' cy='8' r='4'/><path d='M11 11 L20 20 M17 17 L19 15 M15 15 L17 13'/>" },
|
|
111
|
+
{ key: "plane", keywords: ["travel", "flight", "airline", "trip", "tourism", "journey", "holiday", "send"], svg: "<path d='M3 11 L21 3 L14 21 L11 13 Z'/><path d='M11 13 L21 3'/>" },
|
|
112
|
+
{ key: "car", keywords: ["auto", "car", "ride", "taxi", "garage", "mechanic", "vehicle", "drive", "rental"], svg: "<path d='M3 13 L5 8 H17 L20 13'/><path d='M2 13 H22 V17 H2 Z'/><circle cx='7' cy='17' r='1.5'/><circle cx='17' cy='17' r='1.5'/>" },
|
|
113
|
+
{ key: "chip", keywords: ["tech", "hardware", "iot", "ai", "semiconductor", "electronics", "processor", "chip", "device"], svg: "<rect x='7' y='7' width='10' height='10' rx='1.5'/><path d='M10 3 V6 M14 3 V6 M10 18 V21 M14 18 V21 M3 10 H6 M3 14 H6 M18 10 H21 M18 14 H21'/>" },
|
|
114
|
+
{ key: "gift", keywords: ["gift", "ecommerce", "reward", "celebration", "store", "present", "surprise", "loyalty"], svg: "<rect x='3' y='9' width='18' height='11' rx='1'/><path d='M3 12 H21 M12 9 V20'/><path d='M12 9 C12 6 9 5 8 6.5 C7 8 9 9 12 9 C12 9 15 9 16 6.5 C15 5 12 6 12 9 Z'/>" },
|
|
115
|
+
{ key: "calendar", keywords: ["schedule", "booking", "event", "planner", "date", "calendar", "appointment", "agenda"], svg: "<rect x='3' y='5' width='18' height='16' rx='2'/><path d='M3 9 H21 M8 3 V6 M16 3 V6'/><rect x='7' y='12' width='3' height='3'/>" },
|
|
116
|
+
{ key: "clock", keywords: ["time", "schedule", "fast", "productivity", "hours", "watch", "timer", "deadline"], svg: "<circle cx='12' cy='12' r='9'/><path d='M12 7 V12 L16 14'/>" },
|
|
117
|
+
{ key: "mail", keywords: ["email", "contact", "newsletter", "message", "communication", "inbox", "mailer", "crm"], svg: "<rect x='3' y='5' width='18' height='14' rx='2'/><path d='M3 7 L12 13 L21 7'/>" },
|
|
118
|
+
{ key: "lock", keywords: ["security", "privacy", "protect", "safe", "lock", "password", "vault", "encrypt"], svg: "<rect x='5' y='11' width='14' height='9' rx='2'/><path d='M8 11 V8 A4 4 0 0 1 16 8 V11'/>" },
|
|
119
|
+
{ key: "tag", keywords: ["price", "sale", "retail", "label", "discount", "tag", "offer", "deal", "ecommerce"], svg: "<path d='M3 3 H11 L21 13 L13 21 L3 11 Z'/><circle cx='7.5' cy='7.5' r='1.4'/>" },
|
|
120
|
+
{ key: "brain", keywords: ["ai", "smart", "mind", "learning", "psychology", "brain", "intelligence", "think", "neural"], svg: "<path d='M9 4 A3 3 0 0 0 6 7 A3 3 0 0 0 5 12 A3 3 0 0 0 7 17 A3 3 0 0 0 12 19 V4 A2 2 0 0 0 9 4 Z'/><path d='M12 4 A2 2 0 0 1 15 4 A3 3 0 0 1 18 7 A3 3 0 0 1 19 12 A3 3 0 0 1 17 17 A3 3 0 0 1 12 19'/>" },
|
|
121
|
+
{ key: "flask", keywords: ["lab", "science", "chemistry", "research", "biotech", "experiment", "pharma", "chemical"], svg: "<path d='M9 3 H15 M10 3 V9 L5 18 A2 2 0 0 0 7 21 H17 A2 2 0 0 0 19 18 L14 9 V3'/><path d='M7.5 14 H16.5'/>" },
|
|
122
|
+
{ key: "cross", keywords: ["medical", "clinic", "pharmacy", "health", "hospital", "aid", "plus", "emergency"], svg: "<rect x='4' y='4' width='16' height='16' rx='3'/><path d='M12 8 V16 M8 12 H16'/>" },
|
|
123
|
+
{ key: "edit", keywords: ["write", "content", "blog", "edit", "author", "copywriting", "note", "publish"], svg: "<path d='M14 4 L20 10 L9 21 H3 V15 Z'/><path d='M13 5 L19 11'/>" },
|
|
124
|
+
{ key: "megaphone", keywords: ["marketing", "ads", "promo", "announce", "pr", "campaign", "broadcast", "launch", "advertising"], svg: "<path d='M3 10 V14 H6 L14 19 V5 L6 10 Z'/><path d='M17 9 A4 4 0 0 1 17 15'/>" },
|
|
125
|
+
{ key: "target", keywords: ["goal", "marketing", "focus", "aim", "strategy", "target", "objective", "precision", "growth"], svg: "<circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='5'/><circle cx='12' cy='12' r='1.5'/>" },
|
|
126
|
+
{ key: "trophy", keywords: ["award", "win", "sport", "achievement", "best", "trophy", "champion", "prize", "league"], svg: "<path d='M8 4 H16 V9 A4 4 0 0 1 8 9 Z'/><path d='M8 6 H5 A2 2 0 0 0 7 10 M16 6 H19 A2 2 0 0 1 17 10'/><path d='M12 13 V16 M9 20 H15 M10 20 V16 H14 V20'/>" },
|
|
127
|
+
{ key: "building", keywords: ["office", "corporate", "business", "company", "enterprise", "realestate", "tower", "firm"], svg: "<rect x='5' y='3' width='14' height='18'/><path d='M9 7 H11 M13 7 H15 M9 11 H11 M13 11 H15 M9 15 H11 M13 15 H15 M10 21 V18 H14 V21'/>" },
|
|
128
|
+
{ key: "lightbulb", keywords: ["idea", "innovation", "creative", "startup", "bright", "invention", "insight", "smart"], svg: "<path d='M9 17 H15 M10 20 H14'/><path d='M12 3 A6 6 0 0 0 8 14 H16 A6 6 0 0 0 12 3 Z'/>" },
|
|
129
|
+
{ key: "gamepad", keywords: ["game", "gaming", "esports", "play", "entertainment", "arcade", "console", "fun"], svg: "<rect x='2' y='8' width='20' height='9' rx='4.5'/><path d='M7 11 V14 M5.5 12.5 H8.5'/><circle cx='16' cy='11.5' r='1'/><circle cx='18.5' cy='13.5' r='1'/>" },
|
|
130
|
+
{ key: "shirt", keywords: ["fashion", "clothing", "apparel", "boutique", "retail", "tshirt", "wear", "style"], svg: "<path d='M8 4 L4 7 L6 10 L8 9 V20 H16 V9 L18 10 L20 7 L16 4 C16 6 8 6 8 4 Z'/>" },
|
|
131
|
+
{ key: "balloon", keywords: ["kids", "party", "toy", "children", "fun", "celebration", "birthday", "playful"], svg: "<path d='M12 3 A5 6 0 0 0 12 15 A5 6 0 0 0 12 3 Z'/><path d='M12 15 V17 M11 17 C11 19 13 19 13 21'/>" },
|
|
132
|
+
{ key: "palette-art", keywords: ["art", "design", "paint", "creative", "color", "artist", "gallery", "illustration"], svg: "<path d='M12 3 A9 9 0 1 0 12 21 A2 2 0 0 0 12 17 A2 2 0 0 1 14 15 H16 A5 5 0 0 0 21 10 C21 6 17 3 12 3 Z'/><circle cx='8' cy='9' r='1'/><circle cx='12' cy='7' r='1'/><circle cx='16' cy='9' r='1'/>" },
|
|
133
|
+
{ key: "wheat", keywords: ["agriculture", "farm", "organic", "grain", "harvest", "crop", "wheat", "rural"], svg: "<path d='M12 21 V9 M12 9 C10 9 9 7 9 5 C11 5 12 7 12 9 C12 7 13 5 15 5 C15 7 14 9 12 9 M12 13 C10 13 9 11 9 9 M12 13 C14 13 15 11 15 9 M12 17 C10 17 9 15 9 13 M12 17 C14 17 15 15 15 13'/>" },
|
|
134
|
+
{ key: "umbrella", keywords: ["insurance", "protection", "weather", "umbrella", "coverage", "safe", "shelter"], svg: "<path d='M12 3 A9 6 0 0 1 21 9 H3 A9 6 0 0 1 12 3 Z'/><path d='M12 9 V19 A2 2 0 0 1 8 19'/>" },
|
|
135
|
+
{ key: "tooth", keywords: ["dental", "dentist", "tooth", "orthodontics", "oral", "clinic", "smile"], svg: "<path d='M12 3 C8 3 6 5 6 8 C6 12 7 21 9 21 C10.5 21 10 15 12 15 C14 15 13.5 21 15 21 C17 21 18 12 18 8 C18 5 16 3 12 3 Z'/>" },
|
|
136
|
+
{ key: "glasses", keywords: ["optometry", "eyewear", "glasses", "vision", "optical", "fashion", "sunglasses"], svg: "<circle cx='6' cy='13' r='3'/><circle cx='18' cy='13' r='3'/><path d='M9 13 H15 M3 11 L5 8 H8 M21 11 L19 8 H16'/>" },
|
|
137
|
+
{ key: "headphones", keywords: ["audio", "dj", "music", "headphones", "support", "sound", "gaming", "helpdesk"], svg: "<path d='M4 14 V12 A8 8 0 0 1 20 12 V14'/><rect x='3' y='14' width='3' height='5' rx='1.2'/><rect x='18' y='14' width='3' height='5' rx='1.2'/>" },
|
|
138
|
+
{ key: "microphone", keywords: ["podcast", "audio", "voice", "media", "microphone", "recording", "radio", "singer"], svg: "<rect x='9' y='3' width='6' height='11' rx='3'/><path d='M6 11 A6 6 0 0 0 18 11 M12 17 V21 M9 21 H15'/>" },
|
|
139
|
+
{ key: "hardhat", keywords: ["construction", "build", "contractor", "hardhat", "engineering", "safety", "builder"], svg: "<path d='M4 16 A8 8 0 0 1 20 16 Z'/><path d='M10 8 V4 H14 V8 M2 16 H22'/>" },
|
|
140
|
+
{ key: "people", keywords: ["team", "hr", "community", "people", "agency", "group", "social", "recruiting", "network"], svg: "<circle cx='8' cy='8' r='3'/><circle cx='16' cy='8' r='3'/><path d='M3 20 C3 15 6 14 8 14 C10 14 13 15 13 20 M11 20 C11 16 14 14 16 14 C18 14 21 15 21 20'/>" },
|
|
141
|
+
{ key: "gem", keywords: ["jewelry", "luxury", "gem", "diamond", "premium", "beauty", "boutique", "crystal"], svg: "<path d='M6 3 H18 L22 9 L12 21 L2 9 Z'/><path d='M2 9 H22 M6 3 L9 9 M18 3 L15 9 M9 9 L12 21 L15 9'/>" },
|
|
142
|
+
{ key: "anchor", keywords: ["marine", "nautical", "anchor", "travel", "boat", "sea", "harbor", "shipping"], svg: "<circle cx='12' cy='5' r='2'/><path d='M12 7 V21 M5 13 A7 7 0 0 0 19 13 M8 10 H16'/>" },
|
|
143
|
+
{ key: "compass", keywords: ["travel", "navigation", "compass", "adventure", "explore", "direction", "outdoor", "guide"], svg: "<circle cx='12' cy='12' r='9'/><path d='M15 9 L11 11 L9 15 L13 13 Z'/>" },
|
|
144
|
+
{ key: "spray", keywords: ["cleaning", "service", "spray", "hygiene", "sanitize", "laundry", "housekeeping"], svg: "<rect x='7' y='8' width='6' height='12' rx='1'/><path d='M8 8 V5 H12 V8 M13 6 H16 M13 4 H16 M13 8 H16'/>" },
|
|
145
|
+
{ key: "battery", keywords: ["energy", "power", "battery", "ev", "charge", "electric", "tech", "solar"], svg: "<rect x='3' y='8' width='16' height='8' rx='2'/><path d='M21 11 V13 M6 11 V13 M9 11 V13 M12 11 V13'/>" }
|
|
91
146
|
];
|
|
92
147
|
|
|
93
148
|
// src/data/moods.json
|
|
@@ -103,7 +158,11 @@ var moods_default = [
|
|
|
103
158
|
{ id: "finance", name: "Finance", keywords: ["finance", "bank", "invest", "fintech", "money", "trade", "capital", "wealth"], paletteMood: ["finance", "trust", "corporate", "luxe"], fontMood: ["corporate", "modern", "tech"], shapes: ["shield", "hexagon", "rounded"], layouts: ["icon-left", "wordmark-only"], engines: ["monogram", "wordmark", "abstract"] },
|
|
104
159
|
{ id: "creative", name: "Creative", keywords: ["creative", "art", "studio", "design", "agency", "media", "brand", "photography"], paletteMood: ["creative", "bold", "elegant"], fontMood: ["creative", "editorial", "modern"], shapes: ["squircle", "blob", "circle"], layouts: ["icon-top", "icon-left"], engines: ["abstract", "wordmark", "monogram"] },
|
|
105
160
|
{ id: "heritage", name: "Heritage", keywords: ["heritage", "classic", "traditional", "craft", "artisan", "vintage", "estate", "co"], paletteMood: ["heritage", "warm", "earthy", "luxe"], fontMood: ["heritage", "craft", "elegant"], shapes: ["seal", "circle", "shield"], layouts: ["emblem", "icon-top"], engines: ["emblem", "monogram", "wordmark"] },
|
|
106
|
-
{ id: "modern", name: "Modern", keywords: ["modern", "business", "company", "professional", "corporate", "service", "solutions"], paletteMood: ["tech", "corporate", "modern", "trust"], fontMood: ["modern", "clean", "startup"], shapes: ["rounded", "squircle", "circle"], layouts: ["icon-left", "icon-top"], engines: ["wordmark", "monogram", "abstract"] }
|
|
161
|
+
{ id: "modern", name: "Modern", keywords: ["modern", "business", "company", "professional", "corporate", "service", "solutions"], paletteMood: ["tech", "corporate", "modern", "trust"], fontMood: ["modern", "clean", "startup"], shapes: ["rounded", "squircle", "circle"], layouts: ["icon-left", "icon-top"], engines: ["wordmark", "monogram", "abstract"] },
|
|
162
|
+
{ id: "education", name: "Education", keywords: ["education", "school", "university", "academy", "learn", "course", "student", "tutoring", "training", "elearning"], paletteMood: ["clean", "trust", "friendly", "calm"], fontMood: ["education", "clean", "friendly"], shapes: ["rounded", "circle", "shield"], layouts: ["icon-left", "icon-top"], engines: ["wordmark", "monogram", "emblem"] },
|
|
163
|
+
{ id: "legal", name: "Legal", keywords: ["legal", "law", "attorney", "court", "justice", "compliance", "lawyer", "advocate", "firm", "notary"], paletteMood: ["corporate", "trust", "luxe", "heritage"], fontMood: ["legal", "corporate", "elegant", "editorial"], shapes: ["shield", "seal", "circle"], layouts: ["icon-left", "emblem"], engines: ["emblem", "monogram", "wordmark"] },
|
|
164
|
+
{ id: "realestate", name: "Real Estate", keywords: ["realestate", "property", "estate", "housing", "rent", "homes", "realty", "broker", "apartments", "land"], paletteMood: ["luxe", "trust", "calm", "corporate"], fontMood: ["elegant", "modern", "corporate"], shapes: ["rounded", "hexagon", "shield"], layouts: ["icon-left", "icon-top"], engines: ["wordmark", "monogram", "abstract"] },
|
|
165
|
+
{ id: "kids", name: "Kids", keywords: ["kids", "children", "toy", "daycare", "baby", "nursery", "preschool", "playgroup", "cartoon"], paletteMood: ["playful", "friendly", "warm", "beauty"], fontMood: ["kids", "playful", "friendly"], shapes: ["blob", "squircle", "rounded"], layouts: ["icon-top", "icon-left"], engines: ["wordmark", "monogram", "abstract"] }
|
|
107
166
|
];
|
|
108
167
|
|
|
109
168
|
// src/data/keywords.json
|
|
@@ -723,10 +782,106 @@ function suggest(brief) {
|
|
|
723
782
|
return generateLogo(brief).interpreted;
|
|
724
783
|
}
|
|
725
784
|
|
|
785
|
+
// src/brand.ts
|
|
786
|
+
var FAVICON_SIZES = [16, 32, 48, 64, 180, 192, 512];
|
|
787
|
+
function resize(svg, size) {
|
|
788
|
+
return svg.replace(/width="[^"]*"/, `width="${size}"`).replace(/height="[^"]*"/, `height="${size}"`);
|
|
789
|
+
}
|
|
790
|
+
function generateFavicon(brief, sizes = FAVICON_SIZES) {
|
|
791
|
+
const base = generateLogo(brief);
|
|
792
|
+
const mark = generateLogo({
|
|
793
|
+
...brief,
|
|
794
|
+
seed: base.seed,
|
|
795
|
+
palette: brief.palette ?? base.palette.id,
|
|
796
|
+
engine: base.icon ? "wordmark" : "monogram",
|
|
797
|
+
icon: base.icon,
|
|
798
|
+
shape: brief.shape && brief.shape !== "none" ? brief.shape : "squircle",
|
|
799
|
+
layout: "mark-only",
|
|
800
|
+
background: "gradient",
|
|
801
|
+
size: 512
|
|
802
|
+
});
|
|
803
|
+
const links = `<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
|
804
|
+
<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png">
|
|
805
|
+
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">`;
|
|
806
|
+
return {
|
|
807
|
+
svg: mark.svg,
|
|
808
|
+
sizes: sizes.map((s) => ({ size: s, svg: resize(mark.svg, s) })),
|
|
809
|
+
links,
|
|
810
|
+
manifestIcons: [192, 512].map((s) => ({ src: `/icon-${s}.png`, sizes: `${s}x${s}`, type: "image/png" }))
|
|
811
|
+
};
|
|
812
|
+
}
|
|
813
|
+
function cssVars(p, f) {
|
|
814
|
+
return [
|
|
815
|
+
":root {",
|
|
816
|
+
` --brand-bg: ${p.bg};`,
|
|
817
|
+
` --brand-surface: ${p.surface};`,
|
|
818
|
+
` --brand-primary: ${p.primary};`,
|
|
819
|
+
` --brand-accent: ${p.accent};`,
|
|
820
|
+
` --brand-on: ${p.on};`,
|
|
821
|
+
` --brand-gradient: linear-gradient(60deg, ${p.from}, ${p.to});`,
|
|
822
|
+
` --brand-font-display: ${f.stack};`,
|
|
823
|
+
"}"
|
|
824
|
+
].join("\n");
|
|
825
|
+
}
|
|
826
|
+
function generateBrandKit(brief) {
|
|
827
|
+
const base = generateLogo({ ...brief, layout: "icon-left" });
|
|
828
|
+
const lock = {
|
|
829
|
+
seed: base.seed,
|
|
830
|
+
palette: brief.palette ?? base.palette.id,
|
|
831
|
+
font: brief.font ?? base.font.id,
|
|
832
|
+
engine: base.engine,
|
|
833
|
+
icon: base.icon,
|
|
834
|
+
shape: base.shape,
|
|
835
|
+
keywords: brief.keywords,
|
|
836
|
+
industry: brief.industry
|
|
837
|
+
};
|
|
838
|
+
const variant = (layout, background2 = "surface") => generateLogo({ ...brief, ...lock, layout, background: background2 });
|
|
839
|
+
return {
|
|
840
|
+
name: base.name,
|
|
841
|
+
primary: variant("icon-left"),
|
|
842
|
+
stacked: variant("icon-top"),
|
|
843
|
+
mark: variant("mark-only", "gradient"),
|
|
844
|
+
wordmark: variant("wordmark-only", "transparent"),
|
|
845
|
+
mono: generateLogo({ ...brief, ...lock, palette: "slate-mono", layout: "icon-left", background: "transparent" }),
|
|
846
|
+
favicon: generateFavicon({ ...brief, ...lock }),
|
|
847
|
+
palette: base.palette,
|
|
848
|
+
font: base.font,
|
|
849
|
+
colors: [
|
|
850
|
+
{ role: "primary", hex: base.palette.primary },
|
|
851
|
+
{ role: "accent", hex: base.palette.accent },
|
|
852
|
+
{ role: "gradient-from", hex: base.palette.from },
|
|
853
|
+
{ role: "gradient-to", hex: base.palette.to },
|
|
854
|
+
{ role: "surface", hex: base.palette.surface },
|
|
855
|
+
{ role: "on", hex: base.palette.on }
|
|
856
|
+
],
|
|
857
|
+
css: cssVars(base.palette, base.font)
|
|
858
|
+
};
|
|
859
|
+
}
|
|
860
|
+
|
|
861
|
+
// src/animate.ts
|
|
862
|
+
function animateLogo(input, opts = {}) {
|
|
863
|
+
const result = "svg" in input ? input : generateLogo(input);
|
|
864
|
+
const w = result.width;
|
|
865
|
+
const h = result.height;
|
|
866
|
+
const dur = opts.duration ?? 1500;
|
|
867
|
+
const iter = opts.loop ? "infinite" : "1";
|
|
868
|
+
const shimmer = opts.shimmer !== false;
|
|
869
|
+
const style = `<style>@keyframes lac-in{0%{opacity:0;transform:scale(.9)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}@keyframes lac-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes lac-shim{0%{transform:translateX(${(-w * 0.6).toFixed(0)}px) skewX(-16deg)}55%{transform:translateX(${(w * 1.2).toFixed(0)}px) skewX(-16deg)}100%{transform:translateX(${(w * 1.2).toFixed(0)}px) skewX(-16deg)}}.lac-root{transform-origin:50% 50%;animation:lac-in ${dur}ms cubic-bezier(.2,.75,.2,1) ${iter} both,lac-wipe ${Math.round(dur * 0.7)}ms cubic-bezier(.4,0,.2,1) ${iter} both}.lac-shim{animation:lac-shim ${Math.round(dur * 1.25)}ms ease ${iter} both;mix-blend-mode:overlay}@media(prefers-reduced-motion:reduce){.lac-root{animation:none;clip-path:none}.lac-shim{display:none}}</style>`;
|
|
870
|
+
const shimDefs = shimmer ? `<linearGradient id="lac-shim-g" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset=".5" stop-color="#fff" stop-opacity=".55"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient>` : "";
|
|
871
|
+
const shimRect = shimmer ? `<rect class="lac-shim" x="0" y="0" width="${(w * 0.4).toFixed(0)}" height="${h}" fill="url(#lac-shim-g)"/>` : "";
|
|
872
|
+
let svg = result.svg.replace(/^<svg /, `<svg class="lac-root" `);
|
|
873
|
+
svg = svg.replace(/(<svg\b[^>]*>)/, `$1${style}<defs>${shimDefs}</defs>`);
|
|
874
|
+
svg = svg.replace(/<\/svg>\s*$/, `${shimRect}</svg>`);
|
|
875
|
+
return svg;
|
|
876
|
+
}
|
|
877
|
+
|
|
726
878
|
exports.FONTS = FONTS;
|
|
727
879
|
exports.ICONS = ICONS;
|
|
728
880
|
exports.MOODS = MOODS;
|
|
729
881
|
exports.PALETTES = PALETTES;
|
|
882
|
+
exports.animateLogo = animateLogo;
|
|
883
|
+
exports.generateBrandKit = generateBrandKit;
|
|
884
|
+
exports.generateFavicon = generateFavicon;
|
|
730
885
|
exports.generateLogo = generateLogo;
|
|
731
886
|
exports.generateLogoSet = generateLogoSet;
|
|
732
887
|
exports.initials = initials;
|