|
<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1100" viewBox="0 0 1600 1100" role="img" aria-labelledby="title desc"> |
|
<title id="title">Artifact-first faction studio concept</title> |
|
<desc id="desc">A desktop faction editor mockup with an artifact rail, interactive rendered canvas, contextual field inspector, and a visible background composition pipeline.</desc> |
|
<defs> |
|
<linearGradient id="pageBg" x1="0%" y1="0%" x2="100%" y2="100%"> |
|
<stop offset="0" stop-color="#f7f2e8"/> |
|
<stop offset="1" stop-color="#eee4d3"/> |
|
</linearGradient> |
|
<linearGradient id="artifactBg" x1="0%" y1="0%" x2="100%" y2="100%"> |
|
<stop offset="0" stop-color="#12302d"/> |
|
<stop offset="1" stop-color="#2a6760"/> |
|
</linearGradient> |
|
<linearGradient id="patternColor" x1="0%" y1="0%" x2="100%" y2="100%"> |
|
<stop offset="0" stop-color="#e7b44f"/> |
|
<stop offset="1" stop-color="#bd6b32"/> |
|
</linearGradient> |
|
<linearGradient id="resultBg" x1="0%" y1="0%" x2="100%" y2="100%"> |
|
<stop offset="0" stop-color="#143c36"/> |
|
<stop offset="1" stop-color="#2e7167"/> |
|
</linearGradient> |
|
<pattern id="waves" width="30" height="24" patternUnits="userSpaceOnUse"> |
|
<path d="M-8 10 Q0 2 8 10 T24 10 T40 10" fill="none" stroke="#f1c463" stroke-width="4" opacity=".75"/> |
|
<path d="M-8 22 Q0 14 8 22 T24 22 T40 22" fill="none" stroke="#d88b3f" stroke-width="3" opacity=".7"/> |
|
</pattern> |
|
<pattern id="wavesMono" width="24" height="18" patternUnits="userSpaceOnUse"> |
|
<path d="M-6 8 Q0 2 6 8 T18 8 T30 8" fill="none" stroke="#584b39" stroke-width="3"/> |
|
<path d="M-6 17 Q0 11 6 17 T18 17 T30 17" fill="none" stroke="#584b39" stroke-width="2"/> |
|
</pattern> |
|
<pattern id="grid" width="18" height="18" patternUnits="userSpaceOnUse"> |
|
<path d="M18 0H0V18" fill="none" stroke="#dfd4c4" stroke-width="1"/> |
|
</pattern> |
|
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%"> |
|
<feDropShadow dx="0" dy="3" stdDeviation="8" flood-color="#3a2e20" flood-opacity=".14"/> |
|
</filter> |
|
<filter id="smallShadow" x="-20%" y="-20%" width="140%" height="140%"> |
|
<feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#2f2518" flood-opacity=".18"/> |
|
</filter> |
|
<marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"> |
|
<path d="M0 0L10 5L0 10Z" fill="#9a8060"/> |
|
</marker> |
|
<clipPath id="tokenClip"><circle cx="703" cy="490" r="139"/></clipPath> |
|
<style> |
|
text { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; fill: #2f2923; } |
|
.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; fill: #846844; } |
|
.h1 { font-size: 25px; font-weight: 760; } |
|
.h2 { font-size: 16px; font-weight: 740; } |
|
.label { font-size: 12px; font-weight: 700; } |
|
.body { font-size: 12px; fill: #5c5349; } |
|
.small { font-size: 10.5px; fill: #74695d; } |
|
.tiny { font-size: 9px; fill: #776a5e; } |
|
.panel { fill: #fffdf9; stroke: #d9cdbd; stroke-width: 1; } |
|
.field { fill: #fff; stroke: #bba98f; stroke-width: 1; } |
|
.selected { fill: #f8edd5; stroke: #b77d26; stroke-width: 1.5; } |
|
.chip { fill: #f2eadf; stroke: #d5c6b3; stroke-width: 1; } |
|
</style> |
|
</defs> |
|
|
|
<rect width="1600" height="1100" fill="url(#pageBg)"/> |
|
|
|
<!-- Persistent application chrome --> |
|
<rect x="0" y="0" width="1600" height="48" fill="#25211d"/> |
|
<circle cx="27" cy="24" r="12" fill="#d5a449"/> |
|
<path d="M20 27L27 15L34 27L27 23Z" fill="#25211d"/> |
|
<text x="51" y="29" font-size="14" font-weight="780" fill="#fffaf0">DUNE ZONE</text> |
|
<text x="1250" y="29" font-size="12" fill="#d9cdbd">Catalogue</text> |
|
<text x="1335" y="29" font-size="12" fill="#d9cdbd">Rulesets</text> |
|
<circle cx="1450" cy="24" r="13" fill="#725d44"/> |
|
<text x="1472" y="29" font-size="12" fill="#fffaf0">Niels</text> |
|
|
|
<!-- Route header --> |
|
<rect x="0" y="48" width="1600" height="92" fill="#f1e4cf"/> |
|
<text x="32" y="75" class="eyebrow">Faction workshop</text> |
|
<text x="32" y="107" class="h1">Edit Fremen</text> |
|
<text x="32" y="128" class="body">Build the faction by working directly from the artifacts players will see.</text> |
|
<circle cx="1478" cy="94" r="30" fill="#20564f" stroke="#fff" stroke-width="4" filter="url(#smallShadow)"/> |
|
<path d="M1454 85Q1462 77 1470 85T1486 85T1502 85M1454 102Q1462 94 1470 102T1486 102T1502 102" fill="none" stroke="#d99a34" stroke-width="3" opacity=".8"/> |
|
<path d="M1461 99Q1478 72 1495 99Q1480 93 1461 99Z" fill="#fff2ca"/> |
|
|
|
<!-- Sticky route toolbar --> |
|
<g filter="url(#smallShadow)"> |
|
<rect x="0" y="140" width="1600" height="62" fill="#fffdf9" stroke="#d7c9b5"/> |
|
</g> |
|
<rect x="32" y="155" width="117" height="32" rx="16" fill="#f8edd5" stroke="#e3be79"/> |
|
<circle cx="49" cy="171" r="4" fill="#c88722"/> |
|
<text x="61" y="175" class="label">Unsaved changes</text> |
|
<text x="166" y="175" class="body">Last published 22 Jul 2026, 18:42</text> |
|
<rect x="1224" y="153" width="136" height="36" rx="6" fill="#fff" stroke="#bba98f"/> |
|
<path d="M1245 171h12m-6-6v12" stroke="#594c3e" stroke-width="1.5"/> |
|
<text x="1265" y="176" class="label">View published</text> |
|
<rect x="1372" y="153" width="196" height="36" rx="6" fill="#2f6e5f"/> |
|
<path d="M1393 171l6 6 11-13" fill="none" stroke="#fff" stroke-width="2"/> |
|
<text x="1420" y="176" font-size="12" font-weight="750" fill="#fff">Save & schedule publish</text> |
|
|
|
<!-- Main studio frame --> |
|
<rect x="24" y="222" width="1552" height="840" rx="12" fill="#f9f5ed" stroke="#d3c6b4"/> |
|
|
|
<!-- Artifact rail --> |
|
<rect x="24" y="222" width="238" height="840" rx="12" class="panel"/> |
|
<text x="44" y="254" class="eyebrow">Start from an output</text> |
|
<text x="44" y="280" class="h2">Artifact library</text> |
|
<text x="44" y="300" class="small">Choose what you want to shape.</text> |
|
|
|
<g> |
|
<rect x="38" y="320" width="210" height="70" rx="8" class="selected"/> |
|
<circle cx="71" cy="355" r="22" fill="#20564f"/> |
|
<path d="M52 349Q58 343 64 349T76 349T88 349M52 362Q58 356 64 362T76 362T88 362" fill="none" stroke="#d99a34" stroke-width="2.5" opacity=".8"/> |
|
<path d="M61 360Q71 341 81 360Q72 355 61 360Z" fill="#fff0bd"/> |
|
<text x="104" y="350" class="label">Faction token</text> |
|
<text x="104" y="370" class="small">4 editable elements</text> |
|
</g> |
|
|
|
<g> |
|
<rect x="38" y="400" width="210" height="58" rx="8" fill="#fff" stroke="#ded4c6"/> |
|
<rect x="51" y="412" width="37" height="34" rx="5" fill="#f3eadb" stroke="#cbbca7"/> |
|
<path d="M59 438V419h21v19M64 424h11M64 429h11" stroke="#756552" fill="none"/> |
|
<text x="104" y="426" class="label">Faction sheet</text> |
|
<text x="104" y="444" class="small">2 pages · 31 fields</text> |
|
</g> |
|
<g> |
|
<rect x="38" y="468" width="210" height="58" rx="8" fill="#fff" stroke="#ded4c6"/> |
|
<path d="M69 480l17 8-3 20-14 11-14-11-3-20Z" fill="#315e56"/> |
|
<circle cx="69" cy="498" r="8" fill="#efc15d"/> |
|
<text x="104" y="494" class="label">Faction shield</text> |
|
<text x="104" y="512" class="small">Leader, logo, background</text> |
|
</g> |
|
<g> |
|
<rect x="38" y="536" width="210" height="58" rx="8" fill="#fff" stroke="#ded4c6"/> |
|
<rect x="51" y="547" width="37" height="36" rx="5" fill="#244c46"/> |
|
<path d="M56 576l12-22 14 22" fill="none" stroke="#efbd56" stroke-width="2"/> |
|
<text x="104" y="562" class="label">Alliance card</text> |
|
<text x="104" y="580" class="small">Ability, troop, decals</text> |
|
</g> |
|
<g> |
|
<rect x="38" y="604" width="210" height="58" rx="8" fill="#fff" stroke="#ded4c6"/> |
|
<circle cx="63" cy="633" r="15" fill="#d2a64d"/> |
|
<circle cx="78" cy="633" r="15" fill="#315f56" opacity=".9"/> |
|
<text x="104" y="630" class="label">Leaders & traitors</text> |
|
<text x="104" y="648" class="small">Drag to order · 5 items</text> |
|
</g> |
|
<g> |
|
<rect x="38" y="672" width="210" height="58" rx="8" fill="#fff" stroke="#ded4c6"/> |
|
<circle cx="63" cy="701" r="14" fill="#315f56"/> |
|
<circle cx="79" cy="701" r="14" fill="#bd6b32"/> |
|
<text x="104" y="698" class="label">Troop tokens</text> |
|
<text x="104" y="716" class="small">Fronts, backs, counts</text> |
|
</g> |
|
<g> |
|
<rect x="38" y="740" width="210" height="58" rx="8" fill="#fff" stroke="#ded4c6"/> |
|
<circle cx="69" cy="769" r="18" fill="#eee2d0" stroke="#baa78d"/> |
|
<path d="M61 763h16M61 769h13M61 775h10" stroke="#796a58"/> |
|
<text x="104" y="766" class="label">Rules & setup</text> |
|
<text x="104" y="784" class="small">Text, spice, advantages</text> |
|
</g> |
|
<g> |
|
<rect x="38" y="808" width="210" height="58" rx="8" fill="#fff" stroke="#ded4c6"/> |
|
<circle cx="69" cy="837" r="18" fill="#e4d9cb"/> |
|
<path d="M60 837h18M69 828v18" stroke="#6d5c49"/> |
|
<text x="104" y="834" class="label">Faction data</text> |
|
<text x="104" y="852" class="small">Planets, TTS colors, metadata</text> |
|
</g> |
|
|
|
<rect x="38" y="893" width="210" height="72" rx="8" fill="#f5f0e8" stroke="#d8ccbb"/> |
|
<text x="51" y="916" class="label">Schema coverage</text> |
|
<rect x="51" y="928" width="184" height="6" rx="3" fill="#ddd1c1"/> |
|
<rect x="51" y="928" width="184" height="6" rx="3" fill="#397d6b"/> |
|
<text x="51" y="952" class="small">54 / 54 editable paths covered</text> |
|
<text x="51" y="969" class="tiny">extras preserved · intentionally hidden</text> |
|
|
|
<!-- Canvas --> |
|
<rect x="278" y="222" width="850" height="840" fill="#f4eee4"/> |
|
<rect x="296" y="240" width="814" height="53" rx="8" fill="#fffdf9" stroke="#d9cdbd"/> |
|
<text x="316" y="261" class="small">FACTION TOKEN</text> |
|
<text x="316" y="281" class="h2">Click an element to edit what creates it</text> |
|
<rect x="865" y="250" width="108" height="31" rx="15" class="chip"/> |
|
<circle cx="883" cy="266" r="4" fill="#397d6b"/> |
|
<text x="894" y="270" class="small">Live · unsaved</text> |
|
<rect x="983" y="250" width="111" height="31" rx="6" fill="#fff" stroke="#c8b9a5"/> |
|
<text x="1001" y="270" class="small">Fit to canvas</text> |
|
|
|
<rect x="296" y="309" width="814" height="385" rx="10" fill="url(#grid)" stroke="#d8ccbb"/> |
|
<text x="316" y="334" class="eyebrow">Rendered artifact · true output</text> |
|
<circle cx="703" cy="499" r="151" fill="#132e2a" opacity=".12"/> |
|
<circle cx="703" cy="490" r="145" fill="#20564f" stroke="#fff" stroke-width="9" filter="url(#shadow)"/> |
|
<g clip-path="url(#tokenClip)" fill="none" stroke-linecap="round" opacity=".9"> |
|
<path d="M530 384Q548 366 566 384T602 384T638 384T674 384T710 384T746 384T782 384T818 384T854 384" stroke="#e4ae46" stroke-width="11"/> |
|
<path d="M530 421Q548 403 566 421T602 421T638 421T674 421T710 421T746 421T782 421T818 421T854 421" stroke="#c87535" stroke-width="8"/> |
|
<path d="M530 458Q548 440 566 458T602 458T638 458T674 458T710 458T746 458T782 458T818 458T854 458" stroke="#e4ae46" stroke-width="11"/> |
|
<path d="M530 495Q548 477 566 495T602 495T638 495T674 495T710 495T746 495T782 495T818 495T854 495" stroke="#c87535" stroke-width="8"/> |
|
<path d="M530 532Q548 514 566 532T602 532T638 532T674 532T710 532T746 532T782 532T818 532T854 532" stroke="#e4ae46" stroke-width="11"/> |
|
<path d="M530 569Q548 551 566 569T602 569T638 569T674 569T710 569T746 569T782 569T818 569T854 569" stroke="#c87535" stroke-width="8"/> |
|
<path d="M530 606Q548 588 566 606T602 606T638 606T674 606T710 606T746 606T782 606T818 606T854 606" stroke="#e4ae46" stroke-width="11"/> |
|
</g> |
|
<path d="M621 540Q703 365 785 540Q706 497 621 540Z" fill="#fff0be" stroke="#253e38" stroke-width="5"/> |
|
<circle cx="703" cy="489" r="150" fill="none" stroke="#d99a34" stroke-width="3" stroke-dasharray="7 6"/> |
|
<rect x="851" y="397" width="198" height="62" rx="7" fill="#fffdf9" stroke="#c68a2e" filter="url(#smallShadow)"/> |
|
<text x="866" y="420" class="label">Background selected</text> |
|
<text x="866" y="439" class="small">Click to inspect its pipeline</text> |
|
<path d="M851 444L812 458" stroke="#c68a2e" stroke-width="1.5" marker-end="url(#arrow)"/> |
|
<rect x="343" y="600" width="193" height="42" rx="7" fill="#fffdf9" stroke="#c8b9a5"/> |
|
<text x="357" y="618" class="label">Logo</text> |
|
<text x="357" y="634" class="small">Used on 6 artifacts</text> |
|
<path d="M536 620L612 548" stroke="#9a8060" marker-end="url(#arrow)"/> |
|
<rect x="925" y="638" width="151" height="31" rx="15" fill="#fff" stroke="#c8b9a5"/> |
|
<text x="941" y="658" class="small">Switch artifact ⇧ A</text> |
|
|
|
<!-- Background pipeline --> |
|
<rect x="296" y="711" width="814" height="333" rx="10" class="panel"/> |
|
<text x="316" y="739" class="eyebrow">How this element is made</text> |
|
<text x="316" y="765" class="h2">Background pipeline</text> |
|
<text x="316" y="785" class="small">Every stage is editable; hover or focus a stage to isolate its effect.</text> |
|
|
|
<!-- stage 1 --> |
|
<rect x="316" y="808" width="132" height="145" rx="8" fill="#faf7f1" stroke="#d8ccbb"/> |
|
<text x="330" y="829" class="tiny">1 · PATTERN</text> |
|
<rect x="330" y="840" width="104" height="65" rx="5" fill="#eee5d8" stroke="#bbaa94"/> |
|
<path d="M333 855Q343 845 353 855T373 855T393 855T413 855T433 855M333 875Q343 865 353 875T373 875T393 875T413 875T433 875M333 895Q343 885 353 895T373 895T393 895T413 895T433 895" fill="none" stroke="#746553" stroke-width="3"/> |
|
<text x="330" y="925" class="label">Sand waves</text> |
|
<text x="330" y="942" class="small">Change texture</text> |
|
<path d="M452 878H470" stroke="#9a8060" marker-end="url(#arrow)"/> |
|
|
|
<!-- stage 2 --> |
|
<rect x="474" y="808" width="132" height="145" rx="8" class="selected"/> |
|
<text x="488" y="829" class="tiny">2 · TREATMENT</text> |
|
<rect x="488" y="840" width="104" height="39" rx="5" fill="#41382e"/> |
|
<path d="M494 853Q502 846 510 853T526 853T542 853T558 853T574 853T590 853M494 869Q502 862 510 869T526 869T542 869T558 869T574 869T590 869" fill="none" stroke="#f3e6cf" stroke-width="3" opacity=".9"/> |
|
<rect x="488" y="891" width="36" height="20" rx="10" fill="#397d6b"/> |
|
<circle cx="514" cy="901" r="7" fill="#fff"/> |
|
<text x="530" y="905" class="small">Invert</text> |
|
<text x="488" y="927" class="small">Definition 68%</text> |
|
<rect x="488" y="937" width="100" height="4" rx="2" fill="#d6c7b4"/> |
|
<rect x="488" y="937" width="68" height="4" rx="2" fill="#b47825"/> |
|
<path d="M610 878H628" stroke="#9a8060" marker-end="url(#arrow)"/> |
|
|
|
<!-- stage 3 --> |
|
<rect x="632" y="808" width="132" height="145" rx="8" fill="#faf7f1" stroke="#d8ccbb"/> |
|
<text x="646" y="829" class="tiny">3 · BASE COLOR</text> |
|
<rect x="646" y="840" width="52" height="65" rx="5" fill="#143c36"/> |
|
<rect x="698" y="840" width="52" height="65" rx="5" fill="#2e7167"/> |
|
<text x="646" y="925" class="label">Teal gradient</text> |
|
<text x="646" y="942" class="small">2 stops · 135°</text> |
|
<path d="M768 878H786" stroke="#9a8060" marker-end="url(#arrow)"/> |
|
|
|
<!-- stage 4 --> |
|
<rect x="790" y="808" width="132" height="145" rx="8" fill="#faf7f1" stroke="#d8ccbb"/> |
|
<text x="804" y="829" class="tiny">4 · PATTERN COLOR</text> |
|
<rect x="804" y="840" width="52" height="65" rx="5" fill="#e7b44f"/> |
|
<rect x="856" y="840" width="52" height="65" rx="5" fill="#bd6b32"/> |
|
<text x="804" y="925" class="label">Spice gradient</text> |
|
<text x="804" y="942" class="small">Influence 74%</text> |
|
<path d="M926 878H944" stroke="#9a8060" marker-end="url(#arrow)"/> |
|
|
|
<!-- stage 5 --> |
|
<rect x="948" y="808" width="142" height="145" rx="8" fill="#eff7f4" stroke="#397d6b" stroke-width="1.5"/> |
|
<text x="962" y="829" class="tiny">5 · COMPOSITE</text> |
|
<rect x="962" y="840" width="114" height="65" rx="5" fill="#20564f"/> |
|
<path d="M964 853Q974 843 984 853T1004 853T1024 853T1044 853T1064 853T1084 853M964 874Q974 864 984 874T1004 874T1024 874T1044 874T1064 874T1084 874M964 895Q974 885 984 895T1004 895T1024 895T1044 895T1064 895T1084 895" fill="none" stroke="#df9b3d" stroke-width="5"/> |
|
<text x="962" y="925" class="label">Result</text> |
|
<text x="962" y="942" class="small">Applied to 23 outputs</text> |
|
|
|
<rect x="316" y="971" width="774" height="52" rx="7" fill="#f6f0e6" stroke="#d8ccbb"/> |
|
<text x="330" y="992" class="label">Also visible on</text> |
|
<rect x="330" y="1001" width="63" height="16" rx="8" class="chip"/> |
|
<text x="342" y="1012" class="tiny">Shield</text> |
|
<rect x="399" y="1001" width="89" height="16" rx="8" class="chip"/> |
|
<text x="410" y="1012" class="tiny">Alliance card</text> |
|
<rect x="494" y="1001" width="74" height="16" rx="8" class="chip"/> |
|
<text x="505" y="1012" class="tiny">Leaders</text> |
|
<rect x="574" y="1001" width="64" height="16" rx="8" class="chip"/> |
|
<text x="585" y="1012" class="tiny">Troops</text> |
|
<text x="848" y="1006" class="small">Preview all affected artifacts →</text> |
|
|
|
<!-- Contextual inspector --> |
|
<rect x="1128" y="222" width="448" height="840" rx="12" class="panel"/> |
|
<rect x="1128" y="222" width="448" height="77" rx="12" fill="#fffaf1" stroke="#d9cdbd"/> |
|
<text x="1150" y="248" class="eyebrow">Responsible facet</text> |
|
<text x="1150" y="274" class="h2">Identity & Appearance / Background</text> |
|
<text x="1150" y="291" class="small">Changes here update every linked artifact live.</text> |
|
|
|
<text x="1150" y="330" class="label">Pattern</text> |
|
<rect x="1150" y="341" width="404" height="42" rx="6" class="field"/> |
|
<rect x="1161" y="351" width="26" height="22" rx="3" fill="#eee5d8"/> |
|
<path d="M1162 358Q1166 354 1170 358T1178 358T1186 358M1162 367Q1166 363 1170 367T1178 367T1186 367" fill="none" stroke="#746553" stroke-width="2"/> |
|
<text x="1198" y="367" class="body">/background/sand-waves.svg</text> |
|
<path d="M1526 357l7 7 7-7" fill="none" stroke="#796956"/> |
|
|
|
<rect x="1150" y="398" width="198" height="58" rx="7" fill="#f7f2ea" stroke="#d8ccbb"/> |
|
<text x="1163" y="420" class="label">Invert pattern</text> |
|
<text x="1163" y="440" class="small">Light becomes dark</text> |
|
<rect x="1300" y="412" width="35" height="20" rx="10" fill="#397d6b"/> |
|
<circle cx="1324" cy="422" r="7" fill="#fff"/> |
|
<rect x="1358" y="398" width="196" height="58" rx="7" fill="#f7f2ea" stroke="#d8ccbb"/> |
|
<text x="1371" y="420" class="label">Pattern scale</text> |
|
<text x="1371" y="441" class="small">100%</text> |
|
<path d="M1430 436h106" stroke="#d0c0aa" stroke-width="4" stroke-linecap="round"/> |
|
<circle cx="1509" cy="436" r="6" fill="#b77d26"/> |
|
|
|
<text x="1150" y="489" class="label">Treatment</text> |
|
<text x="1515" y="489" class="small">Reset</text> |
|
<rect x="1150" y="501" width="404" height="83" rx="7" fill="#f7f2ea" stroke="#d8ccbb"/> |
|
<text x="1163" y="524" class="body">Definition</text> |
|
<text x="1518" y="524" class="body">68%</text> |
|
<path d="M1164 539h370" stroke="#d0c0aa" stroke-width="5" stroke-linecap="round"/> |
|
<path d="M1164 539h251" stroke="#b77d26" stroke-width="5" stroke-linecap="round"/> |
|
<circle cx="1415" cy="539" r="7" fill="#fff" stroke="#b77d26" stroke-width="2"/> |
|
<text x="1163" y="568" class="tiny">SOFT</text> |
|
<text x="1508" y="568" class="tiny">CRISP</text> |
|
|
|
<text x="1150" y="618" class="label">Base color</text> |
|
<rect x="1150" y="630" width="404" height="72" rx="7" class="field"/> |
|
<rect x="1163" y="642" width="42" height="48" rx="5" fill="#143c36"/> |
|
<rect x="1205" y="642" width="42" height="48" rx="5" fill="#2e7167"/> |
|
<text x="1261" y="657" class="label">Linear gradient</text> |
|
<text x="1261" y="676" class="small">#143C36 → #2E7167 · 135°</text> |
|
<text x="1518" y="672" class="body">Edit</text> |
|
|
|
<text x="1150" y="737" class="label">Pattern color</text> |
|
<rect x="1150" y="749" width="404" height="72" rx="7" class="field"/> |
|
<rect x="1163" y="761" width="42" height="48" rx="5" fill="#e7b44f"/> |
|
<rect x="1205" y="761" width="42" height="48" rx="5" fill="#bd6b32"/> |
|
<text x="1261" y="776" class="label">Linear gradient</text> |
|
<text x="1261" y="795" class="small">#E7B44F → #BD6B32 · 135°</text> |
|
<text x="1518" y="791" class="body">Edit</text> |
|
|
|
<text x="1150" y="856" class="label">Pattern influence</text> |
|
<text x="1518" y="856" class="body">74%</text> |
|
<path d="M1150 874h404" stroke="#d0c0aa" stroke-width="5" stroke-linecap="round"/> |
|
<path d="M1150 874h299" stroke="#b77d26" stroke-width="5" stroke-linecap="round"/> |
|
<circle cx="1449" cy="874" r="7" fill="#fff" stroke="#b77d26" stroke-width="2"/> |
|
<text x="1150" y="897" class="tiny">SUBTLE</text> |
|
<text x="1519" y="897" class="tiny">BOLD</text> |
|
|
|
<rect x="1150" y="927" width="404" height="55" rx="7" fill="#edf6f2" stroke="#9bc2b7"/> |
|
<circle cx="1172" cy="954" r="11" fill="#397d6b"/> |
|
<path d="M1167 954l4 4 7-9" stroke="#fff" stroke-width="1.7" fill="none"/> |
|
<text x="1192" y="949" class="label">Visible everywhere this background is used</text> |
|
<text x="1192" y="968" class="small">Token, shield, leaders, troops, alliance card and catalogue</text> |
|
|
|
<rect x="1150" y="995" width="192" height="38" rx="6" fill="#fff" stroke="#bba98f"/> |
|
<text x="1170" y="1019" class="label">Try a background preset</text> |
|
<rect x="1354" y="995" width="200" height="38" rx="6" fill="#fff" stroke="#bba98f"/> |
|
<text x="1374" y="1019" class="label">Open all appearance fields</text> |
|
|
|
<!-- Single-scroll/mobile note --> |
|
<rect x="24" y="1070" width="1552" height="22" rx="4" fill="#2f2923"/> |
|
<text x="40" y="1085" font-size="10.5" fill="#fff7e8">Responsive contract: one page scrollbar on desktop · no nested preview scroll · mobile removes artifact previews and renders all editable groups vertically with drag handles preserved</text> |
|
</svg> |
