{ "version": "2.13", "children": [ { "type": "frame", "id": "StQOG", "x": 5100, "y": -7604, "name": "Shopping Flow - Step 1 Style", "clip": true, "width": 1440, "height": 1400, "fill": "#F8F5F0", "layout": "vertical", "children": [ { "type": "frame", "id": "jivSq", "name": "Step 1 Nav", "width": "fill_container", "height": 72, "fill": "#1A1A1A", "padding": [ 0, 64 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "v5enOl", "name": "Step 1 Logo", "fill": "#F8F5F0", "content": "SEWJOY", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "500", "letterSpacing": 3 }, { "type": "frame", "id": "E6hnGo", "name": "Step 1 Nav Center", "gap": 40, "alignItems": "center", "children": [ { "type": "text", "id": "VHfCF", "name": "Step 1 Nav SHOP", "fill": "#F8F5F0", "content": "SHOP", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "gjr4p", "name": "Step 1 Nav DESIGN YOURS", "fill": "#F8F5F0", "content": "DESIGN YOURS", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "H8GDn4", "name": "Step 1 Nav FABRICS", "fill": "#F8F5F0", "content": "FABRICS", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "F6W2t", "name": "Step 1 Nav MEMBERSHIP", "fill": "#F8F5F0", "content": "MEMBERSHIP", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "tfL2W", "name": "Step 1 Nav COMMUNITY", "fill": "#F8F5F0", "content": "COMMUNITY", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "sXVm4", "name": "Step 1 Nav ABOUT", "fill": "#F8F5F0", "content": "ABOUT", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "UCPUQ", "name": "Step 1 Nav Icons", "gap": 24, "alignItems": "center", "children": [ { "type": "text", "id": "EfbkU", "name": "Step 1 Nav Icon Q", "fill": "#F8F5F0", "content": "Q", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "vNl2X", "name": "Step 1 Nav Icon ♡", "fill": "#F8F5F0", "content": "♡", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "ejIle", "name": "Step 1 Nav Icon ▢", "fill": "#F8F5F0", "content": "▢", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "QdyXF", "name": "Step 1 Nav Divider", "width": "fill_container", "height": 1, "fill": "#3D3530" }, { "type": "frame", "id": "NF3vN", "name": "Step 1 Header", "width": "fill_container", "height": 200, "fill": "#1A1A1A", "layout": "vertical", "gap": 12, "padding": [ 48, 64, 32, 64 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "frame", "id": "UkHQe", "name": "Step Indicator", "gap": 12, "alignItems": "center", "children": [ { "type": "ellipse", "id": "H7HVmW", "name": "Step 1 Dot", "fill": "#C8956C", "width": 36, "height": 36 }, { "type": "ellipse", "id": "plFtG", "name": "Step 2 Dot", "fill": "#3D3530", "width": 36, "height": 36 }, { "type": "ellipse", "id": "ohNlJ", "name": "Step 3 Dot", "fill": "#3D3530", "width": 36, "height": 36 } ] }, { "type": "text", "id": "vPvtR", "name": "Step 1 Eyebrow", "fill": "#C8956C", "content": "STEP 1 OF 3", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "600", "letterSpacing": 3 }, { "type": "text", "id": "fr2GJ", "name": "Step 1 Heading", "fill": "#FFFFFF", "content": "Choose Your Style", "fontFamily": "Playfair Display", "fontSize": 40, "fontWeight": "700" }, { "type": "text", "id": "MMqrV", "name": "Step 1 Subhead", "fill": "#B8A99A", "content": "Select a base style to start customizing. Each style can be refined in later steps.", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "HWdip", "name": "Step 1 Grid", "width": "fill_container", "height": 730, "layout": "vertical", "gap": 24, "padding": [ 32, 64 ], "alignItems": "center", "children": [ { "type": "frame", "id": "Hs93u", "name": "Step 1 Row 1", "width": "fill_container", "height": 320, "gap": 24, "children": [ { "type": "frame", "id": "yJXyj", "name": "Step 1 Card Classic Shirt", "clip": true, "width": "fill_container", "height": 320, "fill": "#2C2416", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000040", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "rWa82", "name": "Classic Shirt Image", "width": "fill_container", "height": 200, "fill": "#E8E0D5" }, { "type": "frame", "id": "YXBsx", "name": "Classic Shirt Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "TgQBJ", "name": "Classic Shirt Title", "fill": "#FFFFFF", "content": "Classic Shirt", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "Phhb0", "name": "Classic Shirt Sub", "fill": "#B8A99A", "content": "Timeless button-down", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "xI4jy", "name": "Step 1 Card A-Line Dress", "clip": true, "width": "fill_container", "height": 320, "fill": "#2C2416", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000040", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "ejvqX", "name": "A-Line Dress Image", "width": "fill_container", "height": 200, "fill": "#E8E0D5" }, { "type": "frame", "id": "J6DNrB", "name": "A-Line Dress Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "M2E3Bw", "name": "A-Line Dress Title", "fill": "#FFFFFF", "content": "A-Line Dress", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "bM5OX", "name": "A-Line Dress Sub", "fill": "#B8A99A", "content": "Flattering silhouette", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "Gog9h", "name": "Step 1 Card Casual Tee", "clip": true, "width": "fill_container", "height": 320, "fill": "#2C2416", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000040", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "csIbs", "name": "Casual Tee Image", "width": "fill_container", "height": 200, "fill": "#E8E0D5" }, { "type": "frame", "id": "G5LLV", "name": "Casual Tee Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "KK79l", "name": "Casual Tee Title", "fill": "#FFFFFF", "content": "Casual Tee", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "I8sNMw", "name": "Casual Tee Sub", "fill": "#B8A99A", "content": "Everyday essential", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "a4sEa", "name": "Step 1 Row 2", "width": "fill_container", "height": 320, "gap": 24, "children": [ { "type": "frame", "id": "cN71S", "name": "Step 1 Card Pleated Skirt", "clip": true, "width": "fill_container", "height": 320, "fill": "#2C2416", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000040", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "sGIWa", "name": "Pleated Skirt Image", "width": "fill_container", "height": 200, "fill": "#E8E0D5" }, { "type": "frame", "id": "MOLsl", "name": "Pleated Skirt Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "hQOHG", "name": "Pleated Skirt Title", "fill": "#FFFFFF", "content": "Pleated Skirt", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "rpZqf", "name": "Pleated Skirt Sub", "fill": "#B8A99A", "content": "Flowy & feminine", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "pxhQY", "name": "Step 1 Card Tailored Blazer", "clip": true, "width": "fill_container", "height": 320, "fill": "#2C2416", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000040", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "mjFSU", "name": "Tailored Blazer Image", "width": "fill_container", "height": 200, "fill": "#E8E0D5" }, { "type": "frame", "id": "ZEn1i", "name": "Tailored Blazer Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "t48N8", "name": "Tailored Blazer Title", "fill": "#FFFFFF", "content": "Tailored Blazer", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "K3oUku", "name": "Tailored Blazer Sub", "fill": "#B8A99A", "content": "Sharp & structured", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "lB6oa", "name": "Step 1 Card Wrap Top", "clip": true, "width": "fill_container", "height": 320, "fill": "#2C2416", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000040", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "Xj22m", "name": "Wrap Top Image", "width": "fill_container", "height": 200, "fill": "#E8E0D5" }, { "type": "frame", "id": "LTGGF", "name": "Wrap Top Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "tzNVN", "name": "Wrap Top Title", "fill": "#FFFFFF", "content": "Wrap Top", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "KvvXK", "name": "Wrap Top Sub", "fill": "#B8A99A", "content": "Adjustable fit", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] } ] } ] }, { "type": "frame", "id": "gNYjM", "name": "Step 1 Navigation", "width": "fill_container", "height": 100, "padding": [ 24, 64 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "G5LPY", "name": "Step 1 Back", "fill": "#3D3530", "cornerRadius": 4, "padding": [ 14, 28 ], "alignItems": "center", "children": [ { "type": "text", "id": "bYT0V", "name": "Step 1 Back Label", "fill": "#B8A99A", "content": "← Back", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" } ] }, { "type": "frame", "id": "RxgYc", "name": "Step 1 Next", "fill": "#C8956C", "cornerRadius": 4, "padding": [ 14, 28 ], "alignItems": "center", "children": [ { "type": "text", "id": "Y9dPW", "name": "Step 1 Next Label", "fill": "#1A1A1A", "content": "Next: Fabric →", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" } ] } ] }, { "type": "frame", "id": "CqiIM", "name": "Footer", "width": "fill_container", "fill": "#1A1A1A", "layout": "vertical", "gap": 32, "padding": [ 56, 64, 32, 64 ], "children": [ { "type": "frame", "id": "OBcvg", "name": "Footer Top Row", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "PISKu", "name": "Footer Logo", "fill": "$text-primary", "content": "SEWJOY", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "500", "letterSpacing": 3 }, { "type": "frame", "id": "TqqUL", "name": "Footer Socials", "gap": 20, "alignItems": "center", "children": [ { "type": "text", "id": "e1qZI", "name": "Social P", "fill": "$text-secondary", "content": "P", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "RdKRo", "name": "Social F", "fill": "$text-secondary", "content": "F", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "dNMS9", "name": "Social C", "fill": "$text-secondary", "content": "C", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "thGMY", "name": "Social I", "fill": "$text-secondary", "content": "I", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "OTVX6", "name": "Footer Divider", "width": "fill_container", "height": 1, "fill": "$border-subtle" }, { "type": "frame", "id": "A47nL", "name": "Footer Link Grid", "width": "fill_container", "gap": 32, "children": [ { "type": "frame", "id": "LUAst", "name": "Footer Col SHOP", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ { "type": "text", "id": "bW9Ve", "name": "Footer SHOP Header", "fill": "$text-primary", "content": "SHOP", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2 }, { "type": "text", "id": "y5lmi", "name": "Footer SHOP Custom Clothing", "fill": "$text-secondary", "content": "Custom Clothing", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "MYM7f", "name": "Footer SHOP Design Library", "fill": "$text-secondary", "content": "Design Library", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "lVG6n", "name": "Footer SHOP Gift Cards", "fill": "$text-secondary", "content": "Gift Cards", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "X3hHtV", "name": "Footer SHOP Sale", "fill": "$text-secondary", "content": "Sale", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "sxnsK", "name": "Footer Col BRAND", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ { "type": "text", "id": "t0TiGx", "name": "Footer BRAND Header", "fill": "$text-primary", "content": "BRAND", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2 }, { "type": "text", "id": "eI93a", "name": "Footer BRAND Our Story", "fill": "$text-secondary", "content": "Our Story", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "JPWsv", "name": "Footer BRAND Craftsmanship", "fill": "$text-secondary", "content": "Craftsmanship", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "qPc3A", "name": "Footer BRAND Sustainability", "fill": "$text-secondary", "content": "Sustainability", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "zu1rt", "name": "Footer BRAND Press", "fill": "$text-secondary", "content": "Press", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "rqc78", "name": "Footer Col HELP", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ { "type": "text", "id": "okCF2", "name": "Footer HELP Header", "fill": "$text-primary", "content": "HELP", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2 }, { "type": "text", "id": "ezbhw", "name": "Footer HELP Size Guide", "fill": "$text-secondary", "content": "Size Guide", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "TT3K2", "name": "Footer HELP Shipping", "fill": "$text-secondary", "content": "Shipping", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "CLkWe", "name": "Footer HELP Returns", "fill": "$text-secondary", "content": "Returns", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "WZUZ5", "name": "Footer HELP Contact", "fill": "$text-secondary", "content": "Contact", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "pWyrs", "name": "Footer Col COMMUNITY", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ { "type": "text", "id": "th7Cw", "name": "Footer COMMUNITY Header", "fill": "$text-primary", "content": "COMMUNITY", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2 }, { "type": "text", "id": "jT1vn", "name": "Footer COMMUNITY Makers Hub", "fill": "$text-secondary", "content": "Makers Hub", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "jNcjO", "name": "Footer COMMUNITY Pattern Library", "fill": "$text-secondary", "content": "Pattern Library", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "WIRlu", "name": "Footer COMMUNITY Tutorials", "fill": "$text-secondary", "content": "Tutorials", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "Muf0U", "name": "Footer COMMUNITY Blog", "fill": "$text-secondary", "content": "Blog", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "GP6tt", "name": "Footer Divider 2", "width": "fill_container", "height": 1, "fill": "$border-subtle" }, { "type": "frame", "id": "yfnqq", "name": "Footer Bottom", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "VMsm4", "name": "Footer Copyright", "fill": "$text-muted", "content": "© 2026 SEWJOY", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "rQ4KB", "name": "Footer Legal", "fill": "$text-muted", "content": "Privacy · Terms · Cookies", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "C9NOqW", "x": 6740, "y": -7604, "name": "Shopping Flow - Step 1 Style Dark", "clip": true, "width": 1440, "height": 1400, "fill": "#1A1A1A", "layout": "vertical", "children": [ { "type": "frame", "id": "o5mYU", "name": "Step 1 Nav", "width": "fill_container", "height": 72, "fill": "#F8F5F0", "padding": [ 0, 64 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "klBhD", "name": "Step 1 Logo", "fill": "#1A1A1A", "content": "SEWJOY", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "500", "letterSpacing": 3 }, { "type": "frame", "id": "u3fxp8", "name": "Step 1 Nav Center", "gap": 40, "alignItems": "center", "children": [ { "type": "text", "id": "p4lA0j", "name": "Step 1 Nav SHOP", "fill": "#1A1A1A", "content": "SHOP", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "qyXbb", "name": "Step 1 Nav DESIGN YOURS", "fill": "#1A1A1A", "content": "DESIGN YOURS", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "raN7e", "name": "Step 1 Nav FABRICS", "fill": "#1A1A1A", "content": "FABRICS", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "s3qWK", "name": "Step 1 Nav MEMBERSHIP", "fill": "#1A1A1A", "content": "MEMBERSHIP", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "Jv8Em", "name": "Step 1 Nav COMMUNITY", "fill": "#1A1A1A", "content": "COMMUNITY", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "YesYD", "name": "Step 1 Nav ABOUT", "fill": "#1A1A1A", "content": "ABOUT", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "knRWk", "name": "Step 1 Nav Icons", "gap": 24, "alignItems": "center", "children": [ { "type": "text", "id": "RplRQ", "name": "Step 1 Nav Icon Q", "fill": "#1A1A1A", "content": "Q", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "k52Snx", "name": "Step 1 Nav Icon ♡", "fill": "#1A1A1A", "content": "♡", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "gOijA", "name": "Step 1 Nav Icon ▢", "fill": "#1A1A1A", "content": "▢", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "b50AoA", "name": "Step 1 Nav Divider", "width": "fill_container", "height": 1, "fill": "#E8E0D5" }, { "type": "frame", "id": "LDqYU", "name": "Step 1 Header", "width": "fill_container", "height": 200, "layout": "vertical", "gap": 12, "padding": [ 48, 64, 32, 64 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "frame", "id": "g2DQV", "name": "Step Indicator", "gap": 12, "alignItems": "center", "children": [ { "type": "ellipse", "id": "wOV7J", "name": "Step 1 Dot", "fill": "#C8956C", "width": 36, "height": 36 }, { "type": "ellipse", "id": "KXsVo", "name": "Step 2 Dot", "fill": "#E8E0D5", "width": 36, "height": 36 }, { "type": "ellipse", "id": "A6hfOV", "name": "Step 3 Dot", "fill": "#E8E0D5", "width": 36, "height": 36 } ] }, { "type": "text", "id": "gbnmj", "name": "Step 1 Eyebrow", "fill": "#C8956C", "content": "STEP 1 OF 3", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "600", "letterSpacing": 3 }, { "type": "text", "id": "W28IB", "name": "Step 1 Heading", "fill": "#1A1A1A", "content": "Choose Your Style", "fontFamily": "Playfair Display", "fontSize": 40, "fontWeight": "700" }, { "type": "text", "id": "UdKuG", "name": "Step 1 Subhead", "fill": "#8C7B6E", "content": "Select a base style to start customizing. Each style can be refined in later steps.", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "Br48f", "name": "Step 1 Grid", "width": "fill_container", "height": 730, "layout": "vertical", "gap": 24, "padding": [ 32, 64 ], "alignItems": "center", "children": [ { "type": "frame", "id": "idCKJ", "name": "Step 1 Row 1", "width": "fill_container", "height": 320, "gap": 24, "children": [ { "type": "frame", "id": "HHvyQ", "name": "Step 1 Card Classic Shirt", "clip": true, "width": "fill_container", "height": 320, "fill": "#FFFFFF", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000010", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "bBCfU", "name": "Classic Shirt Image", "width": "fill_container", "height": 200, "fill": "#E8E0D5" }, { "type": "frame", "id": "hj3uZ", "name": "Classic Shirt Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "N70kGp", "name": "Classic Shirt Title", "fill": "#1A1A1A", "content": "Classic Shirt", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "Z46yRr", "name": "Classic Shirt Sub", "fill": "#8C7B6E", "content": "Timeless button-down", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "GgHoG", "name": "Step 1 Card A-Line Dress", "clip": true, "width": "fill_container", "height": 320, "fill": "#FFFFFF", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000010", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "liNNj", "name": "A-Line Dress Image", "width": "fill_container", "height": 200, "fill": "#E8E0D5" }, { "type": "frame", "id": "TGAhD", "name": "A-Line Dress Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "B1OiBx", "name": "A-Line Dress Title", "fill": "#1A1A1A", "content": "A-Line Dress", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "KLoI5", "name": "A-Line Dress Sub", "fill": "#8C7B6E", "content": "Flattering silhouette", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "N4rj0l", "name": "Step 1 Card Casual Tee", "clip": true, "width": "fill_container", "height": 320, "fill": "#FFFFFF", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000010", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "Zrmwm", "name": "Casual Tee Image", "width": "fill_container", "height": 200, "fill": "#E8E0D5" }, { "type": "frame", "id": "DN7gs", "name": "Casual Tee Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "oDDBb", "name": "Casual Tee Title", "fill": "#1A1A1A", "content": "Casual Tee", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "Vajvt", "name": "Casual Tee Sub", "fill": "#8C7B6E", "content": "Everyday essential", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "X7s9r6", "name": "Step 1 Row 2", "width": "fill_container", "height": 320, "gap": 24, "children": [ { "type": "frame", "id": "BYt6h", "name": "Step 1 Card Pleated Skirt", "clip": true, "width": "fill_container", "height": 320, "fill": "#FFFFFF", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000010", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "SMilk", "name": "Pleated Skirt Image", "width": "fill_container", "height": 200, "fill": "#E8E0D5" }, { "type": "frame", "id": "E6pL96", "name": "Pleated Skirt Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "uvVTd", "name": "Pleated Skirt Title", "fill": "#1A1A1A", "content": "Pleated Skirt", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "ZokTt", "name": "Pleated Skirt Sub", "fill": "#8C7B6E", "content": "Flowy & feminine", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "dy3yE", "name": "Step 1 Card Tailored Blazer", "clip": true, "width": "fill_container", "height": 320, "fill": "#FFFFFF", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000010", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "EfnnI", "name": "Tailored Blazer Image", "width": "fill_container", "height": 200, "fill": "#E8E0D5" }, { "type": "frame", "id": "Snw1R", "name": "Tailored Blazer Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "saFdU", "name": "Tailored Blazer Title", "fill": "#1A1A1A", "content": "Tailored Blazer", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "ymaAT", "name": "Tailored Blazer Sub", "fill": "#8C7B6E", "content": "Sharp & structured", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "b3jj5T", "name": "Step 1 Card Wrap Top", "clip": true, "width": "fill_container", "height": 320, "fill": "#FFFFFF", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000010", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "R9xpG", "name": "Wrap Top Image", "width": "fill_container", "height": 200, "fill": "#E8E0D5" }, { "type": "frame", "id": "zNck2", "name": "Wrap Top Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "AX0UA", "name": "Wrap Top Title", "fill": "#1A1A1A", "content": "Wrap Top", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "z8Yg7", "name": "Wrap Top Sub", "fill": "#8C7B6E", "content": "Adjustable fit", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] } ] } ] }, { "type": "frame", "id": "JRV4F", "name": "Step 1 Navigation", "width": "fill_container", "height": 100, "padding": [ 24, 64 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "N205fG", "name": "Step 1 Back", "fill": "#E8E0D5", "cornerRadius": 4, "padding": [ 14, 28 ], "alignItems": "center", "children": [ { "type": "text", "id": "i0Mz3", "name": "Step 1 Back Label", "fill": "#8C7B6E", "content": "← Back", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" } ] }, { "type": "frame", "id": "nXF0O", "name": "Step 1 Next", "fill": "#1A1A1A", "cornerRadius": 4, "padding": [ 14, 28 ], "alignItems": "center", "children": [ { "type": "text", "id": "Z2uhF", "name": "Step 1 Next Label", "fill": "#FFFFFF", "content": "Next: Fabric →", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" } ] } ] }, { "type": "frame", "id": "QJI2A", "name": "Footer", "width": "fill_container", "fill": "$surface-primary", "layout": "vertical", "gap": 32, "padding": [ 56, 64, 32, 64 ], "children": [ { "type": "frame", "id": "LvdrV", "name": "Footer Top Row", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "LlMDS", "name": "Footer Logo", "fill": "$text-primary", "content": "SEWJOY", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "500", "letterSpacing": 3 }, { "type": "frame", "id": "xK4D4", "name": "Footer Socials", "gap": 20, "alignItems": "center", "children": [ { "type": "text", "id": "w8PjhA", "name": "Social P", "fill": "$text-secondary", "content": "P", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "BYTAT", "name": "Social F", "fill": "$text-secondary", "content": "F", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "K7D69", "name": "Social C", "fill": "$text-secondary", "content": "C", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "B0wBi3", "name": "Social I", "fill": "$text-secondary", "content": "I", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "zWtSk", "name": "Footer Divider", "width": "fill_container", "height": 1, "fill": "$border-subtle" }, { "type": "frame", "id": "Odji6", "name": "Footer Link Grid", "width": "fill_container", "gap": 32, "children": [ { "type": "frame", "id": "T3cbOp", "name": "Footer Col SHOP", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ { "type": "text", "id": "ih9PY", "name": "Footer SHOP Header", "fill": "$text-primary", "content": "SHOP", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2 }, { "type": "text", "id": "x8MkI", "name": "Footer SHOP Custom Clothing", "fill": "$text-secondary", "content": "Custom Clothing", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "rDp48", "name": "Footer SHOP Design Library", "fill": "$text-secondary", "content": "Design Library", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "A89wmB", "name": "Footer SHOP Gift Cards", "fill": "$text-secondary", "content": "Gift Cards", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "c9b6X7", "name": "Footer SHOP Sale", "fill": "$text-secondary", "content": "Sale", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "CThBt", "name": "Footer Col BRAND", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ { "type": "text", "id": "S92fX", "name": "Footer BRAND Header", "fill": "$text-primary", "content": "BRAND", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2 }, { "type": "text", "id": "WpRWn", "name": "Footer BRAND Our Story", "fill": "$text-secondary", "content": "Our Story", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "dc9nU", "name": "Footer BRAND Craftsmanship", "fill": "$text-secondary", "content": "Craftsmanship", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "b4kH2", "name": "Footer BRAND Sustainability", "fill": "$text-secondary", "content": "Sustainability", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "P8gq7J", "name": "Footer BRAND Press", "fill": "$text-secondary", "content": "Press", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "NRqGD", "name": "Footer Col HELP", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ { "type": "text", "id": "oMTnX", "name": "Footer HELP Header", "fill": "$text-primary", "content": "HELP", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2 }, { "type": "text", "id": "D5OOq", "name": "Footer HELP Size Guide", "fill": "$text-secondary", "content": "Size Guide", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "pPlXq", "name": "Footer HELP Shipping", "fill": "$text-secondary", "content": "Shipping", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "fNAjf", "name": "Footer HELP Returns", "fill": "$text-secondary", "content": "Returns", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "VxV37", "name": "Footer HELP Contact", "fill": "$text-secondary", "content": "Contact", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "jLaUp", "name": "Footer Col COMMUNITY", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ { "type": "text", "id": "ApnSt", "name": "Footer COMMUNITY Header", "fill": "$text-primary", "content": "COMMUNITY", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2 }, { "type": "text", "id": "P3T6k", "name": "Footer COMMUNITY Makers Hub", "fill": "$text-secondary", "content": "Makers Hub", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "k3LT0", "name": "Footer COMMUNITY Pattern Library", "fill": "$text-secondary", "content": "Pattern Library", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "XF8id", "name": "Footer COMMUNITY Tutorials", "fill": "$text-secondary", "content": "Tutorials", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "U3U7K", "name": "Footer COMMUNITY Blog", "fill": "$text-secondary", "content": "Blog", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "jjmrQ", "name": "Footer Divider 2", "width": "fill_container", "height": 1, "fill": "$border-subtle" }, { "type": "frame", "id": "IulYn", "name": "Footer Bottom", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "b6WWg", "name": "Footer Copyright", "fill": "$text-muted", "content": "© 2026 SEWJOY", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "qqxlv", "name": "Footer Legal", "fill": "$text-muted", "content": "Privacy · Terms · Cookies", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "o6jOrG", "x": 8380, "y": -7604, "name": "Shopping Flow - Step 2 Fabric", "clip": true, "width": 1440, "height": 1400, "fill": "#F8F5F0", "layout": "vertical", "children": [ { "type": "frame", "id": "ChNSg", "name": "Step 2 Nav", "width": "fill_container", "height": 72, "fill": "#1A1A1A", "padding": [ 0, 64 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "s4TPrG", "name": "Step 2 Logo", "fill": "#F8F5F0", "content": "SEWJOY", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "500", "letterSpacing": 3 }, { "type": "frame", "id": "emXr5", "name": "Step 2 Nav Center", "gap": 40, "alignItems": "center", "children": [ { "type": "text", "id": "t9eMwm", "name": "Step 2 Nav SHOP", "fill": "#1A1A1A", "content": "SHOP", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "rKcEl", "name": "Step 2 Nav DESIGN YOURS", "fill": "#1A1A1A", "content": "DESIGN YOURS", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "h4Oa6", "name": "Step 2 Nav FABRICS", "fill": "#1A1A1A", "content": "FABRICS", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "kAU16", "name": "Step 2 Nav MEMBERSHIP", "fill": "#1A1A1A", "content": "MEMBERSHIP", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "FcRxj", "name": "Step 2 Nav COMMUNITY", "fill": "#1A1A1A", "content": "COMMUNITY", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "ZeYwc", "name": "Step 2 Nav ABOUT", "fill": "#1A1A1A", "content": "ABOUT", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "dOy6y", "name": "Step 2 Nav Icons", "gap": 24, "alignItems": "center", "children": [ { "type": "text", "id": "Ds41b", "name": "Step 2 Nav Icon Q", "fill": "#1A1A1A", "content": "Q", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "VYaAj", "name": "Step 2 Nav Icon ♡", "fill": "#1A1A1A", "content": "♡", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "pgQWg", "name": "Step 2 Nav Icon ▢", "fill": "#1A1A1A", "content": "▢", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "diR7Y", "name": "Step 2 Nav Divider", "width": "fill_container", "height": 1, "fill": "#3D3530" }, { "type": "frame", "id": "JSkUL", "name": "Step 2 Header", "width": "fill_container", "height": 200, "fill": "#1A1A1A", "layout": "vertical", "gap": 12, "padding": [ 48, 64, 32, 64 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "frame", "id": "gw0WN", "name": "Step 2 Indicator", "gap": 12, "alignItems": "center", "children": [ { "type": "ellipse", "id": "g7fwTf", "name": "Step 2 1 Dot", "fill": "#E8E0D5", "width": 36, "height": 36 }, { "type": "ellipse", "id": "pGaNz", "name": "Step 2 2 Dot", "fill": "#C8956C", "width": 36, "height": 36 }, { "type": "ellipse", "id": "U37F9F", "name": "Step 2 3 Dot", "fill": "#E8E0D5", "width": 36, "height": 36 } ] }, { "type": "text", "id": "WrX53", "name": "Step 2 Eyebrow", "fill": "#C8956C", "content": "STEP 2 OF 3", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "600", "letterSpacing": 3 }, { "type": "text", "id": "R3wqZy", "name": "Step 2 Heading", "fill": "#FFFFFF", "content": "Choose Your Fabric", "fontFamily": "Playfair Display", "fontSize": 40, "fontWeight": "700" }, { "type": "text", "id": "HGtjq", "name": "Step 2 Subhead", "fill": "#B8A99A", "content": "Pick the material that brings your design to life. Swatches available on request.", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "WadT0", "name": "Step 2 Grid", "width": "fill_container", "height": 730, "layout": "vertical", "gap": 24, "padding": [ 32, 64 ], "alignItems": "center", "children": [ { "type": "frame", "id": "nEawf", "name": "Step 2 Row 1", "width": "fill_container", "height": 320, "gap": 24, "children": [ { "type": "frame", "id": "mJQqj", "name": "Step 2 Card Organic Cotton", "clip": true, "width": "fill_container", "height": 320, "fill": "#2C2416", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000040", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "taj0N", "name": "Organic Cotton Swatch", "width": "fill_container", "height": 200, "fill": "#F0E6D2" }, { "type": "frame", "id": "X3Zqg9", "name": "Organic Cotton Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "nmZg4", "name": "Organic Cotton Title", "fill": "#1A1A1A", "content": "Organic Cotton", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "k6Up50", "name": "Organic Cotton Price", "fill": "#8C7B6E", "content": "$12/yd", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "x7vjUN", "name": "Step 2 Card Linen Blend", "clip": true, "width": "fill_container", "height": 320, "fill": "#2C2416", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000040", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "s225De", "name": "Linen Blend Swatch", "width": "fill_container", "height": 200, "fill": "#D9C9B0" }, { "type": "frame", "id": "ag6pJ", "name": "Linen Blend Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "tRdEc", "name": "Linen Blend Title", "fill": "#1A1A1A", "content": "Linen Blend", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "i3cJEJ", "name": "Linen Blend Price", "fill": "#8C7B6E", "content": "$15/yd", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "Ftkxv", "name": "Step 2 Card Silk Charmeuse", "clip": true, "width": "fill_container", "height": 320, "fill": "#2C2416", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000040", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "r1FjE", "name": "Silk Charmeuse Swatch", "width": "fill_container", "height": 200, "fill": "#E8D8C8" }, { "type": "frame", "id": "UbkWw", "name": "Silk Charmeuse Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "Yvimo", "name": "Silk Charmeuse Title", "fill": "#1A1A1A", "content": "Silk Charmeuse", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "F1Z16", "name": "Silk Charmeuse Price", "fill": "#8C7B6E", "content": "$28/yd", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "JpxwR", "name": "Step 2 Row 2", "width": "fill_container", "height": 320, "gap": 24, "children": [ { "type": "frame", "id": "vKrfb", "name": "Step 2 Card Merino Wool", "clip": true, "width": "fill_container", "height": 320, "fill": "#2C2416", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000040", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "jn6qO", "name": "Merino Wool Swatch", "width": "fill_container", "height": 200, "fill": "#8A6E55" }, { "type": "frame", "id": "REIeS", "name": "Merino Wool Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "yocAF", "name": "Merino Wool Title", "fill": "#1A1A1A", "content": "Merino Wool", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "hquND", "name": "Merino Wool Price", "fill": "#8C7B6E", "content": "$22/yd", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "M3kUQ", "name": "Step 2 Card Velvet", "clip": true, "width": "fill_container", "height": 320, "fill": "#2C2416", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000040", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "X9tMV", "name": "Velvet Swatch", "width": "fill_container", "height": 200, "fill": "#5C3B2E" }, { "type": "frame", "id": "YRsik", "name": "Velvet Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "Imir3", "name": "Velvet Title", "fill": "#1A1A1A", "content": "Velvet", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "WCF9g", "name": "Velvet Price", "fill": "#8C7B6E", "content": "$18/yd", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "m3XB0U", "name": "Step 2 Card Denim", "clip": true, "width": "fill_container", "height": 320, "fill": "#2C2416", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000040", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "M7Wm6", "name": "Denim Swatch", "width": "fill_container", "height": 200, "fill": "#3A4858" }, { "type": "frame", "id": "Tqkg7", "name": "Denim Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "IdgBh", "name": "Denim Title", "fill": "#1A1A1A", "content": "Denim", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "QSolc", "name": "Denim Price", "fill": "#8C7B6E", "content": "$14/yd", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] } ] } ] }, { "type": "frame", "id": "H8Smqf", "name": "Step 2 Navigation", "width": "fill_container", "height": 100, "padding": [ 24, 64 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "l2Q61", "name": "Step 2 Back", "fill": "#3D3530", "cornerRadius": 4, "stroke": "#3D3530", "strokeWidth": 1, "padding": [ 14, 28 ], "alignItems": "center", "children": [ { "type": "text", "id": "jz8uG", "name": "Step 2 Back Label", "fill": "#1A1A1A", "content": "← Back: Style", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" } ] }, { "type": "frame", "id": "ZsD4Q", "name": "Step 2 Next", "fill": "#C8956C", "cornerRadius": 4, "padding": [ 14, 28 ], "alignItems": "center", "children": [ { "type": "text", "id": "x6phd", "name": "Step 2 Next Label", "fill": "#FFFFFF", "content": "Next: Accessories →", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" } ] } ] }, { "type": "frame", "id": "M3J7AN", "name": "Footer", "width": "fill_container", "fill": "#1A1A1A", "layout": "vertical", "gap": 32, "padding": [ 56, 64, 32, 64 ], "children": [ { "type": "frame", "id": "S0Vdrn", "name": "Footer Top Row", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "aE2tM", "name": "Footer Logo", "fill": "$text-primary", "content": "SEWJOY", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "500", "letterSpacing": 3 }, { "type": "frame", "id": "W7yly", "name": "Footer Socials", "gap": 20, "alignItems": "center", "children": [ { "type": "text", "id": "BhgQO", "name": "Social P", "fill": "$text-secondary", "content": "P", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "Z5y53", "name": "Social F", "fill": "$text-secondary", "content": "F", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "qufvh", "name": "Social C", "fill": "$text-secondary", "content": "C", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "aqfKX", "name": "Social I", "fill": "$text-secondary", "content": "I", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "JLTov", "name": "Footer Divider", "width": "fill_container", "height": 1, "fill": "$border-subtle" }, { "type": "frame", "id": "SXC2p", "name": "Footer Link Grid", "width": "fill_container", "gap": 32, "children": [ { "type": "frame", "id": "gsVUM", "name": "Footer Col SHOP", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ { "type": "text", "id": "RA9Xf", "name": "Footer SHOP Header", "fill": "$text-primary", "content": "SHOP", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2 }, { "type": "text", "id": "Zqivx", "name": "Footer SHOP Custom Clothing", "fill": "$text-secondary", "content": "Custom Clothing", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "X5rOU", "name": "Footer SHOP Design Library", "fill": "$text-secondary", "content": "Design Library", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "Zwdek", "name": "Footer SHOP Gift Cards", "fill": "$text-secondary", "content": "Gift Cards", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "ljVxm", "name": "Footer SHOP Sale", "fill": "$text-secondary", "content": "Sale", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "PoFAf", "name": "Footer Col BRAND", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ { "type": "text", "id": "l3iMc", "name": "Footer BRAND Header", "fill": "$text-primary", "content": "BRAND", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2 }, { "type": "text", "id": "AhK0m", "name": "Footer BRAND Our Story", "fill": "$text-secondary", "content": "Our Story", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "j8k4dH", "name": "Footer BRAND Craftsmanship", "fill": "$text-secondary", "content": "Craftsmanship", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "sV95J", "name": "Footer BRAND Sustainability", "fill": "$text-secondary", "content": "Sustainability", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "M48RX", "name": "Footer BRAND Press", "fill": "$text-secondary", "content": "Press", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "LmZiz", "name": "Footer Col HELP", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ { "type": "text", "id": "rDkLD", "name": "Footer HELP Header", "fill": "$text-primary", "content": "HELP", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2 }, { "type": "text", "id": "puAcT", "name": "Footer HELP Size Guide", "fill": "$text-secondary", "content": "Size Guide", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "K8WMD", "name": "Footer HELP Shipping", "fill": "$text-secondary", "content": "Shipping", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "d6QkH", "name": "Footer HELP Returns", "fill": "$text-secondary", "content": "Returns", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "Qx5c2", "name": "Footer HELP Contact", "fill": "$text-secondary", "content": "Contact", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "nDsze", "name": "Footer Col COMMUNITY", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ { "type": "text", "id": "W57hFh", "name": "Footer COMMUNITY Header", "fill": "$text-primary", "content": "COMMUNITY", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2 }, { "type": "text", "id": "hn1Mt", "name": "Footer COMMUNITY Makers Hub", "fill": "$text-secondary", "content": "Makers Hub", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "IOyOg", "name": "Footer COMMUNITY Pattern Library", "fill": "$text-secondary", "content": "Pattern Library", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "E0BFnm", "name": "Footer COMMUNITY Tutorials", "fill": "$text-secondary", "content": "Tutorials", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "s3qJVP", "name": "Footer COMMUNITY Blog", "fill": "$text-secondary", "content": "Blog", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "lnr6A", "name": "Footer Divider 2", "width": "fill_container", "height": 1, "fill": "$border-subtle" }, { "type": "frame", "id": "XeLRC", "name": "Footer Bottom", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "rBneZ", "name": "Footer Copyright", "fill": "$text-muted", "content": "© 2026 SEWJOY", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "i5P5jd", "name": "Footer Legal", "fill": "$text-muted", "content": "Privacy · Terms · Cookies", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "tit1D", "x": 10020, "y": -7604, "name": "Shopping Flow - Step 2 Fabric Dark", "clip": true, "width": 1440, "height": 1400, "fill": "#1A1A1A", "layout": "vertical", "children": [ { "type": "frame", "id": "rhRUG", "name": "Step 2 Nav", "width": "fill_container", "height": 72, "fill": "#F8F5F0", "padding": [ 0, 64 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "QQRTp", "name": "Step 2 Logo", "fill": "#1A1A1A", "content": "SEWJOY", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "500", "letterSpacing": 3 }, { "type": "frame", "id": "a6spg", "name": "Step 2 Nav Center", "gap": 40, "alignItems": "center", "children": [ { "type": "text", "id": "EnapX", "name": "Step 2 Nav SHOP", "fill": "#1A1A1A", "content": "SHOP", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "L3nQP", "name": "Step 2 Nav DESIGN YOURS", "fill": "#1A1A1A", "content": "DESIGN YOURS", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "lp59E", "name": "Step 2 Nav FABRICS", "fill": "#1A1A1A", "content": "FABRICS", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "l0KWHG", "name": "Step 2 Nav MEMBERSHIP", "fill": "#1A1A1A", "content": "MEMBERSHIP", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "n4B3oq", "name": "Step 2 Nav COMMUNITY", "fill": "#1A1A1A", "content": "COMMUNITY", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "U6U779", "name": "Step 2 Nav ABOUT", "fill": "#1A1A1A", "content": "ABOUT", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "GQN27", "name": "Step 2 Nav Icons", "gap": 24, "alignItems": "center", "children": [ { "type": "text", "id": "s8LnG", "name": "Step 2 Nav Icon Q", "fill": "#1A1A1A", "content": "Q", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "M2uMDA", "name": "Step 2 Nav Icon ♡", "fill": "#1A1A1A", "content": "♡", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "HAEQy", "name": "Step 2 Nav Icon ▢", "fill": "#1A1A1A", "content": "▢", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "LJEks", "name": "Step 2 Nav Divider", "width": "fill_container", "height": 1, "fill": "#E8E0D5" }, { "type": "frame", "id": "qKb16", "name": "Step 2 Header", "width": "fill_container", "height": 200, "layout": "vertical", "gap": 12, "padding": [ 48, 64, 32, 64 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "frame", "id": "DUqOk", "name": "Step 2 Indicator", "gap": 12, "alignItems": "center", "children": [ { "type": "ellipse", "id": "L1jdX", "name": "Step 2 1 Dot", "fill": "#E8E0D5", "width": 36, "height": 36 }, { "type": "ellipse", "id": "mwLGF", "name": "Step 2 2 Dot", "fill": "#C8956C", "width": 36, "height": 36 }, { "type": "ellipse", "id": "HsYWr", "name": "Step 2 3 Dot", "fill": "#E8E0D5", "width": 36, "height": 36 } ] }, { "type": "text", "id": "FUDbT", "name": "Step 2 Eyebrow", "fill": "#C8956C", "content": "STEP 2 OF 3", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "600", "letterSpacing": 3 }, { "type": "text", "id": "cryYn", "name": "Step 2 Heading", "fill": "#1A1A1A", "content": "Choose Your Fabric", "fontFamily": "Playfair Display", "fontSize": 40, "fontWeight": "700" }, { "type": "text", "id": "Zio0V", "name": "Step 2 Subhead", "fill": "#8C7B6E", "content": "Pick the material that brings your design to life. Swatches available on request.", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "B8WuS", "name": "Step 2 Grid", "width": "fill_container", "height": 730, "layout": "vertical", "gap": 24, "padding": [ 32, 64 ], "alignItems": "center", "children": [ { "type": "frame", "id": "Yy8vF", "name": "Step 2 Row 1", "width": "fill_container", "height": 320, "gap": 24, "children": [ { "type": "frame", "id": "Q24gP3", "name": "Step 2 Card Organic Cotton", "clip": true, "width": "fill_container", "height": 320, "fill": "#FFFFFF", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000010", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "BINWU", "name": "Organic Cotton Swatch", "width": "fill_container", "height": 200, "fill": "#F0E6D2" }, { "type": "frame", "id": "SUJ3Z", "name": "Organic Cotton Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "qBjPV", "name": "Organic Cotton Title", "fill": "#1A1A1A", "content": "Organic Cotton", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "LICBt", "name": "Organic Cotton Price", "fill": "#8C7B6E", "content": "$12/yd", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "sAbIb", "name": "Step 2 Card Linen Blend", "clip": true, "width": "fill_container", "height": 320, "fill": "#FFFFFF", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000010", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "j28vn", "name": "Linen Blend Swatch", "width": "fill_container", "height": 200, "fill": "#D9C9B0" }, { "type": "frame", "id": "kDWrt", "name": "Linen Blend Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "B9QJl", "name": "Linen Blend Title", "fill": "#1A1A1A", "content": "Linen Blend", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "vxo90", "name": "Linen Blend Price", "fill": "#8C7B6E", "content": "$15/yd", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "t45yap", "name": "Step 2 Card Silk Charmeuse", "clip": true, "width": "fill_container", "height": 320, "fill": "#FFFFFF", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000010", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "Vi9Qo", "name": "Silk Charmeuse Swatch", "width": "fill_container", "height": 200, "fill": "#E8D8C8" }, { "type": "frame", "id": "bAsw9", "name": "Silk Charmeuse Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "v1Drhf", "name": "Silk Charmeuse Title", "fill": "#1A1A1A", "content": "Silk Charmeuse", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "UcdxO", "name": "Silk Charmeuse Price", "fill": "#8C7B6E", "content": "$28/yd", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "OwaQS", "name": "Step 2 Row 2", "width": "fill_container", "height": 320, "gap": 24, "children": [ { "type": "frame", "id": "lFQA2", "name": "Step 2 Card Merino Wool", "clip": true, "width": "fill_container", "height": 320, "fill": "#FFFFFF", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000010", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "B2a9zz", "name": "Merino Wool Swatch", "width": "fill_container", "height": 200, "fill": "#8A6E55" }, { "type": "frame", "id": "Uw752", "name": "Merino Wool Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "h4l4Uu", "name": "Merino Wool Title", "fill": "#1A1A1A", "content": "Merino Wool", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "KRGPd", "name": "Merino Wool Price", "fill": "#8C7B6E", "content": "$22/yd", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "FNaDU", "name": "Step 2 Card Velvet", "clip": true, "width": "fill_container", "height": 320, "fill": "#FFFFFF", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000010", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "H4kRL4", "name": "Velvet Swatch", "width": "fill_container", "height": 200, "fill": "#5C3B2E" }, { "type": "frame", "id": "KKAfb", "name": "Velvet Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "Li1Iw", "name": "Velvet Title", "fill": "#1A1A1A", "content": "Velvet", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "LZqg6", "name": "Velvet Price", "fill": "#8C7B6E", "content": "$18/yd", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "D6aQ1Z", "name": "Step 2 Card Denim", "clip": true, "width": "fill_container", "height": 320, "fill": "#FFFFFF", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000010", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "WjIGW", "name": "Denim Swatch", "width": "fill_container", "height": 200, "fill": "#3A4858" }, { "type": "frame", "id": "pdZFl", "name": "Denim Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "qScEZ", "name": "Denim Title", "fill": "#1A1A1A", "content": "Denim", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "ta44T", "name": "Denim Price", "fill": "#8C7B6E", "content": "$14/yd", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] } ] } ] }, { "type": "frame", "id": "oCVij", "name": "Step 2 Navigation", "width": "fill_container", "height": 100, "padding": [ 24, 64 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "JnqUS", "name": "Step 2 Back", "fill": "#FFFFFF", "cornerRadius": 4, "stroke": "#E8E0D5", "strokeWidth": 1, "padding": [ 14, 28 ], "alignItems": "center", "children": [ { "type": "text", "id": "uuNe1", "name": "Step 2 Back Label", "fill": "#1A1A1A", "content": "← Back: Style", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" } ] }, { "type": "frame", "id": "cicCg", "name": "Step 2 Next", "fill": "#1A1A1A", "cornerRadius": 4, "padding": [ 14, 28 ], "alignItems": "center", "children": [ { "type": "text", "id": "zqMOg", "name": "Step 2 Next Label", "fill": "#FFFFFF", "content": "Next: Accessories →", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" } ] } ] }, { "type": "frame", "id": "RxXAC", "name": "Footer", "width": "fill_container", "fill": "$surface-primary", "layout": "vertical", "gap": 32, "padding": [ 56, 64, 32, 64 ], "children": [ { "type": "frame", "id": "SyeML", "name": "Footer Top Row", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "k81kP", "name": "Footer Logo", "fill": "$text-primary", "content": "SEWJOY", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "500", "letterSpacing": 3 }, { "type": "frame", "id": "rAnu1", "name": "Footer Socials", "gap": 20, "alignItems": "center", "children": [ { "type": "text", "id": "dZFKh", "name": "Social P", "fill": "$text-secondary", "content": "P", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "Zw96h", "name": "Social F", "fill": "$text-secondary", "content": "F", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "F2qeEO", "name": "Social C", "fill": "$text-secondary", "content": "C", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "Wn7rM", "name": "Social I", "fill": "$text-secondary", "content": "I", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "Ot7zy", "name": "Footer Divider", "width": "fill_container", "height": 1, "fill": "$border-subtle" }, { "type": "frame", "id": "cVWwl", "name": "Footer Link Grid", "width": "fill_container", "gap": 32, "children": [ { "type": "frame", "id": "XI8FS", "name": "Footer Col SHOP", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ { "type": "text", "id": "y9XS9", "name": "Footer SHOP Header", "fill": "$text-primary", "content": "SHOP", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2 }, { "type": "text", "id": "BlC2X", "name": "Footer SHOP Custom Clothing", "fill": "$text-secondary", "content": "Custom Clothing", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "MIsf6", "name": "Footer SHOP Design Library", "fill": "$text-secondary", "content": "Design Library", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "b3ip7", "name": "Footer SHOP Gift Cards", "fill": "$text-secondary", "content": "Gift Cards", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "J9fMq", "name": "Footer SHOP Sale", "fill": "$text-secondary", "content": "Sale", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "r8Gn6", "name": "Footer Col BRAND", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ { "type": "text", "id": "OcqeD", "name": "Footer BRAND Header", "fill": "$text-primary", "content": "BRAND", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2 }, { "type": "text", "id": "HLrP5", "name": "Footer BRAND Our Story", "fill": "$text-secondary", "content": "Our Story", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "cBnEI", "name": "Footer BRAND Craftsmanship", "fill": "$text-secondary", "content": "Craftsmanship", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "ESNAw", "name": "Footer BRAND Sustainability", "fill": "$text-secondary", "content": "Sustainability", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "T9Dg4M", "name": "Footer BRAND Press", "fill": "$text-secondary", "content": "Press", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "E4CwA", "name": "Footer Col HELP", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ { "type": "text", "id": "KOjVg", "name": "Footer HELP Header", "fill": "$text-primary", "content": "HELP", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2 }, { "type": "text", "id": "VCcpj", "name": "Footer HELP Size Guide", "fill": "$text-secondary", "content": "Size Guide", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "pjiir", "name": "Footer HELP Shipping", "fill": "$text-secondary", "content": "Shipping", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "TRv3C", "name": "Footer HELP Returns", "fill": "$text-secondary", "content": "Returns", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "mdkJu", "name": "Footer HELP Contact", "fill": "$text-secondary", "content": "Contact", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "b2sgI", "name": "Footer Col COMMUNITY", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ { "type": "text", "id": "Oi5Y9", "name": "Footer COMMUNITY Header", "fill": "$text-primary", "content": "COMMUNITY", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2 }, { "type": "text", "id": "kYbTR", "name": "Footer COMMUNITY Makers Hub", "fill": "$text-secondary", "content": "Makers Hub", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "O602k", "name": "Footer COMMUNITY Pattern Library", "fill": "$text-secondary", "content": "Pattern Library", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "cuEHV", "name": "Footer COMMUNITY Tutorials", "fill": "$text-secondary", "content": "Tutorials", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "pkH99", "name": "Footer COMMUNITY Blog", "fill": "$text-secondary", "content": "Blog", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "VHuiS", "name": "Footer Divider 2", "width": "fill_container", "height": 1, "fill": "$border-subtle" }, { "type": "frame", "id": "rHPpG", "name": "Footer Bottom", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "LLVGw", "name": "Footer Copyright", "fill": "$text-muted", "content": "© 2026 SEWJOY", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "VoBTD", "name": "Footer Legal", "fill": "$text-muted", "content": "Privacy · Terms · Cookies", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "xnrFO", "x": 11660, "y": -7604, "name": "Shopping Flow - Step 3 Accessories", "clip": true, "width": 1440, "height": 1400, "fill": "#F8F5F0", "layout": "vertical", "children": [ { "type": "frame", "id": "o8vxEd", "name": "Step 3 Nav", "width": "fill_container", "height": 72, "fill": "#1A1A1A", "padding": [ 0, 64 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "P5aN7", "name": "Step 3 Logo", "fill": "#F8F5F0", "content": "SEWJOY", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "500", "letterSpacing": 3 }, { "type": "frame", "id": "ArBHb", "name": "Step 3 Nav Center", "gap": 40, "alignItems": "center", "children": [ { "type": "text", "id": "dY2VY", "name": "Step 3 Nav SHOP", "fill": "#1A1A1A", "content": "SHOP", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "C3H5Yo", "name": "Step 3 Nav DESIGN YOURS", "fill": "#1A1A1A", "content": "DESIGN YOURS", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "U0PVTg", "name": "Step 3 Nav FABRICS", "fill": "#1A1A1A", "content": "FABRICS", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "CQBbu", "name": "Step 3 Nav MEMBERSHIP", "fill": "#1A1A1A", "content": "MEMBERSHIP", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "c7VUC", "name": "Step 3 Nav COMMUNITY", "fill": "#1A1A1A", "content": "COMMUNITY", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "wvLCW", "name": "Step 3 Nav ABOUT", "fill": "#1A1A1A", "content": "ABOUT", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "m1exBX", "name": "Step 3 Nav Icons", "gap": 24, "alignItems": "center", "children": [ { "type": "text", "id": "jFlCb", "name": "Step 3 Nav Icon Q", "fill": "#1A1A1A", "content": "Q", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "oK1in", "name": "Step 3 Nav Icon ♡", "fill": "#1A1A1A", "content": "♡", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "CoPkQ", "name": "Step 3 Nav Icon ▢", "fill": "#1A1A1A", "content": "▢", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "BjybE", "name": "Step 3 Nav Divider", "width": "fill_container", "height": 1, "fill": "#3D3530" }, { "type": "frame", "id": "mwmfX", "name": "Step 3 Header", "width": "fill_container", "height": 200, "fill": "#1A1A1A", "layout": "vertical", "gap": 12, "padding": [ 48, 64, 32, 64 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "frame", "id": "t4ujnp", "name": "Step 3 Indicator", "gap": 12, "alignItems": "center", "children": [ { "type": "ellipse", "id": "XaRb7", "name": "Step 3 1 Dot", "fill": "#3D3530", "width": 36, "height": 36 }, { "type": "ellipse", "id": "spw2T", "name": "Step 3 2 Dot", "fill": "#3D3530", "width": 36, "height": 36 }, { "type": "ellipse", "id": "DIyoU", "name": "Step 3 3 Dot", "fill": "#C8956C", "width": 36, "height": 36 } ] }, { "type": "text", "id": "B2B9n", "name": "Step 3 Eyebrow", "fill": "#C8956C", "content": "STEP 3 OF 3", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "600", "letterSpacing": 3 }, { "type": "text", "id": "RFE2T", "name": "Step 3 Heading", "fill": "#FFFFFF", "content": "Add Accessories", "fontFamily": "Playfair Display", "fontSize": 40, "fontWeight": "700" }, { "type": "text", "id": "kaVQL", "name": "Step 3 Subhead", "fill": "#B8A99A", "content": "Final touches that make your piece uniquely yours. All accessories included.", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "LemuR", "name": "Step 3 Grid", "width": "fill_container", "height": 730, "layout": "vertical", "gap": 24, "padding": [ 32, 64 ], "alignItems": "center", "children": [ { "type": "frame", "id": "VWpVT", "name": "Step 3 Row 1", "width": "fill_container", "height": 320, "gap": 24, "children": [ { "type": "frame", "id": "BmD6v", "name": "Step 3 Card Shell Buttons", "clip": true, "width": "fill_container", "height": 320, "fill": "#2C2416", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000040", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "IYjce", "name": "Shell Buttons Icon", "width": "fill_container", "height": 200, "fill": "#3D3530", "layout": "none" }, { "type": "ellipse", "id": "NMEef", "name": "Shell Buttons Icon Shape", "fill": "#C8956C", "width": 80, "height": 80 }, { "type": "frame", "id": "fISrC", "name": "Shell Buttons Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "GKWWV", "name": "Shell Buttons Title", "fill": "#FFFFFF", "content": "Shell Buttons", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "F0uVv", "name": "Shell Buttons Sub", "fill": "#B8A99A", "content": "Classic natural finish", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "KxRdP", "name": "Step 3 Card YKK Metal Zipper", "clip": true, "width": "fill_container", "height": 320, "fill": "#2C2416", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000040", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "pcCyQ", "name": "YKK Metal Zipper Icon", "width": "fill_container", "height": 200, "fill": "#3D3530", "layout": "none" }, { "type": "ellipse", "id": "qoCx4", "name": "YKK Metal Zipper Icon Shape", "fill": "#C8956C", "width": 80, "height": 80 }, { "type": "frame", "id": "gAaFR", "name": "YKK Metal Zipper Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "NY85t", "name": "YKK Metal Zipper Title", "fill": "#FFFFFF", "content": "YKK Metal Zipper", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "V5h0dl", "name": "YKK Metal Zipper Sub", "fill": "#B8A99A", "content": "Premium Japanese hardware", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "Ij1si", "name": "Step 3 Card Silk Satin Lining", "clip": true, "width": "fill_container", "height": 320, "fill": "#2C2416", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000040", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "TR6ll", "name": "Silk Satin Lining Icon", "width": "fill_container", "height": 200, "fill": "#3D3530", "layout": "none" }, { "type": "ellipse", "id": "pe7oT", "name": "Silk Satin Lining Icon Shape", "fill": "#C8956C", "width": 80, "height": 80 }, { "type": "frame", "id": "aQKkN", "name": "Silk Satin Lining Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "XGGtq", "name": "Silk Satin Lining Title", "fill": "#FFFFFF", "content": "Silk Satin Lining", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "oWmfi", "name": "Silk Satin Lining Sub", "fill": "#B8A99A", "content": "Smooth interior finish", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "g2guI", "name": "Step 3 Row 2", "width": "fill_container", "height": 320, "gap": 24, "children": [ { "type": "frame", "id": "XZ9ct", "name": "Step 3 Card Patch Pockets", "clip": true, "width": "fill_container", "height": 320, "fill": "#2C2416", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000040", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "w6o79", "name": "Patch Pockets Icon", "width": "fill_container", "height": 200, "fill": "#3D3530", "layout": "none" }, { "type": "ellipse", "id": "gDlt2", "name": "Patch Pockets Icon Shape", "fill": "#C8956C", "width": 80, "height": 80 }, { "type": "frame", "id": "g6ZgvZ", "name": "Patch Pockets Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "NJqdl", "name": "Patch Pockets Title", "fill": "#FFFFFF", "content": "Patch Pockets", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "EbpZq", "name": "Patch Pockets Sub", "fill": "#B8A99A", "content": "Casual utility detail", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "VEAFZ", "name": "Step 3 Card Mandarin Collar", "clip": true, "width": "fill_container", "height": 320, "fill": "#2C2416", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000040", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "p4Y8er", "name": "Mandarin Collar Icon", "width": "fill_container", "height": 200, "fill": "#3D3530", "layout": "none" }, { "type": "ellipse", "id": "nPjUm", "name": "Mandarin Collar Icon Shape", "fill": "#C8956C", "width": 80, "height": 80 }, { "type": "frame", "id": "Z1N1AL", "name": "Mandarin Collar Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "yjwvw", "name": "Mandarin Collar Title", "fill": "#FFFFFF", "content": "Mandarin Collar", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "S2aCZt", "name": "Mandarin Collar Sub", "fill": "#B8A99A", "content": "Modern minimalist", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "P0BtLw", "name": "Step 3 Card French Cuffs", "clip": true, "width": "fill_container", "height": 320, "fill": "#2C2416", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000040", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "G0jFtv", "name": "French Cuffs Icon", "width": "fill_container", "height": 200, "fill": "#3D3530", "layout": "none" }, { "type": "ellipse", "id": "PKPEg", "name": "French Cuffs Icon Shape", "fill": "#C8956C", "width": 80, "height": 80 }, { "type": "frame", "id": "LSEUw", "name": "French Cuffs Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "ifUU9", "name": "French Cuffs Title", "fill": "#FFFFFF", "content": "French Cuffs", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "ZADT0", "name": "French Cuffs Sub", "fill": "#B8A99A", "content": "Refined tailored detail", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] } ] } ] }, { "type": "frame", "id": "B0v77", "name": "Step 3 Navigation", "width": "fill_container", "height": 100, "padding": [ 24, 64 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "fjkkv", "name": "Step 3 Back", "fill": "#3D3530", "cornerRadius": 4, "stroke": "#3D3530", "strokeWidth": 1, "padding": [ 14, 28 ], "alignItems": "center", "children": [ { "type": "text", "id": "fgXmO", "name": "Step 3 Back Label", "fill": "#F8F5F0", "content": "← Back: Fabric", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" } ] }, { "type": "frame", "id": "UpLES", "name": "Step 3 Complete", "fill": "#C8956C", "cornerRadius": 4, "padding": [ 14, 28 ], "alignItems": "center", "children": [ { "type": "text", "id": "a9YLHV", "name": "Step 3 Complete Label", "fill": "#1A1A1A", "content": "Complete Design ✓", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" } ] } ] }, { "type": "frame", "id": "Zddvu", "name": "Footer", "width": "fill_container", "fill": "#1A1A1A", "layout": "vertical", "gap": 32, "padding": [ 56, 64, 32, 64 ], "children": [ { "type": "frame", "id": "L4LOY", "name": "Footer Top Row", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "xFXpi", "name": "Footer Logo", "fill": "$text-primary", "content": "SEWJOY", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "500", "letterSpacing": 3 }, { "type": "frame", "id": "xG23h", "name": "Footer Socials", "gap": 20, "alignItems": "center", "children": [ { "type": "text", "id": "MUOYI", "name": "Social P", "fill": "$text-secondary", "content": "P", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "Lpxmi", "name": "Social F", "fill": "$text-secondary", "content": "F", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "obwT0", "name": "Social C", "fill": "$text-secondary", "content": "C", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "HgpIn", "name": "Social I", "fill": "$text-secondary", "content": "I", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "j9wYXv", "name": "Footer Divider", "width": "fill_container", "height": 1, "fill": "$border-subtle" }, { "type": "frame", "id": "o47hvM", "name": "Footer Link Grid", "width": "fill_container", "gap": 32, "children": [ { "type": "frame", "id": "bGC3E", "name": "Footer Col SHOP", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ { "type": "text", "id": "Gqb4n", "name": "Footer SHOP Header", "fill": "$text-primary", "content": "SHOP", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2 }, { "type": "text", "id": "w2TldL", "name": "Footer SHOP Custom Clothing", "fill": "$text-secondary", "content": "Custom Clothing", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "j0y6Qg", "name": "Footer SHOP Design Library", "fill": "$text-secondary", "content": "Design Library", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "rbfqo", "name": "Footer SHOP Gift Cards", "fill": "$text-secondary", "content": "Gift Cards", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "OgM6s", "name": "Footer SHOP Sale", "fill": "$text-secondary", "content": "Sale", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "SxFIa", "name": "Footer Col BRAND", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ { "type": "text", "id": "h89uh", "name": "Footer BRAND Header", "fill": "$text-primary", "content": "BRAND", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2 }, { "type": "text", "id": "p9GwSi", "name": "Footer BRAND Our Story", "fill": "$text-secondary", "content": "Our Story", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "Oxeht", "name": "Footer BRAND Craftsmanship", "fill": "$text-secondary", "content": "Craftsmanship", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "SKdP7", "name": "Footer BRAND Sustainability", "fill": "$text-secondary", "content": "Sustainability", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "Z8YN9K", "name": "Footer BRAND Press", "fill": "$text-secondary", "content": "Press", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "rFtKR", "name": "Footer Col HELP", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ { "type": "text", "id": "Cuu2u", "name": "Footer HELP Header", "fill": "$text-primary", "content": "HELP", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2 }, { "type": "text", "id": "N01zn", "name": "Footer HELP Size Guide", "fill": "$text-secondary", "content": "Size Guide", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "hLzvz", "name": "Footer HELP Shipping", "fill": "$text-secondary", "content": "Shipping", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "a2CKt", "name": "Footer HELP Returns", "fill": "$text-secondary", "content": "Returns", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "v0I4Y", "name": "Footer HELP Contact", "fill": "$text-secondary", "content": "Contact", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "cXCK0", "name": "Footer Col COMMUNITY", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ { "type": "text", "id": "zEt7L", "name": "Footer COMMUNITY Header", "fill": "$text-primary", "content": "COMMUNITY", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2 }, { "type": "text", "id": "R5VD7d", "name": "Footer COMMUNITY Makers Hub", "fill": "$text-secondary", "content": "Makers Hub", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "NtmiD", "name": "Footer COMMUNITY Pattern Library", "fill": "$text-secondary", "content": "Pattern Library", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "hmRY7", "name": "Footer COMMUNITY Tutorials", "fill": "$text-secondary", "content": "Tutorials", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "kmuw9", "name": "Footer COMMUNITY Blog", "fill": "$text-secondary", "content": "Blog", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "gvQ0M", "name": "Footer Divider 2", "width": "fill_container", "height": 1, "fill": "$border-subtle" }, { "type": "frame", "id": "tEdJM", "name": "Footer Bottom", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "e86fpU", "name": "Footer Copyright", "fill": "$text-muted", "content": "© 2026 SEWJOY", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "Ewsxt", "name": "Footer Legal", "fill": "$text-muted", "content": "Privacy · Terms · Cookies", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "qq1Zl", "x": 13300, "y": -7604, "name": "Shopping Flow - Step 3 Accessories Dark", "clip": true, "width": 1440, "height": 1400, "fill": "#1A1A1A", "layout": "vertical", "children": [ { "type": "frame", "id": "sx1zQ", "name": "Step 3 Nav", "width": "fill_container", "height": 72, "fill": "#F8F5F0", "padding": [ 0, 64 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "dNwjs", "name": "Step 3 Logo", "fill": "#1A1A1A", "content": "SEWJOY", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "500", "letterSpacing": 3 }, { "type": "frame", "id": "T3Xon", "name": "Step 3 Nav Center", "gap": 40, "alignItems": "center", "children": [ { "type": "text", "id": "UEBl8", "name": "Step 3 Nav SHOP", "fill": "#1A1A1A", "content": "SHOP", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "oFLgH", "name": "Step 3 Nav DESIGN YOURS", "fill": "#1A1A1A", "content": "DESIGN YOURS", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "i6seH", "name": "Step 3 Nav FABRICS", "fill": "#1A1A1A", "content": "FABRICS", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "nqYwB", "name": "Step 3 Nav MEMBERSHIP", "fill": "#1A1A1A", "content": "MEMBERSHIP", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "O2UZ3e", "name": "Step 3 Nav COMMUNITY", "fill": "#1A1A1A", "content": "COMMUNITY", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "gb6wo", "name": "Step 3 Nav ABOUT", "fill": "#1A1A1A", "content": "ABOUT", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "Mm4Gw", "name": "Step 3 Nav Icons", "gap": 24, "alignItems": "center", "children": [ { "type": "text", "id": "m6lAgO", "name": "Step 3 Nav Icon Q", "fill": "#1A1A1A", "content": "Q", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "CLCrT", "name": "Step 3 Nav Icon ♡", "fill": "#1A1A1A", "content": "♡", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "l18Lb", "name": "Step 3 Nav Icon ▢", "fill": "#1A1A1A", "content": "▢", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "mVTkH", "name": "Step 3 Nav Divider", "width": "fill_container", "height": 1, "fill": "#E8E0D5" }, { "type": "frame", "id": "YlxgO", "name": "Step 3 Header", "width": "fill_container", "height": 200, "layout": "vertical", "gap": 12, "padding": [ 48, 64, 32, 64 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "frame", "id": "sg3Rf", "name": "Step 3 Indicator", "gap": 12, "alignItems": "center", "children": [ { "type": "ellipse", "id": "dvQDd", "name": "Step 3 1 Dot", "fill": "#E8E0D5", "width": 36, "height": 36 }, { "type": "ellipse", "id": "seeGC", "name": "Step 3 2 Dot", "fill": "#E8E0D5", "width": 36, "height": 36 }, { "type": "ellipse", "id": "c0CCrS", "name": "Step 3 3 Dot", "fill": "#C8956C", "width": 36, "height": 36 } ] }, { "type": "text", "id": "MZT8U", "name": "Step 3 Eyebrow", "fill": "#C8956C", "content": "STEP 3 OF 3", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "600", "letterSpacing": 3 }, { "type": "text", "id": "FgmY0", "name": "Step 3 Heading", "fill": "#1A1A1A", "content": "Add Accessories", "fontFamily": "Playfair Display", "fontSize": 40, "fontWeight": "700" }, { "type": "text", "id": "T4Hdmi", "name": "Step 3 Subhead", "fill": "#8C7B6E", "content": "Final touches that make your piece uniquely yours. All accessories included.", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] }, { "type": "frame", "id": "cuG2U", "name": "Step 3 Grid", "width": "fill_container", "height": 730, "layout": "vertical", "gap": 24, "padding": [ 32, 64 ], "alignItems": "center", "children": [ { "type": "frame", "id": "HvT5W", "name": "Step 3 Row 1", "width": "fill_container", "height": 320, "gap": 24, "children": [ { "type": "frame", "id": "JV1Js", "name": "Step 3 Card Shell Buttons", "clip": true, "width": "fill_container", "height": 320, "fill": "#FFFFFF", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000010", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "NN9RK", "name": "Shell Buttons Icon", "width": "fill_container", "height": 200, "fill": "#E8E0D5", "layout": "none" }, { "type": "ellipse", "id": "yAWRZ", "name": "Shell Buttons Icon Shape", "fill": "#C8956C", "width": 80, "height": 80 }, { "type": "frame", "id": "ponOo", "name": "Shell Buttons Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "T2QwK", "name": "Shell Buttons Title", "fill": "#1A1A1A", "content": "Shell Buttons", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "LMJ7W", "name": "Shell Buttons Sub", "fill": "#8C7B6E", "content": "Classic natural finish", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "zLKji", "name": "Step 3 Card YKK Metal Zipper", "clip": true, "width": "fill_container", "height": 320, "fill": "#FFFFFF", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000010", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "FfPJC", "name": "YKK Metal Zipper Icon", "width": "fill_container", "height": 200, "fill": "#E8E0D5", "layout": "none" }, { "type": "ellipse", "id": "L9NzU", "name": "YKK Metal Zipper Icon Shape", "fill": "#C8956C", "width": 80, "height": 80 }, { "type": "frame", "id": "aL29o", "name": "YKK Metal Zipper Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "smtG2", "name": "YKK Metal Zipper Title", "fill": "#1A1A1A", "content": "YKK Metal Zipper", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "LLGKC", "name": "YKK Metal Zipper Sub", "fill": "#8C7B6E", "content": "Premium Japanese hardware", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "USRqy", "name": "Step 3 Card Silk Satin Lining", "clip": true, "width": "fill_container", "height": 320, "fill": "#FFFFFF", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000010", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "le6zf", "name": "Silk Satin Lining Icon", "width": "fill_container", "height": 200, "fill": "#E8E0D5", "layout": "none" }, { "type": "ellipse", "id": "G5mjk", "name": "Silk Satin Lining Icon Shape", "fill": "#C8956C", "width": 80, "height": 80 }, { "type": "frame", "id": "E89MW3", "name": "Silk Satin Lining Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "FNZsW", "name": "Silk Satin Lining Title", "fill": "#1A1A1A", "content": "Silk Satin Lining", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "Q1heNO", "name": "Silk Satin Lining Sub", "fill": "#8C7B6E", "content": "Smooth interior finish", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "zBJIL", "name": "Step 3 Row 2", "width": "fill_container", "height": 320, "gap": 24, "children": [ { "type": "frame", "id": "IpUA7", "name": "Step 3 Card Patch Pockets", "clip": true, "width": "fill_container", "height": 320, "fill": "#FFFFFF", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000010", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "hUugV", "name": "Patch Pockets Icon", "width": "fill_container", "height": 200, "fill": "#E8E0D5", "layout": "none" }, { "type": "ellipse", "id": "XNg2Q", "name": "Patch Pockets Icon Shape", "fill": "#C8956C", "width": 80, "height": 80 }, { "type": "frame", "id": "fOK8P", "name": "Patch Pockets Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "zLpl4", "name": "Patch Pockets Title", "fill": "#1A1A1A", "content": "Patch Pockets", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "VJt87", "name": "Patch Pockets Sub", "fill": "#8C7B6E", "content": "Casual utility detail", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "kOxtE", "name": "Step 3 Card Mandarin Collar", "clip": true, "width": "fill_container", "height": 320, "fill": "#FFFFFF", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000010", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "bRk3C", "name": "Mandarin Collar Icon", "width": "fill_container", "height": 200, "fill": "#E8E0D5", "layout": "none" }, { "type": "ellipse", "id": "QlLwP", "name": "Mandarin Collar Icon Shape", "fill": "#C8956C", "width": 80, "height": 80 }, { "type": "frame", "id": "rd7jb", "name": "Mandarin Collar Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "AE0lj", "name": "Mandarin Collar Title", "fill": "#1A1A1A", "content": "Mandarin Collar", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "S42FLQ", "name": "Mandarin Collar Sub", "fill": "#8C7B6E", "content": "Modern minimalist", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "j7j6G", "name": "Step 3 Card French Cuffs", "clip": true, "width": "fill_container", "height": 320, "fill": "#FFFFFF", "cornerRadius": 8, "effect": { "type": "shadow", "shadowType": "outer", "color": "#00000010", "offset": { "x": 0, "y": 2 }, "blur": 8 }, "layout": "vertical", "children": [ { "type": "frame", "id": "fyOj2", "name": "French Cuffs Icon", "width": "fill_container", "height": 200, "fill": "#E8E0D5", "layout": "none" }, { "type": "ellipse", "id": "TCoS8", "name": "French Cuffs Icon Shape", "fill": "#C8956C", "width": 80, "height": 80 }, { "type": "frame", "id": "xWpTk", "name": "French Cuffs Body", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "BOznp", "name": "French Cuffs Title", "fill": "#1A1A1A", "content": "French Cuffs", "fontFamily": "Playfair Display", "fontSize": 18, "fontWeight": "700" }, { "type": "text", "id": "HIZFX", "name": "French Cuffs Sub", "fill": "#8C7B6E", "content": "Refined tailored detail", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] } ] } ] }, { "type": "frame", "id": "wm0jN", "name": "Step 3 Navigation", "width": "fill_container", "height": 100, "padding": [ 24, 64 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "hgAEf", "name": "Step 3 Back", "fill": "#FFFFFF", "cornerRadius": 4, "stroke": "#E8E0D5", "strokeWidth": 1, "padding": [ 14, 28 ], "alignItems": "center", "children": [ { "type": "text", "id": "kLtpS", "name": "Step 3 Back Label", "fill": "#1A1A1A", "content": "← Back: Fabric", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" } ] }, { "type": "frame", "id": "bZfi4", "name": "Step 3 Complete", "fill": "#C8956C", "cornerRadius": 4, "padding": [ 14, 28 ], "alignItems": "center", "children": [ { "type": "text", "id": "icGKw", "name": "Step 3 Complete Label", "fill": "#FFFFFF", "content": "Complete Design ✓", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" } ] } ] }, { "type": "frame", "id": "cakdY", "name": "Footer", "width": "fill_container", "fill": "$surface-primary", "layout": "vertical", "gap": 32, "padding": [ 56, 64, 32, 64 ], "children": [ { "type": "frame", "id": "bG7AR", "name": "Footer Top Row", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "BjR1V", "name": "Footer Logo", "fill": "$text-primary", "content": "SEWJOY", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "500", "letterSpacing": 3 }, { "type": "frame", "id": "PQHHD", "name": "Footer Socials", "gap": 20, "alignItems": "center", "children": [ { "type": "text", "id": "V0dTJf", "name": "Social P", "fill": "$text-secondary", "content": "P", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "pX637", "name": "Social F", "fill": "$text-secondary", "content": "F", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "t9c5dM", "name": "Social C", "fill": "$text-secondary", "content": "C", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "oX0r9", "name": "Social I", "fill": "$text-secondary", "content": "I", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "j4pmE6", "name": "Footer Divider", "width": "fill_container", "height": 1, "fill": "$border-subtle" }, { "type": "frame", "id": "McMrp", "name": "Footer Link Grid", "width": "fill_container", "gap": 32, "children": [ { "type": "frame", "id": "IFEKT", "name": "Footer Col SHOP", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ { "type": "text", "id": "tdbQM", "name": "Footer SHOP Header", "fill": "$text-primary", "content": "SHOP", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2 }, { "type": "text", "id": "NR7pz", "name": "Footer SHOP Custom Clothing", "fill": "$text-secondary", "content": "Custom Clothing", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "zpsRR", "name": "Footer SHOP Design Library", "fill": "$text-secondary", "content": "Design Library", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "m64uU", "name": "Footer SHOP Gift Cards", "fill": "$text-secondary", "content": "Gift Cards", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "mZSfE", "name": "Footer SHOP Sale", "fill": "$text-secondary", "content": "Sale", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "blSGw", "name": "Footer Col BRAND", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ { "type": "text", "id": "X3Y16", "name": "Footer BRAND Header", "fill": "$text-primary", "content": "BRAND", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2 }, { "type": "text", "id": "RdsRb", "name": "Footer BRAND Our Story", "fill": "$text-secondary", "content": "Our Story", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "v7Tz4X", "name": "Footer BRAND Craftsmanship", "fill": "$text-secondary", "content": "Craftsmanship", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "eleES", "name": "Footer BRAND Sustainability", "fill": "$text-secondary", "content": "Sustainability", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "jtXIC", "name": "Footer BRAND Press", "fill": "$text-secondary", "content": "Press", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "xTJe7", "name": "Footer Col HELP", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ { "type": "text", "id": "fAmzI", "name": "Footer HELP Header", "fill": "$text-primary", "content": "HELP", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2 }, { "type": "text", "id": "BWJxM", "name": "Footer HELP Size Guide", "fill": "$text-secondary", "content": "Size Guide", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "oCGQN", "name": "Footer HELP Shipping", "fill": "$text-secondary", "content": "Shipping", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "qUuuN", "name": "Footer HELP Returns", "fill": "$text-secondary", "content": "Returns", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "IkyER", "name": "Footer HELP Contact", "fill": "$text-secondary", "content": "Contact", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "gSlVi", "name": "Footer Col COMMUNITY", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ { "type": "text", "id": "umYMN", "name": "Footer COMMUNITY Header", "fill": "$text-primary", "content": "COMMUNITY", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2 }, { "type": "text", "id": "TL0ZC", "name": "Footer COMMUNITY Makers Hub", "fill": "$text-secondary", "content": "Makers Hub", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "huIxp", "name": "Footer COMMUNITY Pattern Library", "fill": "$text-secondary", "content": "Pattern Library", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "CHmDr", "name": "Footer COMMUNITY Tutorials", "fill": "$text-secondary", "content": "Tutorials", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "IcOhe", "name": "Footer COMMUNITY Blog", "fill": "$text-secondary", "content": "Blog", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "uQEiS", "name": "Footer Divider 2", "width": "fill_container", "height": 1, "fill": "$border-subtle" }, { "type": "frame", "id": "uOg0V", "name": "Footer Bottom", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "cVfjW", "name": "Footer Copyright", "fill": "$text-muted", "content": "© 2026 SEWJOY", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "USGVz", "name": "Footer Legal", "fill": "$text-muted", "content": "Privacy · Terms · Cookies", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "G4ytlw", "x": -2726, "y": -4555, "name": "Reusable Components", "width": 3300, "fill": "#FFFFFF", "cornerRadius": 8, "stroke": "#2C2416", "strokeWidth": 1, "layout": "vertical", "gap": 24, "padding": 40, "children": [ { "type": "text", "id": "BfTUw", "name": "Components Title", "fill": "#1A1A1A", "content": "REUSABLE COMPONENTS LIBRARY", "fontFamily": "Inter", "fontSize": 24, "fontWeight": "700", "letterSpacing": 2 }, { "type": "text", "id": "K8PMzR", "name": "Components Subtitle", "fill": "#8C7B6E", "content": "8 components — Nav, Banner, Footer, Primary Button — each in Light and Dark variants. Use via ref instances.", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "frame", "id": "DtS8p", "name": "Components Nav Row", "width": "fill_container", "gap": 24, "children": [ { "type": "frame", "id": "NBZe9", "name": "Component Nav Light", "reusable": true, "clip": true, "width": 1440, "height": 72, "fill": "#F8F5F0", "padding": [ 0, 64 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "l1oPlK", "name": "Comp Nav Light Logo", "fill": "#1A1A1A", "content": "SEWJOY", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "500", "letterSpacing": 3 }, { "type": "frame", "id": "inxDj", "name": "Comp Nav Light Center", "gap": 40, "alignItems": "center", "children": [ { "type": "text", "id": "hC36o", "name": "Comp Nav Light SHOP", "fill": "#1A1A1A", "content": "SHOP", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "C4P8BG", "name": "Comp Nav Light DESIGN YOURS", "fill": "#1A1A1A", "content": "DESIGN YOURS", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "cxl1f", "name": "Comp Nav Light FABRICS", "fill": "#1A1A1A", "content": "FABRICS", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "HZlrK", "name": "Comp Nav Light MEMBERSHIP", "fill": "#1A1A1A", "content": "MEMBERSHIP", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "i9g7q", "name": "Comp Nav Light COMMUNITY", "fill": "#1A1A1A", "content": "COMMUNITY", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "BnTnA", "name": "Comp Nav Light ABOUT", "fill": "#1A1A1A", "content": "ABOUT", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "vntcc", "name": "Comp Nav Light Icons", "gap": 24, "alignItems": "center", "children": [ { "type": "text", "id": "iII3T", "name": "Comp Nav Light Icon Q", "fill": "#1A1A1A", "content": "Q", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "EjmhG", "name": "Comp Nav Light Icon ♡", "fill": "#1A1A1A", "content": "♡", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "O0njWZ", "name": "Comp Nav Light Icon ▢", "fill": "#1A1A1A", "content": "▢", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "z6W9Ct", "name": "Component Nav Dark", "reusable": true, "clip": true, "width": 1440, "height": 72, "fill": "#1A1A1A", "padding": [ 0, 64 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "Dy5Zy", "name": "Comp Nav Dark Logo", "fill": "#F8F5F0", "content": "SEWJOY", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "500", "letterSpacing": 3 }, { "type": "frame", "id": "Lmq6c", "name": "Comp Nav Dark Center", "gap": 40, "alignItems": "center", "children": [ { "type": "text", "id": "N8NPlh", "name": "Comp Nav Dark SHOP", "fill": "#F8F5F0", "content": "SHOP", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "m0cUX", "name": "Comp Nav Dark DESIGN YOURS", "fill": "#F8F5F0", "content": "DESIGN YOURS", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "AEioP", "name": "Comp Nav Dark FABRICS", "fill": "#F8F5F0", "content": "FABRICS", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "YzV1A", "name": "Comp Nav Dark MEMBERSHIP", "fill": "#F8F5F0", "content": "MEMBERSHIP", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "vckF8", "name": "Comp Nav Dark COMMUNITY", "fill": "#F8F5F0", "content": "COMMUNITY", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" }, { "type": "text", "id": "u3wVxl", "name": "Comp Nav Dark ABOUT", "fill": "#F8F5F0", "content": "ABOUT", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "normal" } ] }, { "type": "frame", "id": "xMI2K", "name": "Comp Nav Dark Icons", "gap": 24, "alignItems": "center", "children": [ { "type": "text", "id": "TwZKV", "name": "Comp Nav Dark Icon Q", "fill": "#F8F5F0", "content": "Q", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "LasPt", "name": "Comp Nav Dark Icon ♡", "fill": "#F8F5F0", "content": "♡", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "text", "id": "W2Xi5U", "name": "Comp Nav Dark Icon ▢", "fill": "#F8F5F0", "content": "▢", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "S6wdZH", "name": "Components Banner Row", "width": "fill_container", "gap": 24, "children": [ { "type": "frame", "id": "OitOd", "name": "Component Banner Light", "reusable": true, "clip": true, "width": 1440, "height": 360, "fill": "#F8F5F0", "layout": "none", "children": [ { "type": "frame", "id": "W2igPp", "x": 64, "y": 40, "name": "Comp Banner Light Content", "width": 560, "height": 280, "layout": "vertical", "gap": 14, "justifyContent": "center", "children": [ { "type": "text", "id": "XzJVm", "name": "Comp Banner Light Eyebrow", "fill": "#C8956C", "content": "EDITORIAL BANNER", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600", "letterSpacing": 3 }, { "type": "text", "id": "rzu1U", "name": "Comp Banner Light Heading", "fill": "#1A1A1A", "content": "Banner Headline Here.", "lineHeight": 1.05, "fontFamily": "Playfair Display", "fontSize": 44, "fontWeight": "700" }, { "type": "text", "id": "fUE70", "name": "Comp Banner Light Sub", "fill": "#3D3530", "content": "Supporting copy that explains the offer or story. Editable in the instance.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "frame", "id": "frCGe", "name": "Comp Banner Light CTA", "fill": "#1A1A1A", "cornerRadius": 4, "gap": 8, "padding": [ 14, 28 ], "alignItems": "center", "children": [ { "type": "text", "id": "EtnQG", "name": "Comp Banner Light CTA Label", "fill": "#FFFFFF", "content": "Call to Action", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" }, { "type": "text", "id": "JeDOg", "name": "Comp Banner Light CTA Arrow", "fill": "#FFFFFF", "content": "→", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" } ] } ] }, { "type": "text", "id": "z1xgo", "x": 1000, "y": 40, "name": "Comp Banner Light BigNum", "opacity": 0.15, "fill": "#C8956C", "content": "01", "fontFamily": "Playfair Display", "fontSize": 280, "fontWeight": "700" }, { "type": "text", "id": "zmuM5", "x": 1080, "y": 300, "name": "Comp Banner Light Caption", "fill": "#8C7B6E", "content": "BANNER CAPTION", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2 } ] }, { "type": "frame", "id": "GfOVE", "name": "Component Banner Dark", "reusable": true, "clip": true, "width": 1440, "height": 360, "fill": "#2C2416", "layout": "none", "children": [ { "type": "frame", "id": "IJkwx", "x": 64, "y": 40, "name": "Comp Banner Dark Content", "width": 560, "height": 280, "layout": "vertical", "gap": 14, "justifyContent": "center", "children": [ { "type": "text", "id": "CAYtV", "name": "Comp Banner Dark Eyebrow", "fill": "#C8956C", "content": "EDITORIAL BANNER", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600", "letterSpacing": 3 }, { "type": "text", "id": "YW5Ep", "name": "Comp Banner Dark Heading", "fill": "#FFFFFF", "content": "Banner Headline Here.", "lineHeight": 1.05, "fontFamily": "Playfair Display", "fontSize": 44, "fontWeight": "700" }, { "type": "text", "id": "i28ui", "name": "Comp Banner Dark Sub", "fill": "#C8956C", "content": "Supporting copy that explains the offer or story. Editable in the instance.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "frame", "id": "W0mBH", "name": "Comp Banner Dark CTA", "fill": "#C8956C", "cornerRadius": 4, "gap": 8, "padding": [ 14, 28 ], "alignItems": "center", "children": [ { "type": "text", "id": "DUILh", "name": "Comp Banner Dark CTA Label", "fill": "#1A1A1A", "content": "Call to Action", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" }, { "type": "text", "id": "qe53P", "name": "Comp Banner Dark CTA Arrow", "fill": "#1A1A1A", "content": "→", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" } ] } ] }, { "type": "text", "id": "Mi9AS", "x": 1000, "y": 40, "name": "Comp Banner Dark BigNum", "opacity": 0.25, "fill": "#C8956C", "content": "01", "fontFamily": "Playfair Display", "fontSize": 280, "fontWeight": "700" }, { "type": "text", "id": "Qx1bk", "x": 1080, "y": 300, "name": "Comp Banner Dark Caption", "fill": "#C8956C", "content": "BANNER CAPTION", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2 } ] } ] }, { "type": "frame", "id": "vwIjL", "name": "Components Footer Row", "width": "fill_container", "gap": 24, "children": [ { "type": "frame", "id": "PZLrQ", "name": "Component Footer Light", "reusable": true, "clip": true, "width": 1440, "height": 400, "fill": "#F8F5F0", "layout": "vertical", "gap": 24, "padding": [ 40, 64, 24, 64 ], "children": [ { "type": "frame", "id": "ozBBy", "name": "Comp Footer Light Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "JzAzl", "name": "Comp Footer Light Logo Group", "gap": 8, "alignItems": "center", "children": [ { "type": "text", "id": "i9oos", "name": "Comp Footer Light Logo", "fill": "#1A1A1A", "content": "SEWJOY", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "500", "letterSpacing": 3 }, { "type": "text", "id": "fuAKA", "name": "Comp Footer Light Tagline", "fill": "#8C7B6E", "content": "HANDMADE GOODS", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "500", "letterSpacing": 2 } ] }, { "type": "frame", "id": "qyJtx", "name": "Comp Footer Light Socials", "gap": 12, "alignItems": "center", "children": [ { "type": "frame", "id": "JqD1J", "name": "Comp Footer Light Social P", "width": 32, "height": 32, "fill": "#FFFFFF", "cornerRadius": 16, "stroke": "#E8E0D5", "strokeWidth": 1, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "wzVXW", "name": "P label", "fill": "#1A1A1A", "content": "P", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" } ] }, { "type": "frame", "id": "JTcK5", "name": "Comp Footer Light Social F", "width": 32, "height": 32, "fill": "#FFFFFF", "cornerRadius": 16, "stroke": "#E8E0D5", "strokeWidth": 1, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "jblxF", "name": "F label", "fill": "#1A1A1A", "content": "F", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" } ] }, { "type": "frame", "id": "ee26g", "name": "Comp Footer Light Social I", "width": 32, "height": 32, "fill": "#FFFFFF", "cornerRadius": 16, "stroke": "#E8E0D5", "strokeWidth": 1, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "E2T3H", "name": "I label", "fill": "#1A1A1A", "content": "I", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" } ] }, { "type": "frame", "id": "ertbp", "name": "Comp Footer Light Social Y", "width": 32, "height": 32, "fill": "#FFFFFF", "cornerRadius": 16, "stroke": "#E8E0D5", "strokeWidth": 1, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "g15gi", "name": "Y label", "fill": "#1A1A1A", "content": "Y", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" } ] } ] } ] }, { "type": "frame", "id": "iix6T", "name": "Comp Footer Light Divider 1", "width": "fill_container", "height": 1, "fill": "#E8E0D5" }, { "type": "frame", "id": "eHyru", "name": "Comp Footer Light Grid", "width": "fill_container", "gap": 32, "children": [ { "type": "frame", "id": "tZISP", "name": "Comp Footer Light Col SHOP", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ { "type": "text", "id": "qa1Aq", "name": "SHOP Header", "fill": "#1A1A1A", "content": "SHOP", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600", "letterSpacing": 2 }, { "type": "text", "id": "PHkeV", "name": "SHOP Custom Clothing", "fill": "#8C7B6E", "content": "Custom Clothing", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "yfhKG", "name": "SHOP Design Library", "fill": "#8C7B6E", "content": "Design Library", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "bi1pf", "name": "SHOP Gift Cards", "fill": "#8C7B6E", "content": "Gift Cards", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "HwJhT", "name": "Comp Footer Light Col BRAND", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ { "type": "text", "id": "zhAER", "name": "BRAND Header", "fill": "#1A1A1A", "content": "BRAND", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600", "letterSpacing": 2 }, { "type": "text", "id": "HgTKq", "name": "BRAND Our Story", "fill": "#8C7B6E", "content": "Our Story", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "LgJ31", "name": "BRAND Craftsmanship", "fill": "#8C7B6E", "content": "Craftsmanship", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "YmIPM", "name": "BRAND Sustainability", "fill": "#8C7B6E", "content": "Sustainability", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "TuOnv", "name": "Comp Footer Light Col HELP", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ { "type": "text", "id": "w3jXG", "name": "HELP Header", "fill": "#1A1A1A", "content": "HELP", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600", "letterSpacing": 2 }, { "type": "text", "id": "l6iVwP", "name": "HELP Size Guide", "fill": "#8C7B6E", "content": "Size Guide", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "E9XScn", "name": "HELP Shipping", "fill": "#8C7B6E", "content": "Shipping", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "YVDdm", "name": "HELP Returns", "fill": "#8C7B6E", "content": "Returns", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "NSCJg", "name": "Comp Footer Light Col COMMUNITY", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ { "type": "text", "id": "GonuV", "name": "COMMUNITY Header", "fill": "#1A1A1A", "content": "COMMUNITY", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600", "letterSpacing": 2 }, { "type": "text", "id": "Kd16S", "name": "COMMUNITY Makers Hub", "fill": "#8C7B6E", "content": "Makers Hub", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "LYye7", "name": "COMMUNITY Pattern Library", "fill": "#8C7B6E", "content": "Pattern Library", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "d3vc4U", "name": "COMMUNITY Tutorials", "fill": "#8C7B6E", "content": "Tutorials", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "GStAi", "name": "Comp Footer Light Divider 2", "width": "fill_container", "height": 1, "fill": "#E8E0D5" }, { "type": "frame", "id": "acQEs", "name": "Comp Footer Light Bottom", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "s4j14U", "name": "Comp Footer Light Copyright", "fill": "#8C7B6E", "content": "© 2026 SEWJOY", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "T51Q3y", "name": "Comp Footer Light Legal", "fill": "#8C7B6E", "content": "Privacy · Terms · Cookies", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "Rjj66", "name": "Component Footer Dark", "reusable": true, "clip": true, "width": 1440, "height": 400, "fill": "#1A1A1A", "layout": "vertical", "gap": 24, "padding": [ 40, 64, 24, 64 ], "children": [ { "type": "frame", "id": "BdkXv", "name": "Comp Footer Dark Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "Av2i5", "name": "Comp Footer Dark Logo Group", "gap": 8, "alignItems": "center", "children": [ { "type": "text", "id": "XxxOv", "name": "Comp Footer Dark Logo", "fill": "#FFFFFF", "content": "SEWJOY", "fontFamily": "Inter", "fontSize": 16, "fontWeight": "500", "letterSpacing": 3 }, { "type": "text", "id": "TYJHY", "name": "Comp Footer Dark Tagline", "fill": "#B8A99A", "content": "HANDMADE GOODS", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "500", "letterSpacing": 2 } ] }, { "type": "frame", "id": "IBZHn", "name": "Comp Footer Dark Socials", "gap": 12, "alignItems": "center", "children": [ { "type": "frame", "id": "hiIdN", "name": "Comp Footer Dark Social P", "width": 32, "height": 32, "fill": "#2C2416", "cornerRadius": 16, "stroke": "#3D3530", "strokeWidth": 1, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "NrDsa", "name": "P dark label", "fill": "#FFFFFF", "content": "P", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" } ] }, { "type": "frame", "id": "cEbwl", "name": "Comp Footer Dark Social F", "width": 32, "height": 32, "fill": "#2C2416", "cornerRadius": 16, "stroke": "#3D3530", "strokeWidth": 1, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "TufRQ", "name": "F dark label", "fill": "#FFFFFF", "content": "F", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" } ] }, { "type": "frame", "id": "tnORe", "name": "Comp Footer Dark Social I", "width": 32, "height": 32, "fill": "#2C2416", "cornerRadius": 16, "stroke": "#3D3530", "strokeWidth": 1, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "IHWM3", "name": "I dark label", "fill": "#FFFFFF", "content": "I", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" } ] }, { "type": "frame", "id": "z3pErX", "name": "Comp Footer Dark Social Y", "width": 32, "height": 32, "fill": "#2C2416", "cornerRadius": 16, "stroke": "#3D3530", "strokeWidth": 1, "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "wM6N0", "name": "Y dark label", "fill": "#FFFFFF", "content": "Y", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" } ] } ] } ] }, { "type": "frame", "id": "YOQFr", "name": "Comp Footer Dark Divider 1", "width": "fill_container", "height": 1, "fill": "#3D3530" }, { "type": "frame", "id": "Gz0LT", "name": "Comp Footer Dark Grid", "width": "fill_container", "gap": 32, "children": [ { "type": "frame", "id": "CBOzr", "name": "Comp Footer Dark Col SHOP", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ { "type": "text", "id": "AOk6x", "name": "SHOP Dark Header", "fill": "#FFFFFF", "content": "SHOP", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600", "letterSpacing": 2 }, { "type": "text", "id": "J0g3e", "name": "SHOP Dark Custom Clothing", "fill": "#B8A99A", "content": "Custom Clothing", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "rCFfM", "name": "SHOP Dark Design Library", "fill": "#B8A99A", "content": "Design Library", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "Cl894", "name": "SHOP Dark Gift Cards", "fill": "#B8A99A", "content": "Gift Cards", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "Lvjud", "name": "Comp Footer Dark Col BRAND", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ { "type": "text", "id": "iP9wz", "name": "BRAND Dark Header", "fill": "#FFFFFF", "content": "BRAND", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600", "letterSpacing": 2 }, { "type": "text", "id": "jwn5C", "name": "BRAND Dark Our Story", "fill": "#B8A99A", "content": "Our Story", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "Dihqe", "name": "BRAND Dark Craftsmanship", "fill": "#B8A99A", "content": "Craftsmanship", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "Hzb9Q", "name": "BRAND Dark Sustainability", "fill": "#B8A99A", "content": "Sustainability", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "M3wrG", "name": "Comp Footer Dark Col HELP", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ { "type": "text", "id": "cD11s", "name": "HELP Dark Header", "fill": "#FFFFFF", "content": "HELP", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600", "letterSpacing": 2 }, { "type": "text", "id": "L7O0NF", "name": "HELP Dark Size Guide", "fill": "#B8A99A", "content": "Size Guide", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "c6hLRG", "name": "HELP Dark Shipping", "fill": "#B8A99A", "content": "Shipping", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "k6Ezj", "name": "HELP Dark Returns", "fill": "#B8A99A", "content": "Returns", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] }, { "type": "frame", "id": "ZnTlD", "name": "Comp Footer Dark Col COMMUNITY", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ { "type": "text", "id": "VojqB", "name": "COMMUNITY Dark Header", "fill": "#FFFFFF", "content": "COMMUNITY", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600", "letterSpacing": 2 }, { "type": "text", "id": "v8o2Jl", "name": "COMMUNITY Dark Makers Hub", "fill": "#B8A99A", "content": "Makers Hub", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "cbhwM", "name": "COMMUNITY Dark Pattern Library", "fill": "#B8A99A", "content": "Pattern Library", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "text", "id": "ZNi1m", "name": "COMMUNITY Dark Tutorials", "fill": "#B8A99A", "content": "Tutorials", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "zBTIt", "name": "Comp Footer Dark Divider 2", "width": "fill_container", "height": 1, "fill": "#3D3530" }, { "type": "frame", "id": "dQYDE", "name": "Comp Footer Dark Bottom", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "M6ivm3", "name": "Comp Footer Dark Copyright", "fill": "#B8A99A", "content": "© 2026 SEWJOY", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "XE8xD", "name": "Comp Footer Dark Legal", "fill": "#B8A99A", "content": "Privacy · Terms · Cookies", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "e6D0g", "name": "Components Button Row", "width": "fill_container", "gap": 24, "children": [ { "type": "frame", "id": "OU4aL", "name": "Component Primary Button Light", "reusable": true, "clip": true, "width": 280, "height": 80, "fill": "#F8F5F0", "layout": "vertical", "gap": 12, "padding": 16, "children": [ { "type": "text", "id": "D0dzB0", "name": "Comp Button Light Label Small", "fill": "#8C7B6E", "content": "PRIMARY BUTTON — LIGHT", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600", "letterSpacing": 2 }, { "type": "frame", "id": "XxhjJ", "name": "Comp Primary Button Light CTA", "fill": "#1A1A1A", "cornerRadius": 4, "gap": 8, "padding": [ 14, 28 ], "alignItems": "center", "children": [ { "type": "text", "id": "azIWy", "name": "Comp Button Light Label", "fill": "#FFFFFF", "content": "Button Label", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" }, { "type": "text", "id": "hXEXI", "name": "Comp Button Light Arrow", "fill": "#FFFFFF", "content": "→", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" } ] } ] }, { "type": "frame", "id": "nRKlc", "name": "Component Primary Button Dark", "reusable": true, "clip": true, "width": 280, "height": 80, "fill": "#1A1A1A", "layout": "vertical", "gap": 12, "padding": 16, "children": [ { "type": "text", "id": "FGxXg", "name": "Comp Button Dark Label Small", "fill": "#B8A99A", "content": "PRIMARY BUTTON — DARK", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600", "letterSpacing": 2 }, { "type": "frame", "id": "luOgQ", "name": "Comp Primary Button Dark CTA", "fill": "#C8956C", "cornerRadius": 4, "gap": 8, "padding": [ 14, 28 ], "alignItems": "center", "children": [ { "type": "text", "id": "LHpUh", "name": "Comp Button Dark Label", "fill": "#1A1A1A", "content": "Button Label", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" }, { "type": "text", "id": "P888Ia", "name": "Comp Button Dark Arrow", "fill": "#1A1A1A", "content": "→", "fontFamily": "Inter", "fontSize": 13, "fontWeight": "600" } ] } ] } ] }, { "type": "frame", "id": "FJmnZ", "name": "Component Filter Bar Light", "reusable": true, "width": "fill_container", "height": 72, "fill": "#F8F5F0", "gap": 12, "padding": [ 20, 64 ], "alignItems": "center", "children": [ { "type": "frame", "id": "SdAki", "name": "BSF Style Filter", "fill": "#FFFFFF", "cornerRadius": 4, "stroke": "#E8E0D5", "strokeWidth": 1, "gap": 10, "padding": [ 10, 14 ], "alignItems": "center", "children": [ { "type": "text", "id": "vgAZs", "name": "BSF Style Filter Label", "fill": "#1A1A1A", "content": "Style Filter", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "path", "id": "S2L3OB", "name": "Style Chevron", "geometry": "M0 0l4 4 4-4", "viewBox": [ 0, 0, 8, 5 ], "width": 0, "height": 0, "stroke": "#8C7B6E", "strokeWidth": 1.5 } ] }, { "type": "frame", "id": "YCfDm", "name": "BSF Fabric Filter", "fill": "#FFFFFF", "cornerRadius": 4, "stroke": "#E8E0D5", "strokeWidth": 1, "gap": 10, "padding": [ 10, 14 ], "alignItems": "center", "children": [ { "type": "text", "id": "CCbt1", "name": "BSF Fabric Filter Label", "fill": "#1A1A1A", "content": "Fabric Filter", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "path", "id": "pIuE6", "name": "Fabric Chevron", "geometry": "M0 0l4 4 4-4", "viewBox": [ 0, 0, 8, 5 ], "width": 0, "height": 0, "stroke": "#8C7B6E", "strokeWidth": 1.5 } ] }, { "type": "frame", "id": "vm3Uz", "name": "BSF Search", "width": 280, "fill": "#FFFFFF", "cornerRadius": 4, "stroke": "#E8E0D5", "strokeWidth": 1, "gap": 8, "padding": [ 10, 14 ], "alignItems": "center", "children": [ { "type": "text", "id": "yf2Qa", "name": "BSF Search Placeholder", "fill": "#B8A99A", "content": "Key word search...", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "path", "id": "b8tBm", "name": "Search Icon", "geometry": "M1 4a3 3 0 1 0 6 0 3 3 0 1 0-6 0m5 2l3 3", "viewBox": [ 0, 0, 10, 10 ], "width": 0, "height": 0, "stroke": "#8C7B6E", "strokeWidth": 1.5 } ] }, { "type": "frame", "id": "dNPId", "name": "BSF Spacer", "width": "fill_container", "height": 1 }, { "type": "frame", "id": "TwtAG", "name": "BSF Sort", "fill": "#FFFFFF", "cornerRadius": 4, "stroke": "#E8E0D5", "strokeWidth": 1, "gap": 10, "padding": [ 10, 14 ], "alignItems": "center", "children": [ { "type": "text", "id": "h0QIWV", "name": "BSF Sort Label", "fill": "#8C7B6E", "content": "Sort: Featured", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "path", "id": "Uhvqp", "name": "Sort Chevron", "geometry": "M0 0l4 4 4-4", "viewBox": [ 0, 0, 8, 5 ], "width": 0, "height": 0, "stroke": "#8C7B6E", "strokeWidth": 1.5 } ] }, { "type": "frame", "id": "qyBmI", "name": "BSF Layout Switch Light", "clip": true, "fill": "#FFFFFF", "cornerRadius": 4, "stroke": "#E8E0D5", "strokeWidth": 1, "alignItems": "center", "children": [ { "type": "frame", "id": "Mw2ne", "name": "BSF Layout Waterfall Light", "fill": "#1A1A1A", "padding": [ 10, 12 ], "alignItems": "center", "children": [ { "type": "frame", "id": "rzGT4", "name": "Waterfall Icon Light", "width": 14, "height": 14, "fill": "#00000000", "layout": "none", "children": [ { "type": "rectangle", "id": "C6KkQ", "x": 0, "y": 0, "name": "WF Left Top", "fill": "#FFFFFF", "width": 6, "height": 8 }, { "type": "rectangle", "id": "OvuE9", "x": 0, "y": 10, "name": "WF Left Bottom", "fill": "#FFFFFF", "width": 6, "height": 4 }, { "type": "rectangle", "id": "ofacn", "x": 8, "y": 0, "name": "WF Right Full", "fill": "#FFFFFF", "width": 6, "height": 14 } ] } ] }, { "type": "frame", "id": "j5Zyw", "name": "BSF Layout Grid Light", "fill": "#FFFFFF", "padding": [ 10, 12 ], "alignItems": "center", "children": [ { "type": "frame", "id": "mvArX", "name": "Grid Icon Light", "width": 14, "height": 14, "fill": "#00000000", "layout": "none", "children": [ { "type": "rectangle", "id": "dSHE9", "x": 0, "y": 0, "name": "Grid TL", "fill": "#8C7B6E", "width": 6, "height": 6 }, { "type": "rectangle", "id": "CuPev", "x": 8, "y": 0, "name": "Grid TR", "fill": "#8C7B6E", "width": 6, "height": 6 }, { "type": "rectangle", "id": "kW35U", "x": 0, "y": 8, "name": "Grid BL", "fill": "#8C7B6E", "width": 6, "height": 6 }, { "type": "rectangle", "id": "F6iXt", "x": 8, "y": 8, "name": "Grid BR", "fill": "#8C7B6E", "width": 6, "height": 6 } ] } ] }, { "type": "frame", "id": "ujTXQ", "name": "BSF Layout List Light", "fill": "#FFFFFF", "padding": [ 10, 12 ], "alignItems": "center", "children": [ { "type": "frame", "id": "fwtDR", "name": "List Icon Light", "width": 14, "height": 14, "fill": "#00000000", "layout": "none", "children": [ { "type": "rectangle", "id": "ncmFw", "x": 0, "y": 0, "name": "List Bar 1", "fill": "#8C7B6E", "width": 14, "height": 2 }, { "type": "rectangle", "id": "y0gzZ", "x": 0, "y": 6, "name": "List Bar 2", "fill": "#8C7B6E", "width": 14, "height": 2 }, { "type": "rectangle", "id": "PSFDd", "x": 0, "y": 12, "name": "List Bar 3", "fill": "#8C7B6E", "width": 14, "height": 2 } ] } ] } ] } ] }, { "type": "frame", "id": "IOjyl", "name": "Component Filter Bar Dark", "reusable": true, "width": "fill_container", "height": 72, "fill": "#F8F5F0", "gap": 12, "padding": [ 20, 64 ], "alignItems": "center", "children": [ { "type": "frame", "id": "ctFQR", "name": "BSF Style Filter Dark", "fill": "#FFFFFF", "cornerRadius": 4, "stroke": "#E8E0D5", "strokeWidth": 1, "gap": 10, "padding": [ 10, 14 ], "alignItems": "center", "children": [ { "type": "text", "id": "q6oEI", "name": "BSF Style Filter Dark Label", "fill": "#1A1A1A", "content": "Style Filter", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "path", "id": "zdub4", "name": "Style Chevron Dark", "geometry": "M0 0l4 4 4-4", "viewBox": [ 0, 0, 8, 5 ], "width": 0, "height": 0, "stroke": "#8C7B6E", "strokeWidth": 1.5 } ] }, { "type": "frame", "id": "Vkhh5", "name": "BSF Fabric Filter Dark", "fill": "#FFFFFF", "cornerRadius": 4, "stroke": "#E8E0D5", "strokeWidth": 1, "gap": 10, "padding": [ 10, 14 ], "alignItems": "center", "children": [ { "type": "text", "id": "Tmflm", "name": "BSF Fabric Filter Dark Label", "fill": "#1A1A1A", "content": "Fabric Filter", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "path", "id": "v5Ho6", "name": "Fabric Chevron Dark", "geometry": "M0 0l4 4 4-4", "viewBox": [ 0, 0, 8, 5 ], "width": 0, "height": 0, "stroke": "#8C7B6E", "strokeWidth": 1.5 } ] }, { "type": "frame", "id": "hIS4S", "name": "BSF Search Dark", "width": 280, "fill": "#FFFFFF", "cornerRadius": 4, "stroke": "#E8E0D5", "strokeWidth": 1, "gap": 8, "padding": [ 10, 14 ], "alignItems": "center", "children": [ { "type": "text", "id": "nLf1K", "name": "BSF Search Dark Placeholder", "fill": "#B8A99A", "content": "Key word search...", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "path", "id": "zegX9", "name": "Search Icon Dark", "geometry": "M1 4a3 3 0 1 0 6 0 3 3 0 1 0-6 0m5 2l3 3", "viewBox": [ 0, 0, 10, 10 ], "width": 0, "height": 0, "stroke": "#8C7B6E", "strokeWidth": 1.5 } ] }, { "type": "frame", "id": "D5S4OX", "name": "BSF Spacer Dark", "width": "fill_container", "height": 1 }, { "type": "frame", "id": "hYxks", "name": "BSF Sort Dark", "fill": "#FFFFFF", "cornerRadius": 4, "stroke": "#E8E0D5", "strokeWidth": 1, "gap": 10, "padding": [ 10, 14 ], "alignItems": "center", "children": [ { "type": "text", "id": "JKWDd", "name": "BSF Sort Dark Label", "fill": "#8C7B6E", "content": "Sort: Featured", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "path", "id": "T5BpU7", "name": "Sort Chevron Dark", "geometry": "M0 0l4 4 4-4", "viewBox": [ 0, 0, 8, 5 ], "width": 0, "height": 0, "stroke": "#8C7B6E", "strokeWidth": 1.5 } ] }, { "type": "frame", "id": "o4xEi", "name": "BSF Layout Switch Dark", "clip": true, "fill": "#FFFFFF", "cornerRadius": 4, "stroke": "#E8E0D5", "strokeWidth": 1, "alignItems": "center", "children": [ { "type": "frame", "id": "SSnQ7", "name": "BSF Layout Waterfall Dark", "fill": "#1A1A1A", "padding": [ 10, 12 ], "alignItems": "center", "children": [ { "type": "frame", "id": "A33VH", "name": "Waterfall Icon Dark", "width": 14, "height": 14, "fill": "#00000000", "layout": "none", "children": [ { "type": "rectangle", "id": "bwy7v", "x": 0, "y": 0, "name": "WF Dark Left Top", "fill": "#FFFFFF", "width": 6, "height": 8 }, { "type": "rectangle", "id": "jislC", "x": 0, "y": 10, "name": "WF Dark Left Bottom", "fill": "#FFFFFF", "width": 6, "height": 4 }, { "type": "rectangle", "id": "RLSTl", "x": 8, "y": 0, "name": "WF Dark Right Full", "fill": "#FFFFFF", "width": 6, "height": 14 } ] } ] }, { "type": "frame", "id": "a9V0j", "name": "BSF Layout Grid Light", "fill": "#FFFFFF", "padding": [ 10, 12 ], "alignItems": "center", "children": [ { "type": "frame", "id": "e8cFU9", "name": "Grid Icon Dark", "width": 14, "height": 14, "fill": "#00000000", "layout": "none", "children": [ { "type": "rectangle", "id": "WuUZz", "x": 0, "y": 0, "name": "Grid Dark TL", "fill": "#8C7B6E", "width": 6, "height": 6 }, { "type": "rectangle", "id": "uOD2k", "x": 8, "y": 0, "name": "Grid Dark TR", "fill": "#8C7B6E", "width": 6, "height": 6 }, { "type": "rectangle", "id": "Blrbf", "x": 0, "y": 8, "name": "Grid Dark BL", "fill": "#8C7B6E", "width": 6, "height": 6 }, { "type": "rectangle", "id": "RXjVr", "x": 8, "y": 8, "name": "Grid Dark BR", "fill": "#8C7B6E", "width": 6, "height": 6 } ] } ] }, { "type": "frame", "id": "w9y2Xa", "name": "BSF Layout List Dark", "fill": "#FFFFFF", "padding": [ 10, 12 ], "alignItems": "center", "children": [ { "type": "frame", "id": "eq8fN", "name": "List Icon Dark", "width": 14, "height": 14, "fill": "#00000000", "layout": "none", "children": [ { "type": "rectangle", "id": "VPebF", "x": 0, "y": 0, "name": "List Dark Bar 1", "fill": "#8C7B6E", "width": 14, "height": 2 }, { "type": "rectangle", "id": "v1aBIZ", "x": 0, "y": 6, "name": "List Dark Bar 2", "fill": "#8C7B6E", "width": 14, "height": 2 }, { "type": "rectangle", "id": "Ak2xW", "x": 0, "y": 12, "name": "List Dark Bar 3", "fill": "#8C7B6E", "width": 14, "height": 2 } ] } ] } ] } ] }, { "type": "frame", "id": "xFQEp", "name": "Color Standards", "width": "fill_container", "fill": "#FCFAF7", "cornerRadius": 6, "stroke": "#2C2416", "strokeWidth": 1, "layout": "vertical", "gap": 16, "padding": 32, "children": [ { "type": "text", "id": "G7y8pt", "name": "Color Title", "fill": "#2C2416", "content": "COLOR STANDARDS — LIGHT & DARK", "fontFamily": "Inter", "fontSize": 18, "fontWeight": "700", "letterSpacing": 2 }, { "type": "text", "id": "gHZvE", "name": "Color Subtitle", "fill": "#8C7B6E", "content": "Extracted from SEWJOY Home Page. All tokens reference these exact hex values.", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "frame", "id": "oTk9w", "name": "Light Theme Row", "width": "fill_container", "gap": 24, "children": [ { "type": "frame", "id": "KfG2v", "name": "Light Theme Column", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "text", "id": "jF14b", "name": "Light Theme Header", "fill": "#C8956C", "content": "LIGHT THEME", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "700", "letterSpacing": 2 }, { "type": "frame", "id": "hqvYG", "name": "Light --surface-primary", "gap": 12, "alignItems": "center", "children": [ { "type": "rectangle", "cornerRadius": 3, "id": "yeVth", "name": "--surface-primary swatch", "fill": "#F8F5F0", "width": 24, "height": 24, "stroke": "#E8E0D5", "strokeWidth": 1 }, { "type": "text", "id": "Ux6YU", "name": "--surface-primary label", "fill": "#1A1A1A", "content": "--surface-primary", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" }, { "type": "text", "id": "WfaYe", "name": "--surface-primary value", "fill": "#C8956C", "content": "#F8F5F0", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "nx8yz", "name": "--surface-primary desc", "fill": "#8C7B6E", "content": "Page bg, cream", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] }, { "type": "frame", "id": "b3Rgwu", "name": "Light --surface-card", "gap": 12, "alignItems": "center", "children": [ { "type": "rectangle", "cornerRadius": 3, "id": "Fa72i", "name": "--surface-card swatch", "fill": "#FFFFFF", "width": 24, "height": 24, "stroke": "#E8E0D5", "strokeWidth": 1 }, { "type": "text", "id": "cb6oI", "name": "--surface-card label", "fill": "#1A1A1A", "content": "--surface-card", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" }, { "type": "text", "id": "LdAVV", "name": "--surface-card value", "fill": "#C8956C", "content": "#FFFFFF", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "C0AZp", "name": "--surface-card desc", "fill": "#8C7B6E", "content": "Cards, white", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] }, { "type": "frame", "id": "G19ZCu", "name": "Light --card-warm-1", "gap": 12, "alignItems": "center", "children": [ { "type": "rectangle", "cornerRadius": 3, "id": "NC0vy", "name": "--card-warm-1 swatch", "fill": "#F2EDE0", "width": 24, "height": 24, "stroke": "#E8E0D5", "strokeWidth": 1 }, { "type": "text", "id": "pnAZT", "name": "--card-warm-1 label", "fill": "#1A1A1A", "content": "--card-warm-1", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" }, { "type": "text", "id": "j4najO", "name": "--card-warm-1 value", "fill": "#C8956C", "content": "#F2EDE0", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "anILn", "name": "--card-warm-1 desc", "fill": "#8C7B6E", "content": "Lightest warm", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] }, { "type": "frame", "id": "ZhOgK", "name": "Light --card-warm-2", "gap": 12, "alignItems": "center", "children": [ { "type": "rectangle", "cornerRadius": 3, "id": "xnUsU", "name": "--card-warm-2 swatch", "fill": "#F0E8DC", "width": 24, "height": 24, "stroke": "#E8E0D5", "strokeWidth": 1 }, { "type": "text", "id": "kTW7H", "name": "--card-warm-2 label", "fill": "#1A1A1A", "content": "--card-warm-2", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" }, { "type": "text", "id": "i0uIb", "name": "--card-warm-2 value", "fill": "#C8956C", "content": "#F0E8DC", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "Bi6mK", "name": "--card-warm-2 desc", "fill": "#8C7B6E", "content": "Warm", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] }, { "type": "frame", "id": "BvF0F", "name": "Light --card-warm-3", "gap": 12, "alignItems": "center", "children": [ { "type": "rectangle", "cornerRadius": 3, "id": "r8aXe", "name": "--card-warm-3 swatch", "fill": "#E8DFD0", "width": 24, "height": 24, "stroke": "#E8E0D5", "strokeWidth": 1 }, { "type": "text", "id": "T9Fey", "name": "--card-warm-3 label", "fill": "#1A1A1A", "content": "--card-warm-3", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" }, { "type": "text", "id": "pFvj7", "name": "--card-warm-3 value", "fill": "#C8956C", "content": "#E8DFD0", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "o691H", "name": "--card-warm-3 desc", "fill": "#8C7B6E", "content": "Warmest", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] }, { "type": "frame", "id": "TB4Fm", "name": "Light --text-primary", "gap": 12, "alignItems": "center", "children": [ { "type": "rectangle", "cornerRadius": 3, "id": "yhHgi", "name": "--text-primary swatch", "fill": "#1A1A1A", "width": 24, "height": 24, "stroke": "#E8E0D5", "strokeWidth": 1 }, { "type": "text", "id": "TwZpw", "name": "--text-primary label", "fill": "#1A1A1A", "content": "--text-primary", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" }, { "type": "text", "id": "Tei12", "name": "--text-primary value", "fill": "#C8956C", "content": "#1A1A1A", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "gSDI7", "name": "--text-primary desc", "fill": "#8C7B6E", "content": "Headings, dark", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] }, { "type": "frame", "id": "ZaM7O", "name": "Light --text-secondary", "gap": 12, "alignItems": "center", "children": [ { "type": "rectangle", "cornerRadius": 3, "id": "mmPMa", "name": "--text-secondary swatch", "fill": "#3D3530", "width": 24, "height": 24, "stroke": "#E8E0D5", "strokeWidth": 1 }, { "type": "text", "id": "N1Ugxa", "name": "--text-secondary label", "fill": "#1A1A1A", "content": "--text-secondary", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" }, { "type": "text", "id": "t8bKPs", "name": "--text-secondary value", "fill": "#C8956C", "content": "#3D3530", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "hpAyL", "name": "--text-secondary desc", "fill": "#8C7B6E", "content": "Body text", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] }, { "type": "frame", "id": "NldUL", "name": "Light --text-muted", "gap": 12, "alignItems": "center", "children": [ { "type": "rectangle", "cornerRadius": 3, "id": "XeIpK", "name": "--text-muted swatch", "fill": "#8C7B6E", "width": 24, "height": 24, "stroke": "#E8E0D5", "strokeWidth": 1 }, { "type": "text", "id": "q7A2sI", "name": "--text-muted label", "fill": "#1A1A1A", "content": "--text-muted", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" }, { "type": "text", "id": "isD8y", "name": "--text-muted value", "fill": "#C8956C", "content": "#8C7B6E", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "j7qgob", "name": "--text-muted desc", "fill": "#8C7B6E", "content": "Muted", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] }, { "type": "frame", "id": "Sbizc", "name": "Light --text-subtle", "gap": 12, "alignItems": "center", "children": [ { "type": "rectangle", "cornerRadius": 3, "id": "k2CoC", "name": "--text-subtle swatch", "fill": "#B8A99A", "width": 24, "height": 24, "stroke": "#E8E0D5", "strokeWidth": 1 }, { "type": "text", "id": "M0Yv3x", "name": "--text-subtle label", "fill": "#1A1A1A", "content": "--text-subtle", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" }, { "type": "text", "id": "tcmOj", "name": "--text-subtle value", "fill": "#C8956C", "content": "#B8A99A", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "K7S2J", "name": "--text-subtle desc", "fill": "#8C7B6E", "content": "Very muted", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] }, { "type": "frame", "id": "UPVyv", "name": "Light --accent", "gap": 12, "alignItems": "center", "children": [ { "type": "rectangle", "cornerRadius": 3, "id": "D7NuX", "name": "--accent swatch", "fill": "#C8956C", "width": 24, "height": 24, "stroke": "#E8E0D5", "strokeWidth": 1 }, { "type": "text", "id": "I8KEu", "name": "--accent label", "fill": "#1A1A1A", "content": "--accent", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" }, { "type": "text", "id": "kdQw7", "name": "--accent value", "fill": "#C8956C", "content": "#C8956C", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "ynFKO", "name": "--accent desc", "fill": "#8C7B6E", "content": "Warm tan accent", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] }, { "type": "frame", "id": "MDeO1", "name": "Light --border-subtle", "gap": 12, "alignItems": "center", "children": [ { "type": "rectangle", "cornerRadius": 3, "id": "bqpga", "name": "--border-subtle swatch", "fill": "#E8E0D5", "width": 24, "height": 24, "stroke": "#E8E0D5", "strokeWidth": 1 }, { "type": "text", "id": "oAzwQ", "name": "--border-subtle label", "fill": "#1A1A1A", "content": "--border-subtle", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" }, { "type": "text", "id": "iavMj", "name": "--border-subtle value", "fill": "#C8956C", "content": "#E8E0D5", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "YPHPo", "name": "--border-subtle desc", "fill": "#8C7B6E", "content": "Light borders", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "RrSj2", "name": "Dark Theme Column", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "text", "id": "XgOI8", "name": "Dark Theme Header", "fill": "#C8956C", "content": "DARK THEME", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "700", "letterSpacing": 2 }, { "type": "frame", "id": "yFZdz", "name": "Dark --surface-dark", "gap": 12, "alignItems": "center", "children": [ { "type": "rectangle", "cornerRadius": 3, "id": "QE7f5", "name": "--surface-dark swatch", "fill": "#1A1A1A", "width": 24, "height": 24, "stroke": "#3D3530", "strokeWidth": 1 }, { "type": "text", "id": "e0mtMB", "name": "--surface-dark label", "fill": "#1A1A1A", "content": "--surface-dark", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" }, { "type": "text", "id": "yBnqq", "name": "--surface-dark value", "fill": "#C8956C", "content": "#1A1A1A", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "pWdPV", "name": "--surface-dark desc", "fill": "#8C7B6E", "content": "Page bg, deepest", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] }, { "type": "frame", "id": "cs8Gj", "name": "Dark --surface-section", "gap": 12, "alignItems": "center", "children": [ { "type": "rectangle", "cornerRadius": 3, "id": "zgKAp", "name": "--surface-section swatch", "fill": "#2C2416", "width": 24, "height": 24, "stroke": "#3D3530", "strokeWidth": 1 }, { "type": "text", "id": "j1fpR", "name": "--surface-section label", "fill": "#1A1A1A", "content": "--surface-section", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" }, { "type": "text", "id": "fugv1", "name": "--surface-section value", "fill": "#C8956C", "content": "#2C2416", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "Mae53", "name": "--surface-section desc", "fill": "#8C7B6E", "content": "Dark brown section", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] }, { "type": "frame", "id": "z2vdQ", "name": "Dark --card-dark-1", "gap": 12, "alignItems": "center", "children": [ { "type": "rectangle", "cornerRadius": 3, "id": "zizI1", "name": "--card-dark-1 swatch", "fill": "#2C2416", "width": 24, "height": 24, "stroke": "#3D3530", "strokeWidth": 1 }, { "type": "text", "id": "sLhrG", "name": "--card-dark-1 label", "fill": "#1A1A1A", "content": "--card-dark-1", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" }, { "type": "text", "id": "hGzsR", "name": "--card-dark-1 value", "fill": "#C8956C", "content": "#2C2416", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "RmDjx", "name": "--card-dark-1 desc", "fill": "#8C7B6E", "content": "Darkest card", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] }, { "type": "frame", "id": "jrKeF", "name": "Dark --card-dark-2", "gap": 12, "alignItems": "center", "children": [ { "type": "rectangle", "cornerRadius": 3, "id": "tfyvO", "name": "--card-dark-2 swatch", "fill": "#3D3530", "width": 24, "height": 24, "stroke": "#3D3530", "strokeWidth": 1 }, { "type": "text", "id": "dG0Ig", "name": "--card-dark-2 label", "fill": "#1A1A1A", "content": "--card-dark-2", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" }, { "type": "text", "id": "z56NS", "name": "--card-dark-2 value", "fill": "#C8956C", "content": "#3D3530", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "s6CUJ", "name": "--card-dark-2 desc", "fill": "#8C7B6E", "content": "Mid card", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] }, { "type": "frame", "id": "udjSV", "name": "Dark --card-dark-3", "gap": 12, "alignItems": "center", "children": [ { "type": "rectangle", "cornerRadius": 3, "id": "IYWNv", "name": "--card-dark-3 swatch", "fill": "#4A3F35", "width": 24, "height": 24, "stroke": "#3D3530", "strokeWidth": 1 }, { "type": "text", "id": "vxUf9", "name": "--card-dark-3 label", "fill": "#1A1A1A", "content": "--card-dark-3", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" }, { "type": "text", "id": "Fimms", "name": "--card-dark-3 value", "fill": "#C8956C", "content": "#4A3F35", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "b6QC8", "name": "--card-dark-3 desc", "fill": "#8C7B6E", "content": "Lightest dark card", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] }, { "type": "frame", "id": "DTAw5", "name": "Dark --text-inverse", "gap": 12, "alignItems": "center", "children": [ { "type": "rectangle", "cornerRadius": 3, "id": "YwCiG", "name": "--text-inverse swatch", "fill": "#FFFFFF", "width": 24, "height": 24, "stroke": "#3D3530", "strokeWidth": 1 }, { "type": "text", "id": "h4Hb5k", "name": "--text-inverse label", "fill": "#1A1A1A", "content": "--text-inverse", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" }, { "type": "text", "id": "J6GLty", "name": "--text-inverse value", "fill": "#C8956C", "content": "#FFFFFF", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "A9q7dQ", "name": "--text-inverse desc", "fill": "#8C7B6E", "content": "Headings", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] }, { "type": "frame", "id": "Enqzj", "name": "Dark --text-cream", "gap": 12, "alignItems": "center", "children": [ { "type": "rectangle", "cornerRadius": 3, "id": "UHlbI", "name": "--text-cream swatch", "fill": "#F8F5F0", "width": 24, "height": 24, "stroke": "#3D3530", "strokeWidth": 1 }, { "type": "text", "id": "JyiWk", "name": "--text-cream label", "fill": "#1A1A1A", "content": "--text-cream", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" }, { "type": "text", "id": "Rv4GV", "name": "--text-cream value", "fill": "#C8956C", "content": "#F8F5F0", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "X0D5BW", "name": "--text-cream desc", "fill": "#8C7B6E", "content": "Body text", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] }, { "type": "frame", "id": "Msygq", "name": "Dark --text-muted-dark", "gap": 12, "alignItems": "center", "children": [ { "type": "rectangle", "cornerRadius": 3, "id": "VV5yf", "name": "--text-muted-dark swatch", "fill": "#B8A99A", "width": 24, "height": 24, "stroke": "#3D3530", "strokeWidth": 1 }, { "type": "text", "id": "mVX4Z", "name": "--text-muted-dark label", "fill": "#1A1A1A", "content": "--text-muted-dark", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" }, { "type": "text", "id": "V7aBHO", "name": "--text-muted-dark value", "fill": "#C8956C", "content": "#B8A99A", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "h85Fs", "name": "--text-muted-dark desc", "fill": "#8C7B6E", "content": "Muted", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] }, { "type": "frame", "id": "tLcW8", "name": "Dark --text-faint", "gap": 12, "alignItems": "center", "children": [ { "type": "rectangle", "cornerRadius": 3, "id": "tUw7c", "name": "--text-faint swatch", "fill": "#8C7B6E", "width": 24, "height": 24, "stroke": "#3D3530", "strokeWidth": 1 }, { "type": "text", "id": "O13Pk", "name": "--text-faint label", "fill": "#1A1A1A", "content": "--text-faint", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" }, { "type": "text", "id": "PkSnP", "name": "--text-faint value", "fill": "#C8956C", "content": "#8C7B6E", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "lNsxp", "name": "--text-faint desc", "fill": "#8C7B6E", "content": "Very muted", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] }, { "type": "frame", "id": "Vo6g0", "name": "Dark --accent-dark", "gap": 12, "alignItems": "center", "children": [ { "type": "rectangle", "cornerRadius": 3, "id": "ctLBq", "name": "--accent-dark swatch", "fill": "#C8956C", "width": 24, "height": 24, "stroke": "#3D3530", "strokeWidth": 1 }, { "type": "text", "id": "N56gU", "name": "--accent-dark label", "fill": "#1A1A1A", "content": "--accent-dark", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" }, { "type": "text", "id": "h0XSP", "name": "--accent-dark value", "fill": "#C8956C", "content": "#C8956C", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "OGvtN", "name": "--accent-dark desc", "fill": "#8C7B6E", "content": "Warm tan (kept)", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] }, { "type": "frame", "id": "GKAFJ", "name": "Dark --border-dark", "gap": 12, "alignItems": "center", "children": [ { "type": "rectangle", "cornerRadius": 3, "id": "xwK2a", "name": "--border-dark swatch", "fill": "#3D3530", "width": 24, "height": 24, "stroke": "#3D3530", "strokeWidth": 1 }, { "type": "text", "id": "h7253", "name": "--border-dark label", "fill": "#1A1A1A", "content": "--border-dark", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "600" }, { "type": "text", "id": "e0odm", "name": "--border-dark value", "fill": "#C8956C", "content": "#3D3530", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "zjFRo", "name": "--border-dark desc", "fill": "#8C7B6E", "content": "Dark borders", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "CrVLM", "name": "Other Tokens", "width": "fill_container", "layout": "vertical", "gap": 12, "padding": [ 16, 0, 0, 0 ], "children": [ { "type": "text", "id": "hlsVV", "name": "Other Tokens Header", "fill": "#C8956C", "content": "TYPOGRAPHY, SPACING & RADIUS", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "700", "letterSpacing": 2 }, { "type": "frame", "id": "lyPK6", "name": "Typography Row", "width": "fill_container", "gap": 24, "children": [ { "type": "frame", "id": "K1mBv", "name": "Typography Column", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ { "type": "text", "id": "qjRvI", "name": "Typography Header", "fill": "#2C2416", "content": "TYPOGRAPHY", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700", "letterSpacing": 1 }, { "type": "text", "id": "h1NrIM", "name": "Type Display", "fill": "#3D3530", "content": "Display: Playfair Display 700 (headings, hero)", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "sn82J", "name": "Type UI", "fill": "#3D3530", "content": "UI: Inter 400/500/600 (body, labels, buttons)", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "l1VudN", "name": "Type Sizes", "fill": "#3D3530", "content": "Sizes: 10 / 11 / 12 / 13 / 14 / 16 / 18 / 22 / 28 / 32 / 36 / 40 / 44 / 52 / 56", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "sLQ2V", "name": "Spacing Column", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ { "type": "text", "id": "bCHlP", "name": "Spacing Header", "fill": "#2C2416", "content": "SPACING", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700", "letterSpacing": 1 }, { "type": "text", "id": "pQ2Wn", "name": "Spacing xs", "fill": "#3D3530", "content": "xs: 4px · sm: 8px · md: 16px", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "WvIBe", "name": "Spacing lg", "fill": "#3D3530", "content": "lg: 24px · xl: 40px · 2xl: 64px", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "VOP1h", "name": "Radius Column", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ { "type": "text", "id": "Wqf0i", "name": "Radius Header", "fill": "#2C2416", "content": "RADIUS & SHADOW", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700", "letterSpacing": 1 }, { "type": "text", "id": "ajhy9", "name": "Radius sm", "fill": "#3D3530", "content": "Radius: 4 (btn) / 6 (card) / 8 (large card) / 60 (circle)", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "xbIIp", "name": "Shadow sm", "fill": "#3D3530", "content": "Shadow card: 0/2 offset, 8 blur, #00000010 (dark: #00000040)", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] } ] } ] } ] }, { "type": "frame", "id": "KeGiD", "name": "Design System Constraints", "width": "fill_container", "fill": "#FCFAF7", "cornerRadius": 6, "stroke": "#C8956C", "strokeWidth": 2, "layout": "vertical", "gap": 18, "padding": 32, "children": [ { "type": "text", "id": "HhT3I", "name": "Constraints Title", "fill": "#2C2416", "content": "DESIGN SYSTEM CONSTRAINTS", "fontFamily": "Inter", "fontSize": 20, "fontWeight": "700", "letterSpacing": 2 }, { "type": "text", "id": "zisQn", "name": "Constraints Subtitle", "fill": "#8C7B6E", "content": "All new pages MUST follow these rules. Reuse components, never duplicate. Match colors exactly.", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "frame", "id": "UhhmB", "name": "Rules Section", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "text", "id": "kmDy2", "name": "Rules Header", "fill": "#C8956C", "content": "1. COMPONENT USAGE", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "700", "letterSpacing": 2 }, { "type": "frame", "id": "v4vkw", "name": "Comp Rule", "gap": 12, "children": [ { "type": "text", "id": "Bl9gK", "name": "Comp Rule Bullet", "fill": "#C8956C", "content": "→", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "text", "id": "f2UTy", "name": "Comp Rule Text", "fill": "#2C2416", "content": "Navigation: ALWAYS use Component Nav Light (NBZe9) or Component Nav Dark (z6W9Ct) as a ref instance. Never recreate.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "k8xyfv", "name": "Comp Rule", "gap": 12, "children": [ { "type": "text", "id": "S96LRB", "name": "Comp Rule Bullet", "fill": "#C8956C", "content": "→", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "text", "id": "X5MJyU", "name": "Comp Rule Text", "fill": "#2C2416", "content": "Banner/Hero: ALWAYS use Component Banner Light (OitOd) or Component Banner Dark (GfOVE). Override text via descendants.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "fFSXb", "name": "Comp Rule", "gap": 12, "children": [ { "type": "text", "id": "kKAiT", "name": "Comp Rule Bullet", "fill": "#C8956C", "content": "→", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "text", "id": "sYKEG", "name": "Comp Rule Text", "fill": "#2C2416", "content": "Footer: ALWAYS use Component Footer Light (PZLrQ) or Component Footer Dark (Rjj66). Never recreate.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "PLctx", "name": "Comp Rule", "gap": 12, "children": [ { "type": "text", "id": "XDNvW", "name": "Comp Rule Bullet", "fill": "#C8956C", "content": "→", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "text", "id": "j67Qp", "name": "Comp Rule Text", "fill": "#2C2416", "content": "Primary CTA Button: ALWAYS use Component Primary Button Light (OU4aL) or Dark (nRKlc). Override label text only.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "gesC1", "name": "Comp Rule", "gap": 12, "children": [ { "type": "text", "id": "nh2JE", "name": "Comp Rule Bullet", "fill": "#C8956C", "content": "→", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "text", "id": "HF6Q9", "name": "Comp Rule Text", "fill": "#2C2416", "content": "Filter Bar: ALWAYS use Component Filter Bar Light (FJmnZ) or Dark (IOjyl) for any product/search listing page.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "gBcQf", "name": "Color Rules Section", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "text", "id": "D9RTq", "name": "Color Rules Header", "fill": "#C8956C", "content": "2. COLOR TOKENS", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "700", "letterSpacing": 2 }, { "type": "frame", "id": "BFMbO", "name": "Color Rule", "gap": 12, "children": [ { "type": "text", "id": "I3kW2k", "name": "Color Rule Bullet", "fill": "#C8956C", "content": "→", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "text", "id": "E7c96B", "name": "Color Rule Text", "fill": "#2C2416", "content": "Accent (buttons, badges, prices, captions): #C8956C — same in light AND dark.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "H4vN06", "name": "Color Rule Token", "fill": "#C8956C", "content": "--accent", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600" } ] }, { "type": "frame", "id": "qARE1", "name": "Color Rule", "gap": 12, "children": [ { "type": "text", "id": "vQd0E", "name": "Color Rule Bullet", "fill": "#C8956C", "content": "→", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "text", "id": "VQxx9", "name": "Color Rule Text", "fill": "#2C2416", "content": "Light page bg: #F8F5F0 · Dark page bg: #1A1A1A — never mix or invent new surfaces.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "OP4VD", "name": "Color Rule Token", "fill": "#C8956C", "content": "--surface-primary / --surface-dark", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600" } ] }, { "type": "frame", "id": "i4PDTA", "name": "Color Rule", "gap": 12, "children": [ { "type": "text", "id": "q4bm7", "name": "Color Rule Bullet", "fill": "#C8956C", "content": "→", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "text", "id": "tKFxd", "name": "Color Rule Text", "fill": "#2C2416", "content": "Light text on dark: #FFFFFF · Dark text on light: #1A1A1A — never reverse.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "M95bA", "name": "Color Rule Token", "fill": "#C8956C", "content": "--text-primary / --text-inverse", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600" } ] }, { "type": "frame", "id": "svEmB", "name": "Color Rule", "gap": 12, "children": [ { "type": "text", "id": "kF3Pl", "name": "Color Rule Bullet", "fill": "#C8956C", "content": "→", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "text", "id": "S0IoQ", "name": "Color Rule Text", "fill": "#2C2416", "content": "Body text light: #3D3530 · Body text dark: #F8F5F0 · Muted: #8C7B6E / #B8A99A.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "y8I4a", "name": "Color Rule Token", "fill": "#C8956C", "content": "--text-secondary / --text-muted", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600" } ] }, { "type": "frame", "id": "j7C3h", "name": "Color Rule", "gap": 12, "children": [ { "type": "text", "id": "lLcLS", "name": "Color Rule Bullet", "fill": "#C8956C", "content": "→", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "text", "id": "JXBsk", "name": "Color Rule Text", "fill": "#2C2416", "content": "Card progression (light): #F2EDE0 → #F0E8DC → #E8DFD0. Dark: #2C2416 → #3D3530 → #4A3F35.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "ICgXW", "name": "Color Rule Token", "fill": "#C8956C", "content": "card-warm-1/2/3", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600" } ] }, { "type": "frame", "id": "slgjh", "name": "Color Rule", "gap": 12, "children": [ { "type": "text", "id": "oJz4b", "name": "Color Rule Bullet", "fill": "#C8956C", "content": "→", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "text", "id": "K4QpA", "name": "Color Rule Text", "fill": "#2C2416", "content": "Borders light: #E8E0D5 · Borders dark: #3D3530.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "lu30a", "name": "Color Rule Token", "fill": "#C8956C", "content": "--border-subtle / --border-dark", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600" } ] }, { "type": "frame", "id": "S6OUhz", "name": "Color Rule", "gap": 12, "children": [ { "type": "text", "id": "X1Z3Wm", "name": "Color Rule Bullet", "fill": "#C8956C", "content": "→", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "text", "id": "F7xB8", "name": "Color Rule Text", "fill": "#2C2416", "content": "CTA button light: bg #1A1A1A, text #FFFFFF. CTA button dark: bg #C8956C, text #1A1A1A.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "YaxWW", "name": "Color Rule Token", "fill": "#C8956C", "content": "Primary Button", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "600" } ] } ] }, { "type": "frame", "id": "xWWxm", "name": "Typography Rules Section", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "text", "id": "NGW4N", "name": "Typography Rules Header", "fill": "#C8956C", "content": "3. TYPOGRAPHY", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "700", "letterSpacing": 2 }, { "type": "frame", "id": "pbvfV", "name": "Typo Rule", "gap": 12, "children": [ { "type": "text", "id": "z2gaCx", "name": "Typo Rule Bullet", "fill": "#C8956C", "content": "→", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "text", "id": "lA3iU", "name": "Typo Rule Text", "fill": "#2C2416", "content": "Display headings: Playfair Display 700 (44/52/56px for hero, 32/36/40px for section, 22/28px for card titles).", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "yoXc6", "name": "Typo Rule", "gap": 12, "children": [ { "type": "text", "id": "sYtgU", "name": "Typo Rule Bullet", "fill": "#C8956C", "content": "→", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "text", "id": "Phhc1", "name": "Typo Rule Text", "fill": "#2C2416", "content": "Body / labels / buttons: Inter 400/500/600 (11-16px).", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "iZaIe", "name": "Typo Rule", "gap": 12, "children": [ { "type": "text", "id": "hrHvV", "name": "Typo Rule Bullet", "fill": "#C8956C", "content": "→", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "text", "id": "D7b3gr", "name": "Typo Rule Text", "fill": "#2C2416", "content": "Eyebrow / small caps: Inter 600 with letterSpacing 2-3 (uppercase, 11-12px).", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "VNbY8", "name": "Typo Rule", "gap": 12, "children": [ { "type": "text", "id": "HZf1Y", "name": "Typo Rule Bullet", "fill": "#C8956C", "content": "→", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "text", "id": "IbQTf", "name": "Typo Rule Text", "fill": "#2C2416", "content": "Always use weight 700 for hero headings. Never use weight 400 for display.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "XT0K8", "name": "Typo Rule", "gap": 12, "children": [ { "type": "text", "id": "e98Mz", "name": "Typo Rule Bullet", "fill": "#C8956C", "content": "→", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "text", "id": "paLcn", "name": "Typo Rule Text", "fill": "#2C2416", "content": "Line height: 1.05 for display, 1.5 for body, 1.6 for descriptions.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "H1X4iQ", "name": "Spacing Rules Section", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ { "type": "text", "id": "JjuzD", "name": "Spacing Rules Header", "fill": "#C8956C", "content": "4. SPACING & LAYOUT", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "700", "letterSpacing": 2 }, { "type": "frame", "id": "hzuI6", "name": "Space Rule", "gap": 12, "children": [ { "type": "text", "id": "Itowv", "name": "Space Rule Bullet", "fill": "#C8956C", "content": "→", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "text", "id": "DqKBh", "name": "Space Rule Text", "fill": "#2C2416", "content": "Page padding: 64px horizontal (matches nav/footer). Hero content inset: 80px from left.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "WdMaV", "name": "Space Rule", "gap": 12, "children": [ { "type": "text", "id": "eZlHB", "name": "Space Rule Bullet", "fill": "#C8956C", "content": "→", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "text", "id": "wuqPn", "name": "Space Rule Text", "fill": "#2C2416", "content": "Section vertical padding: 56px top/bottom for sections, 0 for full-bleed banners.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "v3oF0", "name": "Space Rule", "gap": 12, "children": [ { "type": "text", "id": "iZt2G", "name": "Space Rule Bullet", "fill": "#C8956C", "content": "→", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "text", "id": "PUh8b", "name": "Space Rule Text", "fill": "#2C2416", "content": "Component gap: 24px between cards, 32px between header and grid, 48px between major sections (or use Hero Break).", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "V8Vby", "name": "Space Rule", "gap": 12, "children": [ { "type": "text", "id": "YFf2z", "name": "Space Rule Bullet", "fill": "#C8956C", "content": "→", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "text", "id": "EoEWz", "name": "Space Rule Text", "fill": "#2C2416", "content": "Border radius: 4px (buttons), 6-8px (cards), 60px (circles). Never use other values.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "nq4PL", "name": "Space Rule", "gap": 12, "children": [ { "type": "text", "id": "L5iPoi", "name": "Space Rule Bullet", "fill": "#C8956C", "content": "→", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "text", "id": "E2qt4x", "name": "Space Rule Text", "fill": "#2C2416", "content": "Shadow: 0/2 offset, 8 blur, #00000010 for light cards, #00000040 for dark cards.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "MpqWG", "name": "Space Rule", "gap": 12, "children": [ { "type": "text", "id": "gw2BO", "name": "Space Rule Bullet", "fill": "#C8956C", "content": "→", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "text", "id": "nhbJ8", "name": "Space Rule Text", "fill": "#2C2416", "content": "Icons inside buttons: 14×14 with 1.5px stroke. Never use Unicode characters or emojis for icons.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "taaBC", "name": "Do Not Section", "width": "fill_container", "fill": "#F8F5F0", "cornerRadius": 4, "layout": "vertical", "gap": 8, "padding": 16, "children": [ { "type": "text", "id": "jLxkP", "name": "Do Not Header", "fill": "#C8956C", "content": "5. DO NOT", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "700", "letterSpacing": 2 }, { "type": "frame", "id": "pjTKF", "name": "Do Not Rule", "gap": 12, "children": [ { "type": "text", "id": "C9q84", "name": "Do Not Bullet", "fill": "#C8956C", "content": "✗", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "text", "id": "v3tSmV", "name": "Do Not Text", "fill": "#2C2416", "content": "Do not invent new colors — use only the tokens listed above.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "a4STM", "name": "Do Not Rule", "gap": 12, "children": [ { "type": "text", "id": "RVMPW", "name": "Do Not Bullet", "fill": "#C8956C", "content": "✗", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "text", "id": "T3Scu", "name": "Do Not Text", "fill": "#2C2416", "content": "Do not use Unicode characters (▾, ☰, 🔍) for icons — use geometric paths only.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "B7ZfQ1", "name": "Do Not Rule", "gap": 12, "children": [ { "type": "text", "id": "IJGmM", "name": "Do Not Bullet", "fill": "#C8956C", "content": "✗", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "text", "id": "KsDjW", "name": "Do Not Text", "fill": "#2C2416", "content": "Do not recreate the nav, banner, footer, button, or filter bar — always use the reusable component.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "lGDI6", "name": "Do Not Rule", "gap": 12, "children": [ { "type": "text", "id": "dNERZ", "name": "Do Not Bullet", "fill": "#C8956C", "content": "✗", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "text", "id": "pETcV", "name": "Do Not Text", "fill": "#2C2416", "content": "Do not change font families (Inter + Playfair Display only).", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "h17md", "name": "Do Not Rule", "gap": 12, "children": [ { "type": "text", "id": "n3CK3", "name": "Do Not Bullet", "fill": "#C8956C", "content": "✗", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "text", "id": "yUS0A", "name": "Do Not Text", "fill": "#2C2416", "content": "Do not break the 1440px canvas width — use fill_container to scale.", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] } ] } ] }, { "type": "frame", "id": "Xpesi", "name": "Custom Design Flow Page Map", "width": "fill_container", "fill": "#FCFAF7", "cornerRadius": 6, "stroke": "#2C2416", "strokeWidth": 1, "layout": "vertical", "gap": 20, "padding": 32, "children": [ { "type": "text", "id": "ERRdC", "name": "Map Title", "fill": "#2C2416", "content": "CUSTOM DESIGN FLOW — PAGE MAP", "fontFamily": "Inter", "fontSize": 20, "fontWeight": "700", "letterSpacing": 2 }, { "type": "text", "id": "s5XETT", "name": "Map Subtitle", "fill": "#8C7B6E", "content": "5 pages for the custom-design shopping journey. Derived from Obsidian canvas: Shopping Flow - Design Yours + Three Steps Customization Flow.", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "normal" }, { "type": "frame", "id": "BU9hi", "name": "Flow Diagram", "width": "fill_container", "gap": 8, "padding": [ 16, 0 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "frame", "id": "m0r17i", "name": "Flow Home", "fill": "#1A1A1A", "cornerRadius": 20, "gap": 8, "padding": [ 10, 18 ], "alignItems": "center", "children": [ { "type": "text", "id": "b0p8j", "name": "Home Step", "fill": "#C8956C", "content": "STEP 1", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "700", "letterSpacing": 1 }, { "type": "text", "id": "Tt1GM", "name": "Home Label", "fill": "#FFFFFF", "content": "Home", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "600" } ] }, { "type": "text", "id": "Z0imjC", "name": "Arrow Home", "fill": "#8C7B6E", "content": "→", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "frame", "id": "IH8Qf", "name": "Flow Style", "fill": "#1A1A1A", "cornerRadius": 20, "gap": 8, "padding": [ 10, 18 ], "alignItems": "center", "children": [ { "type": "text", "id": "IuAUU", "name": "Style Step", "fill": "#C8956C", "content": "STEP 2", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "700", "letterSpacing": 1 }, { "type": "text", "id": "vuQnF", "name": "Style Label", "fill": "#FFFFFF", "content": "Style", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "600" } ] }, { "type": "text", "id": "v3lHC6", "name": "Arrow Style", "fill": "#8C7B6E", "content": "→", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "frame", "id": "G7goP", "name": "Flow Fabrics", "fill": "#1A1A1A", "cornerRadius": 20, "gap": 8, "padding": [ 10, 18 ], "alignItems": "center", "children": [ { "type": "text", "id": "e5jvx", "name": "Fabrics Step", "fill": "#C8956C", "content": "STEP 3", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "700", "letterSpacing": 1 }, { "type": "text", "id": "c7z47", "name": "Fabrics Label", "fill": "#FFFFFF", "content": "Fabrics", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "600" } ] }, { "type": "text", "id": "DAz8i", "name": "Arrow Fabrics", "fill": "#8C7B6E", "content": "→", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "frame", "id": "l7hixq", "name": "Flow Accessories", "fill": "#1A1A1A", "cornerRadius": 20, "gap": 8, "padding": [ 10, 18 ], "alignItems": "center", "children": [ { "type": "text", "id": "YzQ5z", "name": "Accessories Step", "fill": "#C8956C", "content": "STEP 4", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "700", "letterSpacing": 1 }, { "type": "text", "id": "luaIa", "name": "Accessories Label", "fill": "#FFFFFF", "content": "Accessories", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "600" } ] }, { "type": "text", "id": "b9rK2B", "name": "Arrow Accessories", "fill": "#8C7B6E", "content": "→", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "normal" }, { "type": "frame", "id": "a5YII", "name": "Flow Order Preview", "fill": "#1A1A1A", "cornerRadius": 20, "gap": 8, "padding": [ 10, 18 ], "alignItems": "center", "children": [ { "type": "text", "id": "FUPTo", "name": "Order Preview Step", "fill": "#C8956C", "content": "STEP 5", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "700", "letterSpacing": 1 }, { "type": "text", "id": "ttPKO", "name": "Order Preview Label", "fill": "#FFFFFF", "content": "Order Preview", "fontFamily": "Inter", "fontSize": 12, "fontWeight": "600" } ] } ] }, { "type": "frame", "id": "CccLn", "name": "Home Map", "width": "fill_container", "fill": "#F8F5F0", "cornerRadius": 6, "stroke": "#E8E0D5", "strokeWidth": 1, "layout": "vertical", "gap": 8, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "nxXbC", "name": "Home Map Header", "fill": "#1A1A1A", "content": "① Home (Sub-Home Page for Design Yours)", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "700" }, { "type": "text", "id": "JIiYN", "name": "Home Map Purpose", "fill": "#3D3530", "content": "Purpose: Entry point that introduces the Design Yours tool. Source: Obsidian \"Shopping Flow - Design Yours Sub Home Page\".", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "b7hpb", "name": "Home Map Elements", "fill": "#1A1A1A", "content": "Main elements:", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "frame", "id": "JVW4u", "name": "Home El", "gap": 8, "children": [ { "type": "text", "id": "t4HbD", "name": "Home Bullet", "fill": "#C8956C", "content": "•", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "700" }, { "type": "text", "id": "L1uYFU", "name": "Home El Text", "fill": "#3D3530", "content": "Nav (ref: NBZe9 Nav Light)", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "GfXs1", "name": "Home El", "gap": 8, "children": [ { "type": "text", "id": "pv44t", "name": "Home Bullet", "fill": "#C8956C", "content": "•", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "700" }, { "type": "text", "id": "GJLaI", "name": "Home El Text", "fill": "#3D3530", "content": "Hero: \"Design Yours\" headline + 1-line value prop + \"Start Designing →\" CTA (ref: G2YSa button)", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "Ruhl4", "name": "Home El", "gap": 8, "children": [ { "type": "text", "id": "PQAzw", "name": "Home Bullet", "fill": "#C8956C", "content": "•", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "700" }, { "type": "text", "id": "GPvKo", "name": "Home El Text", "fill": "#3D3530", "content": "How It Works: 3 numbered cards (1. Choose Style, 2. Pick Fabric, 3. Add Accessories) — links to step pages", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "mUwTJ", "name": "Home El", "gap": 8, "children": [ { "type": "text", "id": "p1BiPw", "name": "Home Bullet", "fill": "#C8956C", "content": "•", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "700" }, { "type": "text", "id": "nYXMF", "name": "Home El Text", "fill": "#3D3530", "content": "Featured Designs: 3-4 cards showing example designs — \"Customize This →\" CTA", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "m8rYK", "name": "Home El", "gap": 8, "children": [ { "type": "text", "id": "pO2kR", "name": "Home Bullet", "fill": "#C8956C", "content": "•", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "700" }, { "type": "text", "id": "eeYu2", "name": "Home El Text", "fill": "#3D3530", "content": "Bottom CTA: \"Ready to Create Your Own?\" + \"Start Designing →\"", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "NMKMH", "name": "Home El", "gap": 8, "children": [ { "type": "text", "id": "BfNI8", "name": "Home Bullet", "fill": "#C8956C", "content": "•", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "700" }, { "type": "text", "id": "TZTv9", "name": "Home El Text", "fill": "#3D3530", "content": "Footer (ref: PZLrQ)", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "q6Mpv", "name": "Style Map", "width": "fill_container", "fill": "#F8F5F0", "cornerRadius": 6, "stroke": "#E8E0D5", "strokeWidth": 1, "layout": "vertical", "gap": 8, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "NPhEg", "name": "Style Map Header", "fill": "#1A1A1A", "content": "② Style (Step 1 of 3)", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "700" }, { "type": "text", "id": "GnMS2", "name": "Style Map Purpose", "fill": "#3D3530", "content": "Purpose: User picks a base style to customize. Source: Obsidian \"Step 1 / Style Library\".", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "q670yo", "name": "Style Map Elements", "fill": "#1A1A1A", "content": "Main elements:", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "frame", "id": "M3g8s", "name": "Style El", "gap": 8, "children": [ { "type": "text", "id": "L9tKh", "name": "Style Bullet", "fill": "#C8956C", "content": "•", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "700" }, { "type": "text", "id": "x1hB2", "name": "Style El Text", "fill": "#3D3530", "content": "Nav (ref: NBZe9 Nav Light)", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "x05Id", "name": "Style El", "gap": 8, "children": [ { "type": "text", "id": "MgwwH", "name": "Style Bullet", "fill": "#C8956C", "content": "•", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "700" }, { "type": "text", "id": "CT6tA", "name": "Style El Text", "fill": "#3D3530", "content": "Step Indicator: 3 dots (1 active accent, 2 muted) + \"STEP 1 OF 3\" eyebrow + \"Choose Your Style\" heading + subhead", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "B3EnP", "name": "Style El", "gap": 8, "children": [ { "type": "text", "id": "TNDqC", "name": "Style Bullet", "fill": "#C8956C", "content": "•", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "700" }, { "type": "text", "id": "xgRU1", "name": "Style El Text", "fill": "#3D3530", "content": "Style Grid: 2×3 (or 3×2) of style cards — image placeholder + title + sub-label (e.g. Classic Shirt / Timeless button-down)", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "a1JxW", "name": "Style El", "gap": 8, "children": [ { "type": "text", "id": "uJLL3", "name": "Style Bullet", "fill": "#C8956C", "content": "•", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "700" }, { "type": "text", "id": "CcSKb", "name": "Style El Text", "fill": "#3D3530", "content": "Selection state: selected card has accent border + checkmark", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "f45OxH", "name": "Style El", "gap": 8, "children": [ { "type": "text", "id": "SWFLH", "name": "Style Bullet", "fill": "#C8956C", "content": "•", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "700" }, { "type": "text", "id": "l7nZS1", "name": "Style El Text", "fill": "#3D3530", "content": "Nav buttons: ← Back (disabled / muted) + \"Next: Fabric →\" (ref: G2YSa button)", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] } ] }, { "type": "frame", "id": "P9pGm", "name": "Fabrics Map", "width": "fill_container", "fill": "#F8F5F0", "cornerRadius": 6, "stroke": "#E8E0D5", "strokeWidth": 1, "layout": "vertical", "gap": 8, "padding": [ 16, 20 ], "children": [ { "type": "text", "id": "NL3Xi", "name": "Fabrics Map Header", "fill": "#1A1A1A", "content": "③ Fabrics (Step 2 of 3)", "fontFamily": "Inter", "fontSize": 14, "fontWeight": "700" }, { "type": "text", "id": "V0rlGE", "name": "Fabrics Map Purpose", "fill": "#3D3530", "content": "Purpose: User picks fabric material. Source: Obsidian \"Step 2 / Fabrics\".", "lineHeight": 1.5, "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" }, { "type": "text", "id": "BrHbM", "name": "Fabrics Map Elements", "fill": "#1A1A1A", "content": "Main elements:", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "700" }, { "type": "frame", "id": "GMh8F", "name": "Fab El", "gap": 8, "children": [ { "type": "text", "id": "W2VpN", "name": "Fab Bullet", "fill": "#C8956C", "content": "•", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "700" }, { "type": "text", "id": "hf362", "name": "Fab El Text", "fill": "#3D3530", "content": "Nav (ref: NBZe9 Nav Light)", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "lmDBf", "name": "Fab El", "gap": 8, "children": [ { "type": "text", "id": "RIQUm", "name": "Fab Bullet", "fill": "#C8956C", "content": "•", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "700" }, { "type": "text", "id": "eA70H", "name": "Fab El Text", "fill": "#3D3530", "content": "Step Indicator: 2 active (1 done), 3 muted + \"STEP 2 OF 3\" eyebrow + \"Choose Your Fabric\" heading", "fontFamily": "Inter", "fontSize": 11, "fontWeight": "normal" } ] }, { "type": "frame", "id": "H8fCja", "name": "Fab El", "gap": 8, "children": [ { "type": "text", "id": "pPQq1", "name": "Fab Bullet", "fill": "#C8956C", "content": "•", "fontFamily": "Inter", "fontSize": 10, "fontWeight": "700" }, { "type": "text", "id": "Fy17z", "name": "Fab El Text", "fill": "#3D3530", "content": "Breadcrumb: \"Your Choice: