DFT-HungáriaDigitális fejlesztések
← Chief Concept

Redesign the complete icon system of the Chief Concept "04 Apokalüpszisz" (v3) website — and make it the icon set that gets you hired as a world-class icon and motion designer, like the showreel piece of your career. Every single icon hand-crafted, optically balanced, conceptually meaningful, and alive with motion that only this concept could have. Go all in.

═══ THE CONCEPT YOU ARE DESIGNING FOR ═══ Chief Concept is Dr. Csikesz Tamás's premium "concept creator" consultancy (owners, top executives, key leaders). Concept 04 "Apokalüpszisz" means revealing what is hidden ("feltárjuk azt, ami rejtve van, és tiszta, világos kezdőpontról indítjuk a fejlesztést"). Its visual idea: dark-first; the CC logo splits open in the middle and a vertical beam of light uncovers the content. Current tokens (keep them): background #111113 / #141416 / #1A1A1D · surface border #34343A · ink #F2F2F4 · secondary #98989F / #6E6E75 · accent light blue #8AB8FF · SF Pro Display/Text. Icons sit in 50% round containers (bg #111113, 1px #34343A border).

═══ WHAT'S WRONG TODAY ═══ The current 49 icons are generic 24×24 line pictograms (chart, gear, bolt, bulb, key…) with a uniform 1.5 stroke, the last stroke tinted #8AB8FF, a drop-shadow glow and an infinite glow/scan loop. They look like a stock icon pack — nothing about them says "Apokalüpszisz", several metaphors are clichés (lightbulb = idea, gear = operations), weights and optical sizes are inconsistent, and the endless looping is noisy.

═══ THE NEW ICON LANGUAGE (define it, then apply it to every icon) ═══

  • One idea runs through the whole set: REVELATION. Every icon is built so that part of it is "hidden" and part "revealed" — e.g. a precise vertical split/seam (echoing the logo that splits open), an outline half that becomes solid, or a form emerging from darkness. The #8AB8FF accent is used ONLY for the revealed part — the insight.
  • Grid: 24×24 with a 2px safe area, keylines for circle/square/portrait/landscape, optical corrections so every icon has equal visual weight. Stroke 1.5 (also test at 1.25 for 16px and 2 for 40px+), round caps/joins unless a sharp corner carries meaning.
  • Metaphors: avoid clichés. Find metaphors that fit a consultancy for leaders about change, renewal and levelling-up (paradigmaváltás, vízió, rendszer, sztenderd, megoldás…). Each icon must still be instantly readable at 20px.
  • Must look premium on the dark UI and also work single-colour (currentColor) on light backgrounds.

═══ MOTION (per icon, on reveal — not infinite) ═══

  • Signature entrance: the icon is "uncovered" — the seam opens / a light edge sweeps across / strokes draw from the split outward, then the accent part lights up last. 600–900ms, cubic-bezier(.15,.85,.35,1), staggered stroke timing.
  • Hover: a subtle, meaningful micro-interaction per icon (e.g. the compass needle settles, the key turns a few degrees, the eye opens wider) — ≤ 400ms.
  • Idle: NO infinite loops by default. At most one very slow, optional "breathing" of the accent (can be disabled), never a scanning beam on every icon.
  • Only transform, opacity and stroke-dashoffset; must stay smooth with 20+ icons on screen in Safari. prefers-reduced-motion → static final icon.

═══ THE FULL SET (redesign all 49, keep these exact keys) ═══ chart, gear, refresh, key, bolt, compass, eye, sunrise, bulb, nodes, switch, check, personUp, shield, mind, gauge, map, gem, flow, people, forward, grid, doc, chip, search, cross, flag, sprout, stairs, monitor, chat, board, meet, docs, doc2, ruler, idcard, spark, clock, hourglass, target, crown, building, columns, overlap, mail, phone, play, film PLUS add the 2 that are missing today (the bottom navigation asks for them and currently falls back to "spark"): home (Kezdőlap), fee (Díjazás – hourly fee / pricing). You may rethink what each key depicts to fit its meaning on the site better (e.g. "bulb" for Ötletteremtő, "gear" for Működésfejlesztő), but keep the key names so they drop into the existing code.

Where they're used (design with meaning, not just shape):

  • Bottom nav: home · grid (Tanácsadás) · people (Koncepcióalkotók) · fee (Díjazás) · mail (Kapcsolat)
  • 12 CCC roles: Üzletfejlesztő, Működésfejlesztő, Megújító, Megoldó, Generátor, Fejlesztő, Apokalüpszisz (the signature icon of the set!), Vízióalkotó, Ötletteremtő, Koncepcióalkotó, Rendszerváltó, Sztenderdizátor + the "AI és HI" highlight card
  • 12 consulting areas, the 4-step development system, 14 service formats, the slogans panel, pricing and contact (mail, phone), video/film items

═══ DELIVER ═══

  1. An icon specimen page (live, dark theme): all 51 icons large (48px) and at real sizes (20/24/32px), on dark and on light, each labelled with its key and meaning — plus the grid/keyline sheet and the construction rules.
  2. Each icon's entrance + hover animation playable on the specimen page (click/hover to replay).
  3. DROP-IN CODE in exactly the current format of _build/icons.js so the site's generator keeps working unchanged:

    const LIB = { key: ['path d 1', 'path d 2', …], … } — 24×24 viewBox, fill:none strokes, and THE LAST PATH OF EACH ICON IS THE ACCENT (#8AB8FF). Include home and fee. If an icon needs a filled shape or a circle, express it as a path (circles like M x-r y A r r 0 1 0 x+r y A r r 0 1 0 x-r y).

  4. The updated '04' style config object (bg, bd, rad, ink, acc, sw, cap, join, anim, glow, svgAnim) and the CSS keyframes for the new entrance/hover, replacing the infinite ccGlow/ccScan loops.
  5. A one-page rationale: the icon language, grid, stroke/optical rules and the metaphor chosen for each icon (one line each), so future icons stay consistent.

Letöltés Markdown fájlként