letsbe
/
kalei
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
kalei/initial mockups/assets/icons-distortions.svg

187 lines
10 KiB
XML
Raw Normal View History

Reorganize docs, add mockup assets and research materials - Restructure docs/ into brand/, build-phases/, product/, technical/ subdirectories - Add consolidated Phase 1 & 2 build plan - Add complete user journey, architecture diagrams, and build framework docs - Add science foundation document - Add initial mockup assets (11 SVGs, design system CSS, implementation instructions) - Add logo mockup finalists and semi-finalists - Add academic research PDFs for scientific foundation - Add screen directory structure for 64 planned mockup screens Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-21 22:58:58 +01:00
<svg viewBox="0 0 560 320" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="gAmber" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="1.8" result="b"/>
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<linearGradient id="amberGr" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#FDE68A"/>
<stop offset="100%" stop-color="#D97706"/>
</linearGradient>
<style>
text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
.lbl { font-size: 9px; fill: #94A3B8; text-anchor: middle; font-weight: 500; }
</style>
</defs>
<rect width="560" height="320" fill="#050508"/>
<text x="280" y="24" font-size="12" font-weight="600" fill="#94A3B8" text-anchor="middle" letter-spacing="0.12em">COGNITIVE DISTORTION ICONS</text>
<text x="280" y="38" font-size="9" fill="#475569" text-anchor="middle">10 fragment types — Amber (#F59E0B) default, each with unique crystalline geometry</text>
<!-- Row 1: 5 icons -->
<!-- Each icon is 24x24, rendered in a 100x100 cell with label -->
<!-- 1. CATASTROPHIZING — A downward-cascading shard breaking into pieces -->
<g transform="translate(28, 60)" filter="url(#gAmber)">
<g transform="translate(12,12)">
<!-- Main shard falling -->
<path d="M 0,-10 L 5,0 L 0,10 L -5,0 Z" fill="url(#amberGr)" opacity="0.9"/>
<path d="M 0,-10 L 5,0 L -5,0 Z" fill="#fff" opacity="0.15"/>
<!-- Smaller fragment broken off, lower-left -->
<path d="M -8,6 L -5,10 L -9,12 L -11,8 Z" fill="#F59E0B" opacity="0.5"/>
<!-- Smaller fragment, lower-right -->
<path d="M 7,8 L 10,12 L 8,14 L 5,11 Z" fill="#F59E0B" opacity="0.4"/>
<!-- Downward motion lines -->
<line x1="0" y1="11" x2="0" y2="16" stroke="#FCD34D" stroke-width="0.5" opacity="0.4"/>
<line x1="-3" y1="12" x2="-5" y2="17" stroke="#FCD34D" stroke-width="0.4" opacity="0.3"/>
<line x1="3" y1="12" x2="5" y2="17" stroke="#FCD34D" stroke-width="0.4" opacity="0.3"/>
</g>
<text x="12" y="42" class="lbl">Catastrophizing</text>
</g>
<!-- 2. BLACK-AND-WHITE — A diamond split in half: one side filled, one side outline -->
<g transform="translate(140, 60)" filter="url(#gAmber)">
<g transform="translate(12,12)">
<!-- Left half: filled -->
<path d="M 0,-10 L -7,0 L 0,10 L 0,0 Z" fill="url(#amberGr)" opacity="0.85"/>
<!-- Right half: outline only -->
<path d="M 0,-10 L 7,0 L 0,10 L 0,0 Z" fill="none" stroke="#F59E0B" stroke-width="1"/>
<!-- Center dividing line -->
<line x1="0" y1="-10" x2="0" y2="10" stroke="#FEF3C7" stroke-width="0.6" opacity="0.5"/>
<!-- Top facet highlight on filled side -->
<path d="M 0,-10 L -7,0 L 0,0 Z" fill="#fff" opacity="0.12"/>
</g>
<text x="12" y="42" class="lbl">Black-and-White</text>
</g>
<!-- 3. MIND READING — A hexagonal head with a small eye/diamond inside -->
<g transform="translate(252, 60)" filter="url(#gAmber)">
<g transform="translate(12,12)">
<!-- Hexagonal head outline -->
<path d="M 0,-10 L 8,-5 L 8,5 L 0,10 L -8,5 L -8,-5 Z" fill="none" stroke="#F59E0B" stroke-width="1" opacity="0.7"/>
<!-- Inner diamond (the "read" thought) -->
<path d="M 0,-4 L 4,0 L 0,4 L -4,0 Z" fill="url(#amberGr)" opacity="0.8"/>
<path d="M 0,-4 L 4,0 L -4,0 Z" fill="#fff" opacity="0.15"/>
<!-- Radiating lines from inner diamond (thought waves) -->
<line x1="5" y1="-3" x2="9" y2="-6" stroke="#FCD34D" stroke-width="0.4" opacity="0.35"/>
<line x1="5" y1="3" x2="9" y2="6" stroke="#FCD34D" stroke-width="0.4" opacity="0.35"/>
<line x1="-5" y1="-3" x2="-9" y2="-6" stroke="#FCD34D" stroke-width="0.4" opacity="0.35"/>
</g>
<text x="12" y="42" class="lbl">Mind Reading</text>
</g>
<!-- 4. FORTUNE TELLING — A crystal ball shape with forward-pointing shard -->
<g transform="translate(364, 60)" filter="url(#gAmber)">
<g transform="translate(12,12)">
<!-- Crystal ball: faceted circle (octagon) -->
<path d="M 0,-9 L 6,-6 L 9,0 L 6,6 L 0,9 L -6,6 L -9,0 L -6,-6 Z" fill="none" stroke="#F59E0B" stroke-width="0.8" opacity="0.6"/>
<!-- Inner glow -->
<circle cx="0" cy="0" r="4" fill="#F59E0B" opacity="0.15"/>
<!-- Forward arrow shard -->
<path d="M 2,0 L 10,-3 L 14,0 L 10,3 Z" fill="url(#amberGr)" opacity="0.8"/>
<path d="M 2,0 L 10,-3 L 14,0 Z" fill="#fff" opacity="0.12"/>
<!-- Base -->
<path d="M -5,9 L 5,9 L 3,12 L -3,12 Z" fill="#F59E0B" opacity="0.3"/>
</g>
<text x="12" y="42" class="lbl">Fortune Telling</text>
</g>
<!-- 5. PERSONALIZATION — Inward-pointing shard arrows converging on center -->
<g transform="translate(476, 60)" filter="url(#gAmber)">
<g transform="translate(12,12)">
<!-- Center dot -->
<circle cx="0" cy="0" r="2.5" fill="url(#amberGr)" opacity="0.8"/>
<!-- Four inward-pointing shards -->
<path d="M 0,-12 L 2,-6 L 0,-4 L -2,-6 Z" fill="#F59E0B" opacity="0.7"/>
<path d="M 12,0 L 6,2 L 4,0 L 6,-2 Z" fill="#F59E0B" opacity="0.6"/>
<path d="M 0,12 L -2,6 L 0,4 L 2,6 Z" fill="#F59E0B" opacity="0.6"/>
<path d="M -12,0 L -6,-2 L -4,0 L -6,2 Z" fill="#F59E0B" opacity="0.7"/>
<!-- Subtle connecting lines -->
<line x1="0" y1="-4" x2="0" y2="-2.5" stroke="#FCD34D" stroke-width="0.4" opacity="0.3"/>
<line x1="4" y1="0" x2="2.5" y2="0" stroke="#FCD34D" stroke-width="0.4" opacity="0.3"/>
</g>
<text x="12" y="42" class="lbl">Personalization</text>
</g>
<!-- Row 2: 5 icons -->
<!-- 6. DISCOUNTING POSITIVES — A star/gem shape with a line through it -->
<g transform="translate(28, 180)" filter="url(#gAmber)">
<g transform="translate(12,12)">
<!-- 6-pointed star -->
<path d="M 0,-10 L 3,-4 L 9,-4 L 5,1 L 7,7 L 0,4 L -7,7 L -5,1 L -9,-4 L -3,-4 Z" fill="url(#amberGr)" opacity="0.5"/>
<path d="M 0,-10 L 3,-4 L -3,-4 Z" fill="#fff" opacity="0.1"/>
<!-- Strike-through line (discounting) -->
<line x1="-10" y1="4" x2="10" y2="-4" stroke="#FEF3C7" stroke-width="1.2" opacity="0.7"/>
<!-- Dimmed effect on the star -->
<path d="M 0,-10 L 3,-4 L 9,-4 L 5,1 L 7,7 L 0,4 L -7,7 L -5,1 L -9,-4 L -3,-4 Z" fill="#050508" opacity="0.3"/>
</g>
<text x="12" y="42" class="lbl">Discounting +</text>
</g>
<!-- 7. EMOTIONAL REASONING — A heart shape made of angular geometry with = sign -->
<g transform="translate(140, 180)" filter="url(#gAmber)">
<g transform="translate(12,12)">
<!-- Angular heart: two triangles forming a V-heart -->
<path d="M 0,8 L -8,-1 L -5,-7 L 0,-3 L 5,-7 L 8,-1 Z" fill="url(#amberGr)" opacity="0.7"/>
<path d="M 0,-3 L -5,-7 L -8,-1 Z" fill="#fff" opacity="0.12"/>
<!-- Equals sign next to it -->
<line x1="9" y1="-2" x2="14" y2="-2" stroke="#FCD34D" stroke-width="1" opacity="0.6"/>
<line x1="9" y1="2" x2="14" y2="2" stroke="#FCD34D" stroke-width="1" opacity="0.6"/>
</g>
<text x="12" y="42" class="lbl">Emotional Reasoning</text>
</g>
<!-- 8. SHOULD STATEMENTS — A rigid angular ruler/bracket shape -->
<g transform="translate(252, 180)" filter="url(#gAmber)">
<g transform="translate(12,12)">
<!-- Rigid L-bracket -->
<path d="M -6,-10 L -6,10 L 6,10" fill="none" stroke="#F59E0B" stroke-width="1.2" stroke-linejoin="miter"/>
<!-- Tick marks along the ruler -->
<line x1="-6" y1="-6" x2="-3" y2="-6" stroke="#FCD34D" stroke-width="0.6" opacity="0.5"/>
<line x1="-6" y1="-2" x2="-3" y2="-2" stroke="#FCD34D" stroke-width="0.6" opacity="0.5"/>
<line x1="-6" y1="2" x2="-3" y2="2" stroke="#FCD34D" stroke-width="0.6" opacity="0.5"/>
<line x1="-6" y1="6" x2="-3" y2="6" stroke="#FCD34D" stroke-width="0.6" opacity="0.5"/>
<!-- Angular exclamation inside -->
<path d="M 2,-4 L 3,-1 L 1,-1 Z" fill="#FCD34D" opacity="0.6"/>
<circle cx="2" cy="1" r="0.8" fill="#FCD34D" opacity="0.6"/>
</g>
<text x="12" y="42" class="lbl">Should Statements</text>
</g>
<!-- 9. LABELING — An angular tag/label shape -->
<g transform="translate(364, 180)" filter="url(#gAmber)">
<g transform="translate(12,12)">
<!-- Tag shape: pentagon pointing right -->
<path d="M -8,-7 L 5,-7 L 10,0 L 5,7 L -8,7 Z" fill="url(#amberGr)" opacity="0.6"/>
<path d="M -8,-7 L 5,-7 L 10,0 Z" fill="#fff" opacity="0.1"/>
<!-- Hole in tag -->
<circle cx="-3" cy="0" r="2" fill="#050508" opacity="0.6" stroke="#FCD34D" stroke-width="0.5"/>
<!-- Inner line -->
<line x1="1" y1="-3" x2="1" y2="3" stroke="#FEF3C7" stroke-width="0.4" opacity="0.3"/>
</g>
<text x="12" y="42" class="lbl">Labeling</text>
</g>
<!-- 10. OVERGENERALIZATION — One dot replicating into many -->
<g transform="translate(476, 180)" filter="url(#gAmber)">
<g transform="translate(12,12)">
<!-- Single source diamond -->
<path d="M -10,0 L -7,-3 L -4,0 L -7,3 Z" fill="url(#amberGr)" opacity="0.9"/>
<path d="M -10,0 L -7,-3 L -4,0 Z" fill="#fff" opacity="0.15"/>
<!-- Arrow -->
<line x1="-3" y1="0" x2="0" y2="0" stroke="#FCD34D" stroke-width="0.5" opacity="0.4"/>
<!-- Multiple replicated diamonds (spreading out) -->
<path d="M 2,-6 L 4,-8 L 6,-6 L 4,-4 Z" fill="#F59E0B" opacity="0.7"/>
<path d="M 4,0 L 6,-2 L 8,0 L 6,2 Z" fill="#F59E0B" opacity="0.6"/>
<path d="M 2,6 L 4,4 L 6,6 L 4,8 Z" fill="#F59E0B" opacity="0.5"/>
<path d="M 8,-4 L 10,-6 L 12,-4 L 10,-2 Z" fill="#F59E0B" opacity="0.4"/>
<path d="M 8,4 L 10,2 L 12,4 L 10,6 Z" fill="#F59E0B" opacity="0.35"/>
</g>
<text x="12" y="42" class="lbl">Overgeneralization</text>
</g>
<!-- Color reference -->
<text x="280" y="278" font-size="9" fill="#475569" text-anchor="middle">Primary: #F59E0B (Amber) — Gradient: #FDE68A to #D97706 — Highlight: #FCD34D</text>
<text x="280" y="292" font-size="9" fill="#475569" text-anchor="middle">All icons 24x24px — Glow filter for active/detected state — Outlined for reference/guide</text>
</svg>