diff --git a/data/ablation/conditions/size-constraints/desktop-pricing/code-baseline-1920.png b/data/ablation/conditions/size-constraints/desktop-pricing/code-baseline-1920.png new file mode 100644 index 00000000..4499d7b3 Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-pricing/code-baseline-1920.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-pricing/code-stripped-1920.png b/data/ablation/conditions/size-constraints/desktop-pricing/code-stripped-1920.png new file mode 100644 index 00000000..c9dbc699 Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-pricing/code-stripped-1920.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-pricing/diff-baseline-1920.png b/data/ablation/conditions/size-constraints/desktop-pricing/diff-baseline-1920.png new file mode 100644 index 00000000..d17e8ffe Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-pricing/diff-baseline-1920.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-pricing/diff-stripped-1920.png b/data/ablation/conditions/size-constraints/desktop-pricing/diff-stripped-1920.png new file mode 100644 index 00000000..5f138d6b Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-pricing/diff-stripped-1920.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-pricing/figma-baseline-1920.png b/data/ablation/conditions/size-constraints/desktop-pricing/figma-baseline-1920.png new file mode 100644 index 00000000..4339ebfa Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-pricing/figma-baseline-1920.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-pricing/figma-stripped-1920.png b/data/ablation/conditions/size-constraints/desktop-pricing/figma-stripped-1920.png new file mode 100644 index 00000000..4339ebfa Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-pricing/figma-stripped-1920.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-pricing/output-baseline-expanded.html b/data/ablation/conditions/size-constraints/desktop-pricing/output-baseline-expanded.html new file mode 100644 index 00000000..adb036db --- /dev/null +++ b/data/ablation/conditions/size-constraints/desktop-pricing/output-baseline-expanded.html @@ -0,0 +1,596 @@ + + + + + + Platform Desktop + + + + +
+ + +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+ + +
+
+
+
+
Monthly
+
+
+
Yearly
+
+
+
+ +
+ +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+
+
+ + +
+
+
Heading
+
Subheading
+
+ +
+ +
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+ +
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/desktop-pricing/output-baseline.html b/data/ablation/conditions/size-constraints/desktop-pricing/output-baseline.html new file mode 100644 index 00000000..8c7f828c --- /dev/null +++ b/data/ablation/conditions/size-constraints/desktop-pricing/output-baseline.html @@ -0,0 +1,596 @@ + + + + + + Platform Desktop + + + + +
+ + +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+ + +
+
+
+
+
Monthly
+
+
+
Yearly
+
+
+
+ +
+ +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+
+
+ + +
+
+
Heading
+
Subheading
+
+ +
+ +
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+ +
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/desktop-pricing/output-stripped-expanded.html b/data/ablation/conditions/size-constraints/desktop-pricing/output-stripped-expanded.html new file mode 100644 index 00000000..47b7758a --- /dev/null +++ b/data/ablation/conditions/size-constraints/desktop-pricing/output-stripped-expanded.html @@ -0,0 +1,584 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+ + +
+
+
+
+
Monthly
+
+
+
Yearly
+
+
+
+ +
+ +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+
+
+ + +
+
+
Heading
+
Subheading
+
+ +
+ +
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+ +
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/desktop-pricing/output-stripped.html b/data/ablation/conditions/size-constraints/desktop-pricing/output-stripped.html new file mode 100644 index 00000000..4e4fe70d --- /dev/null +++ b/data/ablation/conditions/size-constraints/desktop-pricing/output-stripped.html @@ -0,0 +1,584 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+ + +
+
+
+
+
Monthly
+
+
+
Yearly
+
+
+
+ +
+ +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+
+
+ + +
+
+
Heading
+
Subheading
+
+ +
+ +
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+ +
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/desktop-pricing/result.json b/data/ablation/conditions/size-constraints/desktop-pricing/result.json new file mode 100644 index 00000000..13c1ce0b --- /dev/null +++ b/data/ablation/conditions/size-constraints/desktop-pricing/result.json @@ -0,0 +1,14 @@ +{ + "fixture": "desktop-pricing", + "type": "size-constraints", + "baseWidth": 1200, + "expandedWidth": 1920, + "baselineSimilarity": 96, + "strippedSimilarity": 85, + "deltaV": 11, + "strippedTokens": { + "input": 25046, + "output": 16675 + }, + "timestamp": "2026-03-28T12:53:52.447Z" +} \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/desktop-shop/code-baseline-1920.png b/data/ablation/conditions/size-constraints/desktop-shop/code-baseline-1920.png new file mode 100644 index 00000000..1409afe3 Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-shop/code-baseline-1920.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-shop/code-stripped-1920.png b/data/ablation/conditions/size-constraints/desktop-shop/code-stripped-1920.png new file mode 100644 index 00000000..56d34ea6 Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-shop/code-stripped-1920.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-shop/diff-baseline-1920.png b/data/ablation/conditions/size-constraints/desktop-shop/diff-baseline-1920.png new file mode 100644 index 00000000..5232a1e0 Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-shop/diff-baseline-1920.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-shop/diff-stripped-1920.png b/data/ablation/conditions/size-constraints/desktop-shop/diff-stripped-1920.png new file mode 100644 index 00000000..35acaaa2 Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-shop/diff-stripped-1920.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-shop/figma-baseline-1920.png b/data/ablation/conditions/size-constraints/desktop-shop/figma-baseline-1920.png new file mode 100644 index 00000000..d367f229 Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-shop/figma-baseline-1920.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-shop/figma-stripped-1920.png b/data/ablation/conditions/size-constraints/desktop-shop/figma-stripped-1920.png new file mode 100644 index 00000000..d367f229 Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-shop/figma-stripped-1920.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-shop/images/image-2@2x.png b/data/ablation/conditions/size-constraints/desktop-shop/images/image-2@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-shop/images/image-2@2x.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-shop/images/image-3@2x.png b/data/ablation/conditions/size-constraints/desktop-shop/images/image-3@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-shop/images/image-3@2x.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-shop/images/image-4@2x.png b/data/ablation/conditions/size-constraints/desktop-shop/images/image-4@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-shop/images/image-4@2x.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-shop/images/image-5@2x.png b/data/ablation/conditions/size-constraints/desktop-shop/images/image-5@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-shop/images/image-5@2x.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-shop/images/image-6@2x.png b/data/ablation/conditions/size-constraints/desktop-shop/images/image-6@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-shop/images/image-6@2x.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-shop/images/image@2x.png b/data/ablation/conditions/size-constraints/desktop-shop/images/image@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-shop/images/image@2x.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-shop/images/mapping.json b/data/ablation/conditions/size-constraints/desktop-shop/images/mapping.json new file mode 100644 index 00000000..82ff2605 --- /dev/null +++ b/data/ablation/conditions/size-constraints/desktop-shop/images/mapping.json @@ -0,0 +1,8 @@ +{ + "I175:7426;83:31571;638:13763": "image@2x.png", + "I175:7426;83:31572;638:13763": "image-2@2x.png", + "I175:7426;83:31573;638:13763": "image-3@2x.png", + "I175:7426;83:31574;638:13763": "image-4@2x.png", + "I175:7426;83:31575;638:13763": "image-5@2x.png", + "I175:7426;83:31576;638:13763": "image-6@2x.png" +} \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/desktop-shop/output-baseline-expanded.html b/data/ablation/conditions/size-constraints/desktop-shop/output-baseline-expanded.html new file mode 100644 index 00000000..e96940cb --- /dev/null +++ b/data/ablation/conditions/size-constraints/desktop-shop/output-baseline-expanded.html @@ -0,0 +1,697 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+
+ +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+ +
+
+ +
+
+ Keywords +
+
+
+ Spring +
+ + + +
+
+
+ Smart +
+ + + +
+
+
+ Modern +
+ + + +
+
+
+
+ + +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+ Description +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+ Description +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+ Description +
+
+
+
+ + +
+
+ Label +
+ $ + 0-100 +
+
+
+
+
+
+
+
+
+
+ + +
+
+ Color +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+ + +
+
+ Size +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+
+
+ + +
+ +
+
+
+ Search +
+ + + +
+
+
+ +
+
+
+
+ + + +
+ New +
+
+ Price ascending +
+
+ Price descending +
+
+ Rating +
+
+
+
+ + +
+
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+ Use cases +
+
+
+
+ UI design +
+
+ UX design +
+
+ Wireframing +
+
+ Diagramming +
+
+ Brainstorming +
+
+ Online whiteboard +
+
+ Team collaboration +
+
+
+ +
+
+
+ Explore +
+
+
+
+ Design +
+
+ Prototyping +
+
+ Development features +
+
+ Design systems +
+
+ Collaboration features +
+
+ Design process +
+
+ FigJam +
+
+
+ +
+
+
+ Resources +
+
+
+
+ Blog +
+
+ Best practices +
+
+ Colors +
+
+ Color wheel +
+
+ Support +
+
+ Developers +
+
+ Resource library +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/desktop-shop/output-baseline.html b/data/ablation/conditions/size-constraints/desktop-shop/output-baseline.html new file mode 100644 index 00000000..d1df40de --- /dev/null +++ b/data/ablation/conditions/size-constraints/desktop-shop/output-baseline.html @@ -0,0 +1,697 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+
+ +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+ +
+
+ +
+
+ Keywords +
+
+
+ Spring +
+ + + +
+
+
+ Smart +
+ + + +
+
+
+ Modern +
+ + + +
+
+
+
+ + +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+ Description +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+ Description +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+ Description +
+
+
+
+ + +
+
+ Label +
+ $ + 0-100 +
+
+
+
+
+
+
+
+
+
+ + +
+
+ Color +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+ + +
+
+ Size +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+
+
+ + +
+ +
+
+
+ Search +
+ + + +
+
+
+ +
+
+
+
+ + + +
+ New +
+
+ Price ascending +
+
+ Price descending +
+
+ Rating +
+
+
+
+ + +
+
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+ Use cases +
+
+
+
+ UI design +
+
+ UX design +
+
+ Wireframing +
+
+ Diagramming +
+
+ Brainstorming +
+
+ Online whiteboard +
+
+ Team collaboration +
+
+
+ +
+
+
+ Explore +
+
+
+
+ Design +
+
+ Prototyping +
+
+ Development features +
+
+ Design systems +
+
+ Collaboration features +
+
+ Design process +
+
+ FigJam +
+
+
+ +
+
+
+ Resources +
+
+
+
+ Blog +
+
+ Best practices +
+
+ Colors +
+
+ Color wheel +
+
+ Support +
+
+ Developers +
+
+ Resource library +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/desktop-shop/output-stripped-expanded.html b/data/ablation/conditions/size-constraints/desktop-shop/output-stripped-expanded.html new file mode 100644 index 00000000..b8d4e527 --- /dev/null +++ b/data/ablation/conditions/size-constraints/desktop-shop/output-stripped-expanded.html @@ -0,0 +1,673 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+
+ +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+ +
+
+ +
+
+ Keywords +
+
+
+ Spring +
+ + + +
+
+
+ Smart +
+ + + +
+
+
+ Modern +
+ + + +
+
+
+
+ + +
+
+
+
+
+ + + +
+ Label +
+
+
+ Description +
+
+
+
+
+ + + +
+ Label +
+
+
+ Description +
+
+
+
+
+ + + +
+ Label +
+
+
+ Description +
+
+
+
+ + +
+
+ Label +
+ $ + 0-100 +
+
+
+
+
+
+
+
+
+
+ + +
+
+ Color +
+
+
+
+
+ + + +
+ Label +
+
+
+
+
+ + + +
+ Label +
+
+
+
+
+ + + +
+ Label +
+
+
+
+ + +
+
+ Size +
+
+
+
+
+ + + +
+ Label +
+
+
+
+
+ + + +
+ Label +
+
+
+
+
+ + + +
+ Label +
+
+
+
+
+
+ + +
+ +
+
+
+ Search +
+ + + +
+
+
+ +
+
+
+ + + + New +
+
+ Price ascending +
+
+ Price descending +
+
+ Rating +
+
+
+
+ + +
+
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+ Use cases +
+
+
+
+ UI design +
+
+ UX design +
+
+ Wireframing +
+
+ Diagramming +
+
+ Brainstorming +
+
+ Online whiteboard +
+
+ Team collaboration +
+
+
+ +
+
+
+ Explore +
+
+
+
+ Design +
+
+ Prototyping +
+
+ Development features +
+
+ Design systems +
+
+ Collaboration features +
+
+ Design process +
+
+ FigJam +
+
+
+ +
+
+
+ Resources +
+
+
+
+ Blog +
+
+ Best practices +
+
+ Colors +
+
+ Color wheel +
+
+ Support +
+
+ Developers +
+
+ Resource library +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/desktop-shop/output-stripped.html b/data/ablation/conditions/size-constraints/desktop-shop/output-stripped.html new file mode 100644 index 00000000..b5154f6d --- /dev/null +++ b/data/ablation/conditions/size-constraints/desktop-shop/output-stripped.html @@ -0,0 +1,673 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+
+ +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+ +
+
+ +
+
+ Keywords +
+
+
+ Spring +
+ + + +
+
+
+ Smart +
+ + + +
+
+
+ Modern +
+ + + +
+
+
+
+ + +
+
+
+
+
+ + + +
+ Label +
+
+
+ Description +
+
+
+
+
+ + + +
+ Label +
+
+
+ Description +
+
+
+
+
+ + + +
+ Label +
+
+
+ Description +
+
+
+
+ + +
+
+ Label +
+ $ + 0-100 +
+
+
+
+
+
+
+
+
+
+ + +
+
+ Color +
+
+
+
+
+ + + +
+ Label +
+
+
+
+
+ + + +
+ Label +
+
+
+
+
+ + + +
+ Label +
+
+
+
+ + +
+
+ Size +
+
+
+
+
+ + + +
+ Label +
+
+
+
+
+ + + +
+ Label +
+
+
+
+
+ + + +
+ Label +
+
+
+
+
+
+ + +
+ +
+
+
+ Search +
+ + + +
+
+
+ +
+
+
+ + + + New +
+
+ Price ascending +
+
+ Price descending +
+
+ Rating +
+
+
+
+ + +
+
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+ Use cases +
+
+
+
+ UI design +
+
+ UX design +
+
+ Wireframing +
+
+ Diagramming +
+
+ Brainstorming +
+
+ Online whiteboard +
+
+ Team collaboration +
+
+
+ +
+
+
+ Explore +
+
+
+
+ Design +
+
+ Prototyping +
+
+ Development features +
+
+ Design systems +
+
+ Collaboration features +
+
+ Design process +
+
+ FigJam +
+
+
+ +
+
+
+ Resources +
+
+
+
+ Blog +
+
+ Best practices +
+
+ Colors +
+
+ Color wheel +
+
+ Support +
+
+ Developers +
+
+ Resource library +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/desktop-shop/result.json b/data/ablation/conditions/size-constraints/desktop-shop/result.json new file mode 100644 index 00000000..64c39951 --- /dev/null +++ b/data/ablation/conditions/size-constraints/desktop-shop/result.json @@ -0,0 +1,14 @@ +{ + "fixture": "desktop-shop", + "type": "size-constraints", + "baseWidth": 1200, + "expandedWidth": 1920, + "baselineSimilarity": 97, + "strippedSimilarity": 81, + "deltaV": 16, + "strippedTokens": { + "input": 28534, + "output": 19207 + }, + "timestamp": "2026-03-28T12:57:09.216Z" +} \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/mobile-landing-page/code-baseline-768.png b/data/ablation/conditions/size-constraints/mobile-landing-page/code-baseline-768.png new file mode 100644 index 00000000..44653da0 Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-landing-page/code-baseline-768.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-landing-page/code-stripped-768.png b/data/ablation/conditions/size-constraints/mobile-landing-page/code-stripped-768.png new file mode 100644 index 00000000..9fea272b Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-landing-page/code-stripped-768.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-landing-page/diff-baseline-768.png b/data/ablation/conditions/size-constraints/mobile-landing-page/diff-baseline-768.png new file mode 100644 index 00000000..5eaee837 Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-landing-page/diff-baseline-768.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-landing-page/diff-stripped-768.png b/data/ablation/conditions/size-constraints/mobile-landing-page/diff-stripped-768.png new file mode 100644 index 00000000..ef4fb842 Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-landing-page/diff-stripped-768.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-landing-page/figma-baseline-768.png b/data/ablation/conditions/size-constraints/mobile-landing-page/figma-baseline-768.png new file mode 100644 index 00000000..2dfd727f Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-landing-page/figma-baseline-768.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-landing-page/figma-stripped-768.png b/data/ablation/conditions/size-constraints/mobile-landing-page/figma-stripped-768.png new file mode 100644 index 00000000..2dfd727f Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-landing-page/figma-stripped-768.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-landing-page/images/hero-image@2x.png b/data/ablation/conditions/size-constraints/mobile-landing-page/images/hero-image@2x.png new file mode 100644 index 00000000..cdbd7abb Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-landing-page/images/hero-image@2x.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-landing-page/images/image-2@2x.png b/data/ablation/conditions/size-constraints/mobile-landing-page/images/image-2@2x.png new file mode 100644 index 00000000..5f380732 Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-landing-page/images/image-2@2x.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-landing-page/images/image@2x.png b/data/ablation/conditions/size-constraints/mobile-landing-page/images/image@2x.png new file mode 100644 index 00000000..5f380732 Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-landing-page/images/image@2x.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-landing-page/images/mapping.json b/data/ablation/conditions/size-constraints/mobile-landing-page/images/mapping.json new file mode 100644 index 00000000..34b7c563 --- /dev/null +++ b/data/ablation/conditions/size-constraints/mobile-landing-page/images/mapping.json @@ -0,0 +1,5 @@ +{ + "562:9795": "hero-image@2x.png", + "I562:9796;348:13472": "image@2x.png", + "I562:9796;348:13473": "image-2@2x.png" +} \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/mobile-landing-page/output-baseline-expanded.html b/data/ablation/conditions/size-constraints/mobile-landing-page/output-baseline-expanded.html new file mode 100644 index 00000000..19114217 --- /dev/null +++ b/data/ablation/conditions/size-constraints/mobile-landing-page/output-baseline-expanded.html @@ -0,0 +1,605 @@ + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+
+
Heading
+
Subheading
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/mobile-landing-page/output-baseline.html b/data/ablation/conditions/size-constraints/mobile-landing-page/output-baseline.html new file mode 100644 index 00000000..913401d4 --- /dev/null +++ b/data/ablation/conditions/size-constraints/mobile-landing-page/output-baseline.html @@ -0,0 +1,605 @@ + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+
+
Heading
+
Subheading
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/mobile-landing-page/output-stripped-expanded.html b/data/ablation/conditions/size-constraints/mobile-landing-page/output-stripped-expanded.html new file mode 100644 index 00000000..cd81ac07 --- /dev/null +++ b/data/ablation/conditions/size-constraints/mobile-landing-page/output-stripped-expanded.html @@ -0,0 +1,416 @@ + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+
+
Heading
+
Subheading
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/mobile-landing-page/output-stripped.html b/data/ablation/conditions/size-constraints/mobile-landing-page/output-stripped.html new file mode 100644 index 00000000..9e127356 --- /dev/null +++ b/data/ablation/conditions/size-constraints/mobile-landing-page/output-stripped.html @@ -0,0 +1,416 @@ + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+
+
Heading
+
Subheading
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/mobile-landing-page/result.json b/data/ablation/conditions/size-constraints/mobile-landing-page/result.json new file mode 100644 index 00000000..d442b6db --- /dev/null +++ b/data/ablation/conditions/size-constraints/mobile-landing-page/result.json @@ -0,0 +1,14 @@ +{ + "fixture": "mobile-landing-page", + "type": "size-constraints", + "baseWidth": 375, + "expandedWidth": 768, + "baselineSimilarity": 72, + "strippedSimilarity": 72, + "deltaV": 0, + "strippedTokens": { + "input": 19688, + "output": 14224 + }, + "timestamp": "2026-03-28T12:45:43.855Z" +} \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/mobile-pricing/code-baseline-768.png b/data/ablation/conditions/size-constraints/mobile-pricing/code-baseline-768.png new file mode 100644 index 00000000..e616e61c Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-pricing/code-baseline-768.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-pricing/code-stripped-768.png b/data/ablation/conditions/size-constraints/mobile-pricing/code-stripped-768.png new file mode 100644 index 00000000..4fb50f27 Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-pricing/code-stripped-768.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-pricing/diff-baseline-768.png b/data/ablation/conditions/size-constraints/mobile-pricing/diff-baseline-768.png new file mode 100644 index 00000000..9c4d02e4 Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-pricing/diff-baseline-768.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-pricing/diff-stripped-768.png b/data/ablation/conditions/size-constraints/mobile-pricing/diff-stripped-768.png new file mode 100644 index 00000000..3347e660 Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-pricing/diff-stripped-768.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-pricing/figma-baseline-768.png b/data/ablation/conditions/size-constraints/mobile-pricing/figma-baseline-768.png new file mode 100644 index 00000000..419de6b8 Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-pricing/figma-baseline-768.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-pricing/figma-stripped-768.png b/data/ablation/conditions/size-constraints/mobile-pricing/figma-stripped-768.png new file mode 100644 index 00000000..419de6b8 Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-pricing/figma-stripped-768.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-pricing/output-baseline-expanded.html b/data/ablation/conditions/size-constraints/mobile-pricing/output-baseline-expanded.html new file mode 100644 index 00000000..98ea4923 --- /dev/null +++ b/data/ablation/conditions/size-constraints/mobile-pricing/output-baseline-expanded.html @@ -0,0 +1,666 @@ + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+ + +
+
+
+
+
Monthly
+
+
+
Yearly
+
+
+
+ +
+ +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+
+
+ + +
+
+
Heading
+
Subheading
+
+ +
+ +
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+ +
+
+
Use cases
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
Explore
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
Resources
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/mobile-pricing/output-baseline.html b/data/ablation/conditions/size-constraints/mobile-pricing/output-baseline.html new file mode 100644 index 00000000..6b48f29a --- /dev/null +++ b/data/ablation/conditions/size-constraints/mobile-pricing/output-baseline.html @@ -0,0 +1,666 @@ + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+ + +
+
+
+
+
Monthly
+
+
+
Yearly
+
+
+
+ +
+ +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+
+
+ + +
+
+
Heading
+
Subheading
+
+ +
+ +
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+ +
+
+
Use cases
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
Explore
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
Resources
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/mobile-pricing/output-stripped-expanded.html b/data/ablation/conditions/size-constraints/mobile-pricing/output-stripped-expanded.html new file mode 100644 index 00000000..593ba898 --- /dev/null +++ b/data/ablation/conditions/size-constraints/mobile-pricing/output-stripped-expanded.html @@ -0,0 +1,642 @@ + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+ + +
+
+
+
+
Monthly
+
+
+
Yearly
+
+
+
+ +
+ +
+
+
+
Title
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+
+
+ + +
+
+
Heading
+
Subheading
+
+ +
+ +
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+ +
+
+
Use cases
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
Explore
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
Resources
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/mobile-pricing/output-stripped.html b/data/ablation/conditions/size-constraints/mobile-pricing/output-stripped.html new file mode 100644 index 00000000..144d5bde --- /dev/null +++ b/data/ablation/conditions/size-constraints/mobile-pricing/output-stripped.html @@ -0,0 +1,642 @@ + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+ + +
+
+
+
+
Monthly
+
+
+
Yearly
+
+
+
+ +
+ +
+
+
+
Title
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+
+
+ + +
+
+
Heading
+
Subheading
+
+ +
+ +
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+ +
+
+
Use cases
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
Explore
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
Resources
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/mobile-pricing/result.json b/data/ablation/conditions/size-constraints/mobile-pricing/result.json new file mode 100644 index 00000000..b94a9ec9 --- /dev/null +++ b/data/ablation/conditions/size-constraints/mobile-pricing/result.json @@ -0,0 +1,14 @@ +{ + "fixture": "mobile-pricing", + "type": "size-constraints", + "baseWidth": 375, + "expandedWidth": 768, + "baselineSimilarity": 73, + "strippedSimilarity": 62, + "deltaV": 11, + "strippedTokens": { + "input": 23415, + "output": 16620 + }, + "timestamp": "2026-03-28T12:50:56.920Z" +} \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/mobile-product-detail/code-baseline-768.png b/data/ablation/conditions/size-constraints/mobile-product-detail/code-baseline-768.png new file mode 100644 index 00000000..654450f1 Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-product-detail/code-baseline-768.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-product-detail/code-stripped-768.png b/data/ablation/conditions/size-constraints/mobile-product-detail/code-stripped-768.png new file mode 100644 index 00000000..4c84fbeb Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-product-detail/code-stripped-768.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-product-detail/diff-baseline-768.png b/data/ablation/conditions/size-constraints/mobile-product-detail/diff-baseline-768.png new file mode 100644 index 00000000..4452acc9 Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-product-detail/diff-baseline-768.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-product-detail/diff-stripped-768.png b/data/ablation/conditions/size-constraints/mobile-product-detail/diff-stripped-768.png new file mode 100644 index 00000000..5ea275f5 Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-product-detail/diff-stripped-768.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-product-detail/figma-baseline-768.png b/data/ablation/conditions/size-constraints/mobile-product-detail/figma-baseline-768.png new file mode 100644 index 00000000..45d609bf Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-product-detail/figma-baseline-768.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-product-detail/figma-stripped-768.png b/data/ablation/conditions/size-constraints/mobile-product-detail/figma-stripped-768.png new file mode 100644 index 00000000..45d609bf Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-product-detail/figma-stripped-768.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-product-detail/images/image@2x.png b/data/ablation/conditions/size-constraints/mobile-product-detail/images/image@2x.png new file mode 100644 index 00000000..86ddb82a Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-product-detail/images/image@2x.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-product-detail/images/mapping.json b/data/ablation/conditions/size-constraints/mobile-product-detail/images/mapping.json new file mode 100644 index 00000000..3e11702b --- /dev/null +++ b/data/ablation/conditions/size-constraints/mobile-product-detail/images/mapping.json @@ -0,0 +1,6 @@ +{ + "I562:10933;3049:2455": "image@2x.png", + "I562:10934;348:15217;2236:16098;2010:15576;9762:1114": "shape@2x.png", + "I562:10934;348:15218;2236:16098;2010:15576;9762:1114": "shape-2@2x.png", + "I562:10934;348:15219;2236:16098;2010:15576;9762:1114": "shape-3@2x.png" +} \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/mobile-product-detail/images/shape-2@2x.png b/data/ablation/conditions/size-constraints/mobile-product-detail/images/shape-2@2x.png new file mode 100644 index 00000000..0286f0fb Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-product-detail/images/shape-2@2x.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-product-detail/images/shape-3@2x.png b/data/ablation/conditions/size-constraints/mobile-product-detail/images/shape-3@2x.png new file mode 100644 index 00000000..0286f0fb Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-product-detail/images/shape-3@2x.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-product-detail/images/shape@2x.png b/data/ablation/conditions/size-constraints/mobile-product-detail/images/shape@2x.png new file mode 100644 index 00000000..0286f0fb Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-product-detail/images/shape@2x.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-product-detail/output-baseline-expanded.html b/data/ablation/conditions/size-constraints/mobile-product-detail/output-baseline-expanded.html new file mode 100644 index 00000000..77a7ab57 --- /dev/null +++ b/data/ablation/conditions/size-constraints/mobile-product-detail/output-baseline-expanded.html @@ -0,0 +1,642 @@ + + + + + + Platform Mobile + + + + +
+ + +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+ + +
+ +
+ + +
+ + +
+ + +
+
+
Text Heading
+
+ + +
+
+
Tag
+
+
+
+
$
+
50
+
+
+
+
+ +
+
Text
+
+
+ + +
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+ + +
+
Button
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+
+
+
+ + +
+
+ + + +
+
+
+
+ + +
+
+
Latest reviews
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+
+
+ + +
+
+
Follow the latest trends
+
With our daily newsletterWith our daily newsletterWith our daily newsletter
+
+
+
+
+
you@example.com
+
+
+
+
Submit
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+ + +
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/mobile-product-detail/output-baseline.html b/data/ablation/conditions/size-constraints/mobile-product-detail/output-baseline.html new file mode 100644 index 00000000..63bcf73a --- /dev/null +++ b/data/ablation/conditions/size-constraints/mobile-product-detail/output-baseline.html @@ -0,0 +1,642 @@ + + + + + + Platform Mobile + + + + +
+ + +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+ + +
+ +
+ + +
+ + +
+ + +
+
+
Text Heading
+
+ + +
+
+
Tag
+
+
+
+
$
+
50
+
+
+
+
+ +
+
Text
+
+
+ + +
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+ + +
+
Button
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+
+
+
+ + +
+
+ + + +
+
+
+
+ + +
+
+
Latest reviews
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+
+
+ + +
+
+
Follow the latest trends
+
With our daily newsletterWith our daily newsletterWith our daily newsletter
+
+
+
+
+
you@example.com
+
+
+
+
Submit
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+ + +
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/mobile-product-detail/output-stripped-expanded.html b/data/ablation/conditions/size-constraints/mobile-product-detail/output-stripped-expanded.html new file mode 100644 index 00000000..5a9663d9 --- /dev/null +++ b/data/ablation/conditions/size-constraints/mobile-product-detail/output-stripped-expanded.html @@ -0,0 +1,647 @@ + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+ +
+ +
+ + +
+ +
+ +
+
+
Text Heading
+
+ +
+
+
Tag
+
+
+
+
$
+
50
+
+
+
+
+
+
Text
+
+
+ + +
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+ + +
+
Button
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+
+
+
+ + +
+
+ + + +
+
+
+
+ + +
+
+
Latest reviews
+
+
+ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+
+
+ + +
+
+
Follow the latest trends
+
With our daily newsletterWith our daily newsletterWith our daily newsletter
+
+ +
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+ +
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/mobile-product-detail/output-stripped.html b/data/ablation/conditions/size-constraints/mobile-product-detail/output-stripped.html new file mode 100644 index 00000000..3a87dcd2 --- /dev/null +++ b/data/ablation/conditions/size-constraints/mobile-product-detail/output-stripped.html @@ -0,0 +1,647 @@ + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+ +
+ +
+ + +
+ +
+ +
+
+
Text Heading
+
+ +
+
+
Tag
+
+
+
+
$
+
50
+
+
+
+
+
+
Text
+
+
+ + +
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+ + +
+
Button
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+
+
+
+ + +
+
+ + + +
+
+
+
+ + +
+
+
Latest reviews
+
+
+ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+
+
+ + +
+
+
Follow the latest trends
+
With our daily newsletterWith our daily newsletterWith our daily newsletter
+
+ +
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+ +
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/mobile-product-detail/result.json b/data/ablation/conditions/size-constraints/mobile-product-detail/result.json new file mode 100644 index 00000000..ec5734cf --- /dev/null +++ b/data/ablation/conditions/size-constraints/mobile-product-detail/result.json @@ -0,0 +1,14 @@ +{ + "fixture": "mobile-product-detail", + "type": "size-constraints", + "baseWidth": 375, + "expandedWidth": 768, + "baselineSimilarity": 78, + "strippedSimilarity": 65, + "deltaV": 13, + "strippedTokens": { + "input": 25486, + "output": 20015 + }, + "timestamp": "2026-03-28T12:43:12.625Z" +} \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/mobile-shop/code-baseline-768.png b/data/ablation/conditions/size-constraints/mobile-shop/code-baseline-768.png new file mode 100644 index 00000000..ca621c54 Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-shop/code-baseline-768.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-shop/code-stripped-768.png b/data/ablation/conditions/size-constraints/mobile-shop/code-stripped-768.png new file mode 100644 index 00000000..c8269b63 Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-shop/code-stripped-768.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-shop/diff-baseline-768.png b/data/ablation/conditions/size-constraints/mobile-shop/diff-baseline-768.png new file mode 100644 index 00000000..c8fd52a6 Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-shop/diff-baseline-768.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-shop/diff-stripped-768.png b/data/ablation/conditions/size-constraints/mobile-shop/diff-stripped-768.png new file mode 100644 index 00000000..831283b8 Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-shop/diff-stripped-768.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-shop/figma-baseline-768.png b/data/ablation/conditions/size-constraints/mobile-shop/figma-baseline-768.png new file mode 100644 index 00000000..51292d70 Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-shop/figma-baseline-768.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-shop/figma-stripped-768.png b/data/ablation/conditions/size-constraints/mobile-shop/figma-stripped-768.png new file mode 100644 index 00000000..51292d70 Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-shop/figma-stripped-768.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-shop/images/image-2@2x.png b/data/ablation/conditions/size-constraints/mobile-shop/images/image-2@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-shop/images/image-2@2x.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-shop/images/image-3@2x.png b/data/ablation/conditions/size-constraints/mobile-shop/images/image-3@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-shop/images/image-3@2x.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-shop/images/image-4@2x.png b/data/ablation/conditions/size-constraints/mobile-shop/images/image-4@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-shop/images/image-4@2x.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-shop/images/image-5@2x.png b/data/ablation/conditions/size-constraints/mobile-shop/images/image-5@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-shop/images/image-5@2x.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-shop/images/image-6@2x.png b/data/ablation/conditions/size-constraints/mobile-shop/images/image-6@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-shop/images/image-6@2x.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-shop/images/image@2x.png b/data/ablation/conditions/size-constraints/mobile-shop/images/image@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/conditions/size-constraints/mobile-shop/images/image@2x.png differ diff --git a/data/ablation/conditions/size-constraints/mobile-shop/images/mapping.json b/data/ablation/conditions/size-constraints/mobile-shop/images/mapping.json new file mode 100644 index 00000000..e91507fe --- /dev/null +++ b/data/ablation/conditions/size-constraints/mobile-shop/images/mapping.json @@ -0,0 +1,8 @@ +{ + "I562:10413;348:13551;638:13763": "image@2x.png", + "I562:10413;348:13552;638:13763": "image-2@2x.png", + "I562:10413;348:13553;638:13763": "image-3@2x.png", + "I562:10413;348:13554;638:13763": "image-4@2x.png", + "I562:10413;348:13555;638:13763": "image-5@2x.png", + "I562:10413;348:13556;638:13763": "image-6@2x.png" +} \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/mobile-shop/output-baseline-expanded.html b/data/ablation/conditions/size-constraints/mobile-shop/output-baseline-expanded.html new file mode 100644 index 00000000..ac19d21b --- /dev/null +++ b/data/ablation/conditions/size-constraints/mobile-shop/output-baseline-expanded.html @@ -0,0 +1,329 @@ + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+ +
+ +
+ +
+
+
+ + + +
+
+
+
Search
+
+ + + +
+
+
+ + +
+
+
+
+ + + +
+
New
+
+
+
Price ascending
+
+
+
Price descending
+
+
+
Rating
+
+
+
+
+ + +
+
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+
+
+
+ + +
+ +
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ + +
+
+ +
+
+
Use cases
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
Explore
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
Resources
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/mobile-shop/output-baseline.html b/data/ablation/conditions/size-constraints/mobile-shop/output-baseline.html new file mode 100644 index 00000000..12d6f643 --- /dev/null +++ b/data/ablation/conditions/size-constraints/mobile-shop/output-baseline.html @@ -0,0 +1,329 @@ + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+ +
+ +
+ +
+
+
+ + + +
+
+
+
Search
+
+ + + +
+
+
+ + +
+
+
+
+ + + +
+
New
+
+
+
Price ascending
+
+
+
Price descending
+
+
+
Rating
+
+
+
+
+ + +
+
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+
+
+
+ + +
+ +
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ + +
+
+ +
+
+
Use cases
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
Explore
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
Resources
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/mobile-shop/output-stripped-expanded.html b/data/ablation/conditions/size-constraints/mobile-shop/output-stripped-expanded.html new file mode 100644 index 00000000..9475f050 --- /dev/null +++ b/data/ablation/conditions/size-constraints/mobile-shop/output-stripped-expanded.html @@ -0,0 +1,431 @@ + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+ +
+
+
+
+ + + +
+
+
+
Search
+
+ + + +
+
+
+
+
+
+ + + +
New
+
+
+
Price ascending
+
+
+
Price descending
+
+
+
Rating
+
+
+
+
+ + +
+
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/mobile-shop/output-stripped.html b/data/ablation/conditions/size-constraints/mobile-shop/output-stripped.html new file mode 100644 index 00000000..e06af96f --- /dev/null +++ b/data/ablation/conditions/size-constraints/mobile-shop/output-stripped.html @@ -0,0 +1,431 @@ + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+ +
+
+
+
+ + + +
+
+
+
Search
+
+ + + +
+
+
+
+
+
+ + + +
New
+
+
+
Price ascending
+
+
+
Price descending
+
+
+
Rating
+
+
+
+
+ + +
+
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/mobile-shop/result.json b/data/ablation/conditions/size-constraints/mobile-shop/result.json new file mode 100644 index 00000000..2b341f9c --- /dev/null +++ b/data/ablation/conditions/size-constraints/mobile-shop/result.json @@ -0,0 +1,14 @@ +{ + "fixture": "mobile-shop", + "type": "size-constraints", + "baseWidth": 375, + "expandedWidth": 768, + "baselineSimilarity": 94, + "strippedSimilarity": 48, + "deltaV": 46, + "strippedTokens": { + "input": 18895, + "output": 13126 + }, + "timestamp": "2026-03-28T12:48:06.039Z" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/baseline/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/desktop-pricing/baseline/run-0/code-base.png new file mode 100644 index 00000000..212b573b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-pricing/baseline/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/baseline/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/desktop-pricing/baseline/run-0/design-tree.txt new file mode 100644 index 00000000..f692058a --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-pricing/baseline/run-0/design-tree.txt @@ -0,0 +1,509 @@ +# Design Tree +# Root: 1200px x 2245px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Desktop (COMPONENT, 1200x2245) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 1200x99) [component: Platform=Desktop, State=Default] + component-properties: Platform=Desktop, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 0px; align-items: center; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Navigation Pill List (INSTANCE, 870x32) [component: Direction=Row] + component-properties: Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":-1,"localID":-1}}, Link 6#2194:3=true, Link 4#2194:6=true, Link 3#2194:7=true, Link 5#2194:5=true, Link 7#3529:0=false, Link 2#2194:4=true, Link 1#2194:8=true, Direction=Row + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px /* var:VariableID:9:11259 */; row-gap: 8px; justify-content: flex-end; align-items: flex-start; flex-grow: 1 + Slot (SLOT, 553x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Navigation Pill (INSTANCE, 84x32) [component: State=Active] + component-properties: Label#156:33=Products, State=Active + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 68x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Products" + Navigation Pill (INSTANCE, 86x32) [component: State=Default] + component-properties: Label#156:33=Solutions, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 70x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Solutions" + Navigation Pill (INSTANCE, 103x32) [component: State=Default] + component-properties: Label#156:33=Community, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 87x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Community" + Navigation Pill (INSTANCE, 95x32) [component: State=Default] + component-properties: Label#156:33=Resources, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 79x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Navigation Pill (INSTANCE, 68x32) [component: State=Default] + component-properties: Label#156:33=Pricing, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 52x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Pricing" + Navigation Pill (INSTANCE, 77x32) [component: State=Default] + component-properties: Label#156:33=Contact, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 61x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Contact" + Header Auth (INSTANCE, 178x32) [component: State=Logged Out] + component-properties: State=Logged Out + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center + Button (INSTANCE, 83x32) [component: Variant=Neutral, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Sign in, Variant=Neutral, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Sign in" + Button (INSTANCE, 83x32) [component: Variant=Primary, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Register, Variant=Primary, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 63x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Register" + Hero Basic (INSTANCE, 1200x452) [component: Platform=Desktop] + component-properties: Platform=Desktop + style: display: flex; flex-direction: column; align-items: center; align-self: STRETCH; padding: 160px 64px 160px 64px /* var:VariableID:346:10896 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; min-width: 1200px; max-width: 1920px + Text Content Title (INSTANCE, 151x132) [component: Align=Center] + component-properties: Has Subtitle#2153:13=true, Subtitle#2153:12=Subtitle, Title#2153:14=Title, Align=Center + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center; background: #E6E6E6 /* var:VariableID:3919:36430 */ + Title (TEXT, 151x86) + style: align-self: STRETCH; width: 100%; /* text-style: Title Hero */; font-family: "Inter"; font-weight: 700; font-size: 72px; line-height: 86.4px; letter-spacing: -2.16px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Subtitle (TEXT, 151x38) + style: align-self: STRETCH; width: 100%; /* text-style: Subtitle */; font-family: "Inter"; font-weight: 400; font-size: 32px; line-height: 38.4px; text-align: center; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Subtitle" + Card Grid Pricing (INSTANCE, 1200x603) [component: Platform=Desktop] + component-properties: Card Grid#6062:27={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: column; row-gap: 48px /* var:VariableID:346:10903 */; align-items: center; align-self: STRETCH; padding: 64px 64px 64px 64px /* var:VariableID:107:11150 */; width: 100%; background: #D9D9D9 /* var:VariableID:3919:36425 */; min-width: 1200px; max-width: 1920px + Navigation Pill List (INSTANCE, 149x32) [component: Direction=Row] + component-properties: Link 1#2194:8=true, Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":6062,"localID":12603}}, Link 6#2194:3=false, Link 3#2194:7=false, Link 4#2194:6=false, Link 2#2194:4=true, Link 7#3529:0=true, Link 5#2194:5=false, Direction=Row + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px /* var:VariableID:9:11259 */; row-gap: 8px; align-items: flex-start + Slot (SLOT, 149x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Navigation Pill (INSTANCE, 78x32) [component: State=Active] + component-properties: Label#156:33=Monthly, State=Active + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 62x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Monthly" + Navigation Pill (INSTANCE, 63x32) [component: State=Default] + component-properties: Label#156:33=Yearly, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 47x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Yearly" + Card Grid (SLOT, 1072x395) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 64px /* var:VariableID:107:11150 */; row-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; width: 100% + Pricing Card (INSTANCE, 315x395) [component: Device=Desktop, Variant=Stroke] + component-properties: Device=Desktop, Variant=Stroke + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; flex-grow: 1; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 300px + Top (FRAME, 251x267) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; justify-content: flex-end; align-items: center; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 149x29) [component: Text Heading] + component-properties: Text#2104:5=Title + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 149x29) + style: flex-grow: 1; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Text Price (INSTANCE, 110x48) [component: Size=Large] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=true, Size=Large + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 80x48) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 16x24) + style: font-family: "Inter"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + 50 (TEXT, 64x48) + style: font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "50" + / mo (TEXT, 30x25) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 25.2px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "/ mo" + Text List (INSTANCE, 251x158) [component: Density=Default] + component-properties: Slot#6062:9={"guid":{"sessionID":-1,"localID":-1}}, Has Title#480:0=false, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Slot (SLOT, 89x158) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Button (INSTANCE, 251x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Button" + Pricing Card (INSTANCE, 315x395) [component: Device=Desktop, Variant=Brand] + component-properties: Device=Desktop, Variant=Brand + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; flex-grow: 1; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden; min-width: 300px + Top (FRAME, 251x267) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; justify-content: flex-end; align-items: center; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 149x29) [component: Text Heading] + component-properties: Text#2104:5=Title + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 149x29) + style: flex-grow: 1; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Title" + Text Price (INSTANCE, 110x48) [component: Size=Large] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=true, Size=Large + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 80x48) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 16x24) + style: font-family: "Inter"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "$" + 50 (TEXT, 64x48) + style: font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "50" + / mo (TEXT, 30x25) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 25.2px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "/ mo" + Text List (INSTANCE, 251x158) [component: Density=Default] + component-properties: Slot#6062:9={"guid":{"sessionID":-1,"localID":-1}}, Has Title#480:0=false, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Slot (SLOT, 89x158) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Button (INSTANCE, 251x40) [component: Variant=Neutral, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Neutral, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Button" + Pricing Card (INSTANCE, 315x395) [component: Device=Desktop, Variant=Stroke] + component-properties: Device=Desktop, Variant=Stroke + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; flex-grow: 1; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 300px + Top (FRAME, 251x267) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; justify-content: flex-end; align-items: center; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 149x29) [component: Text Heading] + component-properties: Text#2104:5=Title + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 149x29) + style: flex-grow: 1; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Text Price (INSTANCE, 110x48) [component: Size=Large] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=true, Size=Large + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 80x48) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 16x24) + style: font-family: "Inter"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + 50 (TEXT, 64x48) + style: font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "50" + / mo (TEXT, 30x25) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 25.2px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "/ mo" + Text List (INSTANCE, 251x158) [component: Density=Default] + component-properties: Slot#6062:9={"guid":{"sessionID":-1,"localID":-1}}, Has Title#480:0=false, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Slot (SLOT, 89x158) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Button (INSTANCE, 251x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Button" + Page Accordion (INSTANCE, 1200x623) [component: Platform=Desktop] + component-properties: Platform=Desktop + style: display: flex; flex-direction: column; row-gap: 48px /* var:VariableID:346:10903 */; align-items: center; align-self: STRETCH; padding: 64px 64px 64px 64px /* var:VariableID:107:11150 */; width: 100%; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 1200px; max-width: 1920px + Text Content Heading (INSTANCE, 113x61) [component: Align=Center] + component-properties: Has Subheading#2153:9=true, Subheading#2153:11=Subheading, Heading#2153:10=Heading, Align=Center + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center + Heading (TEXT, 113x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Heading" + Subheading (TEXT, 113x24) + style: align-self: STRETCH; width: 100%; /* text-style: Subheading */; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Subheading" + Accordion (INSTANCE, 640x386) [component: Accordion] + component-properties: Items#6031:6={"guid":{"sessionID":-1,"localID":-1}} + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100%; max-width: 640px + Accordion Item (INSTANCE, 640x106) [component: State=Open] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Open + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 608x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; width: 100% + Title (TEXT, 580x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron up (INSTANCE, 20x20) [component: Chevron up] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Content (FRAME, 608x44) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Body (TEXT, 608x44) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list." + Items (SLOT, 640x264) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; align-self: STRETCH; width: 100% + Accordion Item (INSTANCE, 640x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 608x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Title (TEXT, 580x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Item (INSTANCE, 640x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 608x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Title (TEXT, 580x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Item (INSTANCE, 640x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 608x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Title (TEXT, 580x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Item (INSTANCE, 640x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 608x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Title (TEXT, 580x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Footer (INSTANCE, 1200x468) [component: Platform=Desktop] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 16px /* var:VariableID:9:11261 */; row-gap: 16px; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 160px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px; max-width: 1920px + Title (SLOT, 262x83) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Slot (SLOT, 818x276) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; background: #EBFFEE /* var:VariableID:2002:7433 */ + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 80x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 80x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 82x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 82x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/baseline/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/desktop-pricing/baseline/run-0/diff-base.png new file mode 100644 index 00000000..b0833b25 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-pricing/baseline/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/baseline/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/desktop-pricing/baseline/run-0/figma-base.png new file mode 100644 index 00000000..7b1c2a66 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-pricing/baseline/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/baseline/run-0/output.html b/data/ablation/phase1/72ffc72c9103/desktop-pricing/baseline/run-0/output.html new file mode 100644 index 00000000..8c7f828c --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-pricing/baseline/run-0/output.html @@ -0,0 +1,596 @@ + + + + + + Platform Desktop + + + + +
+ + +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+ + +
+
+
+
+
Monthly
+
+
+
Yearly
+
+
+
+ +
+ +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+
+
+ + +
+
+
Heading
+
Subheading
+
+ +
+ +
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+ +
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/baseline/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/desktop-pricing/baseline/run-0/response.txt new file mode 100644 index 00000000..95640922 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-pricing/baseline/run-0/response.txt @@ -0,0 +1,599 @@ +```html +// filename: index.html + + + + + + Platform Desktop + + + + +
+ + +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+ + +
+
+
+
+
Monthly
+
+
+
Yearly
+
+
+
+ +
+ +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+
+
+ + +
+
+
Heading
+
Subheading
+
+ +
+ +
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+ +
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/baseline/run-0/result.json b/data/ablation/phase1/72ffc72c9103/desktop-pricing/baseline/run-0/result.json new file mode 100644 index 00000000..2adeb40a --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-pricing/baseline/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "desktop-pricing", + "type": "baseline", + "runIndex": 0, + "similarity": 88, + "inputTokens": 25468, + "outputTokens": 16731, + "totalTokens": 42199, + "htmlBytes": 47644, + "htmlLines": 596, + "cssClassCount": 23, + "cssVariableCount": 13, + "timestamp": "2026-03-28T11:00:14.686Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/component-references/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/desktop-pricing/component-references/run-0/code-base.png new file mode 100644 index 00000000..686af9e2 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-pricing/component-references/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/component-references/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/desktop-pricing/component-references/run-0/design-tree.txt new file mode 100644 index 00000000..bf451332 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-pricing/component-references/run-0/design-tree.txt @@ -0,0 +1,426 @@ +# Design Tree +# Root: 1200px x 2245px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Desktop (COMPONENT, 1200x2245) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 1200x99) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 0px; align-items: center; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Navigation Pill List (INSTANCE, 870x32) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px /* var:VariableID:9:11259 */; row-gap: 8px; justify-content: flex-end; align-items: flex-start; flex-grow: 1 + Slot (SLOT, 553x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Navigation Pill (INSTANCE, 84x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 68x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Products" + Navigation Pill (INSTANCE, 86x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 70x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Solutions" + Navigation Pill (INSTANCE, 103x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 87x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Community" + Navigation Pill (INSTANCE, 95x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 79x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Navigation Pill (INSTANCE, 68x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 52x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Pricing" + Navigation Pill (INSTANCE, 77x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 61x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Contact" + Header Auth (INSTANCE, 178x32) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center + Button (INSTANCE, 83x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Sign in" + Button (INSTANCE, 83x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 63x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Register" + Hero Basic (INSTANCE, 1200x452) + style: display: flex; flex-direction: column; align-items: center; align-self: STRETCH; padding: 160px 64px 160px 64px /* var:VariableID:346:10896 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; min-width: 1200px; max-width: 1920px + Text Content Title (INSTANCE, 151x132) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center; background: #E6E6E6 /* var:VariableID:3919:36430 */ + Title (TEXT, 151x86) + style: align-self: STRETCH; width: 100%; /* text-style: Title Hero */; font-family: "Inter"; font-weight: 700; font-size: 72px; line-height: 86.4px; letter-spacing: -2.16px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Subtitle (TEXT, 151x38) + style: align-self: STRETCH; width: 100%; /* text-style: Subtitle */; font-family: "Inter"; font-weight: 400; font-size: 32px; line-height: 38.4px; text-align: center; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Subtitle" + Card Grid Pricing (INSTANCE, 1200x603) + style: display: flex; flex-direction: column; row-gap: 48px /* var:VariableID:346:10903 */; align-items: center; align-self: STRETCH; padding: 64px 64px 64px 64px /* var:VariableID:107:11150 */; width: 100%; background: #D9D9D9 /* var:VariableID:3919:36425 */; min-width: 1200px; max-width: 1920px + Navigation Pill List (INSTANCE, 149x32) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px /* var:VariableID:9:11259 */; row-gap: 8px; align-items: flex-start + Slot (SLOT, 149x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Navigation Pill (INSTANCE, 78x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 62x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Monthly" + Navigation Pill (INSTANCE, 63x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 47x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Yearly" + Card Grid (SLOT, 1072x395) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 64px /* var:VariableID:107:11150 */; row-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; width: 100% + Pricing Card (INSTANCE, 315x395) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; flex-grow: 1; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 300px + Top (FRAME, 251x267) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; justify-content: flex-end; align-items: center; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 149x29) + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 149x29) + style: flex-grow: 1; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Text Price (INSTANCE, 110x48) + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 80x48) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 16x24) + style: font-family: "Inter"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + 50 (TEXT, 64x48) + style: font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "50" + / mo (TEXT, 30x25) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 25.2px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "/ mo" + Text List (INSTANCE, 251x158) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Slot (SLOT, 89x158) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Button (INSTANCE, 251x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Button" + Pricing Card (INSTANCE, 315x395) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; flex-grow: 1; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden; min-width: 300px + Top (FRAME, 251x267) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; justify-content: flex-end; align-items: center; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 149x29) + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 149x29) + style: flex-grow: 1; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Title" + Text Price (INSTANCE, 110x48) + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 80x48) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 16x24) + style: font-family: "Inter"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "$" + 50 (TEXT, 64x48) + style: font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "50" + / mo (TEXT, 30x25) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 25.2px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "/ mo" + Text List (INSTANCE, 251x158) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Slot (SLOT, 89x158) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Button (INSTANCE, 251x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Button" + Pricing Card (INSTANCE, 315x395) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; flex-grow: 1; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 300px + Top (FRAME, 251x267) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; justify-content: flex-end; align-items: center; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 149x29) + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 149x29) + style: flex-grow: 1; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Text Price (INSTANCE, 110x48) + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 80x48) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 16x24) + style: font-family: "Inter"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + 50 (TEXT, 64x48) + style: font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "50" + / mo (TEXT, 30x25) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 25.2px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "/ mo" + Text List (INSTANCE, 251x158) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Slot (SLOT, 89x158) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Button (INSTANCE, 251x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Button" + Page Accordion (INSTANCE, 1200x623) + style: display: flex; flex-direction: column; row-gap: 48px /* var:VariableID:346:10903 */; align-items: center; align-self: STRETCH; padding: 64px 64px 64px 64px /* var:VariableID:107:11150 */; width: 100%; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 1200px; max-width: 1920px + Text Content Heading (INSTANCE, 113x61) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center + Heading (TEXT, 113x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Heading" + Subheading (TEXT, 113x24) + style: align-self: STRETCH; width: 100%; /* text-style: Subheading */; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Subheading" + Accordion (INSTANCE, 640x386) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100%; max-width: 640px + Accordion Item (INSTANCE, 640x106) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 608x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; width: 100% + Title (TEXT, 580x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron up (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Content (FRAME, 608x44) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Body (TEXT, 608x44) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list." + Items (SLOT, 640x264) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; align-self: STRETCH; width: 100% + Accordion Item (INSTANCE, 640x54) + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 608x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Title (TEXT, 580x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Item (INSTANCE, 640x54) + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 608x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Title (TEXT, 580x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Item (INSTANCE, 640x54) + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 608x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Title (TEXT, 580x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Item (INSTANCE, 640x54) + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 608x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Title (TEXT, 580x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Footer (INSTANCE, 1200x468) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 16px /* var:VariableID:9:11261 */; row-gap: 16px; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 160px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px; max-width: 1920px + Title (SLOT, 262x83) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Slot (SLOT, 818x276) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; background: #EBFFEE /* var:VariableID:2002:7433 */ + Text Link List (INSTANCE, 262x276) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 80x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 80x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 262x276) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 59x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 262x276) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 82x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 82x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/component-references/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/desktop-pricing/component-references/run-0/diff-base.png new file mode 100644 index 00000000..3b92c432 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-pricing/component-references/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/component-references/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/desktop-pricing/component-references/run-0/figma-base.png new file mode 100644 index 00000000..7b1c2a66 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-pricing/component-references/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/component-references/run-0/output.html b/data/ablation/phase1/72ffc72c9103/desktop-pricing/component-references/run-0/output.html new file mode 100644 index 00000000..ae5bfb2a --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-pricing/component-references/run-0/output.html @@ -0,0 +1,473 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+
+ +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+
+ Title + Subtitle +
+
+ + +
+
+
+
+ Monthly +
+
+ Yearly +
+
+
+ +
+ +
+
+
+ Title +
+
+
+ $ + 50 +
+ / mo +
+
+
+
+ List item +
+
+ List item +
+
+ List item +
+
+ List item +
+
+ List item +
+
+
+
+
+ Button +
+
+ + +
+
+
+ Title +
+
+
+ $ + 50 +
+ / mo +
+
+
+
+ List item +
+
+ List item +
+
+ List item +
+
+ List item +
+
+ List item +
+
+
+
+
+ Button +
+
+ + +
+
+
+ Title +
+
+
+ $ + 50 +
+ / mo +
+
+
+
+ List item +
+
+ List item +
+
+ List item +
+
+ List item +
+
+ List item +
+
+
+
+
+ Button +
+
+
+
+ + +
+
+ Heading + Subheading +
+ +
+ +
+
+ Title +
+ + + +
+
+
+ Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list. +
+
+ + +
+
+
+ Title +
+ + + +
+
+
+
+
+ Title +
+ + + +
+
+
+
+
+ Title +
+ + + +
+
+
+
+
+ Title +
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+ +
+
+
+ Use cases +
+
+
+
+ UI design +
+
+ UX design +
+
+ Wireframing +
+
+ Diagramming +
+
+ Brainstorming +
+
+ Online whiteboard +
+
+ Team collaboration +
+
+
+ + +
+
+
+ Explore +
+
+
+
+ Design +
+
+ Prototyping +
+
+ Development features +
+
+ Design systems +
+
+ Collaboration features +
+
+ Design process +
+
+ FigJam +
+
+
+ + +
+
+
+ Resources +
+
+
+
+ Blog +
+
+ Best practices +
+
+ Colors +
+
+ Color wheel +
+
+ Support +
+
+ Developers +
+
+ Resource library +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/component-references/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/desktop-pricing/component-references/run-0/response.txt new file mode 100644 index 00000000..dd9526ea --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-pricing/component-references/run-0/response.txt @@ -0,0 +1,476 @@ +```html +// filename: index.html + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+
+ +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+
+ Title + Subtitle +
+
+ + +
+
+
+
+ Monthly +
+
+ Yearly +
+
+
+ +
+ +
+
+
+ Title +
+
+
+ $ + 50 +
+ / mo +
+
+
+
+ List item +
+
+ List item +
+
+ List item +
+
+ List item +
+
+ List item +
+
+
+
+
+ Button +
+
+ + +
+
+
+ Title +
+
+
+ $ + 50 +
+ / mo +
+
+
+
+ List item +
+
+ List item +
+
+ List item +
+
+ List item +
+
+ List item +
+
+
+
+
+ Button +
+
+ + +
+
+
+ Title +
+
+
+ $ + 50 +
+ / mo +
+
+
+
+ List item +
+
+ List item +
+
+ List item +
+
+ List item +
+
+ List item +
+
+
+
+
+ Button +
+
+
+
+ + +
+
+ Heading + Subheading +
+ +
+ +
+
+ Title +
+ + + +
+
+
+ Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list. +
+
+ + +
+
+
+ Title +
+ + + +
+
+
+
+
+ Title +
+ + + +
+
+
+
+
+ Title +
+ + + +
+
+
+
+
+ Title +
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+ +
+
+
+ Use cases +
+
+
+
+ UI design +
+
+ UX design +
+
+ Wireframing +
+
+ Diagramming +
+
+ Brainstorming +
+
+ Online whiteboard +
+
+ Team collaboration +
+
+
+ + +
+
+
+ Explore +
+
+
+
+ Design +
+
+ Prototyping +
+
+ Development features +
+
+ Design systems +
+
+ Collaboration features +
+
+ Design process +
+
+ FigJam +
+
+
+ + +
+
+
+ Resources +
+
+
+
+ Blog +
+
+ Best practices +
+
+ Colors +
+
+ Color wheel +
+
+ Support +
+
+ Developers +
+
+ Resource library +
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/component-references/run-0/result.json b/data/ablation/phase1/72ffc72c9103/desktop-pricing/component-references/run-0/result.json new file mode 100644 index 00000000..abcd7e82 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-pricing/component-references/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "desktop-pricing", + "type": "component-references", + "runIndex": 0, + "similarity": 89, + "inputTokens": 22422, + "outputTokens": 18463, + "totalTokens": 40885, + "htmlBytes": 52247, + "htmlLines": 473, + "cssClassCount": 9, + "cssVariableCount": 13, + "timestamp": "2026-03-28T12:02:58.480Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/layout-direction-spacing/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/desktop-pricing/layout-direction-spacing/run-0/code-base.png new file mode 100644 index 00000000..bdce9b98 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-pricing/layout-direction-spacing/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/layout-direction-spacing/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/desktop-pricing/layout-direction-spacing/run-0/design-tree.txt new file mode 100644 index 00000000..8bf06a87 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-pricing/layout-direction-spacing/run-0/design-tree.txt @@ -0,0 +1,443 @@ +# Design Tree +# Root: 1200px x 2245px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Desktop (COMPONENT, 1200x2245) + style: background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 1200x99) [component: Platform=Desktop, State=Default] + component-properties: Platform=Desktop, State=Default + style: width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px + Block (FRAME, 40x35) + Figma (FRAME, 40x35) + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Navigation Pill List (INSTANCE, 870x32) [component: Direction=Row] + component-properties: Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":-1,"localID":-1}}, Link 6#2194:3=true, Link 4#2194:6=true, Link 3#2194:7=true, Link 5#2194:5=true, Link 7#3529:0=false, Link 2#2194:4=true, Link 1#2194:8=true, Direction=Row + style: flex-grow: 1 + Slot (SLOT, 553x32) + Navigation Pill (INSTANCE, 84x32) [component: State=Active] + component-properties: Label#156:33=Products, State=Active + style: background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 68x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Products" + Navigation Pill (INSTANCE, 86x32) [component: State=Default] + component-properties: Label#156:33=Solutions, State=Default + style: border-radius: 8px + Title (TEXT, 70x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Solutions" + Navigation Pill (INSTANCE, 103x32) [component: State=Default] + component-properties: Label#156:33=Community, State=Default + style: border-radius: 8px + Title (TEXT, 87x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Community" + Navigation Pill (INSTANCE, 95x32) [component: State=Default] + component-properties: Label#156:33=Resources, State=Default + style: border-radius: 8px + Title (TEXT, 79x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Navigation Pill (INSTANCE, 68x32) [component: State=Default] + component-properties: Label#156:33=Pricing, State=Default + style: border-radius: 8px + Title (TEXT, 52x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Pricing" + Navigation Pill (INSTANCE, 77x32) [component: State=Default] + component-properties: Label#156:33=Contact, State=Default + style: border-radius: 8px + Title (TEXT, 61x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Contact" + Header Auth (INSTANCE, 178x32) [component: State=Logged Out] + component-properties: State=Logged Out + Button (INSTANCE, 83x32) [component: Variant=Neutral, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Sign in, Variant=Neutral, State=Default, Size=Small + style: flex-grow: 1; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Sign in" + Button (INSTANCE, 83x32) [component: Variant=Primary, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Register, Variant=Primary, State=Default, Size=Small + style: flex-grow: 1; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 63x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Register" + Hero Basic (INSTANCE, 1200x452) [component: Platform=Desktop] + component-properties: Platform=Desktop + style: width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; min-width: 1200px; max-width: 1920px + Text Content Title (INSTANCE, 151x132) [component: Align=Center] + component-properties: Has Subtitle#2153:13=true, Subtitle#2153:12=Subtitle, Title#2153:14=Title, Align=Center + style: background: #E6E6E6 /* var:VariableID:3919:36430 */ + Title (TEXT, 151x86) + style: width: 100%; /* text-style: Title Hero */; font-family: "Inter"; font-weight: 700; font-size: 72px; line-height: 86.4px; letter-spacing: -2.16px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Subtitle (TEXT, 151x38) + style: width: 100%; /* text-style: Subtitle */; font-family: "Inter"; font-weight: 400; font-size: 32px; line-height: 38.4px; text-align: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Subtitle" + Card Grid Pricing (INSTANCE, 1200x603) [component: Platform=Desktop] + component-properties: Card Grid#6062:27={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: width: 100%; background: #D9D9D9 /* var:VariableID:3919:36425 */; min-width: 1200px; max-width: 1920px + Navigation Pill List (INSTANCE, 149x32) [component: Direction=Row] + component-properties: Link 1#2194:8=true, Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":6062,"localID":12603}}, Link 6#2194:3=false, Link 3#2194:7=false, Link 4#2194:6=false, Link 2#2194:4=true, Link 7#3529:0=true, Link 5#2194:5=false, Direction=Row + Slot (SLOT, 149x32) + Navigation Pill (INSTANCE, 78x32) [component: State=Active] + component-properties: Label#156:33=Monthly, State=Active + style: background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 62x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Monthly" + Navigation Pill (INSTANCE, 63x32) [component: State=Default] + component-properties: Label#156:33=Yearly, State=Default + style: border-radius: 8px + Title (TEXT, 47x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Yearly" + Card Grid (SLOT, 1072x395) + style: width: 100% + Pricing Card (INSTANCE, 315x395) [component: Device=Desktop, Variant=Stroke] + component-properties: Device=Desktop, Variant=Stroke + style: flex-grow: 1; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 300px + Top (FRAME, 251x267) + style: width: 100% + Text Heading (INSTANCE, 149x29) [component: Text Heading] + component-properties: Text#2104:5=Title + Text Heading (TEXT, 149x29) + style: flex-grow: 1; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Text Price (INSTANCE, 110x48) [component: Size=Large] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=true, Size=Large + Price (FRAME, 80x48) + $ (TEXT, 16x24) + style: font-family: "Inter"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + 50 (TEXT, 64x48) + style: font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "50" + / mo (TEXT, 30x25) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 25.2px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "/ mo" + Text List (INSTANCE, 251x158) [component: Density=Default] + component-properties: Slot#6062:9={"guid":{"sessionID":-1,"localID":-1}}, Has Title#480:0=false, Density=Default + style: width: 100% + Slot (SLOT, 89x158) + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Button (INSTANCE, 251x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Primary, State=Default, Size=Medium + style: width: 100%; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Button" + Pricing Card (INSTANCE, 315x395) [component: Device=Desktop, Variant=Brand] + component-properties: Device=Desktop, Variant=Brand + style: flex-grow: 1; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden; min-width: 300px + Top (FRAME, 251x267) + style: width: 100% + Text Heading (INSTANCE, 149x29) [component: Text Heading] + component-properties: Text#2104:5=Title + Text Heading (TEXT, 149x29) + style: flex-grow: 1; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Title" + Text Price (INSTANCE, 110x48) [component: Size=Large] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=true, Size=Large + Price (FRAME, 80x48) + $ (TEXT, 16x24) + style: font-family: "Inter"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "$" + 50 (TEXT, 64x48) + style: font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "50" + / mo (TEXT, 30x25) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 25.2px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "/ mo" + Text List (INSTANCE, 251x158) [component: Density=Default] + component-properties: Slot#6062:9={"guid":{"sessionID":-1,"localID":-1}}, Has Title#480:0=false, Density=Default + style: width: 100% + Slot (SLOT, 89x158) + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Button (INSTANCE, 251x40) [component: Variant=Neutral, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Neutral, State=Default, Size=Medium + style: width: 100%; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Button" + Pricing Card (INSTANCE, 315x395) [component: Device=Desktop, Variant=Stroke] + component-properties: Device=Desktop, Variant=Stroke + style: flex-grow: 1; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 300px + Top (FRAME, 251x267) + style: width: 100% + Text Heading (INSTANCE, 149x29) [component: Text Heading] + component-properties: Text#2104:5=Title + Text Heading (TEXT, 149x29) + style: flex-grow: 1; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Text Price (INSTANCE, 110x48) [component: Size=Large] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=true, Size=Large + Price (FRAME, 80x48) + $ (TEXT, 16x24) + style: font-family: "Inter"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + 50 (TEXT, 64x48) + style: font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "50" + / mo (TEXT, 30x25) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 25.2px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "/ mo" + Text List (INSTANCE, 251x158) [component: Density=Default] + component-properties: Slot#6062:9={"guid":{"sessionID":-1,"localID":-1}}, Has Title#480:0=false, Density=Default + style: width: 100% + Slot (SLOT, 89x158) + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Button (INSTANCE, 251x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Primary, State=Default, Size=Medium + style: width: 100%; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Button" + Page Accordion (INSTANCE, 1200x623) [component: Platform=Desktop] + component-properties: Platform=Desktop + style: width: 100%; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 1200px; max-width: 1920px + Text Content Heading (INSTANCE, 113x61) [component: Align=Center] + component-properties: Has Subheading#2153:9=true, Subheading#2153:11=Subheading, Heading#2153:10=Heading, Align=Center + Heading (TEXT, 113x29) + style: width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Heading" + Subheading (TEXT, 113x24) + style: width: 100%; /* text-style: Subheading */; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Subheading" + Accordion (INSTANCE, 640x386) [component: Accordion] + component-properties: Items#6031:6={"guid":{"sessionID":-1,"localID":-1}} + style: width: 100%; max-width: 640px + Accordion Item (INSTANCE, 640x106) [component: State=Open] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Open + style: width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 608x22) + style: width: 100% + Title (TEXT, 580x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron up (INSTANCE, 20x20) [component: Chevron up] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Content (FRAME, 608x44) + style: width: 100% + Body (TEXT, 608x44) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list." + Items (SLOT, 640x264) + style: width: 100% + Accordion Item (INSTANCE, 640x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 608x22) + style: flex-grow: 1 + Title (TEXT, 580x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Item (INSTANCE, 640x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 608x22) + style: flex-grow: 1 + Title (TEXT, 580x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Item (INSTANCE, 640x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 608x22) + style: flex-grow: 1 + Title (TEXT, 580x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Item (INSTANCE, 640x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 608x22) + style: flex-grow: 1 + Title (TEXT, 580x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Footer (INSTANCE, 1200x468) [component: Platform=Desktop] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px; max-width: 1920px + Title (SLOT, 262x83) + style: background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Slot (SLOT, 818x276) + style: background: #EBFFEE /* var:VariableID:2002:7433 */ + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + Title (FRAME, 262x38) + style: width: 100% + Text Strong (INSTANCE, 80x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + Text Strong (TEXT, 80x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x226) + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + Title (FRAME, 262x38) + style: width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + Text Strong (TEXT, 59x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x226) + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + Title (FRAME, 262x38) + style: width: 100% + Text Strong (INSTANCE, 82x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + Text Strong (TEXT, 82x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x226) + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/layout-direction-spacing/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/desktop-pricing/layout-direction-spacing/run-0/diff-base.png new file mode 100644 index 00000000..5c286ca7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-pricing/layout-direction-spacing/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/layout-direction-spacing/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/desktop-pricing/layout-direction-spacing/run-0/figma-base.png new file mode 100644 index 00000000..7b1c2a66 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-pricing/layout-direction-spacing/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/layout-direction-spacing/run-0/output.html b/data/ablation/phase1/72ffc72c9103/desktop-pricing/layout-direction-spacing/run-0/output.html new file mode 100644 index 00000000..1c14632b --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-pricing/layout-direction-spacing/run-0/output.html @@ -0,0 +1,435 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+ + + +
+ +
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+ +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+ + +
+
+
+ Monthly +
+
+ Yearly +
+
+ +
+ +
+
+
Title
+
+ $ + 50 + / mo +
+
+
List item
+
List item
+
List item
+
List item
+
List item
+
+
+
+ Button +
+
+ + +
+
+
Title
+
+ $ + 50 + / mo +
+
+
List item
+
List item
+
List item
+
List item
+
List item
+
+
+
+ Button +
+
+ + +
+
+
Title
+
+ $ + 50 + / mo +
+
+
List item
+
List item
+
List item
+
List item
+
List item
+
+
+
+ Button +
+
+
+
+ + +
+
+
Heading
+
Subheading
+
+ +
+ +
+
+
Title
+ + + +
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+ + +
+
+
Title
+ + + +
+
+ +
+
+
Title
+ + + +
+
+ +
+
+
Title
+ + + +
+
+ +
+
+
Title
+ + + +
+
+
+
+ + +
+
+ + + +
+ + + + + + + + + + + + +
+
+ +
+
+
Use cases
+
UI design
+
UX design
+
Wireframing
+
Diagramming
+
Brainstorming
+
Online whiteboard
+
Team collaboration
+
+ +
+
Explore
+
Design
+
Prototyping
+
Development features
+
Design systems
+
Collaboration features
+
Design process
+
FigJam
+
+ +
+
Resources
+
Blog
+
Best practices
+
Colors
+
Color wheel
+
Support
+
Developers
+
Resource library
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/layout-direction-spacing/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/desktop-pricing/layout-direction-spacing/run-0/response.txt new file mode 100644 index 00000000..5d5abadb --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-pricing/layout-direction-spacing/run-0/response.txt @@ -0,0 +1,442 @@ +```html +// filename: index.html + + + + + + Platform Desktop + + + + +
+ +
+
+ + + +
+ +
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+ +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+ + +
+
+
+ Monthly +
+
+ Yearly +
+
+ +
+ +
+
+
Title
+
+ $ + 50 + / mo +
+
+
List item
+
List item
+
List item
+
List item
+
List item
+
+
+
+ Button +
+
+ + +
+
+
Title
+
+ $ + 50 + / mo +
+
+
List item
+
List item
+
List item
+
List item
+
List item
+
+
+
+ Button +
+
+ + +
+
+
Title
+
+ $ + 50 + / mo +
+
+
List item
+
List item
+
List item
+
List item
+
List item
+
+
+
+ Button +
+
+
+
+ + +
+
+
Heading
+
Subheading
+
+ +
+ +
+
+
Title
+ + + +
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+ + +
+
+
Title
+ + + +
+
+ +
+
+
Title
+ + + +
+
+ +
+
+
Title
+ + + +
+
+ +
+
+
Title
+ + + +
+
+
+
+ + +
+
+ + + +
+ + + + + + + + + + + + +
+
+ +
+
+
Use cases
+
UI design
+
UX design
+
Wireframing
+
Diagramming
+
Brainstorming
+
Online whiteboard
+
Team collaboration
+
+ +
+
Explore
+
Design
+
Prototyping
+
Development features
+
Design systems
+
Collaboration features
+
Design process
+
FigJam
+
+ +
+
Resources
+
Blog
+
Best practices
+
Colors
+
Color wheel
+
Support
+
Developers
+
Resource library
+
+
+
+
+ + +``` + +// interpretations: +- Used flexbox layout for component positioning and alignment where exact positioning wasn't specified +- Applied standard padding and gap values for sections where spacing wasn't explicitly defined in the design tree +- Simplified complex nested frame structures into more semantic HTML while maintaining visual hierarchy +- Used inline styles for unique values and CSS classes for repeated patterns to balance maintainability with exact reproduction \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/layout-direction-spacing/run-0/result.json b/data/ablation/phase1/72ffc72c9103/desktop-pricing/layout-direction-spacing/run-0/result.json new file mode 100644 index 00000000..2283a75f --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-pricing/layout-direction-spacing/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "desktop-pricing", + "type": "layout-direction-spacing", + "runIndex": 0, + "similarity": 84, + "inputTokens": 20328, + "outputTokens": 11265, + "totalTokens": 31593, + "htmlBytes": 29179, + "htmlLines": 435, + "cssClassCount": 22, + "cssVariableCount": 13, + "timestamp": "2026-03-28T11:59:50.267Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/node-names-hierarchy/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/desktop-pricing/node-names-hierarchy/run-0/code-base.png new file mode 100644 index 00000000..bcb62a04 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-pricing/node-names-hierarchy/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/node-names-hierarchy/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/desktop-pricing/node-names-hierarchy/run-0/design-tree.txt new file mode 100644 index 00000000..96677b21 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-pricing/node-names-hierarchy/run-0/design-tree.txt @@ -0,0 +1,509 @@ +# Design Tree +# Root: 1200px x 2245px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Node1 (COMPONENT, 1200x2245) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Node2 (INSTANCE, 1200x99) [component: Platform=Desktop, State=Default] + component-properties: Platform=Desktop, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 0px; align-items: center; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px + Node3 (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Node4 (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node5 (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Node6 (INSTANCE, 870x32) [component: Direction=Row] + component-properties: Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":-1,"localID":-1}}, Link 6#2194:3=true, Link 4#2194:6=true, Link 3#2194:7=true, Link 5#2194:5=true, Link 7#3529:0=false, Link 2#2194:4=true, Link 1#2194:8=true, Direction=Row + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px /* var:VariableID:9:11259 */; row-gap: 8px; justify-content: flex-end; align-items: flex-start; flex-grow: 1 + Node7 (SLOT, 553x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Node8 (INSTANCE, 84x32) [component: State=Active] + component-properties: Label#156:33=Products, State=Active + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Node9 (TEXT, 68x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Products" + Node10 (INSTANCE, 86x32) [component: State=Default] + component-properties: Label#156:33=Solutions, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Node11 (TEXT, 70x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Solutions" + Node12 (INSTANCE, 103x32) [component: State=Default] + component-properties: Label#156:33=Community, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Node13 (TEXT, 87x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Community" + Node14 (INSTANCE, 95x32) [component: State=Default] + component-properties: Label#156:33=Resources, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Node15 (TEXT, 79x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Node16 (INSTANCE, 68x32) [component: State=Default] + component-properties: Label#156:33=Pricing, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Node17 (TEXT, 52x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Pricing" + Node18 (INSTANCE, 77x32) [component: State=Default] + component-properties: Label#156:33=Contact, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Node19 (TEXT, 61x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Contact" + Node20 (INSTANCE, 178x32) [component: State=Logged Out] + component-properties: State=Logged Out + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center + Node21 (INSTANCE, 83x32) [component: Variant=Neutral, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Sign in, Variant=Neutral, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Node22 (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Sign in" + Node23 (INSTANCE, 83x32) [component: Variant=Primary, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Register, Variant=Primary, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Node24 (TEXT, 63x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Register" + Node25 (INSTANCE, 1200x452) [component: Platform=Desktop] + component-properties: Platform=Desktop + style: display: flex; flex-direction: column; align-items: center; align-self: STRETCH; padding: 160px 64px 160px 64px /* var:VariableID:346:10896 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; min-width: 1200px; max-width: 1920px + Node26 (INSTANCE, 151x132) [component: Align=Center] + component-properties: Has Subtitle#2153:13=true, Subtitle#2153:12=Subtitle, Title#2153:14=Title, Align=Center + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center; background: #E6E6E6 /* var:VariableID:3919:36430 */ + Node27 (TEXT, 151x86) + style: align-self: STRETCH; width: 100%; /* text-style: Title Hero */; font-family: "Inter"; font-weight: 700; font-size: 72px; line-height: 86.4px; letter-spacing: -2.16px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Node28 (TEXT, 151x38) + style: align-self: STRETCH; width: 100%; /* text-style: Subtitle */; font-family: "Inter"; font-weight: 400; font-size: 32px; line-height: 38.4px; text-align: center; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Subtitle" + Node29 (INSTANCE, 1200x603) [component: Platform=Desktop] + component-properties: Card Grid#6062:27={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: column; row-gap: 48px /* var:VariableID:346:10903 */; align-items: center; align-self: STRETCH; padding: 64px 64px 64px 64px /* var:VariableID:107:11150 */; width: 100%; background: #D9D9D9 /* var:VariableID:3919:36425 */; min-width: 1200px; max-width: 1920px + Node30 (INSTANCE, 149x32) [component: Direction=Row] + component-properties: Link 1#2194:8=true, Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":6062,"localID":12603}}, Link 6#2194:3=false, Link 3#2194:7=false, Link 4#2194:6=false, Link 2#2194:4=true, Link 7#3529:0=true, Link 5#2194:5=false, Direction=Row + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px /* var:VariableID:9:11259 */; row-gap: 8px; align-items: flex-start + Node31 (SLOT, 149x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Node32 (INSTANCE, 78x32) [component: State=Active] + component-properties: Label#156:33=Monthly, State=Active + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Node33 (TEXT, 62x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Monthly" + Node34 (INSTANCE, 63x32) [component: State=Default] + component-properties: Label#156:33=Yearly, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Node35 (TEXT, 47x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Yearly" + Node36 (SLOT, 1072x395) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 64px /* var:VariableID:107:11150 */; row-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node37 (INSTANCE, 315x395) [component: Device=Desktop, Variant=Stroke] + component-properties: Device=Desktop, Variant=Stroke + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; flex-grow: 1; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 300px + Node38 (FRAME, 251x267) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; justify-content: flex-end; align-items: center; align-self: STRETCH; width: 100% + Node39 (INSTANCE, 149x29) [component: Text Heading] + component-properties: Text#2104:5=Title + style: display: flex; flex-direction: row; align-items: flex-start + Node40 (TEXT, 149x29) + style: flex-grow: 1; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Node41 (INSTANCE, 110x48) [component: Size=Large] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=true, Size=Large + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Node42 (FRAME, 80x48) + style: display: flex; flex-direction: row; align-items: flex-start + Node43 (TEXT, 16x24) + style: font-family: "Inter"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + Node44 (TEXT, 64x48) + style: font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "50" + Node45 (TEXT, 30x25) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 25.2px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "/ mo" + Node46 (INSTANCE, 251x158) [component: Density=Default] + component-properties: Slot#6062:9={"guid":{"sessionID":-1,"localID":-1}}, Has Title#480:0=false, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node47 (SLOT, 89x158) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Node48 (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node49 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Node50 (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node51 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Node52 (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node53 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Node54 (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node55 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Node56 (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node57 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Node58 (INSTANCE, 251x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + Node59 (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Button" + Node60 (INSTANCE, 315x395) [component: Device=Desktop, Variant=Brand] + component-properties: Device=Desktop, Variant=Brand + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; flex-grow: 1; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden; min-width: 300px + Node61 (FRAME, 251x267) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; justify-content: flex-end; align-items: center; align-self: STRETCH; width: 100% + Node62 (INSTANCE, 149x29) [component: Text Heading] + component-properties: Text#2104:5=Title + style: display: flex; flex-direction: row; align-items: flex-start + Node63 (TEXT, 149x29) + style: flex-grow: 1; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Title" + Node64 (INSTANCE, 110x48) [component: Size=Large] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=true, Size=Large + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Node65 (FRAME, 80x48) + style: display: flex; flex-direction: row; align-items: flex-start + Node66 (TEXT, 16x24) + style: font-family: "Inter"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "$" + Node67 (TEXT, 64x48) + style: font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "50" + Node68 (TEXT, 30x25) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 25.2px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "/ mo" + Node69 (INSTANCE, 251x158) [component: Density=Default] + component-properties: Slot#6062:9={"guid":{"sessionID":-1,"localID":-1}}, Has Title#480:0=false, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node70 (SLOT, 89x158) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Node71 (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node72 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Node73 (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node74 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Node75 (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node76 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Node77 (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node78 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Node79 (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node80 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Node81 (INSTANCE, 251x40) [component: Variant=Neutral, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Neutral, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Node82 (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Button" + Node83 (INSTANCE, 315x395) [component: Device=Desktop, Variant=Stroke] + component-properties: Device=Desktop, Variant=Stroke + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; flex-grow: 1; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 300px + Node84 (FRAME, 251x267) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; justify-content: flex-end; align-items: center; align-self: STRETCH; width: 100% + Node85 (INSTANCE, 149x29) [component: Text Heading] + component-properties: Text#2104:5=Title + style: display: flex; flex-direction: row; align-items: flex-start + Node86 (TEXT, 149x29) + style: flex-grow: 1; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Node87 (INSTANCE, 110x48) [component: Size=Large] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=true, Size=Large + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Node88 (FRAME, 80x48) + style: display: flex; flex-direction: row; align-items: flex-start + Node89 (TEXT, 16x24) + style: font-family: "Inter"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + Node90 (TEXT, 64x48) + style: font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "50" + Node91 (TEXT, 30x25) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 25.2px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "/ mo" + Node92 (INSTANCE, 251x158) [component: Density=Default] + component-properties: Slot#6062:9={"guid":{"sessionID":-1,"localID":-1}}, Has Title#480:0=false, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node93 (SLOT, 89x158) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Node94 (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node95 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Node96 (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node97 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Node98 (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node99 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Node100 (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node101 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Node102 (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node103 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Node104 (INSTANCE, 251x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + Node105 (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Button" + Node106 (INSTANCE, 1200x623) [component: Platform=Desktop] + component-properties: Platform=Desktop + style: display: flex; flex-direction: column; row-gap: 48px /* var:VariableID:346:10903 */; align-items: center; align-self: STRETCH; padding: 64px 64px 64px 64px /* var:VariableID:107:11150 */; width: 100%; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 1200px; max-width: 1920px + Node107 (INSTANCE, 113x61) [component: Align=Center] + component-properties: Has Subheading#2153:9=true, Subheading#2153:11=Subheading, Heading#2153:10=Heading, Align=Center + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center + Node108 (TEXT, 113x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Heading" + Node109 (TEXT, 113x24) + style: align-self: STRETCH; width: 100%; /* text-style: Subheading */; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Subheading" + Node110 (INSTANCE, 640x386) [component: Accordion] + component-properties: Items#6031:6={"guid":{"sessionID":-1,"localID":-1}} + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100%; max-width: 640px + Node111 (INSTANCE, 640x106) [component: State=Open] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Open + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px + Node112 (FRAME, 608x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; width: 100% + Node113 (TEXT, 580x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Node114 (INSTANCE, 20x20) [component: Chevron up] + style: overflow: hidden + Node115 (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Node116 (FRAME, 608x44) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Node117 (TEXT, 608x44) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list." + Node118 (SLOT, 640x264) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; align-self: STRETCH; width: 100% + Node119 (INSTANCE, 640x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Node120 (FRAME, 608x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Node121 (TEXT, 580x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Node122 (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Node123 (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Node124 (INSTANCE, 640x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Node125 (FRAME, 608x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Node126 (TEXT, 580x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Node127 (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Node128 (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Node129 (INSTANCE, 640x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Node130 (FRAME, 608x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Node131 (TEXT, 580x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Node132 (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Node133 (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Node134 (INSTANCE, 640x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Node135 (FRAME, 608x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Node136 (TEXT, 580x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Node137 (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Node138 (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Node139 (INSTANCE, 1200x468) [component: Platform=Desktop] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 16px /* var:VariableID:9:11261 */; row-gap: 16px; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 160px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px; max-width: 1920px + Node140 (SLOT, 262x83) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Node141 (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node142 (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Node143 (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + Node144 (FRAME, 24x24) + Node145 (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node146 (FRAME, 24x24) + style: overflow: hidden + Node147 (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node148 (FRAME, 24x24) + style: overflow: hidden + Node149 (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node150 (FRAME, 24x24) + style: overflow: hidden + Node151 (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node152 (SLOT, 818x276) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; background: #EBFFEE /* var:VariableID:2002:7433 */ + Node153 (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Node154 (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Node155 (INSTANCE, 80x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Node156 (TEXT, 80x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Node157 (SLOT, 144x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Node158 (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node159 (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Node160 (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node161 (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Node162 (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node163 (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Node164 (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node165 (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Node166 (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node167 (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Node168 (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node169 (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Node170 (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node171 (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Node172 (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Node173 (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Node174 (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Node175 (TEXT, 59x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Node176 (SLOT, 168x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Node177 (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node178 (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Node179 (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node180 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Node181 (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node182 (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Node183 (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node184 (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Node185 (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node186 (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Node187 (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node188 (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Node189 (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node190 (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Node191 (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Node192 (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Node193 (INSTANCE, 82x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Node194 (TEXT, 82x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Node195 (SLOT, 123x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Node196 (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node197 (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Node198 (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node199 (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Node200 (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node201 (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Node202 (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node203 (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Node204 (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node205 (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Node206 (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node207 (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Node208 (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node209 (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/node-names-hierarchy/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/desktop-pricing/node-names-hierarchy/run-0/diff-base.png new file mode 100644 index 00000000..b50028a2 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-pricing/node-names-hierarchy/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/node-names-hierarchy/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/desktop-pricing/node-names-hierarchy/run-0/figma-base.png new file mode 100644 index 00000000..7b1c2a66 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-pricing/node-names-hierarchy/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/node-names-hierarchy/run-0/output.html b/data/ablation/phase1/72ffc72c9103/desktop-pricing/node-names-hierarchy/run-0/output.html new file mode 100644 index 00000000..ce7ddc4a --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-pricing/node-names-hierarchy/run-0/output.html @@ -0,0 +1,625 @@ + + + + + + Design System + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+ + +
+
+
+
+
Monthly
+
+
+
Yearly
+
+
+
+ +
+ +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+
+
+ + +
+
+
Heading
+
Subheading
+
+ +
+ +
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+ +
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/node-names-hierarchy/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/desktop-pricing/node-names-hierarchy/run-0/response.txt new file mode 100644 index 00000000..715bc93c --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-pricing/node-names-hierarchy/run-0/response.txt @@ -0,0 +1,628 @@ +```html +// filename: index.html + + + + + + Design System + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+ + +
+
+
+
+
Monthly
+
+
+
Yearly
+
+
+
+ +
+ +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+
+
+ + +
+
+
Heading
+
Subheading
+
+ +
+ +
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+ +
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/node-names-hierarchy/run-0/result.json b/data/ablation/phase1/72ffc72c9103/desktop-pricing/node-names-hierarchy/run-0/result.json new file mode 100644 index 00000000..0bbae200 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-pricing/node-names-hierarchy/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "desktop-pricing", + "type": "node-names-hierarchy", + "runIndex": 0, + "similarity": 96, + "inputTokens": 25618, + "outputTokens": 17444, + "totalTokens": 43062, + "htmlBytes": 50849, + "htmlLines": 625, + "cssClassCount": 18, + "cssVariableCount": 13, + "timestamp": "2026-03-28T12:05:59.162Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/style-references/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/desktop-pricing/style-references/run-0/code-base.png new file mode 100644 index 00000000..dbe25c12 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-pricing/style-references/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/style-references/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/desktop-pricing/style-references/run-0/design-tree.txt new file mode 100644 index 00000000..b9064d5c --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-pricing/style-references/run-0/design-tree.txt @@ -0,0 +1,509 @@ +# Design Tree +# Root: 1200px x 2245px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Desktop (COMPONENT, 1200x2245) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 1200x99) [component: Platform=Desktop, State=Default] + component-properties: Platform=Desktop, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 0px; align-items: center; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Navigation Pill List (INSTANCE, 870x32) [component: Direction=Row] + component-properties: Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":-1,"localID":-1}}, Link 6#2194:3=true, Link 4#2194:6=true, Link 3#2194:7=true, Link 5#2194:5=true, Link 7#3529:0=false, Link 2#2194:4=true, Link 1#2194:8=true, Direction=Row + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px /* var:VariableID:9:11259 */; row-gap: 8px; justify-content: flex-end; align-items: flex-start; flex-grow: 1 + Slot (SLOT, 553x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Navigation Pill (INSTANCE, 84x32) [component: State=Active] + component-properties: Label#156:33=Products, State=Active + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 68x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Products" + Navigation Pill (INSTANCE, 86x32) [component: State=Default] + component-properties: Label#156:33=Solutions, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 70x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Solutions" + Navigation Pill (INSTANCE, 103x32) [component: State=Default] + component-properties: Label#156:33=Community, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 87x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Community" + Navigation Pill (INSTANCE, 95x32) [component: State=Default] + component-properties: Label#156:33=Resources, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 79x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Navigation Pill (INSTANCE, 68x32) [component: State=Default] + component-properties: Label#156:33=Pricing, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 52x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Pricing" + Navigation Pill (INSTANCE, 77x32) [component: State=Default] + component-properties: Label#156:33=Contact, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 61x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Contact" + Header Auth (INSTANCE, 178x32) [component: State=Logged Out] + component-properties: State=Logged Out + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center + Button (INSTANCE, 83x32) [component: Variant=Neutral, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Sign in, Variant=Neutral, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Sign in" + Button (INSTANCE, 83x32) [component: Variant=Primary, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Register, Variant=Primary, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 63x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Register" + Hero Basic (INSTANCE, 1200x452) [component: Platform=Desktop] + component-properties: Platform=Desktop + style: display: flex; flex-direction: column; align-items: center; align-self: STRETCH; padding: 160px 64px 160px 64px /* var:VariableID:346:10896 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; min-width: 1200px; max-width: 1920px + Text Content Title (INSTANCE, 151x132) [component: Align=Center] + component-properties: Has Subtitle#2153:13=true, Subtitle#2153:12=Subtitle, Title#2153:14=Title, Align=Center + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center; background: #E6E6E6 /* var:VariableID:3919:36430 */ + Title (TEXT, 151x86) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 700; font-size: 72px; line-height: 86.4px; letter-spacing: -2.16px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Subtitle (TEXT, 151x38) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 32px; line-height: 38.4px; text-align: center; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Subtitle" + Card Grid Pricing (INSTANCE, 1200x603) [component: Platform=Desktop] + component-properties: Card Grid#6062:27={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: column; row-gap: 48px /* var:VariableID:346:10903 */; align-items: center; align-self: STRETCH; padding: 64px 64px 64px 64px /* var:VariableID:107:11150 */; width: 100%; background: #D9D9D9 /* var:VariableID:3919:36425 */; min-width: 1200px; max-width: 1920px + Navigation Pill List (INSTANCE, 149x32) [component: Direction=Row] + component-properties: Link 1#2194:8=true, Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":6062,"localID":12603}}, Link 6#2194:3=false, Link 3#2194:7=false, Link 4#2194:6=false, Link 2#2194:4=true, Link 7#3529:0=true, Link 5#2194:5=false, Direction=Row + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px /* var:VariableID:9:11259 */; row-gap: 8px; align-items: flex-start + Slot (SLOT, 149x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Navigation Pill (INSTANCE, 78x32) [component: State=Active] + component-properties: Label#156:33=Monthly, State=Active + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 62x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Monthly" + Navigation Pill (INSTANCE, 63x32) [component: State=Default] + component-properties: Label#156:33=Yearly, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 47x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Yearly" + Card Grid (SLOT, 1072x395) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 64px /* var:VariableID:107:11150 */; row-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; width: 100% + Pricing Card (INSTANCE, 315x395) [component: Device=Desktop, Variant=Stroke] + component-properties: Device=Desktop, Variant=Stroke + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; flex-grow: 1; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 300px + Top (FRAME, 251x267) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; justify-content: flex-end; align-items: center; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 149x29) [component: Text Heading] + component-properties: Text#2104:5=Title + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 149x29) + style: flex-grow: 1; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Text Price (INSTANCE, 110x48) [component: Size=Large] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=true, Size=Large + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 80x48) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 16x24) + style: font-family: "Inter"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + 50 (TEXT, 64x48) + style: font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "50" + / mo (TEXT, 30x25) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 25.2px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "/ mo" + Text List (INSTANCE, 251x158) [component: Density=Default] + component-properties: Slot#6062:9={"guid":{"sessionID":-1,"localID":-1}}, Has Title#480:0=false, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Slot (SLOT, 89x158) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Button (INSTANCE, 251x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + Button (TEXT, 51x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Button" + Pricing Card (INSTANCE, 315x395) [component: Device=Desktop, Variant=Brand] + component-properties: Device=Desktop, Variant=Brand + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; flex-grow: 1; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden; min-width: 300px + Top (FRAME, 251x267) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; justify-content: flex-end; align-items: center; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 149x29) [component: Text Heading] + component-properties: Text#2104:5=Title + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 149x29) + style: flex-grow: 1; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Title" + Text Price (INSTANCE, 110x48) [component: Size=Large] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=true, Size=Large + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 80x48) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 16x24) + style: font-family: "Inter"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "$" + 50 (TEXT, 64x48) + style: font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "50" + / mo (TEXT, 30x25) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 25.2px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "/ mo" + Text List (INSTANCE, 251x158) [component: Density=Default] + component-properties: Slot#6062:9={"guid":{"sessionID":-1,"localID":-1}}, Has Title#480:0=false, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Slot (SLOT, 89x158) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Button (INSTANCE, 251x40) [component: Variant=Neutral, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Neutral, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Button" + Pricing Card (INSTANCE, 315x395) [component: Device=Desktop, Variant=Stroke] + component-properties: Device=Desktop, Variant=Stroke + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; flex-grow: 1; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 300px + Top (FRAME, 251x267) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; justify-content: flex-end; align-items: center; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 149x29) [component: Text Heading] + component-properties: Text#2104:5=Title + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 149x29) + style: flex-grow: 1; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Text Price (INSTANCE, 110x48) [component: Size=Large] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=true, Size=Large + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 80x48) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 16x24) + style: font-family: "Inter"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + 50 (TEXT, 64x48) + style: font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "50" + / mo (TEXT, 30x25) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 25.2px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "/ mo" + Text List (INSTANCE, 251x158) [component: Density=Default] + component-properties: Slot#6062:9={"guid":{"sessionID":-1,"localID":-1}}, Has Title#480:0=false, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Slot (SLOT, 89x158) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Button (INSTANCE, 251x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + Button (TEXT, 51x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Button" + Page Accordion (INSTANCE, 1200x623) [component: Platform=Desktop] + component-properties: Platform=Desktop + style: display: flex; flex-direction: column; row-gap: 48px /* var:VariableID:346:10903 */; align-items: center; align-self: STRETCH; padding: 64px 64px 64px 64px /* var:VariableID:107:11150 */; width: 100%; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 1200px; max-width: 1920px + Text Content Heading (INSTANCE, 113x61) [component: Align=Center] + component-properties: Has Subheading#2153:9=true, Subheading#2153:11=Subheading, Heading#2153:10=Heading, Align=Center + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center + Heading (TEXT, 113x29) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Heading" + Subheading (TEXT, 113x24) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Subheading" + Accordion (INSTANCE, 640x386) [component: Accordion] + component-properties: Items#6031:6={"guid":{"sessionID":-1,"localID":-1}} + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100%; max-width: 640px + Accordion Item (INSTANCE, 640x106) [component: State=Open] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Open + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 608x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; width: 100% + Title (TEXT, 580x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron up (INSTANCE, 20x20) [component: Chevron up] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Content (FRAME, 608x44) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Body (TEXT, 608x44) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list." + Items (SLOT, 640x264) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; align-self: STRETCH; width: 100% + Accordion Item (INSTANCE, 640x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 608x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Title (TEXT, 580x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Item (INSTANCE, 640x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 608x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Title (TEXT, 580x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Item (INSTANCE, 640x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 608x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Title (TEXT, 580x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Item (INSTANCE, 640x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 608x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Title (TEXT, 580x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Footer (INSTANCE, 1200x468) [component: Platform=Desktop] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 16px /* var:VariableID:9:11261 */; row-gap: 16px; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 160px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px; max-width: 1920px + Title (SLOT, 262x83) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Slot (SLOT, 818x276) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; background: #EBFFEE /* var:VariableID:2002:7433 */ + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 80x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 80x22) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 72x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 78x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 92x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 100x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 105x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 138x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 144x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 53x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 167x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 120x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 168x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 117x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 55x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 82x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 82x22) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 34x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 109x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 49x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 90x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 61x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 86x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 123x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/style-references/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/desktop-pricing/style-references/run-0/diff-base.png new file mode 100644 index 00000000..cca895a7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-pricing/style-references/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/style-references/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/desktop-pricing/style-references/run-0/figma-base.png new file mode 100644 index 00000000..7b1c2a66 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-pricing/style-references/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/style-references/run-0/output.html b/data/ablation/phase1/72ffc72c9103/desktop-pricing/style-references/run-0/output.html new file mode 100644 index 00000000..8d8ce48e --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-pricing/style-references/run-0/output.html @@ -0,0 +1,548 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+ + +
+
+
+
+
Monthly
+
+
+
Yearly
+
+
+
+ +
+ +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+
+
+ + +
+
+
Heading
+
Subheading
+
+ +
+ +
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/style-references/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/desktop-pricing/style-references/run-0/response.txt new file mode 100644 index 00000000..db3128c4 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-pricing/style-references/run-0/response.txt @@ -0,0 +1,551 @@ +```html +// filename: index.html + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+ + +
+
+
+
+
Monthly
+
+
+
Yearly
+
+
+
+ +
+ +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+
+
+ + +
+
+
Heading
+
Subheading
+
+ +
+ +
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/style-references/run-0/result.json b/data/ablation/phase1/72ffc72c9103/desktop-pricing/style-references/run-0/result.json new file mode 100644 index 00000000..08918870 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-pricing/style-references/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "desktop-pricing", + "type": "style-references", + "runIndex": 0, + "similarity": 88, + "inputTokens": 24842, + "outputTokens": 18802, + "totalTokens": 43644, + "htmlBytes": 52902, + "htmlLines": 548, + "cssClassCount": 17, + "cssVariableCount": 13, + "timestamp": "2026-03-28T12:12:04.122Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/variable-references/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/desktop-pricing/variable-references/run-0/code-base.png new file mode 100644 index 00000000..212b573b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-pricing/variable-references/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/variable-references/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/desktop-pricing/variable-references/run-0/design-tree.txt new file mode 100644 index 00000000..da03793e --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-pricing/variable-references/run-0/design-tree.txt @@ -0,0 +1,509 @@ +# Design Tree +# Root: 1200px x 2245px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Desktop (COMPONENT, 1200x2245) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF; overflow: hidden + Header (INSTANCE, 1200x99) [component: Platform=Desktop, State=Default] + component-properties: Platform=Desktop, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 0px; align-items: center; align-self: STRETCH; padding: 32px 32px 32px 32px; width: 100%; background: #FFFFFF; border-bottom: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Navigation Pill List (INSTANCE, 870x32) [component: Direction=Row] + component-properties: Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":-1,"localID":-1}}, Link 6#2194:3=true, Link 4#2194:6=true, Link 3#2194:7=true, Link 5#2194:5=true, Link 7#3529:0=false, Link 2#2194:4=true, Link 1#2194:8=true, Direction=Row + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px; row-gap: 8px; justify-content: flex-end; align-items: flex-start; flex-grow: 1 + Slot (SLOT, 553x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Navigation Pill (INSTANCE, 84x32) [component: State=Active] + component-properties: Label#156:33=Products, State=Active + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; background: #F5F5F5; border-radius: 8px + Title (TEXT, 68x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Products" + Navigation Pill (INSTANCE, 86x32) [component: State=Default] + component-properties: Label#156:33=Solutions, State=Default + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 8px + Title (TEXT, 70x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Solutions" + Navigation Pill (INSTANCE, 103x32) [component: State=Default] + component-properties: Label#156:33=Community, State=Default + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 8px + Title (TEXT, 87x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Community" + Navigation Pill (INSTANCE, 95x32) [component: State=Default] + component-properties: Label#156:33=Resources, State=Default + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 8px + Title (TEXT, 79x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Resources" + Navigation Pill (INSTANCE, 68x32) [component: State=Default] + component-properties: Label#156:33=Pricing, State=Default + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 8px + Title (TEXT, 52x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Pricing" + Navigation Pill (INSTANCE, 77x32) [component: State=Default] + component-properties: Label#156:33=Contact, State=Default + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 8px + Title (TEXT, 61x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Contact" + Header Auth (INSTANCE, 178x32) [component: State=Logged Out] + component-properties: State=Logged Out + style: display: flex; flex-direction: row; column-gap: 12px; align-items: center + Button (INSTANCE, 83x32) [component: Variant=Neutral, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Sign in, Variant=Neutral, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px; background: #E3E3E3; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E; text: "Sign in" + Button (INSTANCE, 83x32) [component: Variant=Primary, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Register, Variant=Primary, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px; background: #2C2C2C; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 63x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5; text: "Register" + Hero Basic (INSTANCE, 1200x452) [component: Platform=Desktop] + component-properties: Platform=Desktop + style: display: flex; flex-direction: column; align-items: center; align-self: STRETCH; padding: 160px 64px 160px 64px; width: 100%; background: #F5F5F5; min-width: 1200px; max-width: 1920px + Text Content Title (INSTANCE, 151x132) [component: Align=Center] + component-properties: Has Subtitle#2153:13=true, Subtitle#2153:12=Subtitle, Title#2153:14=Title, Align=Center + style: display: flex; flex-direction: column; row-gap: 8px; align-items: center; background: #E6E6E6 + Title (TEXT, 151x86) + style: align-self: STRETCH; width: 100%; /* text-style: Title Hero */; font-family: "Inter"; font-weight: 700; font-size: 72px; line-height: 86.4px; letter-spacing: -2.16px; text-align: center; color: #1E1E1E; text: "Title" + Subtitle (TEXT, 151x38) + style: align-self: STRETCH; width: 100%; /* text-style: Subtitle */; font-family: "Inter"; font-weight: 400; font-size: 32px; line-height: 38.4px; text-align: center; display: flex; align-items: center; color: #757575; text: "Subtitle" + Card Grid Pricing (INSTANCE, 1200x603) [component: Platform=Desktop] + component-properties: Card Grid#6062:27={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: column; row-gap: 48px; align-items: center; align-self: STRETCH; padding: 64px 64px 64px 64px; width: 100%; background: #D9D9D9; min-width: 1200px; max-width: 1920px + Navigation Pill List (INSTANCE, 149x32) [component: Direction=Row] + component-properties: Link 1#2194:8=true, Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":6062,"localID":12603}}, Link 6#2194:3=false, Link 3#2194:7=false, Link 4#2194:6=false, Link 2#2194:4=true, Link 7#3529:0=true, Link 5#2194:5=false, Direction=Row + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px; row-gap: 8px; align-items: flex-start + Slot (SLOT, 149x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Navigation Pill (INSTANCE, 78x32) [component: State=Active] + component-properties: Label#156:33=Monthly, State=Active + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; background: #F5F5F5; border-radius: 8px + Title (TEXT, 62x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Monthly" + Navigation Pill (INSTANCE, 63x32) [component: State=Default] + component-properties: Label#156:33=Yearly, State=Default + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 8px + Title (TEXT, 47x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Yearly" + Card Grid (SLOT, 1072x395) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 64px; row-gap: 64px; align-items: flex-start; align-self: STRETCH; width: 100% + Pricing Card (INSTANCE, 315x395) [component: Device=Desktop, Variant=Stroke] + component-properties: Device=Desktop, Variant=Stroke + style: display: flex; flex-direction: column; row-gap: 24px; align-items: center; flex-grow: 1; padding: 32px 32px 32px 32px; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 300px + Top (FRAME, 251x267) + style: display: flex; flex-direction: column; row-gap: 16px; justify-content: flex-end; align-items: center; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 149x29) [component: Text Heading] + component-properties: Text#2104:5=Title + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 149x29) + style: flex-grow: 1; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E; text: "Title" + Text Price (INSTANCE, 110x48) [component: Size=Large] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=true, Size=Large + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 80x48) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 16x24) + style: font-family: "Inter"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "$" + 50 (TEXT, 64x48) + style: font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; text-align: left; color: #1E1E1E; text: "50" + / mo (TEXT, 30x25) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 25.2px; text-align: left; color: #1E1E1E; text: "/ mo" + Text List (INSTANCE, 251x158) [component: Density=Default] + component-properties: Slot#6062:9={"guid":{"sessionID":-1,"localID":-1}}, Has Title#480:0=false, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start; align-self: STRETCH; width: 100% + Slot (SLOT, 89x158) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575; text: "List item" + Button (INSTANCE, 251x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px; width: 100%; background: #2C2C2C; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5; text: "Button" + Pricing Card (INSTANCE, 315x395) [component: Device=Desktop, Variant=Brand] + component-properties: Device=Desktop, Variant=Brand + style: display: flex; flex-direction: column; row-gap: 24px; align-items: center; flex-grow: 1; padding: 32px 32px 32px 32px; background: #2C2C2C; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden; min-width: 300px + Top (FRAME, 251x267) + style: display: flex; flex-direction: column; row-gap: 16px; justify-content: flex-end; align-items: center; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 149x29) [component: Text Heading] + component-properties: Text#2104:5=Title + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 149x29) + style: flex-grow: 1; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #F5F5F5; text: "Title" + Text Price (INSTANCE, 110x48) [component: Size=Large] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=true, Size=Large + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 80x48) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 16x24) + style: font-family: "Inter"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #F5F5F5; text: "$" + 50 (TEXT, 64x48) + style: font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; text-align: left; color: #F5F5F5; text: "50" + / mo (TEXT, 30x25) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 25.2px; text-align: left; color: #F5F5F5; text: "/ mo" + Text List (INSTANCE, 251x158) [component: Density=Default] + component-properties: Slot#6062:9={"guid":{"sessionID":-1,"localID":-1}}, Has Title#480:0=false, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start; align-self: STRETCH; width: 100% + Slot (SLOT, 89x158) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5; text: "List item" + Button (INSTANCE, 251x40) [component: Variant=Neutral, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Neutral, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px; width: 100%; background: #E3E3E3; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E; text: "Button" + Pricing Card (INSTANCE, 315x395) [component: Device=Desktop, Variant=Stroke] + component-properties: Device=Desktop, Variant=Stroke + style: display: flex; flex-direction: column; row-gap: 24px; align-items: center; flex-grow: 1; padding: 32px 32px 32px 32px; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 300px + Top (FRAME, 251x267) + style: display: flex; flex-direction: column; row-gap: 16px; justify-content: flex-end; align-items: center; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 149x29) [component: Text Heading] + component-properties: Text#2104:5=Title + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 149x29) + style: flex-grow: 1; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E; text: "Title" + Text Price (INSTANCE, 110x48) [component: Size=Large] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=true, Size=Large + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 80x48) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 16x24) + style: font-family: "Inter"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "$" + 50 (TEXT, 64x48) + style: font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; text-align: left; color: #1E1E1E; text: "50" + / mo (TEXT, 30x25) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 25.2px; text-align: left; color: #1E1E1E; text: "/ mo" + Text List (INSTANCE, 251x158) [component: Density=Default] + component-properties: Slot#6062:9={"guid":{"sessionID":-1,"localID":-1}}, Has Title#480:0=false, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start; align-self: STRETCH; width: 100% + Slot (SLOT, 89x158) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575; text: "List item" + Button (INSTANCE, 251x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px; width: 100%; background: #2C2C2C; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5; text: "Button" + Page Accordion (INSTANCE, 1200x623) [component: Platform=Desktop] + component-properties: Platform=Desktop + style: display: flex; flex-direction: column; row-gap: 48px; align-items: center; align-self: STRETCH; padding: 64px 64px 64px 64px; width: 100%; background: #CFF7D3; min-width: 1200px; max-width: 1920px + Text Content Heading (INSTANCE, 113x61) [component: Align=Center] + component-properties: Has Subheading#2153:9=true, Subheading#2153:11=Subheading, Heading#2153:10=Heading, Align=Center + style: display: flex; flex-direction: column; row-gap: 8px; align-items: center + Heading (TEXT, 113x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E; text: "Heading" + Subheading (TEXT, 113x24) + style: align-self: STRETCH; width: 100%; /* text-style: Subheading */; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; display: flex; align-items: center; color: #757575; text: "Subheading" + Accordion (INSTANCE, 640x386) [component: Accordion] + component-properties: Items#6031:6={"guid":{"sessionID":-1,"localID":-1}} + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; align-self: STRETCH; width: 100%; max-width: 640px + Accordion Item (INSTANCE, 640x106) [component: State=Open] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Open + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; padding: 16px 16px 16px 16px; width: 100%; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 608x22) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center; align-self: STRETCH; width: 100% + Title (TEXT, 580x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Title" + Chevron up (INSTANCE, 20x20) [component: Chevron up] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Content (FRAME, 608x44) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Body (TEXT, 608x44) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list." + Items (SLOT, 640x264) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; align-self: STRETCH; width: 100% + Accordion Item (INSTANCE, 640x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px; width: 100%; background: #F5F5F5; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 608x22) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center; flex-grow: 1 + Title (TEXT, 580x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Item (INSTANCE, 640x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px; width: 100%; background: #F5F5F5; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 608x22) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center; flex-grow: 1 + Title (TEXT, 580x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Item (INSTANCE, 640x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px; width: 100%; background: #F5F5F5; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 608x22) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center; flex-grow: 1 + Title (TEXT, 580x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Item (INSTANCE, 640x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px; width: 100%; background: #F5F5F5; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 608x22) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center; flex-grow: 1 + Title (TEXT, 580x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Footer (INSTANCE, 1200x468) [component: Platform=Desktop] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 16px; row-gap: 16px; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 160px 32px; width: 100%; background: #5A5A5A; border-top: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px; max-width: 1920px + Title (SLOT, 262x83) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; background: #CFF7D3; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E; svg: + Slot (SLOT, 818x276) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; background: #EBFFEE + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px; width: 100% + Text Strong (INSTANCE, 80x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 80x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Use cases" + Slot (SLOT, 144x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Team collaboration" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px; width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Explore" + Slot (SLOT, 168x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "FigJam" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px; width: 100% + Text Strong (INSTANCE, 82x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 82x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Resources" + Slot (SLOT, 123x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/variable-references/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/desktop-pricing/variable-references/run-0/diff-base.png new file mode 100644 index 00000000..b0833b25 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-pricing/variable-references/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/variable-references/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/desktop-pricing/variable-references/run-0/figma-base.png new file mode 100644 index 00000000..7b1c2a66 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-pricing/variable-references/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/variable-references/run-0/output.html b/data/ablation/phase1/72ffc72c9103/desktop-pricing/variable-references/run-0/output.html new file mode 100644 index 00000000..3747d77e --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-pricing/variable-references/run-0/output.html @@ -0,0 +1,598 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+ + +
+
+
+
+
Monthly
+
+
+
Yearly
+
+
+
+ +
+ +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+
+
+ + +
+
+
Heading
+
Subheading
+
+ +
+ +
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/variable-references/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/desktop-pricing/variable-references/run-0/response.txt new file mode 100644 index 00000000..00153ea2 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-pricing/variable-references/run-0/response.txt @@ -0,0 +1,601 @@ +```html +// filename: index.html + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+ + +
+
+
+
+
Monthly
+
+
+
Yearly
+
+
+
+ +
+ +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+
+
+ + +
+
+
Heading
+
Subheading
+
+ +
+ +
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-pricing/variable-references/run-0/result.json b/data/ablation/phase1/72ffc72c9103/desktop-pricing/variable-references/run-0/result.json new file mode 100644 index 00000000..d6ab7be9 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-pricing/variable-references/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "desktop-pricing", + "type": "variable-references", + "runIndex": 0, + "similarity": 88, + "inputTokens": 22868, + "outputTokens": 16675, + "totalTokens": 39543, + "htmlBytes": 47402, + "htmlLines": 598, + "cssClassCount": 23, + "cssVariableCount": 13, + "timestamp": "2026-03-28T12:08:53.855Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/code-base.png new file mode 100644 index 00000000..a4e7bf4d Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/design-tree.txt new file mode 100644 index 00000000..5220d264 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/design-tree.txt @@ -0,0 +1,607 @@ +# Design Tree +# Root: 1200px x 1437px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Desktop (COMPONENT, 1200x1437) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 1200x99) [component: Platform=Desktop, State=Default] + component-properties: Platform=Desktop, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 0px; align-items: center; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Navigation Pill List (INSTANCE, 870x32) [component: Direction=Row] + component-properties: Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":-1,"localID":-1}}, Link 6#2194:3=true, Link 4#2194:6=true, Link 3#2194:7=true, Link 5#2194:5=true, Link 7#3529:0=false, Link 2#2194:4=true, Link 1#2194:8=true, Direction=Row + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px /* var:VariableID:9:11259 */; row-gap: 8px; justify-content: flex-end; align-items: flex-start; flex-grow: 1 + Slot (SLOT, 553x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Navigation Pill (INSTANCE, 84x32) [component: State=Active] + component-properties: Label#156:33=Products, State=Active + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 68x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Products" + Navigation Pill (INSTANCE, 86x32) [component: State=Default] + component-properties: Label#156:33=Solutions, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 70x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Solutions" + Navigation Pill (INSTANCE, 103x32) [component: State=Default] + component-properties: Label#156:33=Community, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 87x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Community" + Navigation Pill (INSTANCE, 95x32) [component: State=Default] + component-properties: Label#156:33=Resources, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 79x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Navigation Pill (INSTANCE, 68x32) [component: State=Default] + component-properties: Label#156:33=Pricing, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 52x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Pricing" + Navigation Pill (INSTANCE, 77x32) [component: State=Default] + component-properties: Label#156:33=Contact, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 61x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Contact" + Header Auth (INSTANCE, 178x32) [component: State=Logged Out] + component-properties: State=Logged Out + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center + Button (INSTANCE, 83x32) [component: Variant=Neutral, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Sign in, Variant=Neutral, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Sign in" + Button (INSTANCE, 83x32) [component: Variant=Primary, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Register, Variant=Primary, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 63x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Register" + Page Product Results (INSTANCE, 1200x870) [component: Platform=Desktop] + component-properties: Card Grid#6062:51={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:48={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: row; column-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #009951 /* var:VariableID:3919:36436 */; min-width: 1200px; max-width: 1920px + Filter Menu (FRAME, 240x676) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden + Slot (SLOT, 208x644) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Section (FRAME, 208x102) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text (INSTANCE, 74x22) [component: Text] + component-properties: Text#2104:7=Keywords + style: display: flex; flex-direction: row; align-items: flex-start + Text (TEXT, 74x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Keywords" + Keyword List (FRAME, 208x68) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 4px /* var:VariableID:9:11258 */; row-gap: 4px /* var:VariableID:9:11258 */; align-items: flex-start; align-self: STRETCH; width: 100%; border-radius: 4px + Tag (INSTANCE, 89x32) [component: Scheme=Neutral, State=Default, Variant=Secondary] + component-properties: Label#9765:0=Spring, Removable#147:0=true, Scheme=Neutral, State=Default, Variant=Secondary + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:3919:36424 */; border-radius: 8px + Tag (TEXT, 49x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Spring" + X (INSTANCE, 16x16) [component: X] + style: overflow: hidden + Icon (VECTOR, 8x8) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Tag (INSTANCE, 86x32) [component: Scheme=Neutral, State=Default, Variant=Secondary] + component-properties: Label#9765:0=Smart, Removable#147:0=true, Scheme=Neutral, State=Default, Variant=Secondary + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:3919:36424 */; border-radius: 8px + Tag (TEXT, 46x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Smart" + X (INSTANCE, 16x16) [component: X] + style: overflow: hidden + Icon (VECTOR, 8x8) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Tag (INSTANCE, 99x32) [component: Scheme=Neutral, State=Default, Variant=Secondary] + component-properties: Label#9765:0=Modern, Removable#147:0=true, Scheme=Neutral, State=Default, Variant=Secondary + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:3919:36424 */; border-radius: 8px + Tag (TEXT, 59x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Modern" + X (INSTANCE, 16x16) [component: X] + style: overflow: hidden + Icon (VECTOR, 8x8) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Section (FRAME, 208x156) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100% + Checkbox Group (INSTANCE, 208x156) [component: Checkbox Group] + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Checkbox Field (INSTANCE, 120x44) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=true, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Description Row (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Space (FRAME, 16x16) + style: overflow: hidden + Description (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Description" + Checkbox Field (INSTANCE, 120x44) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=true, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Description Row (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Space (FRAME, 16x16) + style: overflow: hidden + Description (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Description" + Checkbox Field (INSTANCE, 120x44) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=true, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Description Row (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Space (FRAME, 16x16) + style: overflow: hidden + Description (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Description" + Slider Field (INSTANCE, 208x42) [component: State=Default] + component-properties: Label#589:3=Label, Description#589:4=Description, Has Label#589:5=true, Has Description#589:6=false, State=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100%; min-width: 120px + Label (FRAME, 208x22) + style: display: flex; flex-direction: row; column-gap: 4px; justify-content: space-between; align-items: flex-start; align-self: STRETCH; width: 100% + Label (TEXT, 159x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Slider Output (FRAME, 49x20) + style: display: flex; flex-direction: row; align-items: center + Prefix (TEXT, 9x20) + style: /* text-style: Body Small */; font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 19.6px; text-align: right; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + Value (TEXT, 40x20) + style: /* text-style: Body Small */; font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 19.6px; text-align: right; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "0-100" + Slider (FRAME, 208x8) + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; width: 100% + Block (FRAME, 208x8) + style: display: flex; flex-direction: row; align-items: center; flex-grow: 1; background: #E6E6E6 /* var:VariableID:3919:36430 */; border-radius: 9999px + Knob Start (FRAME, 16x16) + style: background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 9999px; overflow: hidden + Slider (FRAME, 176x6) + style: display: flex; flex-direction: row; align-items: flex-start; flex-grow: 1; overflow: hidden + Knob End (FRAME, 16x16) + style: background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 9999px; overflow: hidden + Section (FRAME, 208x124) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text (INSTANCE, 41x22) [component: Text] + component-properties: Text#2104:7=Color + style: display: flex; flex-direction: row; align-items: flex-start + Text (TEXT, 41x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color" + Checkbox Group (INSTANCE, 208x90) [component: Checkbox Group] + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Checkbox Field (INSTANCE, 120x22) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=false, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Checkbox Field (INSTANCE, 120x22) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=false, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Checkbox Field (INSTANCE, 120x22) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=false, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Section (FRAME, 208x124) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text (INSTANCE, 32x22) [component: Text] + component-properties: Text#2104:7=Size + style: display: flex; flex-direction: row; align-items: flex-start + Text (TEXT, 32x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Size" + Checkbox Group (INSTANCE, 208x90) [component: Checkbox Group] + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Checkbox Field (INSTANCE, 120x22) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=false, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Checkbox Field (INSTANCE, 120x22) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=false, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Checkbox Field (INSTANCE, 120x22) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=false, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Section Product Grid (FRAME, 832x806) + style: display: flex; flex-direction: column; row-gap: 48px /* var:VariableID:346:10903 */; align-items: flex-start; flex-grow: 1; border-radius: 8px + Filter Bar (FRAME, 832x40) + style: display: flex; flex-direction: row; column-gap: 48px; justify-content: space-between; align-items: center; align-self: STRETCH; width: 100% + Search Filter (FRAME, 327x40) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Search (INSTANCE, 120x40) [component: State=Default, Value Type=Placeholder] + component-properties: Value#29:2=Search, State=Default, Value Type=Placeholder + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; padding: 12px 16px 12px 16px /* var:VariableID:9:11260 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 9999px; overflow: hidden; min-width: 120px + Value (TEXT, 64x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Search" + Search (INSTANCE, 16x16) [component: Search] + style: overflow: hidden + Icon (VECTOR, 12x12) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Tag Toggle Group (INSTANCE, 447x32) [component: Tag Toggle Group] + component-properties: Slot#6031:28={"guid":{"sessionID":6062,"localID":15537}} + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Slot (SLOT, 447x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Tag Toggle (INSTANCE, 75x32) [component: State=On] + component-properties: Icon#87:4=68:15641, Label#156:33=New, Show Icon#86:12=true, State=On + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 8px + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Title (TEXT, 35x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "New" + Tag Toggle (INSTANCE, 137x32) [component: State=Off] + component-properties: Show Icon#86:12=true, Icon#87:4=68:15641, Label#156:33=Price ascending, State=Off + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 121x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36458 */; text: "Price ascending" + Tag Toggle (INSTANCE, 147x32) [component: State=Off] + component-properties: Show Icon#86:12=true, Icon#87:4=68:15641, Label#156:33=Price descending, State=Off + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 131x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36458 */; text: "Price descending" + Tag Toggle (INSTANCE, 64x32) [component: State=Off] + component-properties: Show Icon#86:12=true, Icon#87:4=68:15641, Label#156:33=Rating, State=Off + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 48x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36458 */; text: "Rating" + Card Grid (SLOT, 832x718) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; align-self: STRETCH; width: 100% + Product Info Card (INSTANCE, 261x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 229x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 261x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 229x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-2@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 261x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 229x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-3@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 261x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 229x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-4@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 261x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 229x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-5@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 261x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 229x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-6@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Footer (INSTANCE, 1200x468) [component: Platform=Desktop] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 16px /* var:VariableID:9:11261 */; row-gap: 16px; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 160px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px; max-width: 1920px + Title (SLOT, 262x83) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Slot (SLOT, 818x276) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; background: #EBFFEE /* var:VariableID:2002:7433 */ + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 80x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 80x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 82x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 82x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/diff-base.png new file mode 100644 index 00000000..fec3aa5d Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/figma-base.png new file mode 100644 index 00000000..5a8bc968 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/images/image-2@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/images/image-2@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/images/image-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/images/image-3@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/images/image-3@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/images/image-3@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/images/image-4@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/images/image-4@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/images/image-4@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/images/image-5@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/images/image-5@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/images/image-5@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/images/image-6@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/images/image-6@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/images/image-6@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/images/image@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/images/mapping.json new file mode 100644 index 00000000..82ff2605 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/images/mapping.json @@ -0,0 +1,8 @@ +{ + "I175:7426;83:31571;638:13763": "image@2x.png", + "I175:7426;83:31572;638:13763": "image-2@2x.png", + "I175:7426;83:31573;638:13763": "image-3@2x.png", + "I175:7426;83:31574;638:13763": "image-4@2x.png", + "I175:7426;83:31575;638:13763": "image-5@2x.png", + "I175:7426;83:31576;638:13763": "image-6@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/output.html b/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/output.html new file mode 100644 index 00000000..d1df40de --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/output.html @@ -0,0 +1,697 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+
+ +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+ +
+
+ +
+
+ Keywords +
+
+
+ Spring +
+ + + +
+
+
+ Smart +
+ + + +
+
+
+ Modern +
+ + + +
+
+
+
+ + +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+ Description +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+ Description +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+ Description +
+
+
+
+ + +
+
+ Label +
+ $ + 0-100 +
+
+
+
+
+
+
+
+
+
+ + +
+
+ Color +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+ + +
+
+ Size +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+
+
+ + +
+ +
+
+
+ Search +
+ + + +
+
+
+ +
+
+
+
+ + + +
+ New +
+
+ Price ascending +
+
+ Price descending +
+
+ Rating +
+
+
+
+ + +
+
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+ Use cases +
+
+
+
+ UI design +
+
+ UX design +
+
+ Wireframing +
+
+ Diagramming +
+
+ Brainstorming +
+
+ Online whiteboard +
+
+ Team collaboration +
+
+
+ +
+
+
+ Explore +
+
+
+
+ Design +
+
+ Prototyping +
+
+ Development features +
+
+ Design systems +
+
+ Collaboration features +
+
+ Design process +
+
+ FigJam +
+
+
+ +
+
+
+ Resources +
+
+
+
+ Blog +
+
+ Best practices +
+
+ Colors +
+
+ Color wheel +
+
+ Support +
+
+ Developers +
+
+ Resource library +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/response.txt new file mode 100644 index 00000000..a89f4ddc --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/response.txt @@ -0,0 +1,700 @@ +```html +// filename: index.html + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+
+ +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+ +
+
+ +
+
+ Keywords +
+
+
+ Spring +
+ + + +
+
+
+ Smart +
+ + + +
+
+
+ Modern +
+ + + +
+
+
+
+ + +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+ Description +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+ Description +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+ Description +
+
+
+
+ + +
+
+ Label +
+ $ + 0-100 +
+
+
+
+
+
+
+
+
+
+ + +
+
+ Color +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+ + +
+
+ Size +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+
+
+ + +
+ +
+
+
+ Search +
+ + + +
+
+
+ +
+
+
+
+ + + +
+ New +
+
+ Price ascending +
+
+ Price descending +
+
+ Rating +
+
+
+
+ + +
+
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+ Use cases +
+
+
+
+ UI design +
+
+ UX design +
+
+ Wireframing +
+
+ Diagramming +
+
+ Brainstorming +
+
+ Online whiteboard +
+
+ Team collaboration +
+
+
+ +
+
+
+ Explore +
+
+
+
+ Design +
+
+ Prototyping +
+
+ Development features +
+
+ Design systems +
+
+ Collaboration features +
+
+ Design process +
+
+ FigJam +
+
+
+ +
+
+
+ Resources +
+
+
+
+ Blog +
+
+ Best practices +
+
+ Colors +
+
+ Color wheel +
+
+ Support +
+
+ Developers +
+
+ Resource library +
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/result.json b/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/result.json new file mode 100644 index 00000000..f157918e --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-shop/baseline/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "desktop-shop", + "type": "baseline", + "runIndex": 0, + "similarity": 99, + "inputTokens": 29200, + "outputTokens": 19624, + "totalTokens": 48824, + "htmlBytes": 58531, + "htmlLines": 697, + "cssClassCount": 19, + "cssVariableCount": 14, + "timestamp": "2026-03-28T11:03:34.313Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/code-base.png new file mode 100644 index 00000000..df0c47ac Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/design-tree.txt new file mode 100644 index 00000000..475323e3 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/design-tree.txt @@ -0,0 +1,527 @@ +# Design Tree +# Root: 1200px x 1437px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Desktop (COMPONENT, 1200x1437) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 1200x99) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 0px; align-items: center; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Navigation Pill List (INSTANCE, 870x32) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px /* var:VariableID:9:11259 */; row-gap: 8px; justify-content: flex-end; align-items: flex-start; flex-grow: 1 + Slot (SLOT, 553x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Navigation Pill (INSTANCE, 84x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 68x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Products" + Navigation Pill (INSTANCE, 86x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 70x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Solutions" + Navigation Pill (INSTANCE, 103x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 87x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Community" + Navigation Pill (INSTANCE, 95x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 79x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Navigation Pill (INSTANCE, 68x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 52x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Pricing" + Navigation Pill (INSTANCE, 77x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 61x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Contact" + Header Auth (INSTANCE, 178x32) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center + Button (INSTANCE, 83x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Sign in" + Button (INSTANCE, 83x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 63x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Register" + Page Product Results (INSTANCE, 1200x870) + style: display: flex; flex-direction: row; column-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #009951 /* var:VariableID:3919:36436 */; min-width: 1200px; max-width: 1920px + Filter Menu (FRAME, 240x676) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden + Slot (SLOT, 208x644) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Section (FRAME, 208x102) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text (INSTANCE, 74x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text (TEXT, 74x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Keywords" + Keyword List (FRAME, 208x68) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 4px /* var:VariableID:9:11258 */; row-gap: 4px /* var:VariableID:9:11258 */; align-items: flex-start; align-self: STRETCH; width: 100%; border-radius: 4px + Tag (INSTANCE, 89x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:3919:36424 */; border-radius: 8px + Tag (TEXT, 49x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Spring" + X (INSTANCE, 16x16) + style: overflow: hidden + Icon (VECTOR, 8x8) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Tag (INSTANCE, 86x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:3919:36424 */; border-radius: 8px + Tag (TEXT, 46x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Smart" + X (INSTANCE, 16x16) + style: overflow: hidden + Icon (VECTOR, 8x8) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Tag (INSTANCE, 99x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:3919:36424 */; border-radius: 8px + Tag (TEXT, 59x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Modern" + X (INSTANCE, 16x16) + style: overflow: hidden + Icon (VECTOR, 8x8) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Section (FRAME, 208x156) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100% + Checkbox Group (INSTANCE, 208x156) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Checkbox Field (INSTANCE, 120x44) + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Description Row (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Space (FRAME, 16x16) + style: overflow: hidden + Description (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Description" + Checkbox Field (INSTANCE, 120x44) + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Description Row (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Space (FRAME, 16x16) + style: overflow: hidden + Description (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Description" + Checkbox Field (INSTANCE, 120x44) + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Description Row (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Space (FRAME, 16x16) + style: overflow: hidden + Description (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Description" + Slider Field (INSTANCE, 208x42) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100%; min-width: 120px + Label (FRAME, 208x22) + style: display: flex; flex-direction: row; column-gap: 4px; justify-content: space-between; align-items: flex-start; align-self: STRETCH; width: 100% + Label (TEXT, 159x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Slider Output (FRAME, 49x20) + style: display: flex; flex-direction: row; align-items: center + Prefix (TEXT, 9x20) + style: /* text-style: Body Small */; font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 19.6px; text-align: right; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + Value (TEXT, 40x20) + style: /* text-style: Body Small */; font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 19.6px; text-align: right; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "0-100" + Slider (FRAME, 208x8) + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; width: 100% + Block (FRAME, 208x8) + style: display: flex; flex-direction: row; align-items: center; flex-grow: 1; background: #E6E6E6 /* var:VariableID:3919:36430 */; border-radius: 9999px + Knob Start (FRAME, 16x16) + style: background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 9999px; overflow: hidden + Slider (FRAME, 176x6) + style: display: flex; flex-direction: row; align-items: flex-start; flex-grow: 1; overflow: hidden + Knob End (FRAME, 16x16) + style: background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 9999px; overflow: hidden + Section (FRAME, 208x124) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text (INSTANCE, 41x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text (TEXT, 41x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color" + Checkbox Group (INSTANCE, 208x90) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Checkbox Field (INSTANCE, 120x22) + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Checkbox Field (INSTANCE, 120x22) + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Checkbox Field (INSTANCE, 120x22) + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Section (FRAME, 208x124) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text (INSTANCE, 32x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text (TEXT, 32x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Size" + Checkbox Group (INSTANCE, 208x90) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Checkbox Field (INSTANCE, 120x22) + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Checkbox Field (INSTANCE, 120x22) + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Checkbox Field (INSTANCE, 120x22) + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Section Product Grid (FRAME, 832x806) + style: display: flex; flex-direction: column; row-gap: 48px /* var:VariableID:346:10903 */; align-items: flex-start; flex-grow: 1; border-radius: 8px + Filter Bar (FRAME, 832x40) + style: display: flex; flex-direction: row; column-gap: 48px; justify-content: space-between; align-items: center; align-self: STRETCH; width: 100% + Search Filter (FRAME, 327x40) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Search (INSTANCE, 120x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; padding: 12px 16px 12px 16px /* var:VariableID:9:11260 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 9999px; overflow: hidden; min-width: 120px + Value (TEXT, 64x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Search" + Search (INSTANCE, 16x16) + style: overflow: hidden + Icon (VECTOR, 12x12) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Tag Toggle Group (INSTANCE, 447x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Slot (SLOT, 447x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Tag Toggle (INSTANCE, 75x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 8px + Check (INSTANCE, 16x16) + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Title (TEXT, 35x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "New" + Tag Toggle (INSTANCE, 137x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 121x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36458 */; text: "Price ascending" + Tag Toggle (INSTANCE, 147x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 131x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36458 */; text: "Price descending" + Tag Toggle (INSTANCE, 64x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 48x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36458 */; text: "Rating" + Card Grid (SLOT, 832x718) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; align-self: STRETCH; width: 100% + Product Info Card (INSTANCE, 261x347) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 229x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 261x347) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 229x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-2@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 261x347) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 229x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-3@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 261x347) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 229x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-4@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 261x347) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 229x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-5@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 261x347) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 229x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-6@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Footer (INSTANCE, 1200x468) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 16px /* var:VariableID:9:11261 */; row-gap: 16px; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 160px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px; max-width: 1920px + Title (SLOT, 262x83) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Slot (SLOT, 818x276) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; background: #EBFFEE /* var:VariableID:2002:7433 */ + Text Link List (INSTANCE, 262x276) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 80x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 80x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 262x276) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 59x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 262x276) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 82x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 82x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/diff-base.png new file mode 100644 index 00000000..35913ba1 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/figma-base.png new file mode 100644 index 00000000..5a8bc968 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/images/image-2@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/images/image-2@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/images/image-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/images/image-3@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/images/image-3@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/images/image-3@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/images/image-4@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/images/image-4@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/images/image-4@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/images/image-5@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/images/image-5@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/images/image-5@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/images/image-6@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/images/image-6@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/images/image-6@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/images/image@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/images/mapping.json new file mode 100644 index 00000000..82ff2605 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/images/mapping.json @@ -0,0 +1,8 @@ +{ + "I175:7426;83:31571;638:13763": "image@2x.png", + "I175:7426;83:31572;638:13763": "image-2@2x.png", + "I175:7426;83:31573;638:13763": "image-3@2x.png", + "I175:7426;83:31574;638:13763": "image-4@2x.png", + "I175:7426;83:31575;638:13763": "image-5@2x.png", + "I175:7426;83:31576;638:13763": "image-6@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/output.html b/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/output.html new file mode 100644 index 00000000..23baf339 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/output.html @@ -0,0 +1,581 @@ + + + + + + Platform Desktop + + + + +
+ +
+ +
+ +
+ + + + +
+
+ + +
+
+ +
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ + +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+ +
+
+ +
+
+
Keywords
+
+
+ +
+
Spring
+
+ + + +
+
+
+
Smart
+
+ + + +
+
+
+
Modern
+
+ + + +
+
+
+
+ + +
+
+ +
+
+
+
+ + + +
+
+
Label
+
+
+
+
Description
+
+
+
+
+
+
+ + + +
+
+
Label
+
+
+
+
Description
+
+
+
+
+
+
+ + + +
+
+
Label
+
+
+
+
Description
+
+
+
+
+ + +
+
+
Label
+
+
$
+
0-100
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
Color
+
+
+
+
+
+
+ + + +
+
+
Label
+
+
+
+
+
+
+ + + +
+
+
Label
+
+
+
+
+
+
+ + + +
+
+
Label
+
+
+
+
+ + +
+
+
Size
+
+
+
+
+
+
+ + + +
+
+
Label
+
+
+
+
+
+
+ + + +
+
+
Label
+
+
+
+
+
+
+ + + +
+
+
Label
+
+
+
+
+
+
+ + +
+ +
+ +
+
+
Search
+
+ + + +
+
+
+ + +
+
+
+
+ + + +
+
New
+
+
+
Price ascending
+
+
+
Price descending
+
+
+
Rating
+
+
+
+
+ + +
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+
+
+
+ + +
+ +
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ + +
+ +
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/response.txt new file mode 100644 index 00000000..fc6757a8 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/response.txt @@ -0,0 +1,584 @@ +```html +// filename: index.html + + + + + + Platform Desktop + + + + +
+ +
+ +
+ +
+ + + + +
+
+ + +
+
+ +
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ + +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+ +
+
+ +
+
+
Keywords
+
+
+ +
+
Spring
+
+ + + +
+
+
+
Smart
+
+ + + +
+
+
+
Modern
+
+ + + +
+
+
+
+ + +
+
+ +
+
+
+
+ + + +
+
+
Label
+
+
+
+
Description
+
+
+
+
+
+
+ + + +
+
+
Label
+
+
+
+
Description
+
+
+
+
+
+
+ + + +
+
+
Label
+
+
+
+
Description
+
+
+
+
+ + +
+
+
Label
+
+
$
+
0-100
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
Color
+
+
+
+
+
+
+ + + +
+
+
Label
+
+
+
+
+
+
+ + + +
+
+
Label
+
+
+
+
+
+
+ + + +
+
+
Label
+
+
+
+
+ + +
+
+
Size
+
+
+
+
+
+
+ + + +
+
+
Label
+
+
+
+
+
+
+ + + +
+
+
Label
+
+
+
+
+
+
+ + + +
+
+
Label
+
+
+
+
+
+
+ + +
+ +
+ +
+
+
Search
+
+ + + +
+
+
+ + +
+
+
+
+ + + +
+
New
+
+
+
Price ascending
+
+
+
Price descending
+
+
+
Rating
+
+
+
+
+ + +
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+
+
+
+ + +
+ +
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ + +
+ +
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/result.json b/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/result.json new file mode 100644 index 00000000..0123c4f0 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-shop/component-references/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "desktop-shop", + "type": "component-references", + "runIndex": 0, + "similarity": 99, + "inputTokens": 26241, + "outputTokens": 21467, + "totalTokens": 47708, + "htmlBytes": 63444, + "htmlLines": 581, + "cssClassCount": 6, + "cssVariableCount": 23, + "timestamp": "2026-03-28T12:18:07.575Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/code-base.png new file mode 100644 index 00000000..2960d442 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/design-tree.txt new file mode 100644 index 00000000..415d2ff6 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/design-tree.txt @@ -0,0 +1,543 @@ +# Design Tree +# Root: 1200px x 1437px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Desktop (COMPONENT, 1200x1437) + style: background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 1200x99) [component: Platform=Desktop, State=Default] + component-properties: Platform=Desktop, State=Default + style: width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px + Block (FRAME, 40x35) + Figma (FRAME, 40x35) + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Navigation Pill List (INSTANCE, 870x32) [component: Direction=Row] + component-properties: Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":-1,"localID":-1}}, Link 6#2194:3=true, Link 4#2194:6=true, Link 3#2194:7=true, Link 5#2194:5=true, Link 7#3529:0=false, Link 2#2194:4=true, Link 1#2194:8=true, Direction=Row + style: flex-grow: 1 + Slot (SLOT, 553x32) + Navigation Pill (INSTANCE, 84x32) [component: State=Active] + component-properties: Label#156:33=Products, State=Active + style: background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 68x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Products" + Navigation Pill (INSTANCE, 86x32) [component: State=Default] + component-properties: Label#156:33=Solutions, State=Default + style: border-radius: 8px + Title (TEXT, 70x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Solutions" + Navigation Pill (INSTANCE, 103x32) [component: State=Default] + component-properties: Label#156:33=Community, State=Default + style: border-radius: 8px + Title (TEXT, 87x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Community" + Navigation Pill (INSTANCE, 95x32) [component: State=Default] + component-properties: Label#156:33=Resources, State=Default + style: border-radius: 8px + Title (TEXT, 79x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Navigation Pill (INSTANCE, 68x32) [component: State=Default] + component-properties: Label#156:33=Pricing, State=Default + style: border-radius: 8px + Title (TEXT, 52x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Pricing" + Navigation Pill (INSTANCE, 77x32) [component: State=Default] + component-properties: Label#156:33=Contact, State=Default + style: border-radius: 8px + Title (TEXT, 61x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Contact" + Header Auth (INSTANCE, 178x32) [component: State=Logged Out] + component-properties: State=Logged Out + Button (INSTANCE, 83x32) [component: Variant=Neutral, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Sign in, Variant=Neutral, State=Default, Size=Small + style: flex-grow: 1; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Sign in" + Button (INSTANCE, 83x32) [component: Variant=Primary, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Register, Variant=Primary, State=Default, Size=Small + style: flex-grow: 1; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 63x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Register" + Page Product Results (INSTANCE, 1200x870) [component: Platform=Desktop] + component-properties: Card Grid#6062:51={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:48={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: width: 100%; background: #009951 /* var:VariableID:3919:36436 */; min-width: 1200px; max-width: 1920px + Filter Menu (FRAME, 240x676) + style: background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden + Slot (SLOT, 208x644) + style: width: 100% + Section (FRAME, 208x102) + style: width: 100% + Text (INSTANCE, 74x22) [component: Text] + component-properties: Text#2104:7=Keywords + Text (TEXT, 74x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Keywords" + Keyword List (FRAME, 208x68) + style: width: 100%; border-radius: 4px + Tag (INSTANCE, 89x32) [component: Scheme=Neutral, State=Default, Variant=Secondary] + component-properties: Label#9765:0=Spring, Removable#147:0=true, Scheme=Neutral, State=Default, Variant=Secondary + style: background: #F5F5F5 /* var:VariableID:3919:36424 */; border-radius: 8px + Tag (TEXT, 49x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Spring" + X (INSTANCE, 16x16) [component: X] + style: overflow: hidden + Icon (VECTOR, 8x8) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Tag (INSTANCE, 86x32) [component: Scheme=Neutral, State=Default, Variant=Secondary] + component-properties: Label#9765:0=Smart, Removable#147:0=true, Scheme=Neutral, State=Default, Variant=Secondary + style: background: #F5F5F5 /* var:VariableID:3919:36424 */; border-radius: 8px + Tag (TEXT, 46x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Smart" + X (INSTANCE, 16x16) [component: X] + style: overflow: hidden + Icon (VECTOR, 8x8) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Tag (INSTANCE, 99x32) [component: Scheme=Neutral, State=Default, Variant=Secondary] + component-properties: Label#9765:0=Modern, Removable#147:0=true, Scheme=Neutral, State=Default, Variant=Secondary + style: background: #F5F5F5 /* var:VariableID:3919:36424 */; border-radius: 8px + Tag (TEXT, 59x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Modern" + X (INSTANCE, 16x16) [component: X] + style: overflow: hidden + Icon (VECTOR, 8x8) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Section (FRAME, 208x156) + style: width: 100% + Checkbox Group (INSTANCE, 208x156) [component: Checkbox Group] + style: width: 100% + Checkbox Field (INSTANCE, 120x44) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=true, State=Default, Value Type=Checked + Checkbox and Label (FRAME, 120x22) + style: min-width: 120px + Checkbox (FRAME, 16x16) + style: background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Description Row (FRAME, 120x22) + style: min-width: 120px + Space (FRAME, 16x16) + style: overflow: hidden + Description (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Description" + Checkbox Field (INSTANCE, 120x44) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=true, State=Default, Value Type=Checked + Checkbox and Label (FRAME, 120x22) + style: min-width: 120px + Checkbox (FRAME, 16x16) + style: background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Description Row (FRAME, 120x22) + style: min-width: 120px + Space (FRAME, 16x16) + style: overflow: hidden + Description (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Description" + Checkbox Field (INSTANCE, 120x44) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=true, State=Default, Value Type=Checked + Checkbox and Label (FRAME, 120x22) + style: min-width: 120px + Checkbox (FRAME, 16x16) + style: background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Description Row (FRAME, 120x22) + style: min-width: 120px + Space (FRAME, 16x16) + style: overflow: hidden + Description (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Description" + Slider Field (INSTANCE, 208x42) [component: State=Default] + component-properties: Label#589:3=Label, Description#589:4=Description, Has Label#589:5=true, Has Description#589:6=false, State=Default + style: width: 100%; min-width: 120px + Label (FRAME, 208x22) + style: width: 100% + Label (TEXT, 159x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Slider Output (FRAME, 49x20) + Prefix (TEXT, 9x20) + style: /* text-style: Body Small */; font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 19.6px; text-align: right; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + Value (TEXT, 40x20) + style: /* text-style: Body Small */; font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 19.6px; text-align: right; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "0-100" + Slider (FRAME, 208x8) + style: width: 100% + Block (FRAME, 208x8) + style: flex-grow: 1; background: #E6E6E6 /* var:VariableID:3919:36430 */; border-radius: 9999px + Knob Start (FRAME, 16x16) + style: background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 9999px; overflow: hidden + Slider (FRAME, 176x6) + style: flex-grow: 1; overflow: hidden + Knob End (FRAME, 16x16) + style: background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 9999px; overflow: hidden + Section (FRAME, 208x124) + style: width: 100% + Text (INSTANCE, 41x22) [component: Text] + component-properties: Text#2104:7=Color + Text (TEXT, 41x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color" + Checkbox Group (INSTANCE, 208x90) [component: Checkbox Group] + style: width: 100% + Checkbox Field (INSTANCE, 120x22) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=false, State=Default, Value Type=Checked + Checkbox and Label (FRAME, 120x22) + style: min-width: 120px + Checkbox (FRAME, 16x16) + style: background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Checkbox Field (INSTANCE, 120x22) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=false, State=Default, Value Type=Checked + Checkbox and Label (FRAME, 120x22) + style: min-width: 120px + Checkbox (FRAME, 16x16) + style: background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Checkbox Field (INSTANCE, 120x22) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=false, State=Default, Value Type=Checked + Checkbox and Label (FRAME, 120x22) + style: min-width: 120px + Checkbox (FRAME, 16x16) + style: background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Section (FRAME, 208x124) + style: width: 100% + Text (INSTANCE, 32x22) [component: Text] + component-properties: Text#2104:7=Size + Text (TEXT, 32x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Size" + Checkbox Group (INSTANCE, 208x90) [component: Checkbox Group] + style: width: 100% + Checkbox Field (INSTANCE, 120x22) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=false, State=Default, Value Type=Checked + Checkbox and Label (FRAME, 120x22) + style: min-width: 120px + Checkbox (FRAME, 16x16) + style: background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Checkbox Field (INSTANCE, 120x22) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=false, State=Default, Value Type=Checked + Checkbox and Label (FRAME, 120x22) + style: min-width: 120px + Checkbox (FRAME, 16x16) + style: background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Checkbox Field (INSTANCE, 120x22) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=false, State=Default, Value Type=Checked + Checkbox and Label (FRAME, 120x22) + style: min-width: 120px + Checkbox (FRAME, 16x16) + style: background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Section Product Grid (FRAME, 832x806) + style: flex-grow: 1; border-radius: 8px + Filter Bar (FRAME, 832x40) + style: width: 100% + Search Filter (FRAME, 327x40) + Search (INSTANCE, 120x40) [component: State=Default, Value Type=Placeholder] + component-properties: Value#29:2=Search, State=Default, Value Type=Placeholder + style: background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 9999px; overflow: hidden; min-width: 120px + Value (TEXT, 64x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Search" + Search (INSTANCE, 16x16) [component: Search] + style: overflow: hidden + Icon (VECTOR, 12x12) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Tag Toggle Group (INSTANCE, 447x32) [component: Tag Toggle Group] + component-properties: Slot#6031:28={"guid":{"sessionID":6062,"localID":15537}} + Slot (SLOT, 447x32) + Tag Toggle (INSTANCE, 75x32) [component: State=On] + component-properties: Icon#87:4=68:15641, Label#156:33=New, Show Icon#86:12=true, State=On + style: background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 8px + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Title (TEXT, 35x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "New" + Tag Toggle (INSTANCE, 137x32) [component: State=Off] + component-properties: Show Icon#86:12=true, Icon#87:4=68:15641, Label#156:33=Price ascending, State=Off + style: background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 121x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #757575 /* var:VariableID:3919:36458 */; text: "Price ascending" + Tag Toggle (INSTANCE, 147x32) [component: State=Off] + component-properties: Show Icon#86:12=true, Icon#87:4=68:15641, Label#156:33=Price descending, State=Off + style: background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 131x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #757575 /* var:VariableID:3919:36458 */; text: "Price descending" + Tag Toggle (INSTANCE, 64x32) [component: State=Off] + component-properties: Show Icon#86:12=true, Icon#87:4=68:15641, Label#156:33=Rating, State=Off + style: background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 48x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #757575 /* var:VariableID:3919:36458 */; text: "Rating" + Card Grid (SLOT, 832x718) + style: width: 100% + Product Info Card (INSTANCE, 261x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: flex-grow: 1; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 229x247) + style: width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 261x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: flex-grow: 1; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 229x247) + style: width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-2@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 261x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: flex-grow: 1; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 229x247) + style: width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-3@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 261x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: flex-grow: 1; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 229x247) + style: width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-4@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 261x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: flex-grow: 1; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 229x247) + style: width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-5@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 261x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: flex-grow: 1; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 229x247) + style: width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-6@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Footer (INSTANCE, 1200x468) [component: Platform=Desktop] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px; max-width: 1920px + Title (SLOT, 262x83) + style: background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Slot (SLOT, 818x276) + style: background: #EBFFEE /* var:VariableID:2002:7433 */ + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + Title (FRAME, 262x38) + style: width: 100% + Text Strong (INSTANCE, 80x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + Text Strong (TEXT, 80x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x226) + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + Title (FRAME, 262x38) + style: width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + Text Strong (TEXT, 59x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x226) + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + Title (FRAME, 262x38) + style: width: 100% + Text Strong (INSTANCE, 82x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + Text Strong (TEXT, 82x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x226) + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/diff-base.png new file mode 100644 index 00000000..fe071c99 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/figma-base.png new file mode 100644 index 00000000..5a8bc968 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/images/image-2@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/images/image-2@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/images/image-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/images/image-3@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/images/image-3@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/images/image-3@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/images/image-4@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/images/image-4@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/images/image-4@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/images/image-5@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/images/image-5@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/images/image-5@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/images/image-6@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/images/image-6@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/images/image-6@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/images/image@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/images/mapping.json new file mode 100644 index 00000000..82ff2605 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/images/mapping.json @@ -0,0 +1,8 @@ +{ + "I175:7426;83:31571;638:13763": "image@2x.png", + "I175:7426;83:31572;638:13763": "image-2@2x.png", + "I175:7426;83:31573;638:13763": "image-3@2x.png", + "I175:7426;83:31574;638:13763": "image-4@2x.png", + "I175:7426;83:31575;638:13763": "image-5@2x.png", + "I175:7426;83:31576;638:13763": "image-6@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/output.html b/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/output.html new file mode 100644 index 00000000..f8d7de26 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/output.html @@ -0,0 +1,426 @@ + + + + + + Platform Desktop + + + + +
+ +
+ +
+
+ + + +
+
+ + +
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+ + +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+ +
+ +
+
Keywords
+
+
+ Spring + + + +
+
+ Smart + + + +
+
+ Modern + + + +
+
+
+ + +
+
+
+
+ + + +
+ Label +
+
+
+ Description +
+
+
+
+
+ + + +
+ Label +
+
+
+ Description +
+
+
+
+
+ + + +
+ Label +
+
+
+ Description +
+
+
+ + +
+
+ Label +
+ $ + 0-100 +
+
+
+
+
+
+
+
+
+ + +
+
Color
+
+
+
+ + + +
+ Label +
+
+
+ + + +
+ Label +
+
+
+ + + +
+ Label +
+
+
+ + +
+
Size
+
+
+
+ + + +
+ Label +
+
+
+ + + +
+ Label +
+
+
+ + + +
+ Label +
+
+
+
+ + +
+ +
+ +
+
+ Search + + + +
+
+ + +
+
+ + + + New +
+
+ Price ascending +
+
+ Price descending +
+
+ Rating +
+
+
+ + +
+
+
+ +
+
+ Text + $0 +
+
+
+
+ +
+
+ Text + $0 +
+
+
+
+ +
+
+ Text + $0 +
+
+
+
+ +
+
+ Text + $0 +
+
+
+
+ +
+
+ Text + $0 +
+
+
+
+ +
+
+ Text + $0 +
+
+
+
+
+ + +
+ +
+ + + +
+ + + + + + + + + + + + +
+
+ + +
+ +
+
+ Use cases +
+
+ UI design + UX design + Wireframing + Diagramming + Brainstorming + Online whiteboard + Team collaboration +
+
+ + +
+
+ Explore +
+
+ Design + Prototyping + Development features + Design systems + Collaboration features + Design process + FigJam +
+
+ + +
+
+ Resources +
+
+ Blog + Best practices + Colors + Color wheel + Support + Developers + Resource library +
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/response.txt new file mode 100644 index 00000000..a106115a --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/response.txt @@ -0,0 +1,434 @@ +```html +// filename: index.html + + + + + + Platform Desktop + + + + +
+ +
+ +
+
+ + + +
+
+ + +
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+ + +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+ +
+ +
+
Keywords
+
+
+ Spring + + + +
+
+ Smart + + + +
+
+ Modern + + + +
+
+
+ + +
+
+
+
+ + + +
+ Label +
+
+
+ Description +
+
+
+
+
+ + + +
+ Label +
+
+
+ Description +
+
+
+
+
+ + + +
+ Label +
+
+
+ Description +
+
+
+ + +
+
+ Label +
+ $ + 0-100 +
+
+
+
+
+
+
+
+
+ + +
+
Color
+
+
+
+ + + +
+ Label +
+
+
+ + + +
+ Label +
+
+
+ + + +
+ Label +
+
+
+ + +
+
Size
+
+
+
+ + + +
+ Label +
+
+
+ + + +
+ Label +
+
+
+ + + +
+ Label +
+
+
+
+ + +
+ +
+ +
+
+ Search + + + +
+
+ + +
+
+ + + + New +
+
+ Price ascending +
+
+ Price descending +
+
+ Rating +
+
+
+ + +
+
+
+ +
+
+ Text + $0 +
+
+
+
+ +
+
+ Text + $0 +
+
+
+
+ +
+
+ Text + $0 +
+
+
+
+ +
+
+ Text + $0 +
+
+
+
+ +
+
+ Text + $0 +
+
+
+
+ +
+
+ Text + $0 +
+
+
+
+
+ + +
+ +
+ + + +
+ + + + + + + + + + + + +
+
+ + +
+ +
+
+ Use cases +
+
+ UI design + UX design + Wireframing + Diagramming + Brainstorming + Online whiteboard + Team collaboration +
+
+ + +
+
+ Explore +
+
+ Design + Prototyping + Development features + Design systems + Collaboration features + Design process + FigJam +
+
+ + +
+
+ Resources +
+
+ Blog + Best practices + Colors + Color wheel + Support + Developers + Resource library +
+
+
+
+
+ + +``` + +// interpretations: +- Used flexbox layout for navigation pills and other horizontal arrangements where exact positioning wasn't specified +- Applied standard padding and gap values for component spacing where not explicitly provided in the design tree +- Used CSS Grid for the product card layout to achieve the 3-column arrangement shown in the design +- Positioned slider knobs using absolute positioning within the slider track +- Applied hover effects only where explicitly provided in the [hover]: data \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/result.json b/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/result.json new file mode 100644 index 00000000..adc1b3b0 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-shop/layout-direction-spacing/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "desktop-shop", + "type": "layout-direction-spacing", + "runIndex": 0, + "similarity": 75, + "inputTokens": 23159, + "outputTokens": 13611, + "totalTokens": 36770, + "htmlBytes": 36629, + "htmlLines": 426, + "cssClassCount": 19, + "cssVariableCount": 15, + "timestamp": "2026-03-28T12:14:34.330Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/code-base.png new file mode 100644 index 00000000..fca7a3f1 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/design-tree.txt new file mode 100644 index 00000000..3e6262a8 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/design-tree.txt @@ -0,0 +1,607 @@ +# Design Tree +# Root: 1200px x 1437px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Node1 (COMPONENT, 1200x1437) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Node2 (INSTANCE, 1200x99) [component: Platform=Desktop, State=Default] + component-properties: Platform=Desktop, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 0px; align-items: center; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px + Node3 (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Node4 (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node5 (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Node6 (INSTANCE, 870x32) [component: Direction=Row] + component-properties: Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":-1,"localID":-1}}, Link 6#2194:3=true, Link 4#2194:6=true, Link 3#2194:7=true, Link 5#2194:5=true, Link 7#3529:0=false, Link 2#2194:4=true, Link 1#2194:8=true, Direction=Row + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px /* var:VariableID:9:11259 */; row-gap: 8px; justify-content: flex-end; align-items: flex-start; flex-grow: 1 + Node7 (SLOT, 553x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Node8 (INSTANCE, 84x32) [component: State=Active] + component-properties: Label#156:33=Products, State=Active + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Node9 (TEXT, 68x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Products" + Node10 (INSTANCE, 86x32) [component: State=Default] + component-properties: Label#156:33=Solutions, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Node11 (TEXT, 70x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Solutions" + Node12 (INSTANCE, 103x32) [component: State=Default] + component-properties: Label#156:33=Community, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Node13 (TEXT, 87x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Community" + Node14 (INSTANCE, 95x32) [component: State=Default] + component-properties: Label#156:33=Resources, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Node15 (TEXT, 79x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Node16 (INSTANCE, 68x32) [component: State=Default] + component-properties: Label#156:33=Pricing, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Node17 (TEXT, 52x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Pricing" + Node18 (INSTANCE, 77x32) [component: State=Default] + component-properties: Label#156:33=Contact, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Node19 (TEXT, 61x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Contact" + Node20 (INSTANCE, 178x32) [component: State=Logged Out] + component-properties: State=Logged Out + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center + Node21 (INSTANCE, 83x32) [component: Variant=Neutral, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Sign in, Variant=Neutral, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Node22 (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Sign in" + Node23 (INSTANCE, 83x32) [component: Variant=Primary, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Register, Variant=Primary, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Node24 (TEXT, 63x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Register" + Node25 (INSTANCE, 1200x870) [component: Platform=Desktop] + component-properties: Card Grid#6062:51={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:48={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: row; column-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #009951 /* var:VariableID:3919:36436 */; min-width: 1200px; max-width: 1920px + Node26 (FRAME, 240x676) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden + Node27 (SLOT, 208x644) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Node28 (FRAME, 208x102) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node29 (INSTANCE, 74x22) [component: Text] + component-properties: Text#2104:7=Keywords + style: display: flex; flex-direction: row; align-items: flex-start + Node30 (TEXT, 74x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Keywords" + Node31 (FRAME, 208x68) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 4px /* var:VariableID:9:11258 */; row-gap: 4px /* var:VariableID:9:11258 */; align-items: flex-start; align-self: STRETCH; width: 100%; border-radius: 4px + Node32 (INSTANCE, 89x32) [component: Scheme=Neutral, State=Default, Variant=Secondary] + component-properties: Label#9765:0=Spring, Removable#147:0=true, Scheme=Neutral, State=Default, Variant=Secondary + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:3919:36424 */; border-radius: 8px + Node33 (TEXT, 49x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Spring" + Node34 (INSTANCE, 16x16) [component: X] + style: overflow: hidden + Node35 (VECTOR, 8x8) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Node36 (INSTANCE, 86x32) [component: Scheme=Neutral, State=Default, Variant=Secondary] + component-properties: Label#9765:0=Smart, Removable#147:0=true, Scheme=Neutral, State=Default, Variant=Secondary + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:3919:36424 */; border-radius: 8px + Node37 (TEXT, 46x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Smart" + Node38 (INSTANCE, 16x16) [component: X] + style: overflow: hidden + Node39 (VECTOR, 8x8) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Node40 (INSTANCE, 99x32) [component: Scheme=Neutral, State=Default, Variant=Secondary] + component-properties: Label#9765:0=Modern, Removable#147:0=true, Scheme=Neutral, State=Default, Variant=Secondary + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:3919:36424 */; border-radius: 8px + Node41 (TEXT, 59x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Modern" + Node42 (INSTANCE, 16x16) [component: X] + style: overflow: hidden + Node43 (VECTOR, 8x8) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Node44 (FRAME, 208x156) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node45 (INSTANCE, 208x156) [component: Checkbox Group] + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node46 (INSTANCE, 120x44) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=true, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Node47 (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Node48 (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Node49 (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Node50 (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Node51 (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Node52 (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Node53 (FRAME, 16x16) + style: overflow: hidden + Node54 (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Description" + Node55 (INSTANCE, 120x44) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=true, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Node56 (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Node57 (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Node58 (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Node59 (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Node60 (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Node61 (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Node62 (FRAME, 16x16) + style: overflow: hidden + Node63 (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Description" + Node64 (INSTANCE, 120x44) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=true, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Node65 (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Node66 (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Node67 (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Node68 (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Node69 (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Node70 (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Node71 (FRAME, 16x16) + style: overflow: hidden + Node72 (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Description" + Node73 (INSTANCE, 208x42) [component: State=Default] + component-properties: Label#589:3=Label, Description#589:4=Description, Has Label#589:5=true, Has Description#589:6=false, State=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100%; min-width: 120px + Node74 (FRAME, 208x22) + style: display: flex; flex-direction: row; column-gap: 4px; justify-content: space-between; align-items: flex-start; align-self: STRETCH; width: 100% + Node75 (TEXT, 159x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Node76 (FRAME, 49x20) + style: display: flex; flex-direction: row; align-items: center + Node77 (TEXT, 9x20) + style: /* text-style: Body Small */; font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 19.6px; text-align: right; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + Node78 (TEXT, 40x20) + style: /* text-style: Body Small */; font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 19.6px; text-align: right; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "0-100" + Node79 (FRAME, 208x8) + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; width: 100% + Node80 (FRAME, 208x8) + style: display: flex; flex-direction: row; align-items: center; flex-grow: 1; background: #E6E6E6 /* var:VariableID:3919:36430 */; border-radius: 9999px + Node81 (FRAME, 16x16) + style: background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 9999px; overflow: hidden + Node82 (FRAME, 176x6) + style: display: flex; flex-direction: row; align-items: flex-start; flex-grow: 1; overflow: hidden + Node83 (FRAME, 16x16) + style: background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 9999px; overflow: hidden + Node84 (FRAME, 208x124) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node85 (INSTANCE, 41x22) [component: Text] + component-properties: Text#2104:7=Color + style: display: flex; flex-direction: row; align-items: flex-start + Node86 (TEXT, 41x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color" + Node87 (INSTANCE, 208x90) [component: Checkbox Group] + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node88 (INSTANCE, 120x22) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=false, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Node89 (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Node90 (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Node91 (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Node92 (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Node93 (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Node94 (INSTANCE, 120x22) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=false, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Node95 (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Node96 (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Node97 (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Node98 (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Node99 (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Node100 (INSTANCE, 120x22) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=false, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Node101 (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Node102 (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Node103 (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Node104 (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Node105 (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Node106 (FRAME, 208x124) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node107 (INSTANCE, 32x22) [component: Text] + component-properties: Text#2104:7=Size + style: display: flex; flex-direction: row; align-items: flex-start + Node108 (TEXT, 32x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Size" + Node109 (INSTANCE, 208x90) [component: Checkbox Group] + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node110 (INSTANCE, 120x22) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=false, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Node111 (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Node112 (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Node113 (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Node114 (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Node115 (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Node116 (INSTANCE, 120x22) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=false, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Node117 (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Node118 (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Node119 (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Node120 (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Node121 (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Node122 (INSTANCE, 120x22) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=false, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Node123 (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Node124 (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Node125 (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Node126 (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Node127 (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Node128 (FRAME, 832x806) + style: display: flex; flex-direction: column; row-gap: 48px /* var:VariableID:346:10903 */; align-items: flex-start; flex-grow: 1; border-radius: 8px + Node129 (FRAME, 832x40) + style: display: flex; flex-direction: row; column-gap: 48px; justify-content: space-between; align-items: center; align-self: STRETCH; width: 100% + Node130 (FRAME, 327x40) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Node131 (INSTANCE, 120x40) [component: State=Default, Value Type=Placeholder] + component-properties: Value#29:2=Search, State=Default, Value Type=Placeholder + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; padding: 12px 16px 12px 16px /* var:VariableID:9:11260 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 9999px; overflow: hidden; min-width: 120px + Node132 (TEXT, 64x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Search" + Node133 (INSTANCE, 16x16) [component: Search] + style: overflow: hidden + Node134 (VECTOR, 12x12) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Node135 (INSTANCE, 447x32) [component: Tag Toggle Group] + component-properties: Slot#6031:28={"guid":{"sessionID":6062,"localID":15537}} + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Node136 (SLOT, 447x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Node137 (INSTANCE, 75x32) [component: State=On] + component-properties: Icon#87:4=68:15641, Label#156:33=New, Show Icon#86:12=true, State=On + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 8px + Node138 (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Node139 (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Node140 (TEXT, 35x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "New" + Node141 (INSTANCE, 137x32) [component: State=Off] + component-properties: Show Icon#86:12=true, Icon#87:4=68:15641, Label#156:33=Price ascending, State=Off + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Node142 (TEXT, 121x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36458 */; text: "Price ascending" + Node143 (INSTANCE, 147x32) [component: State=Off] + component-properties: Show Icon#86:12=true, Icon#87:4=68:15641, Label#156:33=Price descending, State=Off + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Node144 (TEXT, 131x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36458 */; text: "Price descending" + Node145 (INSTANCE, 64x32) [component: State=Off] + component-properties: Show Icon#86:12=true, Icon#87:4=68:15641, Label#156:33=Rating, State=Off + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Node146 (TEXT, 48x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36458 */; text: "Rating" + Node147 (SLOT, 832x718) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; align-self: STRETCH; width: 100% + Node148 (INSTANCE, 261x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Node149 (FRAME, 229x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Node150 (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Node151 (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Node152 (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Node153 (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Node154 (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Node155 (INSTANCE, 261x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Node156 (FRAME, 229x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-2@2x.png); object-fit: contain; overflow: hidden + Node157 (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Node158 (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Node159 (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Node160 (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Node161 (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Node162 (INSTANCE, 261x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Node163 (FRAME, 229x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-3@2x.png); object-fit: contain; overflow: hidden + Node164 (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Node165 (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Node166 (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Node167 (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Node168 (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Node169 (INSTANCE, 261x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Node170 (FRAME, 229x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-4@2x.png); object-fit: contain; overflow: hidden + Node171 (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Node172 (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Node173 (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Node174 (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Node175 (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Node176 (INSTANCE, 261x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Node177 (FRAME, 229x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-5@2x.png); object-fit: contain; overflow: hidden + Node178 (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Node179 (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Node180 (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Node181 (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Node182 (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Node183 (INSTANCE, 261x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Node184 (FRAME, 229x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-6@2x.png); object-fit: contain; overflow: hidden + Node185 (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Node186 (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Node187 (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Node188 (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Node189 (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Node190 (INSTANCE, 1200x468) [component: Platform=Desktop] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 16px /* var:VariableID:9:11261 */; row-gap: 16px; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 160px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px; max-width: 1920px + Node191 (SLOT, 262x83) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Node192 (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node193 (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Node194 (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + Node195 (FRAME, 24x24) + Node196 (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node197 (FRAME, 24x24) + style: overflow: hidden + Node198 (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node199 (FRAME, 24x24) + style: overflow: hidden + Node200 (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node201 (FRAME, 24x24) + style: overflow: hidden + Node202 (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node203 (SLOT, 818x276) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; background: #EBFFEE /* var:VariableID:2002:7433 */ + Node204 (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Node205 (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Node206 (INSTANCE, 80x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Node207 (TEXT, 80x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Node208 (SLOT, 144x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Node209 (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node210 (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Node211 (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node212 (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Node213 (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node214 (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Node215 (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node216 (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Node217 (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node218 (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Node219 (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node220 (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Node221 (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node222 (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Node223 (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Node224 (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Node225 (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Node226 (TEXT, 59x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Node227 (SLOT, 168x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Node228 (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node229 (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Node230 (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node231 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Node232 (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node233 (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Node234 (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node235 (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Node236 (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node237 (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Node238 (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node239 (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Node240 (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node241 (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Node242 (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Node243 (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Node244 (INSTANCE, 82x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Node245 (TEXT, 82x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Node246 (SLOT, 123x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Node247 (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node248 (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Node249 (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node250 (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Node251 (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node252 (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Node253 (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node254 (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Node255 (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node256 (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Node257 (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node258 (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Node259 (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node260 (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/diff-base.png new file mode 100644 index 00000000..ac9fe328 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/figma-base.png new file mode 100644 index 00000000..5a8bc968 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/images/image-2@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/images/image-2@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/images/image-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/images/image-3@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/images/image-3@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/images/image-3@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/images/image-4@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/images/image-4@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/images/image-4@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/images/image-5@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/images/image-5@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/images/image-5@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/images/image-6@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/images/image-6@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/images/image-6@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/images/image@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/images/mapping.json new file mode 100644 index 00000000..82ff2605 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/images/mapping.json @@ -0,0 +1,8 @@ +{ + "I175:7426;83:31571;638:13763": "image@2x.png", + "I175:7426;83:31572;638:13763": "image-2@2x.png", + "I175:7426;83:31573;638:13763": "image-3@2x.png", + "I175:7426;83:31574;638:13763": "image-4@2x.png", + "I175:7426;83:31575;638:13763": "image-5@2x.png", + "I175:7426;83:31576;638:13763": "image-6@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/output.html b/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/output.html new file mode 100644 index 00000000..bbd0e330 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/output.html @@ -0,0 +1,701 @@ + + + + + + Design Interface + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+
+ +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+ +
+
+ +
+
+ Keywords +
+
+
+ Spring +
+ + + +
+
+
+ Smart +
+ + + +
+
+
+ Modern +
+ + + +
+
+
+
+ + +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+ Description +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+ Description +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+ Description +
+
+
+
+ + +
+
+ Label +
+ $ + 0-100 +
+
+
+
+
+
+
+
+
+
+ + +
+
+ Color +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+ + +
+
+ Size +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+
+
+ + +
+ +
+
+
+ Search +
+ + + +
+
+
+ +
+
+
+
+ + + +
+ New +
+
+ Price ascending +
+
+ Price descending +
+
+ Rating +
+
+
+
+ + +
+
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+ Use cases +
+
+
+
+ UI design +
+
+ UX design +
+
+ Wireframing +
+
+ Diagramming +
+
+ Brainstorming +
+
+ Online whiteboard +
+
+ Team collaboration +
+
+
+ +
+
+
+ Explore +
+
+
+
+ Design +
+
+ Prototyping +
+
+ Development features +
+
+ Design systems +
+
+ Collaboration features +
+
+ Design process +
+
+ FigJam +
+
+
+ +
+
+
+ Resources +
+
+
+
+ Blog +
+
+ Best practices +
+
+ Colors +
+
+ Color wheel +
+
+ Support +
+
+ Developers +
+
+ Resource library +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/response.txt new file mode 100644 index 00000000..a373c24f --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/response.txt @@ -0,0 +1,704 @@ +```html +// filename: index.html + + + + + + Design Interface + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+
+ +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+ +
+
+ +
+
+ Keywords +
+
+
+ Spring +
+ + + +
+
+
+ Smart +
+ + + +
+
+
+ Modern +
+ + + +
+
+
+
+ + +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+ Description +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+ Description +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+ Description +
+
+
+
+ + +
+
+ Label +
+ $ + 0-100 +
+
+
+
+
+
+
+
+
+
+ + +
+
+ Color +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+ + +
+
+ Size +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+
+
+ + + +
+
+ Label +
+
+
+
+
+
+ + +
+ +
+
+
+ Search +
+ + + +
+
+
+ +
+
+
+
+ + + +
+ New +
+
+ Price ascending +
+
+ Price descending +
+
+ Rating +
+
+
+
+ + +
+
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+ +
+
+ +
+
+
+ Text +
+
+ $0 +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+ Use cases +
+
+
+
+ UI design +
+
+ UX design +
+
+ Wireframing +
+
+ Diagramming +
+
+ Brainstorming +
+
+ Online whiteboard +
+
+ Team collaboration +
+
+
+ +
+
+
+ Explore +
+
+
+
+ Design +
+
+ Prototyping +
+
+ Development features +
+
+ Design systems +
+
+ Collaboration features +
+
+ Design process +
+
+ FigJam +
+
+
+ +
+
+
+ Resources +
+
+
+
+ Blog +
+
+ Best practices +
+
+ Colors +
+
+ Color wheel +
+
+ Support +
+
+ Developers +
+
+ Resource library +
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/result.json b/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/result.json new file mode 100644 index 00000000..98cc3575 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-shop/node-names-hierarchy/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "desktop-shop", + "type": "node-names-hierarchy", + "runIndex": 0, + "similarity": 84, + "inputTokens": 29475, + "outputTokens": 18868, + "totalTokens": 48343, + "htmlBytes": 56699, + "htmlLines": 701, + "cssClassCount": 15, + "cssVariableCount": 15, + "timestamp": "2026-03-28T12:21:20.676Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/code-base.png new file mode 100644 index 00000000..1f1846ac Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/design-tree.txt new file mode 100644 index 00000000..c87eeda6 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/design-tree.txt @@ -0,0 +1,607 @@ +# Design Tree +# Root: 1200px x 1437px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Desktop (COMPONENT, 1200x1437) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 1200x99) [component: Platform=Desktop, State=Default] + component-properties: Platform=Desktop, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 0px; align-items: center; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Navigation Pill List (INSTANCE, 870x32) [component: Direction=Row] + component-properties: Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":-1,"localID":-1}}, Link 6#2194:3=true, Link 4#2194:6=true, Link 3#2194:7=true, Link 5#2194:5=true, Link 7#3529:0=false, Link 2#2194:4=true, Link 1#2194:8=true, Direction=Row + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px /* var:VariableID:9:11259 */; row-gap: 8px; justify-content: flex-end; align-items: flex-start; flex-grow: 1 + Slot (SLOT, 553x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Navigation Pill (INSTANCE, 84x32) [component: State=Active] + component-properties: Label#156:33=Products, State=Active + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 68x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Products" + Navigation Pill (INSTANCE, 86x32) [component: State=Default] + component-properties: Label#156:33=Solutions, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 70x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Solutions" + Navigation Pill (INSTANCE, 103x32) [component: State=Default] + component-properties: Label#156:33=Community, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 87x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Community" + Navigation Pill (INSTANCE, 95x32) [component: State=Default] + component-properties: Label#156:33=Resources, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 79x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Navigation Pill (INSTANCE, 68x32) [component: State=Default] + component-properties: Label#156:33=Pricing, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 52x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Pricing" + Navigation Pill (INSTANCE, 77x32) [component: State=Default] + component-properties: Label#156:33=Contact, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 61x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Contact" + Header Auth (INSTANCE, 178x32) [component: State=Logged Out] + component-properties: State=Logged Out + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center + Button (INSTANCE, 83x32) [component: Variant=Neutral, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Sign in, Variant=Neutral, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Sign in" + Button (INSTANCE, 83x32) [component: Variant=Primary, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Register, Variant=Primary, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 63x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Register" + Page Product Results (INSTANCE, 1200x870) [component: Platform=Desktop] + component-properties: Card Grid#6062:51={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:48={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: row; column-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #009951 /* var:VariableID:3919:36436 */; min-width: 1200px; max-width: 1920px + Filter Menu (FRAME, 240x676) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden + Slot (SLOT, 208x644) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Section (FRAME, 208x102) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text (INSTANCE, 74x22) [component: Text] + component-properties: Text#2104:7=Keywords + style: display: flex; flex-direction: row; align-items: flex-start + Text (TEXT, 74x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Keywords" + Keyword List (FRAME, 208x68) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 4px /* var:VariableID:9:11258 */; row-gap: 4px /* var:VariableID:9:11258 */; align-items: flex-start; align-self: STRETCH; width: 100%; border-radius: 4px + Tag (INSTANCE, 89x32) [component: Scheme=Neutral, State=Default, Variant=Secondary] + component-properties: Label#9765:0=Spring, Removable#147:0=true, Scheme=Neutral, State=Default, Variant=Secondary + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:3919:36424 */; border-radius: 8px + Tag (TEXT, 49x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Spring" + X (INSTANCE, 16x16) [component: X] + style: overflow: hidden + Icon (VECTOR, 8x8) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Tag (INSTANCE, 86x32) [component: Scheme=Neutral, State=Default, Variant=Secondary] + component-properties: Label#9765:0=Smart, Removable#147:0=true, Scheme=Neutral, State=Default, Variant=Secondary + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:3919:36424 */; border-radius: 8px + Tag (TEXT, 46x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Smart" + X (INSTANCE, 16x16) [component: X] + style: overflow: hidden + Icon (VECTOR, 8x8) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Tag (INSTANCE, 99x32) [component: Scheme=Neutral, State=Default, Variant=Secondary] + component-properties: Label#9765:0=Modern, Removable#147:0=true, Scheme=Neutral, State=Default, Variant=Secondary + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:3919:36424 */; border-radius: 8px + Tag (TEXT, 59x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Modern" + X (INSTANCE, 16x16) [component: X] + style: overflow: hidden + Icon (VECTOR, 8x8) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Section (FRAME, 208x156) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100% + Checkbox Group (INSTANCE, 208x156) [component: Checkbox Group] + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Checkbox Field (INSTANCE, 120x44) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=true, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Description Row (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Space (FRAME, 16x16) + style: overflow: hidden + Description (TEXT, 92x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Description" + Checkbox Field (INSTANCE, 120x44) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=true, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Description Row (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Space (FRAME, 16x16) + style: overflow: hidden + Description (TEXT, 92x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Description" + Checkbox Field (INSTANCE, 120x44) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=true, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Description Row (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Space (FRAME, 16x16) + style: overflow: hidden + Description (TEXT, 92x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Description" + Slider Field (INSTANCE, 208x42) [component: State=Default] + component-properties: Label#589:3=Label, Description#589:4=Description, Has Label#589:5=true, Has Description#589:6=false, State=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100%; min-width: 120px + Label (FRAME, 208x22) + style: display: flex; flex-direction: row; column-gap: 4px; justify-content: space-between; align-items: flex-start; align-self: STRETCH; width: 100% + Label (TEXT, 159x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Slider Output (FRAME, 49x20) + style: display: flex; flex-direction: row; align-items: center + Prefix (TEXT, 9x20) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 19.6px; text-align: right; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + Value (TEXT, 40x20) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 19.6px; text-align: right; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "0-100" + Slider (FRAME, 208x8) + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; width: 100% + Block (FRAME, 208x8) + style: display: flex; flex-direction: row; align-items: center; flex-grow: 1; background: #E6E6E6 /* var:VariableID:3919:36430 */; border-radius: 9999px + Knob Start (FRAME, 16x16) + style: background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 9999px; overflow: hidden + Slider (FRAME, 176x6) + style: display: flex; flex-direction: row; align-items: flex-start; flex-grow: 1; overflow: hidden + Knob End (FRAME, 16x16) + style: background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 9999px; overflow: hidden + Section (FRAME, 208x124) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text (INSTANCE, 41x22) [component: Text] + component-properties: Text#2104:7=Color + style: display: flex; flex-direction: row; align-items: flex-start + Text (TEXT, 41x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color" + Checkbox Group (INSTANCE, 208x90) [component: Checkbox Group] + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Checkbox Field (INSTANCE, 120x22) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=false, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Checkbox Field (INSTANCE, 120x22) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=false, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Checkbox Field (INSTANCE, 120x22) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=false, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Section (FRAME, 208x124) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text (INSTANCE, 32x22) [component: Text] + component-properties: Text#2104:7=Size + style: display: flex; flex-direction: row; align-items: flex-start + Text (TEXT, 32x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Size" + Checkbox Group (INSTANCE, 208x90) [component: Checkbox Group] + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Checkbox Field (INSTANCE, 120x22) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=false, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Checkbox Field (INSTANCE, 120x22) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=false, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Checkbox Field (INSTANCE, 120x22) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=false, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Section Product Grid (FRAME, 832x806) + style: display: flex; flex-direction: column; row-gap: 48px /* var:VariableID:346:10903 */; align-items: flex-start; flex-grow: 1; border-radius: 8px + Filter Bar (FRAME, 832x40) + style: display: flex; flex-direction: row; column-gap: 48px; justify-content: space-between; align-items: center; align-self: STRETCH; width: 100% + Search Filter (FRAME, 327x40) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Search (INSTANCE, 120x40) [component: State=Default, Value Type=Placeholder] + component-properties: Value#29:2=Search, State=Default, Value Type=Placeholder + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; padding: 12px 16px 12px 16px /* var:VariableID:9:11260 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 9999px; overflow: hidden; min-width: 120px + Value (TEXT, 64x16) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Search" + Search (INSTANCE, 16x16) [component: Search] + style: overflow: hidden + Icon (VECTOR, 12x12) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Tag Toggle Group (INSTANCE, 447x32) [component: Tag Toggle Group] + component-properties: Slot#6031:28={"guid":{"sessionID":6062,"localID":15537}} + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Slot (SLOT, 447x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Tag Toggle (INSTANCE, 75x32) [component: State=On] + component-properties: Icon#87:4=68:15641, Label#156:33=New, Show Icon#86:12=true, State=On + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 8px + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Title (TEXT, 35x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "New" + Tag Toggle (INSTANCE, 137x32) [component: State=Off] + component-properties: Show Icon#86:12=true, Icon#87:4=68:15641, Label#156:33=Price ascending, State=Off + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 121x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36458 */; text: "Price ascending" + Tag Toggle (INSTANCE, 147x32) [component: State=Off] + component-properties: Show Icon#86:12=true, Icon#87:4=68:15641, Label#156:33=Price descending, State=Off + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 131x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36458 */; text: "Price descending" + Tag Toggle (INSTANCE, 64x32) [component: State=Off] + component-properties: Show Icon#86:12=true, Icon#87:4=68:15641, Label#156:33=Rating, State=Off + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 48x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36458 */; text: "Rating" + Card Grid (SLOT, 832x718) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; align-self: STRETCH; width: 100% + Product Info Card (INSTANCE, 261x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 229x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 261x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 229x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-2@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 261x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 229x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-3@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 261x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 229x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-4@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 261x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 229x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-5@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 261x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 229x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-6@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Footer (INSTANCE, 1200x468) [component: Platform=Desktop] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 16px /* var:VariableID:9:11261 */; row-gap: 16px; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 160px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px; max-width: 1920px + Title (SLOT, 262x83) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Slot (SLOT, 818x276) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; background: #EBFFEE /* var:VariableID:2002:7433 */ + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 80x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 80x22) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 72x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 78x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 92x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 100x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 105x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 138x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 144x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 53x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 167x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 120x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 168x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 117x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 55x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 82x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 82x22) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 34x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 109x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 49x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 90x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 61x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 86x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 123x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/diff-base.png new file mode 100644 index 00000000..5629aa8e Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/figma-base.png new file mode 100644 index 00000000..5a8bc968 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/images/image-2@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/images/image-2@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/images/image-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/images/image-3@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/images/image-3@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/images/image-3@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/images/image-4@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/images/image-4@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/images/image-4@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/images/image-5@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/images/image-5@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/images/image-5@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/images/image-6@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/images/image-6@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/images/image-6@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/images/image@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/images/mapping.json new file mode 100644 index 00000000..82ff2605 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/images/mapping.json @@ -0,0 +1,8 @@ +{ + "I175:7426;83:31571;638:13763": "image@2x.png", + "I175:7426;83:31572;638:13763": "image-2@2x.png", + "I175:7426;83:31573;638:13763": "image-3@2x.png", + "I175:7426;83:31574;638:13763": "image-4@2x.png", + "I175:7426;83:31575;638:13763": "image-5@2x.png", + "I175:7426;83:31576;638:13763": "image-6@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/output.html b/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/output.html new file mode 100644 index 00000000..4ee06d1d --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/output.html @@ -0,0 +1,646 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+
+ +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+ +
+
+ +
+
+ Keywords +
+
+
+ Spring +
+ + + +
+
+
+ Smart +
+ + + +
+
+
+ Modern +
+ + + +
+
+
+
+ + +
+
+
+
+
+ + + +
+ Label +
+
+
+ Description +
+
+
+
+
+ + + +
+ Label +
+
+
+ Description +
+
+
+
+
+ + + +
+ Label +
+
+
+ Description +
+
+
+
+ + +
+
+ Label +
+ $ + 0-100 +
+
+
+
+
+
+
+
+
+
+ + +
+
+ Color +
+
+
+
+
+ + + +
+ Label +
+
+
+
+
+ + + +
+ Label +
+
+
+
+
+ + + +
+ Label +
+
+
+
+ + +
+
+ Size +
+
+
+
+
+ + + +
+ Label +
+
+
+
+
+ + + +
+ Label +
+
+
+
+
+ + + +
+ Label +
+
+
+
+
+
+ + +
+ +
+
+
+ Search +
+ + + +
+
+
+
+
+
+ + + + New +
+
+ Price ascending +
+
+ Price descending +
+
+ Rating +
+
+
+
+ + +
+
+ +
+
+ Text +
+
+ $0 +
+
+
+
+ +
+
+ Text +
+
+ $0 +
+
+
+
+ +
+
+ Text +
+
+ $0 +
+
+
+
+ +
+
+ Text +
+
+ $0 +
+
+
+
+ +
+
+ Text +
+
+ $0 +
+
+
+
+ +
+
+ Text +
+
+ $0 +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+
+
+ Use cases +
+
+
+
+ UI design +
+
+ UX design +
+
+ Wireframing +
+
+ Diagramming +
+
+ Brainstorming +
+
+ Online whiteboard +
+
+ Team collaboration +
+
+
+
+
+
+ Explore +
+
+
+
+ Design +
+
+ Prototyping +
+
+ Development features +
+
+ Design systems +
+
+ Collaboration features +
+
+ Design process +
+
+ FigJam +
+
+
+
+
+
+ Resources +
+
+
+
+ Blog +
+
+ Best practices +
+
+ Colors +
+
+ Color wheel +
+
+ Support +
+
+ Developers +
+
+ Resource library +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/response.txt new file mode 100644 index 00000000..c01e39c3 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/response.txt @@ -0,0 +1,649 @@ +```html +// filename: index.html + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+
+ +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+ +
+
+ +
+
+ Keywords +
+
+
+ Spring +
+ + + +
+
+
+ Smart +
+ + + +
+
+
+ Modern +
+ + + +
+
+
+
+ + +
+
+
+
+
+ + + +
+ Label +
+
+
+ Description +
+
+
+
+
+ + + +
+ Label +
+
+
+ Description +
+
+
+
+
+ + + +
+ Label +
+
+
+ Description +
+
+
+
+ + +
+
+ Label +
+ $ + 0-100 +
+
+
+
+
+
+
+
+
+
+ + +
+
+ Color +
+
+
+
+
+ + + +
+ Label +
+
+
+
+
+ + + +
+ Label +
+
+
+
+
+ + + +
+ Label +
+
+
+
+ + +
+
+ Size +
+
+
+
+
+ + + +
+ Label +
+
+
+
+
+ + + +
+ Label +
+
+
+
+
+ + + +
+ Label +
+
+
+
+
+
+ + +
+ +
+
+
+ Search +
+ + + +
+
+
+
+
+
+ + + + New +
+
+ Price ascending +
+
+ Price descending +
+
+ Rating +
+
+
+
+ + +
+
+ +
+
+ Text +
+
+ $0 +
+
+
+
+ +
+
+ Text +
+
+ $0 +
+
+
+
+ +
+
+ Text +
+
+ $0 +
+
+
+
+ +
+
+ Text +
+
+ $0 +
+
+
+
+ +
+
+ Text +
+
+ $0 +
+
+
+
+ +
+
+ Text +
+
+ $0 +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+
+
+ Use cases +
+
+
+
+ UI design +
+
+ UX design +
+
+ Wireframing +
+
+ Diagramming +
+
+ Brainstorming +
+
+ Online whiteboard +
+
+ Team collaboration +
+
+
+
+
+
+ Explore +
+
+
+
+ Design +
+
+ Prototyping +
+
+ Development features +
+
+ Design systems +
+
+ Collaboration features +
+
+ Design process +
+
+ FigJam +
+
+
+
+
+
+ Resources +
+
+
+
+ Blog +
+
+ Best practices +
+
+ Colors +
+
+ Color wheel +
+
+ Support +
+
+ Developers +
+
+ Resource library +
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/result.json b/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/result.json new file mode 100644 index 00000000..20d67133 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-shop/style-references/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "desktop-shop", + "type": "style-references", + "runIndex": 0, + "similarity": 82, + "inputTokens": 28522, + "outputTokens": 19256, + "totalTokens": 47778, + "htmlBytes": 55907, + "htmlLines": 646, + "cssClassCount": 15, + "cssVariableCount": 22, + "timestamp": "2026-03-28T12:27:35.849Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/code-base.png new file mode 100644 index 00000000..45d14f53 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/design-tree.txt new file mode 100644 index 00000000..16b031fb --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/design-tree.txt @@ -0,0 +1,607 @@ +# Design Tree +# Root: 1200px x 1437px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Desktop (COMPONENT, 1200x1437) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF; overflow: hidden + Header (INSTANCE, 1200x99) [component: Platform=Desktop, State=Default] + component-properties: Platform=Desktop, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 0px; align-items: center; align-self: STRETCH; padding: 32px 32px 32px 32px; width: 100%; background: #FFFFFF; border-bottom: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Navigation Pill List (INSTANCE, 870x32) [component: Direction=Row] + component-properties: Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":-1,"localID":-1}}, Link 6#2194:3=true, Link 4#2194:6=true, Link 3#2194:7=true, Link 5#2194:5=true, Link 7#3529:0=false, Link 2#2194:4=true, Link 1#2194:8=true, Direction=Row + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px; row-gap: 8px; justify-content: flex-end; align-items: flex-start; flex-grow: 1 + Slot (SLOT, 553x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Navigation Pill (INSTANCE, 84x32) [component: State=Active] + component-properties: Label#156:33=Products, State=Active + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; background: #F5F5F5; border-radius: 8px + Title (TEXT, 68x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Products" + Navigation Pill (INSTANCE, 86x32) [component: State=Default] + component-properties: Label#156:33=Solutions, State=Default + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 8px + Title (TEXT, 70x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Solutions" + Navigation Pill (INSTANCE, 103x32) [component: State=Default] + component-properties: Label#156:33=Community, State=Default + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 8px + Title (TEXT, 87x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Community" + Navigation Pill (INSTANCE, 95x32) [component: State=Default] + component-properties: Label#156:33=Resources, State=Default + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 8px + Title (TEXT, 79x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Resources" + Navigation Pill (INSTANCE, 68x32) [component: State=Default] + component-properties: Label#156:33=Pricing, State=Default + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 8px + Title (TEXT, 52x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Pricing" + Navigation Pill (INSTANCE, 77x32) [component: State=Default] + component-properties: Label#156:33=Contact, State=Default + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 8px + Title (TEXT, 61x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Contact" + Header Auth (INSTANCE, 178x32) [component: State=Logged Out] + component-properties: State=Logged Out + style: display: flex; flex-direction: row; column-gap: 12px; align-items: center + Button (INSTANCE, 83x32) [component: Variant=Neutral, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Sign in, Variant=Neutral, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px; background: #E3E3E3; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E; text: "Sign in" + Button (INSTANCE, 83x32) [component: Variant=Primary, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Register, Variant=Primary, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px; background: #2C2C2C; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 63x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5; text: "Register" + Page Product Results (INSTANCE, 1200x870) [component: Platform=Desktop] + component-properties: Card Grid#6062:51={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:48={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: row; column-gap: 64px; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 32px 32px; width: 100%; background: #009951; min-width: 1200px; max-width: 1920px + Filter Menu (FRAME, 240x676) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; padding: 16px 16px 16px 16px; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden + Slot (SLOT, 208x644) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Section (FRAME, 208x102) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start; align-self: STRETCH; width: 100% + Text (INSTANCE, 74x22) [component: Text] + component-properties: Text#2104:7=Keywords + style: display: flex; flex-direction: row; align-items: flex-start + Text (TEXT, 74x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Keywords" + Keyword List (FRAME, 208x68) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 4px; row-gap: 4px; align-items: flex-start; align-self: STRETCH; width: 100%; border-radius: 4px + Tag (INSTANCE, 89x32) [component: Scheme=Neutral, State=Default, Variant=Secondary] + component-properties: Label#9765:0=Spring, Removable#147:0=true, Scheme=Neutral, State=Default, Variant=Secondary + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; background: #F5F5F5; border-radius: 8px + Tag (TEXT, 49x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E; text: "Spring" + X (INSTANCE, 16x16) [component: X] + style: overflow: hidden + Icon (VECTOR, 8x8) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Tag (INSTANCE, 86x32) [component: Scheme=Neutral, State=Default, Variant=Secondary] + component-properties: Label#9765:0=Smart, Removable#147:0=true, Scheme=Neutral, State=Default, Variant=Secondary + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; background: #F5F5F5; border-radius: 8px + Tag (TEXT, 46x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E; text: "Smart" + X (INSTANCE, 16x16) [component: X] + style: overflow: hidden + Icon (VECTOR, 8x8) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Tag (INSTANCE, 99x32) [component: Scheme=Neutral, State=Default, Variant=Secondary] + component-properties: Label#9765:0=Modern, Removable#147:0=true, Scheme=Neutral, State=Default, Variant=Secondary + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; background: #F5F5F5; border-radius: 8px + Tag (TEXT, 59x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E; text: "Modern" + X (INSTANCE, 16x16) [component: X] + style: overflow: hidden + Icon (VECTOR, 8x8) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Section (FRAME, 208x156) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; align-self: STRETCH; width: 100% + Checkbox Group (INSTANCE, 208x156) [component: Checkbox Group] + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start; align-self: STRETCH; width: 100% + Checkbox Field (INSTANCE, 120x44) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=true, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Label" + Description Row (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px; align-items: center; min-width: 120px + Space (FRAME, 16x16) + style: overflow: hidden + Description (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575; text: "Description" + Checkbox Field (INSTANCE, 120x44) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=true, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Label" + Description Row (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px; align-items: center; min-width: 120px + Space (FRAME, 16x16) + style: overflow: hidden + Description (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575; text: "Description" + Checkbox Field (INSTANCE, 120x44) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=true, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Label" + Description Row (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px; align-items: center; min-width: 120px + Space (FRAME, 16x16) + style: overflow: hidden + Description (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575; text: "Description" + Slider Field (INSTANCE, 208x42) [component: State=Default] + component-properties: Label#589:3=Label, Description#589:4=Description, Has Label#589:5=true, Has Description#589:6=false, State=Default + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start; align-self: STRETCH; width: 100%; min-width: 120px + Label (FRAME, 208x22) + style: display: flex; flex-direction: row; column-gap: 4px; justify-content: space-between; align-items: flex-start; align-self: STRETCH; width: 100% + Label (TEXT, 159x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Label" + Slider Output (FRAME, 49x20) + style: display: flex; flex-direction: row; align-items: center + Prefix (TEXT, 9x20) + style: /* text-style: Body Small */; font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 19.6px; text-align: right; color: #1E1E1E; text: "$" + Value (TEXT, 40x20) + style: /* text-style: Body Small */; font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 19.6px; text-align: right; color: #1E1E1E; text: "0-100" + Slider (FRAME, 208x8) + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; width: 100% + Block (FRAME, 208x8) + style: display: flex; flex-direction: row; align-items: center; flex-grow: 1; background: #E6E6E6; border-radius: 9999px + Knob Start (FRAME, 16x16) + style: background: #2C2C2C; border-radius: 9999px; overflow: hidden + Slider (FRAME, 176x6) + style: display: flex; flex-direction: row; align-items: flex-start; flex-grow: 1; overflow: hidden + Knob End (FRAME, 16x16) + style: background: #2C2C2C; border-radius: 9999px; overflow: hidden + Section (FRAME, 208x124) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start; align-self: STRETCH; width: 100% + Text (INSTANCE, 41x22) [component: Text] + component-properties: Text#2104:7=Color + style: display: flex; flex-direction: row; align-items: flex-start + Text (TEXT, 41x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Color" + Checkbox Group (INSTANCE, 208x90) [component: Checkbox Group] + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start; align-self: STRETCH; width: 100% + Checkbox Field (INSTANCE, 120x22) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=false, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Label" + Checkbox Field (INSTANCE, 120x22) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=false, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Label" + Checkbox Field (INSTANCE, 120x22) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=false, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Label" + Section (FRAME, 208x124) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start; align-self: STRETCH; width: 100% + Text (INSTANCE, 32x22) [component: Text] + component-properties: Text#2104:7=Size + style: display: flex; flex-direction: row; align-items: flex-start + Text (TEXT, 32x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Size" + Checkbox Group (INSTANCE, 208x90) [component: Checkbox Group] + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start; align-self: STRETCH; width: 100% + Checkbox Field (INSTANCE, 120x22) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=false, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Label" + Checkbox Field (INSTANCE, 120x22) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=false, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Label" + Checkbox Field (INSTANCE, 120x22) [component: State=Default, Value Type=Checked] + component-properties: Label#373:9=Label, Description#280:81=Description, Has Description#31:31=false, State=Default, Value Type=Checked + style: display: flex; flex-direction: column; align-items: flex-start + Checkbox and Label (FRAME, 120x22) + style: display: flex; flex-direction: row; column-gap: 12px; align-items: center; min-width: 120px + Checkbox (FRAME, 16x16) + style: display: flex; flex-direction: row; column-gap: 10px; justify-content: center; align-items: center; background: #2C2C2C; border-radius: 4px; overflow: hidden + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Label (TEXT, 92x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Label" + Section Product Grid (FRAME, 832x806) + style: display: flex; flex-direction: column; row-gap: 48px; align-items: flex-start; flex-grow: 1; border-radius: 8px + Filter Bar (FRAME, 832x40) + style: display: flex; flex-direction: row; column-gap: 48px; justify-content: space-between; align-items: center; align-self: STRETCH; width: 100% + Search Filter (FRAME, 327x40) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Search (INSTANCE, 120x40) [component: State=Default, Value Type=Placeholder] + component-properties: Value#29:2=Search, State=Default, Value Type=Placeholder + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center; padding: 12px 16px 12px 16px; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 9999px; overflow: hidden; min-width: 120px + Value (TEXT, 64x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #B3B3B3; text: "Search" + Search (INSTANCE, 16x16) [component: Search] + style: overflow: hidden + Icon (VECTOR, 12x12) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Tag Toggle Group (INSTANCE, 447x32) [component: Tag Toggle Group] + component-properties: Slot#6031:28={"guid":{"sessionID":6062,"localID":15537}} + style: display: flex; flex-direction: row; column-gap: 8px; align-items: flex-start + Slot (SLOT, 447x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Tag Toggle (INSTANCE, 75x32) [component: State=On] + component-properties: Icon#87:4=68:15641, Label#156:33=New, Show Icon#86:12=true, State=On + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; background: #2C2C2C; border-radius: 8px + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Title (TEXT, 35x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #F5F5F5; text: "New" + Tag Toggle (INSTANCE, 137x32) [component: State=Off] + component-properties: Show Icon#86:12=true, Icon#87:4=68:15641, Label#156:33=Price ascending, State=Off + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; background: #F5F5F5; border-radius: 8px + Title (TEXT, 121x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #757575; text: "Price ascending" + Tag Toggle (INSTANCE, 147x32) [component: State=Off] + component-properties: Show Icon#86:12=true, Icon#87:4=68:15641, Label#156:33=Price descending, State=Off + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; background: #F5F5F5; border-radius: 8px + Title (TEXT, 131x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #757575; text: "Price descending" + Tag Toggle (INSTANCE, 64x32) [component: State=Off] + component-properties: Show Icon#86:12=true, Icon#87:4=68:15641, Label#156:33=Rating, State=Off + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; background: #F5F5F5; border-radius: 8px + Title (TEXT, 48x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #757575; text: "Rating" + Card Grid (SLOT, 832x718) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 24px; align-items: center; align-self: STRETCH; width: 100% + Product Info Card (INSTANCE, 261x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 229x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "$0" + Product Info Card (INSTANCE, 261x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 229x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3; content-image: url(images/image-2@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "$0" + Product Info Card (INSTANCE, 261x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 229x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3; content-image: url(images/image-3@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "$0" + Product Info Card (INSTANCE, 261x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 229x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3; content-image: url(images/image-4@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "$0" + Product Info Card (INSTANCE, 261x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 229x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3; content-image: url(images/image-5@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "$0" + Product Info Card (INSTANCE, 261x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 229x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3; content-image: url(images/image-6@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "$0" + Footer (INSTANCE, 1200x468) [component: Platform=Desktop] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 16px; row-gap: 16px; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 160px 32px; width: 100%; background: #5A5A5A; border-top: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px; max-width: 1920px + Title (SLOT, 262x83) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; background: #CFF7D3; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E; svg: + Slot (SLOT, 818x276) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; background: #EBFFEE + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px; width: 100% + Text Strong (INSTANCE, 80x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 80x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Use cases" + Slot (SLOT, 144x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Team collaboration" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px; width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Explore" + Slot (SLOT, 168x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "FigJam" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px; width: 100% + Text Strong (INSTANCE, 82x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 82x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Resources" + Slot (SLOT, 123x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/diff-base.png new file mode 100644 index 00000000..135be7ef Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/figma-base.png new file mode 100644 index 00000000..5a8bc968 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/images/image-2@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/images/image-2@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/images/image-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/images/image-3@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/images/image-3@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/images/image-3@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/images/image-4@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/images/image-4@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/images/image-4@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/images/image-5@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/images/image-5@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/images/image-5@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/images/image-6@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/images/image-6@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/images/image-6@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/images/image@2x.png new file mode 100644 index 00000000..8998087b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/images/mapping.json new file mode 100644 index 00000000..82ff2605 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/images/mapping.json @@ -0,0 +1,8 @@ +{ + "I175:7426;83:31571;638:13763": "image@2x.png", + "I175:7426;83:31572;638:13763": "image-2@2x.png", + "I175:7426;83:31573;638:13763": "image-3@2x.png", + "I175:7426;83:31574;638:13763": "image-4@2x.png", + "I175:7426;83:31575;638:13763": "image-5@2x.png", + "I175:7426;83:31576;638:13763": "image-6@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/output.html b/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/output.html new file mode 100644 index 00000000..2ad8335a --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/output.html @@ -0,0 +1,614 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+
+ +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+ +
+
+ +
+ Keywords +
+
+ Spring + + + +
+
+ Smart + + + +
+
+ Modern + + + +
+
+
+ + +
+
+
+
+
+ + + +
+ Label +
+
+
+ Description +
+
+
+
+
+ + + +
+ Label +
+
+
+ Description +
+
+
+
+
+ + + +
+ Label +
+
+
+ Description +
+
+
+
+ + +
+
+ Label +
+ $ + 0-100 +
+
+
+
+
+
+
+
+
+
+ + +
+ Color +
+
+
+
+ + + +
+ Label +
+
+
+
+
+ + + +
+ Label +
+
+
+
+
+ + + +
+ Label +
+
+
+
+ + +
+ Size +
+
+
+
+ + + +
+ Label +
+
+
+
+
+ + + +
+ Label +
+
+
+
+
+ + + +
+ Label +
+
+
+
+
+
+ + +
+ +
+
+
+ Search + + + +
+
+ +
+
+
+ + + + New +
+
+ Price ascending +
+
+ Price descending +
+
+ Rating +
+
+
+
+ + +
+
+ +
+ Text + $0 +
+
+
+ +
+ Text + $0 +
+
+
+ +
+ Text + $0 +
+
+
+ +
+ Text + $0 +
+
+
+ +
+ Text + $0 +
+
+
+ +
+ Text + $0 +
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+ Use cases +
+
+
+ UI design +
+
+ UX design +
+
+ Wireframing +
+
+ Diagramming +
+
+ Brainstorming +
+
+ Online whiteboard +
+
+ Team collaboration +
+
+
+ +
+
+ Explore +
+
+
+ Design +
+
+ Prototyping +
+
+ Development features +
+
+ Design systems +
+
+ Collaboration features +
+
+ Design process +
+
+ FigJam +
+
+
+ +
+
+ Resources +
+
+
+ Blog +
+
+ Best practices +
+
+ Colors +
+
+ Color wheel +
+
+ Support +
+
+ Developers +
+
+ Resource library +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/response.txt new file mode 100644 index 00000000..8b4e0ccf --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/response.txt @@ -0,0 +1,617 @@ +```html +// filename: index.html + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+
+ +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+ +
+
+ +
+ Keywords +
+
+ Spring + + + +
+
+ Smart + + + +
+
+ Modern + + + +
+
+
+ + +
+
+
+
+
+ + + +
+ Label +
+
+
+ Description +
+
+
+
+
+ + + +
+ Label +
+
+
+ Description +
+
+
+
+
+ + + +
+ Label +
+
+
+ Description +
+
+
+
+ + +
+
+ Label +
+ $ + 0-100 +
+
+
+
+
+
+
+
+
+
+ + +
+ Color +
+
+
+
+ + + +
+ Label +
+
+
+
+
+ + + +
+ Label +
+
+
+
+
+ + + +
+ Label +
+
+
+
+ + +
+ Size +
+
+
+
+ + + +
+ Label +
+
+
+
+
+ + + +
+ Label +
+
+
+
+
+ + + +
+ Label +
+
+
+
+
+
+ + +
+ +
+
+
+ Search + + + +
+
+ +
+
+
+ + + + New +
+
+ Price ascending +
+
+ Price descending +
+
+ Rating +
+
+
+
+ + +
+
+ +
+ Text + $0 +
+
+
+ +
+ Text + $0 +
+
+
+ +
+ Text + $0 +
+
+
+ +
+ Text + $0 +
+
+
+ +
+ Text + $0 +
+
+
+ +
+ Text + $0 +
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+ Use cases +
+
+
+ UI design +
+
+ UX design +
+
+ Wireframing +
+
+ Diagramming +
+
+ Brainstorming +
+
+ Online whiteboard +
+
+ Team collaboration +
+
+
+ +
+
+ Explore +
+
+
+ Design +
+
+ Prototyping +
+
+ Development features +
+
+ Design systems +
+
+ Collaboration features +
+
+ Design process +
+
+ FigJam +
+
+
+ +
+
+ Resources +
+
+
+ Blog +
+
+ Best practices +
+
+ Colors +
+
+ Color wheel +
+
+ Support +
+
+ Developers +
+
+ Resource library +
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/result.json b/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/result.json new file mode 100644 index 00000000..c23ce0f9 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-shop/variable-references/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "desktop-shop", + "type": "variable-references", + "runIndex": 0, + "similarity": 84, + "inputTokens": 26120, + "outputTokens": 17115, + "totalTokens": 43235, + "htmlBytes": 48941, + "htmlLines": 614, + "cssClassCount": 19, + "cssVariableCount": 13, + "timestamp": "2026-03-28T12:24:21.039Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/code-base.png new file mode 100644 index 00000000..12a2109f Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/design-tree.txt new file mode 100644 index 00000000..fcbded27 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/design-tree.txt @@ -0,0 +1,330 @@ +# Design Tree +# Root: 375px x 3004px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Mobile (COMPONENT, 375x3004) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 375x84) [component: Platform=Mobile, State=Default] + component-properties: Platform=Mobile, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 0px; justify-content: space-between; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=68:15863, Variant=Subtle, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Menu (INSTANCE, 20x20) [component: Menu] + style: overflow: hidden + Icon (VECTOR, 15x10) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Hero Image (INSTANCE, 375x496) [component: Platform=Mobile] + component-properties: Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 32px /* var:VariableID:346:10902 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 160px 24px 160px 24px /* var:VariableID:346:10896 */; width: 100%; background: rgba(255, 255, 255, 0.800000011920929) /* var:VariableID:7753:3701 */; background-image: url(images/hero-image@2x.png); background-position: center; background-repeat: no-repeat; background-size: cover; max-width: 1200px + Text Content Title (INSTANCE, 117x104) [component: Align=Center] + component-properties: Has Subtitle#2153:13=true, Subtitle#2153:12=Subtitle, Title#2153:14=Title, Align=Center + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center + Title (TEXT, 117x58) + style: align-self: STRETCH; width: 100%; /* text-style: Title Page */; font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 57.6px; letter-spacing: -0.96px; text-align: center; color: #0C0C0D /* var:VariableID:9643:10770 */; text: "Title" + Subtitle (TEXT, 117x38) + style: align-self: STRETCH; width: 100%; /* text-style: Subtitle */; font-family: "Inter"; font-weight: 400; font-size: 32px; line-height: 38.4px; text-align: center; display: flex; align-items: center; color: #0C0C0D /* var:VariableID:9643:10770 */; text: "Subtitle" + Button Group (INSTANCE, 166x40) [component: Align=Center] + component-properties: Button End#2106:5=true, Button Start#2106:0=true, Align=Center + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; justify-content: center; align-items: center + Button (INSTANCE, 75x40) [component: Variant=Neutral, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Neutral, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Button" + Button (INSTANCE, 75x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Button" + Panel Image Double (INSTANCE, 375x478) [component: Platform=Mobile] + component-properties: Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; opacity: 0.8; max-width: 1200px + Image (FRAME, 327x203) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; flex-grow: 1; height: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Image (FRAME, 327x203) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; flex-grow: 1; height: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-2@2x.png); object-fit: contain; overflow: hidden + Card Grid Icon (INSTANCE, 375x1027) [component: Platform=Mobile] + component-properties: Cards#6062:30={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 48px /* var:VariableID:346:10903 */; align-items: flex-start; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #FFFBEB /* var:VariableID:2002:7448 */; max-width: 1200px + Text Content Heading (INSTANCE, 113x61) [component: Align=Start] + component-properties: Has Subheading#2153:9=true, Subheading#2153:11=Subheading, Heading#2153:10=Heading, Align=Start + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Heading (TEXT, 113x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Heading" + Subheading (TEXT, 113x24) + style: align-self: STRETCH; width: 100%; /* text-style: Subheading */; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Subheading" + Cards (SLOT, 327x870) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px /* var:VariableID:9:11262 */; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #EBFFEE /* var:VariableID:2002:7433 */ + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Footer (INSTANCE, 375x919) [component: Platform=Mobile] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Title (SLOT, 311x35) + style: display: flex; flex-direction: row; column-gap: 16px; justify-content: space-between; align-items: center; align-self: STRETCH; width: 100%; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Links (FRAME, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; width: 100%; background: #EBFFEE /* var:VariableID:2002:7433 */ + Slot (SLOT, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 81x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 81x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 83x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 83x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/diff-base.png new file mode 100644 index 00000000..a8c0bd96 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/figma-base.png new file mode 100644 index 00000000..6c13ff87 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/images/hero-image@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/images/hero-image@2x.png new file mode 100644 index 00000000..cdbd7abb Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/images/hero-image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/images/image-2@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/images/image-2@2x.png new file mode 100644 index 00000000..5f380732 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/images/image-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/images/image@2x.png new file mode 100644 index 00000000..5f380732 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/images/mapping.json new file mode 100644 index 00000000..34b7c563 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/images/mapping.json @@ -0,0 +1,5 @@ +{ + "562:9795": "hero-image@2x.png", + "I562:9796;348:13472": "image@2x.png", + "I562:9796;348:13473": "image-2@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/output.html b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/output.html new file mode 100644 index 00000000..913401d4 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/output.html @@ -0,0 +1,605 @@ + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+
+
Heading
+
Subheading
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/response.txt new file mode 100644 index 00000000..5d8e04dc --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/response.txt @@ -0,0 +1,608 @@ +```html +// filename: index.html + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+
+
Heading
+
Subheading
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/result.json b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/result.json new file mode 100644 index 00000000..4533fee6 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/baseline/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "mobile-landing-page", + "type": "baseline", + "runIndex": 0, + "similarity": 97, + "inputTokens": 20184, + "outputTokens": 13956, + "totalTokens": 34140, + "htmlBytes": 38067, + "htmlLines": 605, + "cssClassCount": 31, + "cssVariableCount": 14, + "timestamp": "2026-03-28T10:52:18.237Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/code-base.png new file mode 100644 index 00000000..77b368da Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/design-tree.txt new file mode 100644 index 00000000..b8bba7a0 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/design-tree.txt @@ -0,0 +1,286 @@ +# Design Tree +# Root: 375px x 3004px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Mobile (COMPONENT, 375x3004) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 375x84) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 0px; justify-content: space-between; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Menu (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 15x10) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Hero Image (INSTANCE, 375x496) + style: display: flex; flex-direction: column; row-gap: 32px /* var:VariableID:346:10902 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 160px 24px 160px 24px /* var:VariableID:346:10896 */; width: 100%; background: rgba(255, 255, 255, 0.800000011920929) /* var:VariableID:7753:3701 */; background-image: url(images/hero-image@2x.png); background-position: center; background-repeat: no-repeat; background-size: cover; max-width: 1200px + Text Content Title (INSTANCE, 117x104) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center + Title (TEXT, 117x58) + style: align-self: STRETCH; width: 100%; /* text-style: Title Page */; font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 57.6px; letter-spacing: -0.96px; text-align: center; color: #0C0C0D /* var:VariableID:9643:10770 */; text: "Title" + Subtitle (TEXT, 117x38) + style: align-self: STRETCH; width: 100%; /* text-style: Subtitle */; font-family: "Inter"; font-weight: 400; font-size: 32px; line-height: 38.4px; text-align: center; display: flex; align-items: center; color: #0C0C0D /* var:VariableID:9643:10770 */; text: "Subtitle" + Button Group (INSTANCE, 166x40) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; justify-content: center; align-items: center + Button (INSTANCE, 75x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Button" + Button (INSTANCE, 75x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Button" + Panel Image Double (INSTANCE, 375x478) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; opacity: 0.8; max-width: 1200px + Image (FRAME, 327x203) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; flex-grow: 1; height: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Image (FRAME, 327x203) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; flex-grow: 1; height: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-2@2x.png); object-fit: contain; overflow: hidden + Card Grid Icon (INSTANCE, 375x1027) + style: display: flex; flex-direction: column; row-gap: 48px /* var:VariableID:346:10903 */; align-items: flex-start; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #FFFBEB /* var:VariableID:2002:7448 */; max-width: 1200px + Text Content Heading (INSTANCE, 113x61) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Heading (TEXT, 113x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Heading" + Subheading (TEXT, 113x24) + style: align-self: STRETCH; width: 100%; /* text-style: Subheading */; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Subheading" + Cards (SLOT, 327x870) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px /* var:VariableID:9:11262 */; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #EBFFEE /* var:VariableID:2002:7433 */ + Card (INSTANCE, 300x125) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Footer (INSTANCE, 375x919) + style: display: flex; flex-direction: column; row-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Title (SLOT, 311x35) + style: display: flex; flex-direction: row; column-gap: 16px; justify-content: space-between; align-items: center; align-self: STRETCH; width: 100%; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Links (FRAME, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; width: 100%; background: #EBFFEE /* var:VariableID:2002:7433 */ + Slot (SLOT, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Text Link List (INSTANCE, 311x236) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 81x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 81x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 311x236) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 59x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 311x236) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 83x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 83x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/diff-base.png new file mode 100644 index 00000000..b9d81894 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/figma-base.png new file mode 100644 index 00000000..6c13ff87 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/images/hero-image@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/images/hero-image@2x.png new file mode 100644 index 00000000..cdbd7abb Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/images/hero-image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/images/image-2@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/images/image-2@2x.png new file mode 100644 index 00000000..5f380732 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/images/image-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/images/image@2x.png new file mode 100644 index 00000000..5f380732 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/images/mapping.json new file mode 100644 index 00000000..34b7c563 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/images/mapping.json @@ -0,0 +1,5 @@ +{ + "562:9795": "hero-image@2x.png", + "I562:9796;348:13472": "image@2x.png", + "I562:9796;348:13473": "image-2@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/output.html b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/output.html new file mode 100644 index 00000000..3b535f17 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/output.html @@ -0,0 +1,319 @@ + + + + + + Platform Mobile + + + + +
+ + +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+
+
Heading
+
Subheading
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ +
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+ + +
+
+
Use cases
+
+
+
UI design
+
UX design
+
Wireframing
+
Diagramming
+
Brainstorming
+
Online whiteboard
+
Team collaboration
+
+
+ + +
+
+
Explore
+
+
+
Design
+
Prototyping
+
Development features
+
Design systems
+
Collaboration features
+
Design process
+
FigJam
+
+
+ + +
+
+
Resources
+
+
+
Blog
+
Best practices
+
Colors
+
Color wheel
+
Support
+
Developers
+
Resource library
+
+
+ +
+
+
+ +
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/response.txt new file mode 100644 index 00000000..a3c2404a --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/response.txt @@ -0,0 +1,322 @@ +```html +// filename: index.html + + + + + + Platform Mobile + + + + +
+ + +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+
+
Heading
+
Subheading
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ +
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+ + +
+
+
Use cases
+
+
+
UI design
+
UX design
+
Wireframing
+
Diagramming
+
Brainstorming
+
Online whiteboard
+
Team collaboration
+
+
+ + +
+
+
Explore
+
+
+
Design
+
Prototyping
+
Development features
+
Design systems
+
Collaboration features
+
Design process
+
FigJam
+
+
+ + +
+
+
Resources
+
+
+
Blog
+
Best practices
+
Colors
+
Color wheel
+
Support
+
Developers
+
Resource library
+
+
+ +
+
+
+ +
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/result.json b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/result.json new file mode 100644 index 00000000..b28828bb --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/component-references/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "mobile-landing-page", + "type": "component-references", + "runIndex": 0, + "similarity": 97, + "inputTokens": 18084, + "outputTokens": 12752, + "totalTokens": 30836, + "htmlBytes": 32613, + "htmlLines": 319, + "cssClassCount": 9, + "cssVariableCount": 14, + "timestamp": "2026-03-28T11:25:25.234Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/code-base.png new file mode 100644 index 00000000..f34815cf Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/design-tree.txt new file mode 100644 index 00000000..3b344912 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/design-tree.txt @@ -0,0 +1,296 @@ +# Design Tree +# Root: 375px x 3004px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Mobile (COMPONENT, 375x3004) + style: background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 375x84) [component: Platform=Mobile, State=Default] + component-properties: Platform=Mobile, State=Default + style: width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Block (FRAME, 40x35) + Figma (FRAME, 40x35) + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=68:15863, Variant=Subtle, State=Default, Size=Small + style: border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Menu (INSTANCE, 20x20) [component: Menu] + style: overflow: hidden + Icon (VECTOR, 15x10) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Hero Image (INSTANCE, 375x496) [component: Platform=Mobile] + component-properties: Platform=Mobile + style: width: 100%; background: rgba(255, 255, 255, 0.800000011920929) /* var:VariableID:7753:3701 */; background-image: url(images/hero-image@2x.png); background-position: center; background-repeat: no-repeat; background-size: cover; max-width: 1200px + Text Content Title (INSTANCE, 117x104) [component: Align=Center] + component-properties: Has Subtitle#2153:13=true, Subtitle#2153:12=Subtitle, Title#2153:14=Title, Align=Center + Title (TEXT, 117x58) + style: width: 100%; /* text-style: Title Page */; font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 57.6px; letter-spacing: -0.96px; text-align: center; color: #0C0C0D /* var:VariableID:9643:10770 */; text: "Title" + Subtitle (TEXT, 117x38) + style: width: 100%; /* text-style: Subtitle */; font-family: "Inter"; font-weight: 400; font-size: 32px; line-height: 38.4px; text-align: center; color: #0C0C0D /* var:VariableID:9643:10770 */; text: "Subtitle" + Button Group (INSTANCE, 166x40) [component: Align=Center] + component-properties: Button End#2106:5=true, Button Start#2106:0=true, Align=Center + Button (INSTANCE, 75x40) [component: Variant=Neutral, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Neutral, State=Default, Size=Medium + style: background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Button" + Button (INSTANCE, 75x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Primary, State=Default, Size=Medium + style: background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Button" + Panel Image Double (INSTANCE, 375x478) [component: Platform=Mobile] + component-properties: Platform=Mobile + style: width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; opacity: 0.8; max-width: 1200px + Image (FRAME, 327x203) + style: flex-grow: 1; height: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Image (FRAME, 327x203) + style: flex-grow: 1; height: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-2@2x.png); object-fit: contain; overflow: hidden + Card Grid Icon (INSTANCE, 375x1027) [component: Platform=Mobile] + component-properties: Cards#6062:30={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: width: 100%; background: #FFFBEB /* var:VariableID:2002:7448 */; max-width: 1200px + Text Content Heading (INSTANCE, 113x61) [component: Align=Start] + component-properties: Has Subheading#2153:9=true, Subheading#2153:11=Subheading, Heading#2153:10=Heading, Align=Start + Heading (TEXT, 113x29) + style: width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Heading" + Subheading (TEXT, 113x24) + style: width: 100%; /* text-style: Subheading */; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Subheading" + Cards (SLOT, 327x870) + style: width: 100%; background: #EBFFEE /* var:VariableID:2002:7433 */ + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: width: 100% + Title (TEXT, 244x29) + style: width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: width: 100% + Title (TEXT, 244x29) + style: width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: width: 100% + Title (TEXT, 244x29) + style: width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: width: 100% + Title (TEXT, 244x29) + style: width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: width: 100% + Title (TEXT, 244x29) + style: width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: width: 100% + Title (TEXT, 244x29) + style: width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Footer (INSTANCE, 375x919) [component: Platform=Mobile] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Title (SLOT, 311x35) + style: width: 100%; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Links (FRAME, 311x756) + style: width: 100%; background: #EBFFEE /* var:VariableID:2002:7433 */ + Slot (SLOT, 311x756) + style: width: 100% + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: width: 100% + Title (FRAME, 311x26) + style: width: 100% + Text Strong (INSTANCE, 81x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + Text Strong (TEXT, 81x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x202) + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: width: 100% + Title (FRAME, 311x26) + style: width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + Text Strong (TEXT, 59x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x202) + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: width: 100% + Title (FRAME, 311x26) + style: width: 100% + Text Strong (INSTANCE, 83x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + Text Strong (TEXT, 83x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x202) + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/diff-base.png new file mode 100644 index 00000000..dceab36f Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/figma-base.png new file mode 100644 index 00000000..6c13ff87 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/images/hero-image@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/images/hero-image@2x.png new file mode 100644 index 00000000..cdbd7abb Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/images/hero-image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/images/image-2@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/images/image-2@2x.png new file mode 100644 index 00000000..5f380732 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/images/image-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/images/image@2x.png new file mode 100644 index 00000000..5f380732 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/images/mapping.json new file mode 100644 index 00000000..34b7c563 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/images/mapping.json @@ -0,0 +1,5 @@ +{ + "562:9795": "hero-image@2x.png", + "I562:9796;348:13472": "image@2x.png", + "I562:9796;348:13473": "image-2@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/output.html b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/output.html new file mode 100644 index 00000000..357540b6 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/output.html @@ -0,0 +1,412 @@ + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+
+
Heading
+
Subheading
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+
+
+
Use cases
+
+
+
UI design
+
UX design
+
Wireframing
+
Diagramming
+
Brainstorming
+
Online whiteboard
+
Team collaboration
+
+
+
+
+
Explore
+
+
+
Design
+
Prototyping
+
Development features
+
Design systems
+
Collaboration features
+
Design process
+
FigJam
+
+
+
+
+
Resources
+
+
+
Blog
+
Best practices
+
Colors
+
Color wheel
+
Support
+
Developers
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/response.txt new file mode 100644 index 00000000..483586cb --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/response.txt @@ -0,0 +1,419 @@ +```html +// filename: index.html + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+
+
Heading
+
Subheading
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+
+
+
Use cases
+
+
+
UI design
+
UX design
+
Wireframing
+
Diagramming
+
Brainstorming
+
Online whiteboard
+
Team collaboration
+
+
+
+
+
Explore
+
+
+
Design
+
Prototyping
+
Development features
+
Design systems
+
Collaboration features
+
Design process
+
FigJam
+
+
+
+
+
Resources
+
+
+
Blog
+
Best practices
+
Colors
+
Color wheel
+
Support
+
Developers
+
Resource library
+
+
+
+
+
+
+ + +``` + +// interpretations: +- Used flexbox layout for component positioning and alignment where exact positioning wasn't specified +- Applied standard padding values (24px) for section spacing where not explicitly provided +- Used gap values for flex containers where spacing between elements wasn't precisely defined +- Assumed standard hover cursor behavior for interactive elements \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/result.json b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/result.json new file mode 100644 index 00000000..1ac1f9d3 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/layout-direction-spacing/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "mobile-landing-page", + "type": "layout-direction-spacing", + "runIndex": 0, + "similarity": 92, + "inputTokens": 16761, + "outputTokens": 10905, + "totalTokens": 27666, + "htmlBytes": 27546, + "htmlLines": 412, + "cssClassCount": 18, + "cssVariableCount": 13, + "timestamp": "2026-03-28T11:23:08.715Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/code-base.png new file mode 100644 index 00000000..ab00e1ca Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/design-tree.txt new file mode 100644 index 00000000..3a005868 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/design-tree.txt @@ -0,0 +1,330 @@ +# Design Tree +# Root: 375px x 3004px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Node1 (COMPONENT, 375x3004) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Node2 (INSTANCE, 375x84) [component: Platform=Mobile, State=Default] + component-properties: Platform=Mobile, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 0px; justify-content: space-between; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Node3 (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Node4 (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node5 (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Node6 (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=68:15863, Variant=Subtle, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Node7 (INSTANCE, 20x20) [component: Menu] + style: overflow: hidden + Node8 (VECTOR, 15x10) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Node9 (INSTANCE, 375x496) [component: Platform=Mobile] + component-properties: Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 32px /* var:VariableID:346:10902 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 160px 24px 160px 24px /* var:VariableID:346:10896 */; width: 100%; background: rgba(255, 255, 255, 0.800000011920929) /* var:VariableID:7753:3701 */; background-image: url(images/hero-image@2x.png); background-position: center; background-repeat: no-repeat; background-size: cover; max-width: 1200px + Node10 (INSTANCE, 117x104) [component: Align=Center] + component-properties: Has Subtitle#2153:13=true, Subtitle#2153:12=Subtitle, Title#2153:14=Title, Align=Center + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center + Node11 (TEXT, 117x58) + style: align-self: STRETCH; width: 100%; /* text-style: Title Page */; font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 57.6px; letter-spacing: -0.96px; text-align: center; color: #0C0C0D /* var:VariableID:9643:10770 */; text: "Title" + Node12 (TEXT, 117x38) + style: align-self: STRETCH; width: 100%; /* text-style: Subtitle */; font-family: "Inter"; font-weight: 400; font-size: 32px; line-height: 38.4px; text-align: center; display: flex; align-items: center; color: #0C0C0D /* var:VariableID:9643:10770 */; text: "Subtitle" + Node13 (INSTANCE, 166x40) [component: Align=Center] + component-properties: Button End#2106:5=true, Button Start#2106:0=true, Align=Center + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; justify-content: center; align-items: center + Node14 (INSTANCE, 75x40) [component: Variant=Neutral, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Neutral, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Node15 (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Button" + Node16 (INSTANCE, 75x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Node17 (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Button" + Node18 (INSTANCE, 375x478) [component: Platform=Mobile] + component-properties: Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; opacity: 0.8; max-width: 1200px + Node19 (FRAME, 327x203) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; flex-grow: 1; height: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Node20 (FRAME, 327x203) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; flex-grow: 1; height: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-2@2x.png); object-fit: contain; overflow: hidden + Node21 (INSTANCE, 375x1027) [component: Platform=Mobile] + component-properties: Cards#6062:30={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 48px /* var:VariableID:346:10903 */; align-items: flex-start; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #FFFBEB /* var:VariableID:2002:7448 */; max-width: 1200px + Node22 (INSTANCE, 113x61) [component: Align=Start] + component-properties: Has Subheading#2153:9=true, Subheading#2153:11=Subheading, Heading#2153:10=Heading, Align=Start + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Node23 (TEXT, 113x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Heading" + Node24 (TEXT, 113x24) + style: align-self: STRETCH; width: 100%; /* text-style: Subheading */; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Subheading" + Node25 (SLOT, 327x870) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px /* var:VariableID:9:11262 */; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #EBFFEE /* var:VariableID:2002:7433 */ + Node26 (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; min-width: 240px; max-width: 300px + Node27 (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Node28 (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Node29 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Node30 (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node31 (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Node32 (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Node33 (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Node34 (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Node35 (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Node36 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Node37 (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node38 (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Node39 (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Node40 (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Node41 (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Node42 (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Node43 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Node44 (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node45 (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Node46 (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Node47 (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Node48 (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Node49 (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Node50 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Node51 (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node52 (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Node53 (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Node54 (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Node55 (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Node56 (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Node57 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Node58 (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node59 (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Node60 (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Node61 (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Node62 (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Node63 (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Node64 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Node65 (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node66 (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Node67 (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Node68 (INSTANCE, 375x919) [component: Platform=Mobile] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Node69 (SLOT, 311x35) + style: display: flex; flex-direction: row; column-gap: 16px; justify-content: space-between; align-items: center; align-self: STRETCH; width: 100%; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Node70 (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node71 (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Node72 (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + Node73 (FRAME, 24x24) + Node74 (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node75 (FRAME, 24x24) + style: overflow: hidden + Node76 (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node77 (FRAME, 24x24) + style: overflow: hidden + Node78 (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node79 (FRAME, 24x24) + style: overflow: hidden + Node80 (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node81 (FRAME, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; width: 100%; background: #EBFFEE /* var:VariableID:2002:7433 */ + Node82 (SLOT, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Node83 (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node84 (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Node85 (INSTANCE, 81x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Node86 (TEXT, 81x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Node87 (SLOT, 144x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Node88 (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node89 (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Node90 (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node91 (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Node92 (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node93 (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Node94 (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node95 (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Node96 (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node97 (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Node98 (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node99 (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Node100 (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node101 (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Node102 (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node103 (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Node104 (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Node105 (TEXT, 59x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Node106 (SLOT, 168x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Node107 (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node108 (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Node109 (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node110 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Node111 (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node112 (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Node113 (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node114 (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Node115 (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node116 (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Node117 (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node118 (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Node119 (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node120 (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Node121 (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node122 (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Node123 (INSTANCE, 83x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Node124 (TEXT, 83x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Node125 (SLOT, 123x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Node126 (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node127 (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Node128 (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node129 (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Node130 (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node131 (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Node132 (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node133 (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Node134 (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node135 (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Node136 (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node137 (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Node138 (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node139 (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/diff-base.png new file mode 100644 index 00000000..482728a1 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/figma-base.png new file mode 100644 index 00000000..6c13ff87 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/images/hero-image@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/images/hero-image@2x.png new file mode 100644 index 00000000..cdbd7abb Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/images/hero-image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/images/image-2@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/images/image-2@2x.png new file mode 100644 index 00000000..5f380732 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/images/image-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/images/image@2x.png new file mode 100644 index 00000000..5f380732 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/images/mapping.json new file mode 100644 index 00000000..34b7c563 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/images/mapping.json @@ -0,0 +1,5 @@ +{ + "562:9795": "hero-image@2x.png", + "I562:9796;348:13472": "image@2x.png", + "I562:9796;348:13473": "image-2@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/output.html b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/output.html new file mode 100644 index 00000000..869c8872 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/output.html @@ -0,0 +1,501 @@ + + + + + + Design Page + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+
+
Heading
+
Subheading
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+
+
+
Use cases
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+
+
+
Explore
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+
+
+
Resources
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/response.txt new file mode 100644 index 00000000..3637a905 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/response.txt @@ -0,0 +1,504 @@ +```html +// filename: index.html + + + + + + Design Page + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+
+
Heading
+
Subheading
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+
+
+
Use cases
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+
+
+
Explore
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+
+
+
Resources
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/result.json b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/result.json new file mode 100644 index 00000000..d6ccf400 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/node-names-hierarchy/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "mobile-landing-page", + "type": "node-names-hierarchy", + "runIndex": 0, + "similarity": 97, + "inputTokens": 20149, + "outputTokens": 14214, + "totalTokens": 34363, + "htmlBytes": 38502, + "htmlLines": 501, + "cssClassCount": 20, + "cssVariableCount": 14, + "timestamp": "2026-03-28T11:27:55.699Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/code-base.png new file mode 100644 index 00000000..1147e89a Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/design-tree.txt new file mode 100644 index 00000000..0b6c73be --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/design-tree.txt @@ -0,0 +1,330 @@ +# Design Tree +# Root: 375px x 3004px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Mobile (COMPONENT, 375x3004) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 375x84) [component: Platform=Mobile, State=Default] + component-properties: Platform=Mobile, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 0px; justify-content: space-between; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=68:15863, Variant=Subtle, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Menu (INSTANCE, 20x20) [component: Menu] + style: overflow: hidden + Icon (VECTOR, 15x10) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Hero Image (INSTANCE, 375x496) [component: Platform=Mobile] + component-properties: Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 32px /* var:VariableID:346:10902 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 160px 24px 160px 24px /* var:VariableID:346:10896 */; width: 100%; background: rgba(255, 255, 255, 0.800000011920929) /* var:VariableID:7753:3701 */; background-image: url(images/hero-image@2x.png); background-position: center; background-repeat: no-repeat; background-size: cover; max-width: 1200px + Text Content Title (INSTANCE, 117x104) [component: Align=Center] + component-properties: Has Subtitle#2153:13=true, Subtitle#2153:12=Subtitle, Title#2153:14=Title, Align=Center + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center + Title (TEXT, 117x58) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 57.6px; letter-spacing: -0.96px; text-align: center; color: #0C0C0D /* var:VariableID:9643:10770 */; text: "Title" + Subtitle (TEXT, 117x38) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 32px; line-height: 38.4px; text-align: center; display: flex; align-items: center; color: #0C0C0D /* var:VariableID:9643:10770 */; text: "Subtitle" + Button Group (INSTANCE, 166x40) [component: Align=Center] + component-properties: Button End#2106:5=true, Button Start#2106:0=true, Align=Center + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; justify-content: center; align-items: center + Button (INSTANCE, 75x40) [component: Variant=Neutral, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Neutral, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Button" + Button (INSTANCE, 75x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 51x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Button" + Panel Image Double (INSTANCE, 375x478) [component: Platform=Mobile] + component-properties: Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; opacity: 0.8; max-width: 1200px + Image (FRAME, 327x203) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; flex-grow: 1; height: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Image (FRAME, 327x203) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; flex-grow: 1; height: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-2@2x.png); object-fit: contain; overflow: hidden + Card Grid Icon (INSTANCE, 375x1027) [component: Platform=Mobile] + component-properties: Cards#6062:30={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 48px /* var:VariableID:346:10903 */; align-items: flex-start; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #FFFBEB /* var:VariableID:2002:7448 */; max-width: 1200px + Text Content Heading (INSTANCE, 113x61) [component: Align=Start] + component-properties: Has Subheading#2153:9=true, Subheading#2153:11=Subheading, Heading#2153:10=Heading, Align=Start + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Heading (TEXT, 113x29) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Heading" + Subheading (TEXT, 113x24) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Subheading" + Cards (SLOT, 327x870) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px /* var:VariableID:9:11262 */; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #EBFFEE /* var:VariableID:2002:7433 */ + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Footer (INSTANCE, 375x919) [component: Platform=Mobile] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Title (SLOT, 311x35) + style: display: flex; flex-direction: row; column-gap: 16px; justify-content: space-between; align-items: center; align-self: STRETCH; width: 100%; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Links (FRAME, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; width: 100%; background: #EBFFEE /* var:VariableID:2002:7433 */ + Slot (SLOT, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 81x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 81x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 72x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 78x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 92x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 100x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 105x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 138x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 144x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 53x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 167x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 120x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 168x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 117x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 55x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 83x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 83x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 34x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 109x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 49x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 90x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 61x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 86x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 123x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/diff-base.png new file mode 100644 index 00000000..f8fc7698 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/figma-base.png new file mode 100644 index 00000000..6c13ff87 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/images/hero-image@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/images/hero-image@2x.png new file mode 100644 index 00000000..cdbd7abb Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/images/hero-image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/images/image-2@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/images/image-2@2x.png new file mode 100644 index 00000000..5f380732 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/images/image-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/images/image@2x.png new file mode 100644 index 00000000..5f380732 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/images/mapping.json new file mode 100644 index 00000000..34b7c563 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/images/mapping.json @@ -0,0 +1,5 @@ +{ + "562:9795": "hero-image@2x.png", + "I562:9796;348:13472": "image@2x.png", + "I562:9796;348:13473": "image-2@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/output.html b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/output.html new file mode 100644 index 00000000..6ab7d4e3 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/output.html @@ -0,0 +1,451 @@ + + + + + + Platform Mobile + + + + +
+ + +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+
+
Heading
+
Subheading
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ +
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/response.txt new file mode 100644 index 00000000..a46fbffb --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/response.txt @@ -0,0 +1,454 @@ +```html +// filename: index.html + + + + + + Platform Mobile + + + + +
+ + +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+
+
Heading
+
Subheading
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ +
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/result.json b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/result.json new file mode 100644 index 00000000..c0d84a63 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/style-references/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "mobile-landing-page", + "type": "style-references", + "runIndex": 0, + "similarity": 97, + "inputTokens": 19825, + "outputTokens": 15595, + "totalTokens": 35420, + "htmlBytes": 41006, + "htmlLines": 451, + "cssClassCount": 11, + "cssVariableCount": 14, + "timestamp": "2026-03-28T11:33:02.653Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/code-base.png new file mode 100644 index 00000000..12a2109f Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/design-tree.txt new file mode 100644 index 00000000..714a26fa --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/design-tree.txt @@ -0,0 +1,330 @@ +# Design Tree +# Root: 375px x 3004px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Mobile (COMPONENT, 375x3004) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF; overflow: hidden + Header (INSTANCE, 375x84) [component: Platform=Mobile, State=Default] + component-properties: Platform=Mobile, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 0px; justify-content: space-between; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px; width: 100%; background: #FFFFFF; border-bottom: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=68:15863, Variant=Subtle, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Menu (INSTANCE, 20x20) [component: Menu] + style: overflow: hidden + Icon (VECTOR, 15x10) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Hero Image (INSTANCE, 375x496) [component: Platform=Mobile] + component-properties: Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 32px; justify-content: center; align-items: center; align-self: STRETCH; padding: 160px 24px 160px 24px; width: 100%; background: rgba(255, 255, 255, 0.800000011920929); background-image: url(images/hero-image@2x.png); background-position: center; background-repeat: no-repeat; background-size: cover; max-width: 1200px + Text Content Title (INSTANCE, 117x104) [component: Align=Center] + component-properties: Has Subtitle#2153:13=true, Subtitle#2153:12=Subtitle, Title#2153:14=Title, Align=Center + style: display: flex; flex-direction: column; row-gap: 8px; align-items: center + Title (TEXT, 117x58) + style: align-self: STRETCH; width: 100%; /* text-style: Title Page */; font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 57.6px; letter-spacing: -0.96px; text-align: center; color: #0C0C0D; text: "Title" + Subtitle (TEXT, 117x38) + style: align-self: STRETCH; width: 100%; /* text-style: Subtitle */; font-family: "Inter"; font-weight: 400; font-size: 32px; line-height: 38.4px; text-align: center; display: flex; align-items: center; color: #0C0C0D; text: "Subtitle" + Button Group (INSTANCE, 166x40) [component: Align=Center] + component-properties: Button End#2106:5=true, Button Start#2106:0=true, Align=Center + style: display: flex; flex-direction: row; column-gap: 16px; justify-content: center; align-items: center + Button (INSTANCE, 75x40) [component: Variant=Neutral, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Neutral, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 12px 12px 12px 12px; background: #E3E3E3; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E; text: "Button" + Button (INSTANCE, 75x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 12px 12px 12px 12px; background: #2C2C2C; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5; text: "Button" + Panel Image Double (INSTANCE, 375x478) [component: Platform=Mobile] + component-properties: Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; padding: 24px 24px 24px 24px; width: 100%; background: #5A5A5A; opacity: 0.8; max-width: 1200px + Image (FRAME, 327x203) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; flex-grow: 1; height: 100%; background: #E3E3E3; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Image (FRAME, 327x203) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; flex-grow: 1; height: 100%; background: #E3E3E3; content-image: url(images/image-2@2x.png); object-fit: contain; overflow: hidden + Card Grid Icon (INSTANCE, 375x1027) [component: Platform=Mobile] + component-properties: Cards#6062:30={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 48px; align-items: flex-start; align-self: STRETCH; padding: 24px 24px 24px 24px; width: 100%; background: #FFFBEB; max-width: 1200px + Text Content Heading (INSTANCE, 113x61) [component: Align=Start] + component-properties: Has Subheading#2153:9=true, Subheading#2153:11=Subheading, Heading#2153:10=Heading, Align=Start + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Heading (TEXT, 113x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "Heading" + Subheading (TEXT, 113x24) + style: align-self: STRETCH; width: 100%; /* text-style: Subheading */; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: left; display: flex; align-items: center; color: #757575; text: "Subheading" + Cards (SLOT, 327x870) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 24px; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #EBFFEE + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 24px; align-items: flex-start; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Footer (INSTANCE, 375x919) [component: Platform=Mobile] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 64px; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 32px 32px; width: 100%; background: #5A5A5A; border-top: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Title (SLOT, 311x35) + style: display: flex; flex-direction: row; column-gap: 16px; justify-content: space-between; align-items: center; align-self: STRETCH; width: 100%; background: #CFF7D3; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E; svg: + Links (FRAME, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100%; background: #EBFFEE + Slot (SLOT, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px; width: 100% + Text Strong (INSTANCE, 81x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 81x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Use cases" + Slot (SLOT, 144x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Team collaboration" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px; width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Explore" + Slot (SLOT, 168x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "FigJam" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px; width: 100% + Text Strong (INSTANCE, 83x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 83x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Resources" + Slot (SLOT, 123x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/diff-base.png new file mode 100644 index 00000000..a8c0bd96 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/figma-base.png new file mode 100644 index 00000000..6c13ff87 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/images/hero-image@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/images/hero-image@2x.png new file mode 100644 index 00000000..cdbd7abb Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/images/hero-image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/images/image-2@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/images/image-2@2x.png new file mode 100644 index 00000000..5f380732 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/images/image-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/images/image@2x.png new file mode 100644 index 00000000..5f380732 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/images/mapping.json new file mode 100644 index 00000000..34b7c563 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/images/mapping.json @@ -0,0 +1,5 @@ +{ + "562:9795": "hero-image@2x.png", + "I562:9796;348:13472": "image@2x.png", + "I562:9796;348:13473": "image-2@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/output.html b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/output.html new file mode 100644 index 00000000..2a8faa5b --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/output.html @@ -0,0 +1,519 @@ + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+
+
Heading
+
Subheading
+
+
+ +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+ +
+
+
Use cases
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
Explore
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
Resources
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/response.txt new file mode 100644 index 00000000..802fc577 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/response.txt @@ -0,0 +1,522 @@ +```html +// filename: index.html + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+
+
Heading
+
Subheading
+
+
+ +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+ +
+
+
Use cases
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
Explore
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
Resources
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/result.json b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/result.json new file mode 100644 index 00000000..5aa0bd57 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-landing-page/variable-references/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "mobile-landing-page", + "type": "variable-references", + "runIndex": 0, + "similarity": 97, + "inputTokens": 18659, + "outputTokens": 13996, + "totalTokens": 32655, + "htmlBytes": 37807, + "htmlLines": 519, + "cssClassCount": 23, + "cssVariableCount": 14, + "timestamp": "2026-03-28T11:30:22.870Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/baseline/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/mobile-pricing/baseline/run-0/code-base.png new file mode 100644 index 00000000..65559fcc Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-pricing/baseline/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/baseline/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/mobile-pricing/baseline/run-0/design-tree.txt new file mode 100644 index 00000000..af49b8b1 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-pricing/baseline/run-0/design-tree.txt @@ -0,0 +1,477 @@ +# Design Tree +# Root: 375px x 3017px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Mobile (COMPONENT, 375x3017) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 375x84) [component: Platform=Mobile, State=Default] + component-properties: Platform=Mobile, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 0px; justify-content: space-between; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=68:15863, Variant=Subtle, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Menu (INSTANCE, 20x20) [component: Menu] + style: overflow: hidden + Icon (VECTOR, 15x10) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Hero Basic (INSTANCE, 375x424) [component: Platform=Mobile] + component-properties: Platform=Mobile + style: display: flex; flex-direction: column; align-items: center; align-self: STRETCH; padding: 160px 24px 160px 24px /* var:VariableID:346:10896 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; max-width: 1200px + Text Content Title (INSTANCE, 117x104) [component: Align=Center] + component-properties: Has Subtitle#2153:13=true, Subtitle#2153:12=Subtitle, Title#2153:14=Title, Align=Center + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center; background: #E6E6E6 /* var:VariableID:3919:36430 */ + Title (TEXT, 117x58) + style: align-self: STRETCH; width: 100%; /* text-style: Title Page */; font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 57.6px; letter-spacing: -0.96px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Subtitle (TEXT, 117x38) + style: align-self: STRETCH; width: 100%; /* text-style: Subtitle */; font-family: "Inter"; font-weight: 400; font-size: 32px; line-height: 38.4px; text-align: center; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Subtitle" + Card Grid Pricing (INSTANCE, 375x1049) [component: Platform=Mobile] + component-properties: Card Grid#6062:27={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #D9D9D9 /* var:VariableID:3919:36425 */; max-width: 1200px + Navigation Pill List (INSTANCE, 149x32) [component: Direction=Row] + component-properties: Link 1#2194:8=true, Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":6062,"localID":12611}}, Link 6#2194:3=false, Link 3#2194:7=false, Link 4#2194:6=false, Link 2#2194:4=true, Link 7#3529:0=true, Link 5#2194:5=false, Direction=Row + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px /* var:VariableID:9:11259 */; row-gap: 8px; align-items: flex-start + Slot (SLOT, 149x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Navigation Pill (INSTANCE, 78x32) [component: State=Active] + component-properties: Label#156:33=Monthly, State=Active + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 62x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Monthly" + Navigation Pill (INSTANCE, 63x32) [component: State=Default] + component-properties: Label#156:33=Yearly, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 47x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Yearly" + Card Grid (SLOT, 327x945) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px /* var:VariableID:9:11262 */; justify-content: center; align-items: flex-start; align-self: STRETCH; width: 100% + Pricing Card (INSTANCE, 327x299) [component: Device=Mobile, Variant=Stroke] + component-properties: Device=Mobile, Variant=Stroke + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 300px + Top (FRAME, 279x187) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; justify-content: flex-end; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 279x29) + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: space-between; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 207x29) [component: Text Heading] + component-properties: Text#2104:5=Title + style: display: flex; flex-direction: row; align-items: flex-start; flex-grow: 1 + Text Heading (TEXT, 207x29) + style: flex-grow: 1; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Text Price (INSTANCE, 72x24) [component: Size=Small] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=true, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 42x24) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 11x16) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 16px; letter-spacing: -0.32px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + 50 (TEXT, 31x24) + style: font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "50" + / mo (TEXT, 30x17) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 16.8px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "/ mo" + Text List (INSTANCE, 279x142) [component: Density=Tight] + component-properties: Slot#6062:9={"guid":{"sessionID":-1,"localID":-1}}, Has Title#480:0=false, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Slot (SLOT, 89x142) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Button (INSTANCE, 279x40) [component: Variant=Neutral, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Neutral, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Button" + Pricing Card (INSTANCE, 327x299) [component: Device=Mobile, Variant=Brand] + component-properties: Device=Mobile, Variant=Brand + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden; min-width: 300px + Top (FRAME, 279x187) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; justify-content: flex-end; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 279x29) + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: space-between; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 207x29) [component: Text Heading] + component-properties: Text#2104:5=Title + style: display: flex; flex-direction: row; align-items: flex-start; flex-grow: 1 + Text Heading (TEXT, 207x29) + style: flex-grow: 1; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Title" + Text Price (INSTANCE, 72x24) [component: Size=Small] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=true, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 42x24) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 11x16) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 16px; letter-spacing: -0.32px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "$" + 50 (TEXT, 31x24) + style: font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "50" + / mo (TEXT, 30x17) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 16.8px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "/ mo" + Text List (INSTANCE, 279x142) [component: Density=Tight] + component-properties: Slot#6062:9={"guid":{"sessionID":-1,"localID":-1}}, Has Title#480:0=false, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Slot (SLOT, 89x142) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Button (INSTANCE, 279x40) [component: Variant=Neutral, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Neutral, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Button" + Pricing Card (INSTANCE, 327x299) [component: Device=Mobile, Variant=Stroke] + component-properties: Device=Mobile, Variant=Stroke + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 300px + Top (FRAME, 279x187) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; justify-content: flex-end; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 279x29) + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: space-between; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 207x29) [component: Text Heading] + component-properties: Text#2104:5=Title + style: display: flex; flex-direction: row; align-items: flex-start; flex-grow: 1 + Text Heading (TEXT, 207x29) + style: flex-grow: 1; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Text Price (INSTANCE, 72x24) [component: Size=Small] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=true, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 42x24) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 11x16) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 16px; letter-spacing: -0.32px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + 50 (TEXT, 31x24) + style: font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "50" + / mo (TEXT, 30x17) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 16.8px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "/ mo" + Text List (INSTANCE, 279x142) [component: Density=Tight] + component-properties: Slot#6062:9={"guid":{"sessionID":-1,"localID":-1}}, Has Title#480:0=false, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Slot (SLOT, 89x142) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Button (INSTANCE, 279x40) [component: Variant=Neutral, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Neutral, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Button" + Page Accordion (INSTANCE, 375x541) [component: Platform=Mobile] + component-properties: Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #CFF7D3 /* var:VariableID:3919:36435 */; max-width: 1200px + Text Content Heading (INSTANCE, 113x61) [component: Align=Center] + component-properties: Has Subheading#2153:9=true, Subheading#2153:11=Subheading, Heading#2153:10=Heading, Align=Center + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center + Heading (TEXT, 113x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Heading" + Subheading (TEXT, 113x24) + style: align-self: STRETCH; width: 100%; /* text-style: Subheading */; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Subheading" + Accordion (INSTANCE, 327x408) [component: Accordion] + component-properties: Items#6031:6={"guid":{"sessionID":-1,"localID":-1}} + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100%; max-width: 640px + Accordion Item (INSTANCE, 327x128) [component: State=Open] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Open + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 295x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; width: 100% + Title (TEXT, 267x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron up (INSTANCE, 20x20) [component: Chevron up] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Content (FRAME, 295x66) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Body (TEXT, 295x66) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list." + Items (SLOT, 327x264) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; align-self: STRETCH; width: 100% + Accordion Item (INSTANCE, 327x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 295x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Title (TEXT, 267x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Item (INSTANCE, 327x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 295x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Title (TEXT, 267x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Item (INSTANCE, 327x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 295x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Title (TEXT, 267x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Item (INSTANCE, 327x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 295x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Title (TEXT, 267x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Footer (INSTANCE, 375x919) [component: Platform=Mobile] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Title (SLOT, 311x35) + style: display: flex; flex-direction: row; column-gap: 16px; justify-content: space-between; align-items: center; align-self: STRETCH; width: 100%; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Links (FRAME, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; width: 100%; background: #EBFFEE /* var:VariableID:2002:7433 */ + Slot (SLOT, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 81x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 81x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 83x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 83x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/baseline/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/mobile-pricing/baseline/run-0/diff-base.png new file mode 100644 index 00000000..5a590284 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-pricing/baseline/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/baseline/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/mobile-pricing/baseline/run-0/figma-base.png new file mode 100644 index 00000000..f86ca7cc Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-pricing/baseline/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/baseline/run-0/output.html b/data/ablation/phase1/72ffc72c9103/mobile-pricing/baseline/run-0/output.html new file mode 100644 index 00000000..6b48f29a --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-pricing/baseline/run-0/output.html @@ -0,0 +1,666 @@ + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+ + +
+
+
+
+
Monthly
+
+
+
Yearly
+
+
+
+ +
+ +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+
+
+ + +
+
+
Heading
+
Subheading
+
+ +
+ +
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+ +
+
+
Use cases
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
Explore
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
Resources
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/baseline/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/mobile-pricing/baseline/run-0/response.txt new file mode 100644 index 00000000..9812a752 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-pricing/baseline/run-0/response.txt @@ -0,0 +1,669 @@ +```html +// filename: index.html + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+ + +
+
+
+
+
Monthly
+
+
+
Yearly
+
+
+
+ +
+ +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+
+
+ + +
+
+
Heading
+
Subheading
+
+ +
+ +
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+ +
+
+
Use cases
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
Explore
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
Resources
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/baseline/run-0/result.json b/data/ablation/phase1/72ffc72c9103/mobile-pricing/baseline/run-0/result.json new file mode 100644 index 00000000..752f0804 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-pricing/baseline/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "mobile-pricing", + "type": "baseline", + "runIndex": 0, + "similarity": 98, + "inputTokens": 23853, + "outputTokens": 16979, + "totalTokens": 40832, + "htmlBytes": 48837, + "htmlLines": 666, + "cssClassCount": 30, + "cssVariableCount": 13, + "timestamp": "2026-03-28T10:57:19.384Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/component-references/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/mobile-pricing/component-references/run-0/code-base.png new file mode 100644 index 00000000..56351438 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-pricing/component-references/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/component-references/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/mobile-pricing/component-references/run-0/design-tree.txt new file mode 100644 index 00000000..79aebbb2 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-pricing/component-references/run-0/design-tree.txt @@ -0,0 +1,403 @@ +# Design Tree +# Root: 375px x 3017px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Mobile (COMPONENT, 375x3017) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 375x84) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 0px; justify-content: space-between; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Menu (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 15x10) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Hero Basic (INSTANCE, 375x424) + style: display: flex; flex-direction: column; align-items: center; align-self: STRETCH; padding: 160px 24px 160px 24px /* var:VariableID:346:10896 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; max-width: 1200px + Text Content Title (INSTANCE, 117x104) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center; background: #E6E6E6 /* var:VariableID:3919:36430 */ + Title (TEXT, 117x58) + style: align-self: STRETCH; width: 100%; /* text-style: Title Page */; font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 57.6px; letter-spacing: -0.96px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Subtitle (TEXT, 117x38) + style: align-self: STRETCH; width: 100%; /* text-style: Subtitle */; font-family: "Inter"; font-weight: 400; font-size: 32px; line-height: 38.4px; text-align: center; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Subtitle" + Card Grid Pricing (INSTANCE, 375x1049) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #D9D9D9 /* var:VariableID:3919:36425 */; max-width: 1200px + Navigation Pill List (INSTANCE, 149x32) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px /* var:VariableID:9:11259 */; row-gap: 8px; align-items: flex-start + Slot (SLOT, 149x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Navigation Pill (INSTANCE, 78x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 62x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Monthly" + Navigation Pill (INSTANCE, 63x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 47x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Yearly" + Card Grid (SLOT, 327x945) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px /* var:VariableID:9:11262 */; justify-content: center; align-items: flex-start; align-self: STRETCH; width: 100% + Pricing Card (INSTANCE, 327x299) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 300px + Top (FRAME, 279x187) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; justify-content: flex-end; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 279x29) + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: space-between; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 207x29) + style: display: flex; flex-direction: row; align-items: flex-start; flex-grow: 1 + Text Heading (TEXT, 207x29) + style: flex-grow: 1; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Text Price (INSTANCE, 72x24) + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 42x24) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 11x16) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 16px; letter-spacing: -0.32px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + 50 (TEXT, 31x24) + style: font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "50" + / mo (TEXT, 30x17) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 16.8px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "/ mo" + Text List (INSTANCE, 279x142) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Slot (SLOT, 89x142) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Button (INSTANCE, 279x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Button" + Pricing Card (INSTANCE, 327x299) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden; min-width: 300px + Top (FRAME, 279x187) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; justify-content: flex-end; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 279x29) + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: space-between; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 207x29) + style: display: flex; flex-direction: row; align-items: flex-start; flex-grow: 1 + Text Heading (TEXT, 207x29) + style: flex-grow: 1; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Title" + Text Price (INSTANCE, 72x24) + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 42x24) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 11x16) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 16px; letter-spacing: -0.32px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "$" + 50 (TEXT, 31x24) + style: font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "50" + / mo (TEXT, 30x17) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 16.8px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "/ mo" + Text List (INSTANCE, 279x142) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Slot (SLOT, 89x142) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Button (INSTANCE, 279x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Button" + Pricing Card (INSTANCE, 327x299) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 300px + Top (FRAME, 279x187) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; justify-content: flex-end; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 279x29) + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: space-between; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 207x29) + style: display: flex; flex-direction: row; align-items: flex-start; flex-grow: 1 + Text Heading (TEXT, 207x29) + style: flex-grow: 1; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Text Price (INSTANCE, 72x24) + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 42x24) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 11x16) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 16px; letter-spacing: -0.32px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + 50 (TEXT, 31x24) + style: font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "50" + / mo (TEXT, 30x17) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 16.8px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "/ mo" + Text List (INSTANCE, 279x142) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Slot (SLOT, 89x142) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Button (INSTANCE, 279x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Button" + Page Accordion (INSTANCE, 375x541) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #CFF7D3 /* var:VariableID:3919:36435 */; max-width: 1200px + Text Content Heading (INSTANCE, 113x61) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center + Heading (TEXT, 113x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Heading" + Subheading (TEXT, 113x24) + style: align-self: STRETCH; width: 100%; /* text-style: Subheading */; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Subheading" + Accordion (INSTANCE, 327x408) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100%; max-width: 640px + Accordion Item (INSTANCE, 327x128) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 295x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; width: 100% + Title (TEXT, 267x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron up (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Content (FRAME, 295x66) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Body (TEXT, 295x66) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list." + Items (SLOT, 327x264) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; align-self: STRETCH; width: 100% + Accordion Item (INSTANCE, 327x54) + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 295x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Title (TEXT, 267x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Item (INSTANCE, 327x54) + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 295x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Title (TEXT, 267x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Item (INSTANCE, 327x54) + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 295x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Title (TEXT, 267x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Item (INSTANCE, 327x54) + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 295x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Title (TEXT, 267x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Footer (INSTANCE, 375x919) + style: display: flex; flex-direction: column; row-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Title (SLOT, 311x35) + style: display: flex; flex-direction: row; column-gap: 16px; justify-content: space-between; align-items: center; align-self: STRETCH; width: 100%; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Links (FRAME, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; width: 100%; background: #EBFFEE /* var:VariableID:2002:7433 */ + Slot (SLOT, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Text Link List (INSTANCE, 311x236) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 81x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 81x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 311x236) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 59x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 311x236) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 83x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 83x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/component-references/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/mobile-pricing/component-references/run-0/diff-base.png new file mode 100644 index 00000000..654f9d7e Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-pricing/component-references/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/component-references/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/mobile-pricing/component-references/run-0/figma-base.png new file mode 100644 index 00000000..f86ca7cc Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-pricing/component-references/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/component-references/run-0/output.html b/data/ablation/phase1/72ffc72c9103/mobile-pricing/component-references/run-0/output.html new file mode 100644 index 00000000..ea259503 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-pricing/component-references/run-0/output.html @@ -0,0 +1,458 @@ + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+ + +
+ +
+
+
+
Monthly
+
+
+
Yearly
+
+
+
+ + +
+ +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+
+
+ + +
+
+
Heading
+
Subheading
+
+ +
+ +
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+ +
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/component-references/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/mobile-pricing/component-references/run-0/response.txt new file mode 100644 index 00000000..fbdc69d6 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-pricing/component-references/run-0/response.txt @@ -0,0 +1,461 @@ +```html +// filename: index.html + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+ + +
+ +
+
+
+
Monthly
+
+
+
Yearly
+
+
+
+ + +
+ +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+
+
+ + +
+
+
Heading
+
Subheading
+
+ +
+ +
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+ +
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/component-references/run-0/result.json b/data/ablation/phase1/72ffc72c9103/mobile-pricing/component-references/run-0/result.json new file mode 100644 index 00000000..15782bcd --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-pricing/component-references/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "mobile-pricing", + "type": "component-references", + "runIndex": 0, + "similarity": 98, + "inputTokens": 21224, + "outputTokens": 17243, + "totalTokens": 38467, + "htmlBytes": 49500, + "htmlLines": 458, + "cssClassCount": 9, + "cssVariableCount": 13, + "timestamp": "2026-03-28T11:49:41.599Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/layout-direction-spacing/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/mobile-pricing/layout-direction-spacing/run-0/code-base.png new file mode 100644 index 00000000..29e539a5 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-pricing/layout-direction-spacing/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/layout-direction-spacing/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/mobile-pricing/layout-direction-spacing/run-0/design-tree.txt new file mode 100644 index 00000000..6f8adcc6 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-pricing/layout-direction-spacing/run-0/design-tree.txt @@ -0,0 +1,419 @@ +# Design Tree +# Root: 375px x 3017px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Mobile (COMPONENT, 375x3017) + style: background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 375x84) [component: Platform=Mobile, State=Default] + component-properties: Platform=Mobile, State=Default + style: width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Block (FRAME, 40x35) + Figma (FRAME, 40x35) + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=68:15863, Variant=Subtle, State=Default, Size=Small + style: border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Menu (INSTANCE, 20x20) [component: Menu] + style: overflow: hidden + Icon (VECTOR, 15x10) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Hero Basic (INSTANCE, 375x424) [component: Platform=Mobile] + component-properties: Platform=Mobile + style: width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; max-width: 1200px + Text Content Title (INSTANCE, 117x104) [component: Align=Center] + component-properties: Has Subtitle#2153:13=true, Subtitle#2153:12=Subtitle, Title#2153:14=Title, Align=Center + style: background: #E6E6E6 /* var:VariableID:3919:36430 */ + Title (TEXT, 117x58) + style: width: 100%; /* text-style: Title Page */; font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 57.6px; letter-spacing: -0.96px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Subtitle (TEXT, 117x38) + style: width: 100%; /* text-style: Subtitle */; font-family: "Inter"; font-weight: 400; font-size: 32px; line-height: 38.4px; text-align: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Subtitle" + Card Grid Pricing (INSTANCE, 375x1049) [component: Platform=Mobile] + component-properties: Card Grid#6062:27={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: width: 100%; background: #D9D9D9 /* var:VariableID:3919:36425 */; max-width: 1200px + Navigation Pill List (INSTANCE, 149x32) [component: Direction=Row] + component-properties: Link 1#2194:8=true, Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":6062,"localID":12611}}, Link 6#2194:3=false, Link 3#2194:7=false, Link 4#2194:6=false, Link 2#2194:4=true, Link 7#3529:0=true, Link 5#2194:5=false, Direction=Row + Slot (SLOT, 149x32) + Navigation Pill (INSTANCE, 78x32) [component: State=Active] + component-properties: Label#156:33=Monthly, State=Active + style: background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 62x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Monthly" + Navigation Pill (INSTANCE, 63x32) [component: State=Default] + component-properties: Label#156:33=Yearly, State=Default + style: border-radius: 8px + Title (TEXT, 47x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Yearly" + Card Grid (SLOT, 327x945) + style: width: 100% + Pricing Card (INSTANCE, 327x299) [component: Device=Mobile, Variant=Stroke] + component-properties: Device=Mobile, Variant=Stroke + style: flex-grow: 1; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 300px + Top (FRAME, 279x187) + style: width: 100% + Title (FRAME, 279x29) + style: width: 100% + Text Heading (INSTANCE, 207x29) [component: Text Heading] + component-properties: Text#2104:5=Title + style: flex-grow: 1 + Text Heading (TEXT, 207x29) + style: flex-grow: 1; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Text Price (INSTANCE, 72x24) [component: Size=Small] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=true, Size=Small + Price (FRAME, 42x24) + $ (TEXT, 11x16) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 16px; letter-spacing: -0.32px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + 50 (TEXT, 31x24) + style: font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "50" + / mo (TEXT, 30x17) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 16.8px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "/ mo" + Text List (INSTANCE, 279x142) [component: Density=Tight] + component-properties: Slot#6062:9={"guid":{"sessionID":-1,"localID":-1}}, Has Title#480:0=false, Density=Tight + style: width: 100% + Slot (SLOT, 89x142) + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Button (INSTANCE, 279x40) [component: Variant=Neutral, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Neutral, State=Default, Size=Medium + style: width: 100%; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Button" + Pricing Card (INSTANCE, 327x299) [component: Device=Mobile, Variant=Brand] + component-properties: Device=Mobile, Variant=Brand + style: flex-grow: 1; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden; min-width: 300px + Top (FRAME, 279x187) + style: width: 100% + Title (FRAME, 279x29) + style: width: 100% + Text Heading (INSTANCE, 207x29) [component: Text Heading] + component-properties: Text#2104:5=Title + style: flex-grow: 1 + Text Heading (TEXT, 207x29) + style: flex-grow: 1; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Title" + Text Price (INSTANCE, 72x24) [component: Size=Small] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=true, Size=Small + Price (FRAME, 42x24) + $ (TEXT, 11x16) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 16px; letter-spacing: -0.32px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "$" + 50 (TEXT, 31x24) + style: font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "50" + / mo (TEXT, 30x17) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 16.8px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "/ mo" + Text List (INSTANCE, 279x142) [component: Density=Tight] + component-properties: Slot#6062:9={"guid":{"sessionID":-1,"localID":-1}}, Has Title#480:0=false, Density=Tight + style: width: 100% + Slot (SLOT, 89x142) + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Button (INSTANCE, 279x40) [component: Variant=Neutral, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Neutral, State=Default, Size=Medium + style: width: 100%; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Button" + Pricing Card (INSTANCE, 327x299) [component: Device=Mobile, Variant=Stroke] + component-properties: Device=Mobile, Variant=Stroke + style: flex-grow: 1; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 300px + Top (FRAME, 279x187) + style: width: 100% + Title (FRAME, 279x29) + style: width: 100% + Text Heading (INSTANCE, 207x29) [component: Text Heading] + component-properties: Text#2104:5=Title + style: flex-grow: 1 + Text Heading (TEXT, 207x29) + style: flex-grow: 1; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Text Price (INSTANCE, 72x24) [component: Size=Small] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=true, Size=Small + Price (FRAME, 42x24) + $ (TEXT, 11x16) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 16px; letter-spacing: -0.32px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + 50 (TEXT, 31x24) + style: font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "50" + / mo (TEXT, 30x17) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 16.8px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "/ mo" + Text List (INSTANCE, 279x142) [component: Density=Tight] + component-properties: Slot#6062:9={"guid":{"sessionID":-1,"localID":-1}}, Has Title#480:0=false, Density=Tight + style: width: 100% + Slot (SLOT, 89x142) + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Button (INSTANCE, 279x40) [component: Variant=Neutral, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Neutral, State=Default, Size=Medium + style: width: 100%; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Button" + Page Accordion (INSTANCE, 375x541) [component: Platform=Mobile] + component-properties: Platform=Mobile + style: width: 100%; background: #CFF7D3 /* var:VariableID:3919:36435 */; max-width: 1200px + Text Content Heading (INSTANCE, 113x61) [component: Align=Center] + component-properties: Has Subheading#2153:9=true, Subheading#2153:11=Subheading, Heading#2153:10=Heading, Align=Center + Heading (TEXT, 113x29) + style: width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Heading" + Subheading (TEXT, 113x24) + style: width: 100%; /* text-style: Subheading */; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Subheading" + Accordion (INSTANCE, 327x408) [component: Accordion] + component-properties: Items#6031:6={"guid":{"sessionID":-1,"localID":-1}} + style: width: 100%; max-width: 640px + Accordion Item (INSTANCE, 327x128) [component: State=Open] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Open + style: width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 295x22) + style: width: 100% + Title (TEXT, 267x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron up (INSTANCE, 20x20) [component: Chevron up] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Content (FRAME, 295x66) + style: width: 100% + Body (TEXT, 295x66) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list." + Items (SLOT, 327x264) + style: width: 100% + Accordion Item (INSTANCE, 327x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 295x22) + style: flex-grow: 1 + Title (TEXT, 267x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Item (INSTANCE, 327x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 295x22) + style: flex-grow: 1 + Title (TEXT, 267x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Item (INSTANCE, 327x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 295x22) + style: flex-grow: 1 + Title (TEXT, 267x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Item (INSTANCE, 327x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 295x22) + style: flex-grow: 1 + Title (TEXT, 267x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Footer (INSTANCE, 375x919) [component: Platform=Mobile] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Title (SLOT, 311x35) + style: width: 100%; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Links (FRAME, 311x756) + style: width: 100%; background: #EBFFEE /* var:VariableID:2002:7433 */ + Slot (SLOT, 311x756) + style: width: 100% + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: width: 100% + Title (FRAME, 311x26) + style: width: 100% + Text Strong (INSTANCE, 81x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + Text Strong (TEXT, 81x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x202) + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: width: 100% + Title (FRAME, 311x26) + style: width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + Text Strong (TEXT, 59x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x202) + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: width: 100% + Title (FRAME, 311x26) + style: width: 100% + Text Strong (INSTANCE, 83x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + Text Strong (TEXT, 83x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x202) + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/layout-direction-spacing/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/mobile-pricing/layout-direction-spacing/run-0/diff-base.png new file mode 100644 index 00000000..44b9abb2 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-pricing/layout-direction-spacing/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/layout-direction-spacing/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/mobile-pricing/layout-direction-spacing/run-0/figma-base.png new file mode 100644 index 00000000..f86ca7cc Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-pricing/layout-direction-spacing/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/layout-direction-spacing/run-0/output.html b/data/ablation/phase1/72ffc72c9103/mobile-pricing/layout-direction-spacing/run-0/output.html new file mode 100644 index 00000000..f5391587 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-pricing/layout-direction-spacing/run-0/output.html @@ -0,0 +1,592 @@ + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+ + +
+
+
+
Monthly
+
+
+
Yearly
+
+
+ +
+ +
+
+
+
Title
+
+ $ + 50 + / mo +
+
+
+
List item
+
List item
+
List item
+
List item
+
List item
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+ $ + 50 + / mo +
+
+
+
List item
+
List item
+
List item
+
List item
+
List item
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+ $ + 50 + / mo +
+
+
+
List item
+
List item
+
List item
+
List item
+
List item
+
+
+
+
Button
+
+
+
+
+ + +
+
+
Heading
+
Subheading
+
+ +
+
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+ +
+
+
Title
+
+ + + +
+
+
+ +
+
+
Title
+
+ + + +
+
+
+ +
+
+
Title
+
+ + + +
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
Use cases
+
+
+
UI design
+
UX design
+
Wireframing
+
Diagramming
+
Brainstorming
+
Online whiteboard
+
Team collaboration
+
+
+ +
+
+
Explore
+
+
+
Design
+
Prototyping
+
Development features
+
Design systems
+
Collaboration features
+
Design process
+
FigJam
+
+
+ +
+
+
Resources
+
+
+
Blog
+
Best practices
+
Colors
+
Color wheel
+
Support
+
Developers
+
Resource library
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/layout-direction-spacing/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/mobile-pricing/layout-direction-spacing/run-0/response.txt new file mode 100644 index 00000000..b90ee849 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-pricing/layout-direction-spacing/run-0/response.txt @@ -0,0 +1,599 @@ +```html +// filename: index.html + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+ + +
+
+
+
Monthly
+
+
+
Yearly
+
+
+ +
+ +
+
+
+
Title
+
+ $ + 50 + / mo +
+
+
+
List item
+
List item
+
List item
+
List item
+
List item
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+ $ + 50 + / mo +
+
+
+
List item
+
List item
+
List item
+
List item
+
List item
+
+
+
+
Button
+
+
+ + +
+
+
+
Title
+
+ $ + 50 + / mo +
+
+
+
List item
+
List item
+
List item
+
List item
+
List item
+
+
+
+
Button
+
+
+
+
+ + +
+
+
Heading
+
Subheading
+
+ +
+
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+ +
+
+
Title
+
+ + + +
+
+
+ +
+
+
Title
+
+ + + +
+
+
+ +
+
+
Title
+
+ + + +
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
Use cases
+
+
+
UI design
+
UX design
+
Wireframing
+
Diagramming
+
Brainstorming
+
Online whiteboard
+
Team collaboration
+
+
+ +
+
+
Explore
+
+
+
Design
+
Prototyping
+
Development features
+
Design systems
+
Collaboration features
+
Design process
+
FigJam
+
+
+ +
+
+
Resources
+
+
+
Blog
+
Best practices
+
Colors
+
Color wheel
+
Support
+
Developers
+
Resource library
+
+
+
+
+
+ + +``` + +// interpretations: +- Used flexbox layout for component positioning and alignment where exact positioning wasn't specified +- Applied standard padding values (24px, 16px, 8px) for component spacing where gaps weren't explicitly defined +- Set accordion closed items to only show title without content area +- Used flex-grow: 1 for elements marked as flexible in the design tree \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/layout-direction-spacing/run-0/result.json b/data/ablation/phase1/72ffc72c9103/mobile-pricing/layout-direction-spacing/run-0/result.json new file mode 100644 index 00000000..f4665e46 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-pricing/layout-direction-spacing/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "mobile-pricing", + "type": "layout-direction-spacing", + "runIndex": 0, + "similarity": 90, + "inputTokens": 19110, + "outputTokens": 12167, + "totalTokens": 31277, + "htmlBytes": 32699, + "htmlLines": 592, + "cssClassCount": 39, + "cssVariableCount": 13, + "timestamp": "2026-03-28T11:46:44.836Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/node-names-hierarchy/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/mobile-pricing/node-names-hierarchy/run-0/code-base.png new file mode 100644 index 00000000..16c43b2b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-pricing/node-names-hierarchy/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/node-names-hierarchy/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/mobile-pricing/node-names-hierarchy/run-0/design-tree.txt new file mode 100644 index 00000000..01d46165 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-pricing/node-names-hierarchy/run-0/design-tree.txt @@ -0,0 +1,477 @@ +# Design Tree +# Root: 375px x 3017px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Node1 (COMPONENT, 375x3017) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Node2 (INSTANCE, 375x84) [component: Platform=Mobile, State=Default] + component-properties: Platform=Mobile, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 0px; justify-content: space-between; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Node3 (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Node4 (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node5 (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Node6 (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=68:15863, Variant=Subtle, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Node7 (INSTANCE, 20x20) [component: Menu] + style: overflow: hidden + Node8 (VECTOR, 15x10) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Node9 (INSTANCE, 375x424) [component: Platform=Mobile] + component-properties: Platform=Mobile + style: display: flex; flex-direction: column; align-items: center; align-self: STRETCH; padding: 160px 24px 160px 24px /* var:VariableID:346:10896 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; max-width: 1200px + Node10 (INSTANCE, 117x104) [component: Align=Center] + component-properties: Has Subtitle#2153:13=true, Subtitle#2153:12=Subtitle, Title#2153:14=Title, Align=Center + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center; background: #E6E6E6 /* var:VariableID:3919:36430 */ + Node11 (TEXT, 117x58) + style: align-self: STRETCH; width: 100%; /* text-style: Title Page */; font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 57.6px; letter-spacing: -0.96px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Node12 (TEXT, 117x38) + style: align-self: STRETCH; width: 100%; /* text-style: Subtitle */; font-family: "Inter"; font-weight: 400; font-size: 32px; line-height: 38.4px; text-align: center; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Subtitle" + Node13 (INSTANCE, 375x1049) [component: Platform=Mobile] + component-properties: Card Grid#6062:27={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #D9D9D9 /* var:VariableID:3919:36425 */; max-width: 1200px + Node14 (INSTANCE, 149x32) [component: Direction=Row] + component-properties: Link 1#2194:8=true, Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":6062,"localID":12611}}, Link 6#2194:3=false, Link 3#2194:7=false, Link 4#2194:6=false, Link 2#2194:4=true, Link 7#3529:0=true, Link 5#2194:5=false, Direction=Row + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px /* var:VariableID:9:11259 */; row-gap: 8px; align-items: flex-start + Node15 (SLOT, 149x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Node16 (INSTANCE, 78x32) [component: State=Active] + component-properties: Label#156:33=Monthly, State=Active + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Node17 (TEXT, 62x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Monthly" + Node18 (INSTANCE, 63x32) [component: State=Default] + component-properties: Label#156:33=Yearly, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Node19 (TEXT, 47x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Yearly" + Node20 (SLOT, 327x945) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px /* var:VariableID:9:11262 */; justify-content: center; align-items: flex-start; align-self: STRETCH; width: 100% + Node21 (INSTANCE, 327x299) [component: Device=Mobile, Variant=Stroke] + component-properties: Device=Mobile, Variant=Stroke + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 300px + Node22 (FRAME, 279x187) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; justify-content: flex-end; align-items: flex-start; align-self: STRETCH; width: 100% + Node23 (FRAME, 279x29) + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: space-between; align-items: flex-start; align-self: STRETCH; width: 100% + Node24 (INSTANCE, 207x29) [component: Text Heading] + component-properties: Text#2104:5=Title + style: display: flex; flex-direction: row; align-items: flex-start; flex-grow: 1 + Node25 (TEXT, 207x29) + style: flex-grow: 1; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Node26 (INSTANCE, 72x24) [component: Size=Small] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=true, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Node27 (FRAME, 42x24) + style: display: flex; flex-direction: row; align-items: flex-start + Node28 (TEXT, 11x16) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 16px; letter-spacing: -0.32px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + Node29 (TEXT, 31x24) + style: font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "50" + Node30 (TEXT, 30x17) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 16.8px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "/ mo" + Node31 (INSTANCE, 279x142) [component: Density=Tight] + component-properties: Slot#6062:9={"guid":{"sessionID":-1,"localID":-1}}, Has Title#480:0=false, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node32 (SLOT, 89x142) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Node33 (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node34 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Node35 (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node36 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Node37 (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node38 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Node39 (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node40 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Node41 (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node42 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Node43 (INSTANCE, 279x40) [component: Variant=Neutral, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Neutral, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Node44 (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Button" + Node45 (INSTANCE, 327x299) [component: Device=Mobile, Variant=Brand] + component-properties: Device=Mobile, Variant=Brand + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden; min-width: 300px + Node46 (FRAME, 279x187) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; justify-content: flex-end; align-items: flex-start; align-self: STRETCH; width: 100% + Node47 (FRAME, 279x29) + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: space-between; align-items: flex-start; align-self: STRETCH; width: 100% + Node48 (INSTANCE, 207x29) [component: Text Heading] + component-properties: Text#2104:5=Title + style: display: flex; flex-direction: row; align-items: flex-start; flex-grow: 1 + Node49 (TEXT, 207x29) + style: flex-grow: 1; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Title" + Node50 (INSTANCE, 72x24) [component: Size=Small] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=true, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Node51 (FRAME, 42x24) + style: display: flex; flex-direction: row; align-items: flex-start + Node52 (TEXT, 11x16) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 16px; letter-spacing: -0.32px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "$" + Node53 (TEXT, 31x24) + style: font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "50" + Node54 (TEXT, 30x17) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 16.8px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "/ mo" + Node55 (INSTANCE, 279x142) [component: Density=Tight] + component-properties: Slot#6062:9={"guid":{"sessionID":-1,"localID":-1}}, Has Title#480:0=false, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node56 (SLOT, 89x142) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Node57 (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node58 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Node59 (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node60 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Node61 (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node62 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Node63 (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node64 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Node65 (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node66 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Node67 (INSTANCE, 279x40) [component: Variant=Neutral, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Neutral, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Node68 (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Button" + Node69 (INSTANCE, 327x299) [component: Device=Mobile, Variant=Stroke] + component-properties: Device=Mobile, Variant=Stroke + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 300px + Node70 (FRAME, 279x187) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; justify-content: flex-end; align-items: flex-start; align-self: STRETCH; width: 100% + Node71 (FRAME, 279x29) + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: space-between; align-items: flex-start; align-self: STRETCH; width: 100% + Node72 (INSTANCE, 207x29) [component: Text Heading] + component-properties: Text#2104:5=Title + style: display: flex; flex-direction: row; align-items: flex-start; flex-grow: 1 + Node73 (TEXT, 207x29) + style: flex-grow: 1; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Node74 (INSTANCE, 72x24) [component: Size=Small] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=true, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Node75 (FRAME, 42x24) + style: display: flex; flex-direction: row; align-items: flex-start + Node76 (TEXT, 11x16) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 16px; letter-spacing: -0.32px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + Node77 (TEXT, 31x24) + style: font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "50" + Node78 (TEXT, 30x17) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 16.8px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "/ mo" + Node79 (INSTANCE, 279x142) [component: Density=Tight] + component-properties: Slot#6062:9={"guid":{"sessionID":-1,"localID":-1}}, Has Title#480:0=false, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node80 (SLOT, 89x142) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Node81 (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node82 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Node83 (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node84 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Node85 (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node86 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Node87 (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node88 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Node89 (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node90 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Node91 (INSTANCE, 279x40) [component: Variant=Neutral, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Neutral, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Node92 (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Button" + Node93 (INSTANCE, 375x541) [component: Platform=Mobile] + component-properties: Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #CFF7D3 /* var:VariableID:3919:36435 */; max-width: 1200px + Node94 (INSTANCE, 113x61) [component: Align=Center] + component-properties: Has Subheading#2153:9=true, Subheading#2153:11=Subheading, Heading#2153:10=Heading, Align=Center + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center + Node95 (TEXT, 113x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Heading" + Node96 (TEXT, 113x24) + style: align-self: STRETCH; width: 100%; /* text-style: Subheading */; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Subheading" + Node97 (INSTANCE, 327x408) [component: Accordion] + component-properties: Items#6031:6={"guid":{"sessionID":-1,"localID":-1}} + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100%; max-width: 640px + Node98 (INSTANCE, 327x128) [component: State=Open] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Open + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px + Node99 (FRAME, 295x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; width: 100% + Node100 (TEXT, 267x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Node101 (INSTANCE, 20x20) [component: Chevron up] + style: overflow: hidden + Node102 (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Node103 (FRAME, 295x66) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Node104 (TEXT, 295x66) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list." + Node105 (SLOT, 327x264) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; align-self: STRETCH; width: 100% + Node106 (INSTANCE, 327x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Node107 (FRAME, 295x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Node108 (TEXT, 267x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Node109 (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Node110 (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Node111 (INSTANCE, 327x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Node112 (FRAME, 295x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Node113 (TEXT, 267x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Node114 (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Node115 (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Node116 (INSTANCE, 327x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Node117 (FRAME, 295x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Node118 (TEXT, 267x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Node119 (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Node120 (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Node121 (INSTANCE, 327x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Node122 (FRAME, 295x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Node123 (TEXT, 267x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Node124 (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Node125 (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Node126 (INSTANCE, 375x919) [component: Platform=Mobile] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Node127 (SLOT, 311x35) + style: display: flex; flex-direction: row; column-gap: 16px; justify-content: space-between; align-items: center; align-self: STRETCH; width: 100%; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Node128 (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node129 (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Node130 (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + Node131 (FRAME, 24x24) + Node132 (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node133 (FRAME, 24x24) + style: overflow: hidden + Node134 (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node135 (FRAME, 24x24) + style: overflow: hidden + Node136 (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node137 (FRAME, 24x24) + style: overflow: hidden + Node138 (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node139 (FRAME, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; width: 100%; background: #EBFFEE /* var:VariableID:2002:7433 */ + Node140 (SLOT, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Node141 (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node142 (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Node143 (INSTANCE, 81x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Node144 (TEXT, 81x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Node145 (SLOT, 144x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Node146 (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node147 (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Node148 (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node149 (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Node150 (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node151 (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Node152 (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node153 (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Node154 (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node155 (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Node156 (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node157 (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Node158 (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node159 (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Node160 (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node161 (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Node162 (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Node163 (TEXT, 59x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Node164 (SLOT, 168x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Node165 (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node166 (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Node167 (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node168 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Node169 (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node170 (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Node171 (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node172 (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Node173 (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node174 (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Node175 (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node176 (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Node177 (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node178 (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Node179 (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node180 (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Node181 (INSTANCE, 83x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Node182 (TEXT, 83x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Node183 (SLOT, 123x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Node184 (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node185 (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Node186 (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node187 (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Node188 (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node189 (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Node190 (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node191 (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Node192 (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node193 (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Node194 (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node195 (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Node196 (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node197 (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/node-names-hierarchy/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/mobile-pricing/node-names-hierarchy/run-0/diff-base.png new file mode 100644 index 00000000..17e17337 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-pricing/node-names-hierarchy/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/node-names-hierarchy/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/mobile-pricing/node-names-hierarchy/run-0/figma-base.png new file mode 100644 index 00000000..f86ca7cc Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-pricing/node-names-hierarchy/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/node-names-hierarchy/run-0/output.html b/data/ablation/phase1/72ffc72c9103/mobile-pricing/node-names-hierarchy/run-0/output.html new file mode 100644 index 00000000..28d943c9 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-pricing/node-names-hierarchy/run-0/output.html @@ -0,0 +1,631 @@ + + + + + + Design System + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+ + +
+
+
+
+
Monthly
+
+
+
Yearly
+
+
+
+ +
+ +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+
+
+ + +
+
+
Heading
+
Subheading
+
+ +
+
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+ +
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+ +
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/node-names-hierarchy/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/mobile-pricing/node-names-hierarchy/run-0/response.txt new file mode 100644 index 00000000..b66a1408 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-pricing/node-names-hierarchy/run-0/response.txt @@ -0,0 +1,634 @@ +```html +// filename: index.html + + + + + + Design System + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+ + +
+
+
+
+
Monthly
+
+
+
Yearly
+
+
+
+ +
+ +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+ + +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
List item
+
+
+
+
+
+
Button
+
+
+
+
+ + +
+
+
Heading
+
Subheading
+
+ +
+
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+ +
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+ +
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/node-names-hierarchy/run-0/result.json b/data/ablation/phase1/72ffc72c9103/mobile-pricing/node-names-hierarchy/run-0/result.json new file mode 100644 index 00000000..ff835324 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-pricing/node-names-hierarchy/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "mobile-pricing", + "type": "node-names-hierarchy", + "runIndex": 0, + "similarity": 97, + "inputTokens": 23995, + "outputTokens": 15956, + "totalTokens": 39951, + "htmlBytes": 46432, + "htmlLines": 631, + "cssClassCount": 24, + "cssVariableCount": 13, + "timestamp": "2026-03-28T11:52:25.329Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/style-references/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/mobile-pricing/style-references/run-0/code-base.png new file mode 100644 index 00000000..60f1ca5a Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-pricing/style-references/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/style-references/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/mobile-pricing/style-references/run-0/design-tree.txt new file mode 100644 index 00000000..bfa3cdc7 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-pricing/style-references/run-0/design-tree.txt @@ -0,0 +1,477 @@ +# Design Tree +# Root: 375px x 3017px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Mobile (COMPONENT, 375x3017) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 375x84) [component: Platform=Mobile, State=Default] + component-properties: Platform=Mobile, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 0px; justify-content: space-between; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=68:15863, Variant=Subtle, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Menu (INSTANCE, 20x20) [component: Menu] + style: overflow: hidden + Icon (VECTOR, 15x10) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Hero Basic (INSTANCE, 375x424) [component: Platform=Mobile] + component-properties: Platform=Mobile + style: display: flex; flex-direction: column; align-items: center; align-self: STRETCH; padding: 160px 24px 160px 24px /* var:VariableID:346:10896 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; max-width: 1200px + Text Content Title (INSTANCE, 117x104) [component: Align=Center] + component-properties: Has Subtitle#2153:13=true, Subtitle#2153:12=Subtitle, Title#2153:14=Title, Align=Center + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center; background: #E6E6E6 /* var:VariableID:3919:36430 */ + Title (TEXT, 117x58) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 57.6px; letter-spacing: -0.96px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Subtitle (TEXT, 117x38) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 32px; line-height: 38.4px; text-align: center; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Subtitle" + Card Grid Pricing (INSTANCE, 375x1049) [component: Platform=Mobile] + component-properties: Card Grid#6062:27={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #D9D9D9 /* var:VariableID:3919:36425 */; max-width: 1200px + Navigation Pill List (INSTANCE, 149x32) [component: Direction=Row] + component-properties: Link 1#2194:8=true, Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":6062,"localID":12611}}, Link 6#2194:3=false, Link 3#2194:7=false, Link 4#2194:6=false, Link 2#2194:4=true, Link 7#3529:0=true, Link 5#2194:5=false, Direction=Row + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px /* var:VariableID:9:11259 */; row-gap: 8px; align-items: flex-start + Slot (SLOT, 149x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Navigation Pill (INSTANCE, 78x32) [component: State=Active] + component-properties: Label#156:33=Monthly, State=Active + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 62x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Monthly" + Navigation Pill (INSTANCE, 63x32) [component: State=Default] + component-properties: Label#156:33=Yearly, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 47x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Yearly" + Card Grid (SLOT, 327x945) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px /* var:VariableID:9:11262 */; justify-content: center; align-items: flex-start; align-self: STRETCH; width: 100% + Pricing Card (INSTANCE, 327x299) [component: Device=Mobile, Variant=Stroke] + component-properties: Device=Mobile, Variant=Stroke + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 300px + Top (FRAME, 279x187) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; justify-content: flex-end; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 279x29) + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: space-between; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 207x29) [component: Text Heading] + component-properties: Text#2104:5=Title + style: display: flex; flex-direction: row; align-items: flex-start; flex-grow: 1 + Text Heading (TEXT, 207x29) + style: flex-grow: 1; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Text Price (INSTANCE, 72x24) [component: Size=Small] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=true, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 42x24) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 11x16) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 16px; letter-spacing: -0.32px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + 50 (TEXT, 31x24) + style: font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "50" + / mo (TEXT, 30x17) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 16.8px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "/ mo" + Text List (INSTANCE, 279x142) [component: Density=Tight] + component-properties: Slot#6062:9={"guid":{"sessionID":-1,"localID":-1}}, Has Title#480:0=false, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Slot (SLOT, 89x142) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Button (INSTANCE, 279x40) [component: Variant=Neutral, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Neutral, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Button" + Pricing Card (INSTANCE, 327x299) [component: Device=Mobile, Variant=Brand] + component-properties: Device=Mobile, Variant=Brand + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden; min-width: 300px + Top (FRAME, 279x187) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; justify-content: flex-end; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 279x29) + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: space-between; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 207x29) [component: Text Heading] + component-properties: Text#2104:5=Title + style: display: flex; flex-direction: row; align-items: flex-start; flex-grow: 1 + Text Heading (TEXT, 207x29) + style: flex-grow: 1; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Title" + Text Price (INSTANCE, 72x24) [component: Size=Small] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=true, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 42x24) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 11x16) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 16px; letter-spacing: -0.32px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "$" + 50 (TEXT, 31x24) + style: font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "50" + / mo (TEXT, 30x17) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 16.8px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "/ mo" + Text List (INSTANCE, 279x142) [component: Density=Tight] + component-properties: Slot#6062:9={"guid":{"sessionID":-1,"localID":-1}}, Has Title#480:0=false, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Slot (SLOT, 89x142) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "List item" + Button (INSTANCE, 279x40) [component: Variant=Neutral, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Neutral, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Button" + Pricing Card (INSTANCE, 327x299) [component: Device=Mobile, Variant=Stroke] + component-properties: Device=Mobile, Variant=Stroke + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 300px + Top (FRAME, 279x187) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; justify-content: flex-end; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 279x29) + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: space-between; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 207x29) [component: Text Heading] + component-properties: Text#2104:5=Title + style: display: flex; flex-direction: row; align-items: flex-start; flex-grow: 1 + Text Heading (TEXT, 207x29) + style: flex-grow: 1; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Text Price (INSTANCE, 72x24) [component: Size=Small] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=true, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 42x24) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 11x16) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 16px; letter-spacing: -0.32px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + 50 (TEXT, 31x24) + style: font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "50" + / mo (TEXT, 30x17) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 16.8px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "/ mo" + Text List (INSTANCE, 279x142) [component: Density=Tight] + component-properties: Slot#6062:9={"guid":{"sessionID":-1,"localID":-1}}, Has Title#480:0=false, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Slot (SLOT, 89x142) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "List item" + Button (INSTANCE, 279x40) [component: Variant=Neutral, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Neutral, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Button" + Page Accordion (INSTANCE, 375x541) [component: Platform=Mobile] + component-properties: Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #CFF7D3 /* var:VariableID:3919:36435 */; max-width: 1200px + Text Content Heading (INSTANCE, 113x61) [component: Align=Center] + component-properties: Has Subheading#2153:9=true, Subheading#2153:11=Subheading, Heading#2153:10=Heading, Align=Center + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center + Heading (TEXT, 113x29) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Heading" + Subheading (TEXT, 113x24) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Subheading" + Accordion (INSTANCE, 327x408) [component: Accordion] + component-properties: Items#6031:6={"guid":{"sessionID":-1,"localID":-1}} + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100%; max-width: 640px + Accordion Item (INSTANCE, 327x128) [component: State=Open] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Open + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 295x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; width: 100% + Title (TEXT, 267x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron up (INSTANCE, 20x20) [component: Chevron up] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Content (FRAME, 295x66) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Body (TEXT, 295x66) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list." + Items (SLOT, 327x264) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; align-self: STRETCH; width: 100% + Accordion Item (INSTANCE, 327x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 295x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Title (TEXT, 267x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Item (INSTANCE, 327x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 295x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Title (TEXT, 267x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Item (INSTANCE, 327x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 295x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Title (TEXT, 267x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Item (INSTANCE, 327x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 295x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1 + Title (TEXT, 267x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Footer (INSTANCE, 375x919) [component: Platform=Mobile] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Title (SLOT, 311x35) + style: display: flex; flex-direction: row; column-gap: 16px; justify-content: space-between; align-items: center; align-self: STRETCH; width: 100%; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Links (FRAME, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; width: 100%; background: #EBFFEE /* var:VariableID:2002:7433 */ + Slot (SLOT, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 81x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 81x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 72x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 78x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 92x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 100x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 105x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 138x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 144x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 53x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 167x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 120x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 168x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 117x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 55x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 83x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 83x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 34x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 109x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 49x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 90x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 61x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 86x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 123x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/style-references/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/mobile-pricing/style-references/run-0/diff-base.png new file mode 100644 index 00000000..3b68b37e Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-pricing/style-references/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/style-references/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/mobile-pricing/style-references/run-0/figma-base.png new file mode 100644 index 00000000..f86ca7cc Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-pricing/style-references/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/style-references/run-0/output.html b/data/ablation/phase1/72ffc72c9103/mobile-pricing/style-references/run-0/output.html new file mode 100644 index 00000000..b1df792e --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-pricing/style-references/run-0/output.html @@ -0,0 +1,548 @@ + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+ + +
+
+
+
+
Monthly
+
+
+
Yearly
+
+
+
+ +
+ +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
List item
+
List item
+
List item
+
List item
+
+
+
+
+
Button
+
+
+ + +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
List item
+
List item
+
List item
+
List item
+
+
+
+
+
Button
+
+
+ + +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
List item
+
List item
+
List item
+
List item
+
+
+
+
+
Button
+
+
+
+
+ + +
+
+
Heading
+
Subheading
+
+ +
+ +
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+ +
+
+
Use cases
+
+
+
UI design
+
UX design
+
Wireframing
+
Diagramming
+
Brainstorming
+
Online whiteboard
+
Team collaboration
+
+
+ + +
+
+
Explore
+
+
+
Design
+
Prototyping
+
Development features
+
Design systems
+
Collaboration features
+
Design process
+
FigJam
+
+
+ + +
+
+
Resources
+
+
+
Blog
+
Best practices
+
Colors
+
Color wheel
+
Support
+
Developers
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/style-references/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/mobile-pricing/style-references/run-0/response.txt new file mode 100644 index 00000000..1cafdc39 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-pricing/style-references/run-0/response.txt @@ -0,0 +1,551 @@ +```html +// filename: index.html + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+ + +
+
+
+
+
Monthly
+
+
+
Yearly
+
+
+
+ +
+ +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
List item
+
List item
+
List item
+
List item
+
+
+
+
+
Button
+
+
+ + +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
List item
+
List item
+
List item
+
List item
+
+
+
+
+
Button
+
+
+ + +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
List item
+
List item
+
List item
+
List item
+
+
+
+
+
Button
+
+
+
+
+ + +
+
+
Heading
+
Subheading
+
+ +
+ +
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+ +
+
+
Use cases
+
+
+
UI design
+
UX design
+
Wireframing
+
Diagramming
+
Brainstorming
+
Online whiteboard
+
Team collaboration
+
+
+ + +
+
+
Explore
+
+
+
Design
+
Prototyping
+
Development features
+
Design systems
+
Collaboration features
+
Design process
+
FigJam
+
+
+ + +
+
+
Resources
+
+
+
Blog
+
Best practices
+
Colors
+
Color wheel
+
Support
+
Developers
+
Resource library
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/style-references/run-0/result.json b/data/ablation/phase1/72ffc72c9103/mobile-pricing/style-references/run-0/result.json new file mode 100644 index 00000000..0e32e558 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-pricing/style-references/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "mobile-pricing", + "type": "style-references", + "runIndex": 0, + "similarity": 97, + "inputTokens": 23350, + "outputTokens": 16250, + "totalTokens": 39600, + "htmlBytes": 44619, + "htmlLines": 548, + "cssClassCount": 23, + "cssVariableCount": 13, + "timestamp": "2026-03-28T11:57:43.044Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/variable-references/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/mobile-pricing/variable-references/run-0/code-base.png new file mode 100644 index 00000000..56ba1c7a Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-pricing/variable-references/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/variable-references/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/mobile-pricing/variable-references/run-0/design-tree.txt new file mode 100644 index 00000000..4eee25dc --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-pricing/variable-references/run-0/design-tree.txt @@ -0,0 +1,477 @@ +# Design Tree +# Root: 375px x 3017px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Mobile (COMPONENT, 375x3017) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF; overflow: hidden + Header (INSTANCE, 375x84) [component: Platform=Mobile, State=Default] + component-properties: Platform=Mobile, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 0px; justify-content: space-between; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px; width: 100%; background: #FFFFFF; border-bottom: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=68:15863, Variant=Subtle, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Menu (INSTANCE, 20x20) [component: Menu] + style: overflow: hidden + Icon (VECTOR, 15x10) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Hero Basic (INSTANCE, 375x424) [component: Platform=Mobile] + component-properties: Platform=Mobile + style: display: flex; flex-direction: column; align-items: center; align-self: STRETCH; padding: 160px 24px 160px 24px; width: 100%; background: #F5F5F5; max-width: 1200px + Text Content Title (INSTANCE, 117x104) [component: Align=Center] + component-properties: Has Subtitle#2153:13=true, Subtitle#2153:12=Subtitle, Title#2153:14=Title, Align=Center + style: display: flex; flex-direction: column; row-gap: 8px; align-items: center; background: #E6E6E6 + Title (TEXT, 117x58) + style: align-self: STRETCH; width: 100%; /* text-style: Title Page */; font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 57.6px; letter-spacing: -0.96px; text-align: center; color: #1E1E1E; text: "Title" + Subtitle (TEXT, 117x38) + style: align-self: STRETCH; width: 100%; /* text-style: Subtitle */; font-family: "Inter"; font-weight: 400; font-size: 32px; line-height: 38.4px; text-align: center; display: flex; align-items: center; color: #757575; text: "Subtitle" + Card Grid Pricing (INSTANCE, 375x1049) [component: Platform=Mobile] + component-properties: Card Grid#6062:27={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 24px; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px; width: 100%; background: #D9D9D9; max-width: 1200px + Navigation Pill List (INSTANCE, 149x32) [component: Direction=Row] + component-properties: Link 1#2194:8=true, Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":6062,"localID":12611}}, Link 6#2194:3=false, Link 3#2194:7=false, Link 4#2194:6=false, Link 2#2194:4=true, Link 7#3529:0=true, Link 5#2194:5=false, Direction=Row + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px; row-gap: 8px; align-items: flex-start + Slot (SLOT, 149x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Navigation Pill (INSTANCE, 78x32) [component: State=Active] + component-properties: Label#156:33=Monthly, State=Active + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; background: #F5F5F5; border-radius: 8px + Title (TEXT, 62x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Monthly" + Navigation Pill (INSTANCE, 63x32) [component: State=Default] + component-properties: Label#156:33=Yearly, State=Default + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 8px + Title (TEXT, 47x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Yearly" + Card Grid (SLOT, 327x945) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 24px; justify-content: center; align-items: flex-start; align-self: STRETCH; width: 100% + Pricing Card (INSTANCE, 327x299) [component: Device=Mobile, Variant=Stroke] + component-properties: Device=Mobile, Variant=Stroke + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 300px + Top (FRAME, 279x187) + style: display: flex; flex-direction: column; row-gap: 16px; justify-content: flex-end; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 279x29) + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: space-between; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 207x29) [component: Text Heading] + component-properties: Text#2104:5=Title + style: display: flex; flex-direction: row; align-items: flex-start; flex-grow: 1 + Text Heading (TEXT, 207x29) + style: flex-grow: 1; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "Title" + Text Price (INSTANCE, 72x24) [component: Size=Small] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=true, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 42x24) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 11x16) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 16px; letter-spacing: -0.32px; text-align: left; color: #1E1E1E; text: "$" + 50 (TEXT, 31x24) + style: font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "50" + / mo (TEXT, 30x17) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 16.8px; text-align: left; color: #1E1E1E; text: "/ mo" + Text List (INSTANCE, 279x142) [component: Density=Tight] + component-properties: Slot#6062:9={"guid":{"sessionID":-1,"localID":-1}}, Has Title#480:0=false, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Slot (SLOT, 89x142) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575; text: "List item" + Button (INSTANCE, 279x40) [component: Variant=Neutral, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Neutral, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px; width: 100%; background: #E3E3E3; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E; text: "Button" + Pricing Card (INSTANCE, 327x299) [component: Device=Mobile, Variant=Brand] + component-properties: Device=Mobile, Variant=Brand + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px; background: #2C2C2C; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden; min-width: 300px + Top (FRAME, 279x187) + style: display: flex; flex-direction: column; row-gap: 16px; justify-content: flex-end; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 279x29) + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: space-between; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 207x29) [component: Text Heading] + component-properties: Text#2104:5=Title + style: display: flex; flex-direction: row; align-items: flex-start; flex-grow: 1 + Text Heading (TEXT, 207x29) + style: flex-grow: 1; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #F5F5F5; text: "Title" + Text Price (INSTANCE, 72x24) [component: Size=Small] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=true, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 42x24) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 11x16) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 16px; letter-spacing: -0.32px; text-align: left; color: #F5F5F5; text: "$" + 50 (TEXT, 31x24) + style: font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #F5F5F5; text: "50" + / mo (TEXT, 30x17) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 16.8px; text-align: left; color: #F5F5F5; text: "/ mo" + Text List (INSTANCE, 279x142) [component: Density=Tight] + component-properties: Slot#6062:9={"guid":{"sessionID":-1,"localID":-1}}, Has Title#480:0=false, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Slot (SLOT, 89x142) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #F5F5F5; text: "List item" + Button (INSTANCE, 279x40) [component: Variant=Neutral, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Neutral, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px; width: 100%; background: #E3E3E3; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E; text: "Button" + Pricing Card (INSTANCE, 327x299) [component: Device=Mobile, Variant=Stroke] + component-properties: Device=Mobile, Variant=Stroke + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 300px + Top (FRAME, 279x187) + style: display: flex; flex-direction: column; row-gap: 16px; justify-content: flex-end; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 279x29) + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: space-between; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 207x29) [component: Text Heading] + component-properties: Text#2104:5=Title + style: display: flex; flex-direction: row; align-items: flex-start; flex-grow: 1 + Text Heading (TEXT, 207x29) + style: flex-grow: 1; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "Title" + Text Price (INSTANCE, 72x24) [component: Size=Small] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=true, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 42x24) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 11x16) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 16px; letter-spacing: -0.32px; text-align: left; color: #1E1E1E; text: "$" + 50 (TEXT, 31x24) + style: font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "50" + / mo (TEXT, 30x17) + style: font-family: "Inter"; font-weight: 400; font-size: 14px; line-height: 16.8px; text-align: left; color: #1E1E1E; text: "/ mo" + Text List (INSTANCE, 279x142) [component: Density=Tight] + component-properties: Slot#6062:9={"guid":{"sessionID":-1,"localID":-1}}, Has Title#480:0=false, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Slot (SLOT, 89x142) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575; text: "List item" + Text List Item (INSTANCE, 89x22) [component: Text List Item] + component-properties: Text#2077:1=List item + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575; text: "List item" + Button (INSTANCE, 279x40) [component: Variant=Neutral, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Neutral, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px; width: 100%; background: #E3E3E3; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E; text: "Button" + Page Accordion (INSTANCE, 375x541) [component: Platform=Mobile] + component-properties: Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 24px; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px; width: 100%; background: #CFF7D3; max-width: 1200px + Text Content Heading (INSTANCE, 113x61) [component: Align=Center] + component-properties: Has Subheading#2153:9=true, Subheading#2153:11=Subheading, Heading#2153:10=Heading, Align=Center + style: display: flex; flex-direction: column; row-gap: 8px; align-items: center + Heading (TEXT, 113x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E; text: "Heading" + Subheading (TEXT, 113x24) + style: align-self: STRETCH; width: 100%; /* text-style: Subheading */; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; display: flex; align-items: center; color: #757575; text: "Subheading" + Accordion (INSTANCE, 327x408) [component: Accordion] + component-properties: Items#6031:6={"guid":{"sessionID":-1,"localID":-1}} + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; align-self: STRETCH; width: 100%; max-width: 640px + Accordion Item (INSTANCE, 327x128) [component: State=Open] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Open + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; padding: 16px 16px 16px 16px; width: 100%; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 295x22) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center; align-self: STRETCH; width: 100% + Title (TEXT, 267x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Title" + Chevron up (INSTANCE, 20x20) [component: Chevron up] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Content (FRAME, 295x66) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Body (TEXT, 295x66) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list." + Items (SLOT, 327x264) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; align-self: STRETCH; width: 100% + Accordion Item (INSTANCE, 327x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px; width: 100%; background: #F5F5F5; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 295x22) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center; flex-grow: 1 + Title (TEXT, 267x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Item (INSTANCE, 327x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px; width: 100%; background: #F5F5F5; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 295x22) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center; flex-grow: 1 + Title (TEXT, 267x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Item (INSTANCE, 327x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px; width: 100%; background: #F5F5F5; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 295x22) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center; flex-grow: 1 + Title (TEXT, 267x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Item (INSTANCE, 327x54) [component: State=Closed] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Closed + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 16px 16px 16px 16px; width: 100%; background: #F5F5F5; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 295x22) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center; flex-grow: 1 + Title (TEXT, 267x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Title" + Chevron down (INSTANCE, 20x20) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Footer (INSTANCE, 375x919) [component: Platform=Mobile] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 64px; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 32px 32px; width: 100%; background: #5A5A5A; border-top: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Title (SLOT, 311x35) + style: display: flex; flex-direction: row; column-gap: 16px; justify-content: space-between; align-items: center; align-self: STRETCH; width: 100%; background: #CFF7D3; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E; svg: + Links (FRAME, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100%; background: #EBFFEE + Slot (SLOT, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px; width: 100% + Text Strong (INSTANCE, 81x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 81x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Use cases" + Slot (SLOT, 144x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Team collaboration" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px; width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Explore" + Slot (SLOT, 168x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "FigJam" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px; width: 100% + Text Strong (INSTANCE, 83x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 83x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Resources" + Slot (SLOT, 123x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/variable-references/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/mobile-pricing/variable-references/run-0/diff-base.png new file mode 100644 index 00000000..b2d44538 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-pricing/variable-references/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/variable-references/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/mobile-pricing/variable-references/run-0/figma-base.png new file mode 100644 index 00000000..f86ca7cc Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-pricing/variable-references/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/variable-references/run-0/output.html b/data/ablation/phase1/72ffc72c9103/mobile-pricing/variable-references/run-0/output.html new file mode 100644 index 00000000..903d699a --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-pricing/variable-references/run-0/output.html @@ -0,0 +1,371 @@ + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+ + +
+
+
+
+
Monthly
+
+
+
Yearly
+
+
+
+ +
+ +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
List item
+
List item
+
List item
+
List item
+
+
+
+
+
Button
+
+
+ + +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
List item
+
List item
+
List item
+
List item
+
+
+
+
+
Button
+
+
+ + +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
List item
+
List item
+
List item
+
List item
+
+
+
+
+
Button
+
+
+
+
+ + +
+
+
Heading
+
Subheading
+
+ +
+ +
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+ +
+
+
Use cases
+
+
+
UI design
+
UX design
+
Wireframing
+
Diagramming
+
Brainstorming
+
Online whiteboard
+
Team collaboration
+
+
+ + +
+
+
Explore
+
+
+
Design
+
Prototyping
+
Development features
+
Design systems
+
Collaboration features
+
Design process
+
FigJam
+
+
+ + +
+
+
Resources
+
+
+
Blog
+
Best practices
+
Colors
+
Color wheel
+
Support
+
Developers
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/variable-references/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/mobile-pricing/variable-references/run-0/response.txt new file mode 100644 index 00000000..31b5783e --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-pricing/variable-references/run-0/response.txt @@ -0,0 +1,374 @@ +```html +// filename: index.html + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+ + +
+
+
+
+
Monthly
+
+
+
Yearly
+
+
+
+ +
+ +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
List item
+
List item
+
List item
+
List item
+
+
+
+
+
Button
+
+
+ + +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
List item
+
List item
+
List item
+
List item
+
+
+
+
+
Button
+
+
+ + +
+
+
+
+
Title
+
+
+
+
$
+
50
+
+
/ mo
+
+
+
+
+
List item
+
List item
+
List item
+
List item
+
List item
+
+
+
+
+
Button
+
+
+
+
+ + +
+
+
Heading
+
Subheading
+
+ +
+ +
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
Title
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+ +
+
+
Use cases
+
+
+
UI design
+
UX design
+
Wireframing
+
Diagramming
+
Brainstorming
+
Online whiteboard
+
Team collaboration
+
+
+ + +
+
+
Explore
+
+
+
Design
+
Prototyping
+
Development features
+
Design systems
+
Collaboration features
+
Design process
+
FigJam
+
+
+ + +
+
+
Resources
+
+
+
Blog
+
Best practices
+
Colors
+
Color wheel
+
Support
+
Developers
+
Resource library
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-pricing/variable-references/run-0/result.json b/data/ablation/phase1/72ffc72c9103/mobile-pricing/variable-references/run-0/result.json new file mode 100644 index 00000000..4fcb4e06 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-pricing/variable-references/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "mobile-pricing", + "type": "variable-references", + "runIndex": 0, + "similarity": 89, + "inputTokens": 21674, + "outputTokens": 14496, + "totalTokens": 36170, + "htmlBytes": 39606, + "htmlLines": 371, + "cssClassCount": 28, + "cssVariableCount": 13, + "timestamp": "2026-03-28T11:54:58.008Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/code-base.png new file mode 100644 index 00000000..cdc85969 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/design-tree.txt new file mode 100644 index 00000000..71055fa6 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/design-tree.txt @@ -0,0 +1,482 @@ +# Design Tree +# Root: 375px x 3258px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Mobile (COMPONENT, 375x3258) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 375x84) [component: Platform=Mobile, State=Default] + component-properties: Platform=Mobile, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 0px; justify-content: space-between; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=68:15863, Variant=Subtle, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Menu (INSTANCE, 20x20) [component: Menu] + style: overflow: hidden + Icon (VECTOR, 15x10) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Page Product (INSTANCE, 375x1282) [component: Platform=Mobile] + component-properties: Column#6062:42={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #FFF1C2 /* var:VariableID:3919:36440 */; min-width: 240px; max-width: 1200px + Section (FRAME, 327x1234) + style: display: flex; flex-direction: column; row-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; position: relative; width: 100% + Image (FRAME, 327x327) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Column (SLOT, 327x843) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Body (FRAME, 327x167) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 327x129) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 327x29) [component: Text Heading] + component-properties: Text#2104:5=Text Heading + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (TEXT, 149x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text Heading" + Price (FRAME, 327x84) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; justify-content: center; align-items: flex-start; align-self: STRETCH; width: 100% + Tag (INSTANCE, 44x32) [component: Scheme=Positive, State=Default, Variant=Secondary] + component-properties: Label#9765:0=Tag, Removable#147:0=false, Scheme=Positive, State=Default, Variant=Secondary + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #CFF7D3 /* var:VariableID:3919:36435 */; border-radius: 8px + Tag (TEXT, 28x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #02542D /* var:VariableID:3919:36467 */; text: "Tag" + Text Price (INSTANCE, 80x48) [component: Size=Large] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=false, Size=Large + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 80x48) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 16x24) + style: font-family: "Inter"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + 50 (TEXT, 64x48) + style: font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "50" + Text (INSTANCE, 327x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 327x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Text" + Fields (FRAME, 327x156) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; justify-content: center; align-items: flex-start; align-self: STRETCH; width: 100% + Select Field (INSTANCE, 327x70) [component: State=Default, Value Type=Default] + component-properties: Error#280:88=Error, Value#630:7=Value, Has Description#611:4=false, Has Error#72:6=true, Description#611:0=Description, Label#280:85=Label, Open#586:0=false, Has Label#57:0=true, State=Default, Value Type=Default + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Label (TEXT, 327x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Select (FRAME, 327x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; position: relative; padding: 12px 12px 12px 16px /* var:VariableID:9:11260 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 120px + Value (TEXT, 275x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Value" + Chevron down (INSTANCE, 16x16) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 8x4) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Select Field (INSTANCE, 327x70) [component: State=Default, Value Type=Default] + component-properties: Error#280:88=Error, Value#630:7=Value, Has Description#611:4=false, Has Error#72:6=true, Description#611:0=Description, Label#280:85=Label, Open#586:0=false, Has Label#57:0=true, State=Default, Value Type=Default + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Label (TEXT, 327x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Select (FRAME, 327x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; position: relative; padding: 12px 12px 12px 16px /* var:VariableID:9:11260 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 120px + Value (TEXT, 275x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Value" + Chevron down (INSTANCE, 16x16) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 8x4) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Button (INSTANCE, 327x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Button" + Accordion (INSTANCE, 327x408) [component: Accordion] + component-properties: Items#6031:6={"guid":{"sessionID":-1,"localID":-1}} + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100%; max-width: 640px + Accordion Item (INSTANCE, 327x128) [component: State=Open] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Open + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 295x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; width: 100% + Title (TEXT, 267x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron up (INSTANCE, 20x20) [component: Chevron up] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Content (FRAME, 295x66) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Body (TEXT, 295x66) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list." + Items (SLOT, 327x264) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; align-self: STRETCH; width: 100% + Icon Button (INSTANCE, 36x36) [component: Variant=Primary, State=Default, Size=Small] + component-properties: Icon#4:192=4039:12363, Variant=Primary, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; position: absolute; top: 10px; left: 10px; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 32px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Heart (INSTANCE, 20x20) [component: Heart] + style: overflow: hidden + Icon (VECTOR, 17x15) + style: border: 2px solid #F5F5F5; svg: + Card Grid Reviews (INSTANCE, 375x800) [component: Platform=Mobile] + component-properties: Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: rgba(0, 0, 0, 0.5) /* var:VariableID:7786:36548 */; max-width: 1200px + Text Heading (INSTANCE, 163x29) [component: Text Heading] + component-properties: Text#2104:5=Latest reviews + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 163x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Latest reviews" + Card Grid (FRAME, 327x699) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Review Card (INSTANCE, 327x217) [component: Review Card] + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FAE1FA /* var:VariableID:72:9197 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Rating (FRAME, 116x20) + style: display: flex; flex-direction: row; column-gap: 4px /* var:VariableID:9:11258 */; align-items: center + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Review Body (FRAME, 279x55) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 130x29) [component: Text Heading] + component-properties: Text#2104:5=Review title + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 130x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review title" + Text (INSTANCE, 279x22) [component: Text] + component-properties: Text#2104:7=Review body + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 279x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review body" + Avatar Block (INSTANCE, 279x46) [component: Avatar Block] + component-properties: Description#2010:8=Date, Title#2010:7=Reviewer name + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Avatar (INSTANCE, 40x40) [component: Type=Image, Size=Large, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Large, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 40x40) + style: content-image: url(images/shape@2x.png); object-fit: cover + Info (FRAME, 227x46) + style: display: flex; flex-direction: column; row-gap: 2px; align-items: flex-start; flex-grow: 1 + Title (TEXT, 227x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Reviewer name" + Description (TEXT, 227x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Date" + Review Card (INSTANCE, 327x217) [component: Review Card] + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FAE1FA /* var:VariableID:72:9197 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Rating (FRAME, 116x20) + style: display: flex; flex-direction: row; column-gap: 4px /* var:VariableID:9:11258 */; align-items: center + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Review Body (FRAME, 279x55) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 130x29) [component: Text Heading] + component-properties: Text#2104:5=Review title + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 130x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review title" + Text (INSTANCE, 279x22) [component: Text] + component-properties: Text#2104:7=Review body + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 279x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review body" + Avatar Block (INSTANCE, 279x46) [component: Avatar Block] + component-properties: Description#2010:8=Date, Title#2010:7=Reviewer name + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Avatar (INSTANCE, 40x40) [component: Type=Image, Size=Large, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Large, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 40x40) + style: content-image: url(images/shape-2@2x.png); object-fit: cover + Info (FRAME, 227x46) + style: display: flex; flex-direction: column; row-gap: 2px; align-items: flex-start; flex-grow: 1 + Title (TEXT, 227x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Reviewer name" + Description (TEXT, 227x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Date" + Review Card (INSTANCE, 327x217) [component: Review Card] + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FAE1FA /* var:VariableID:72:9197 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Rating (FRAME, 116x20) + style: display: flex; flex-direction: row; column-gap: 4px /* var:VariableID:9:11258 */; align-items: center + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Review Body (FRAME, 279x55) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 130x29) [component: Text Heading] + component-properties: Text#2104:5=Review title + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 130x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review title" + Text (INSTANCE, 279x22) [component: Text] + component-properties: Text#2104:7=Review body + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 279x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review body" + Avatar Block (INSTANCE, 279x46) [component: Avatar Block] + component-properties: Description#2010:8=Date, Title#2010:7=Reviewer name + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Avatar (INSTANCE, 40x40) [component: Type=Image, Size=Large, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Large, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 40x40) + style: content-image: url(images/shape-3@2x.png); object-fit: cover + Info (FRAME, 227x46) + style: display: flex; flex-direction: column; row-gap: 2px; align-items: flex-start; flex-grow: 1 + Title (TEXT, 227x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Reviewer name" + Description (TEXT, 227x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Date" + Page Newsletter (INSTANCE, 375x173) [component: Platform=Mobile] + component-properties: Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #D9D9D9 /* var:VariableID:3919:36448 */; max-width: 1200px + Text Content Heading (INSTANCE, 327x61) [component: Align=Start] + component-properties: Has Subheading#2153:9=true, Subheading#2153:11=With our daily newsletterWith our daily newsletterWith our daily newsletter, Heading#2153:10=Follow the latest trends, Align=Start + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; width: 100% + Heading (TEXT, 327x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Follow the latest trends" + Subheading (TEXT, 327x24) + style: align-self: STRETCH; width: 100%; /* text-style: Subheading */; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "With our daily newsletterWith our daily newsletterWith our daily newsletter" + Form Newsletter (INSTANCE, 327x40) [component: Form Newsletter] + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Input Field (INSTANCE, 238x40) [component: State=Default, Value Type=Default] + component-properties: Value#630:14=you@example.com, Description#611:27=Description, Has Label#57:0=false, Error#280:44=Error, Has Error#72:6=false, Label#280:41=Email address, Has Description#611:20=false, State=Default, Value Type=Default + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; flex-grow: 1 + Input (FRAME, 238x40) + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 12px 16px 12px 16px /* var:VariableID:9:11260 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 120px + Value (TEXT, 206x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "you@example.com" + Button (INSTANCE, 77x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Submit, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 53x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Submit" + Footer (INSTANCE, 375x919) [component: Platform=Mobile] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Title (SLOT, 311x35) + style: display: flex; flex-direction: row; column-gap: 16px; justify-content: space-between; align-items: center; align-self: STRETCH; width: 100%; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Links (FRAME, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; width: 100%; background: #EBFFEE /* var:VariableID:2002:7433 */ + Slot (SLOT, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 81x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 81x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 83x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 83x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/diff-base.png new file mode 100644 index 00000000..c659f711 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/figma-base.png new file mode 100644 index 00000000..7d778d30 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/images/image@2x.png new file mode 100644 index 00000000..86ddb82a Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/images/mapping.json new file mode 100644 index 00000000..3e11702b --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/images/mapping.json @@ -0,0 +1,6 @@ +{ + "I562:10933;3049:2455": "image@2x.png", + "I562:10934;348:15217;2236:16098;2010:15576;9762:1114": "shape@2x.png", + "I562:10934;348:15218;2236:16098;2010:15576;9762:1114": "shape-2@2x.png", + "I562:10934;348:15219;2236:16098;2010:15576;9762:1114": "shape-3@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/images/shape-2@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/images/shape-2@2x.png new file mode 100644 index 00000000..0286f0fb Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/images/shape-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/images/shape-3@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/images/shape-3@2x.png new file mode 100644 index 00000000..0286f0fb Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/images/shape-3@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/images/shape@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/images/shape@2x.png new file mode 100644 index 00000000..0286f0fb Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/images/shape@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/output.html b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/output.html new file mode 100644 index 00000000..63bcf73a --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/output.html @@ -0,0 +1,642 @@ + + + + + + Platform Mobile + + + + +
+ + +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+ + +
+ +
+ + +
+ + +
+ + +
+
+
Text Heading
+
+ + +
+
+
Tag
+
+
+
+
$
+
50
+
+
+
+
+ +
+
Text
+
+
+ + +
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+ + +
+
Button
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+
+
+
+ + +
+
+ + + +
+
+
+
+ + +
+
+
Latest reviews
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+
+
+ + +
+
+
Follow the latest trends
+
With our daily newsletterWith our daily newsletterWith our daily newsletter
+
+
+
+
+
you@example.com
+
+
+
+
Submit
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+ + +
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/response.txt new file mode 100644 index 00000000..4a45ef00 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/response.txt @@ -0,0 +1,645 @@ +```html +// filename: index.html + + + + + + Platform Mobile + + + + +
+ + +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+ + +
+ +
+ + +
+ + +
+ + +
+
+
Text Heading
+
+ + +
+
+
Tag
+
+
+
+
$
+
50
+
+
+
+
+ +
+
Text
+
+
+ + +
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+ + +
+
Button
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+
+
+
+ + +
+
+ + + +
+
+
+
+ + +
+
+
Latest reviews
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+
+
+ + +
+
+
Follow the latest trends
+
With our daily newsletterWith our daily newsletterWith our daily newsletter
+
+
+
+
+
you@example.com
+
+
+
+
Submit
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+ + +
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/result.json b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/result.json new file mode 100644 index 00000000..8aab0d40 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/baseline/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "mobile-product-detail", + "type": "baseline", + "runIndex": 0, + "similarity": 98, + "inputTokens": 26027, + "outputTokens": 19069, + "totalTokens": 45096, + "htmlBytes": 52940, + "htmlLines": 642, + "cssClassCount": 17, + "cssVariableCount": 14, + "timestamp": "2026-03-28T10:49:51.135Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/code-base.png new file mode 100644 index 00000000..88e105f0 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/design-tree.txt new file mode 100644 index 00000000..a968ce1a --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/design-tree.txt @@ -0,0 +1,423 @@ +# Design Tree +# Root: 375px x 3258px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Mobile (COMPONENT, 375x3258) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 375x84) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 0px; justify-content: space-between; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Menu (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 15x10) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Page Product (INSTANCE, 375x1282) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #FFF1C2 /* var:VariableID:3919:36440 */; min-width: 240px; max-width: 1200px + Section (FRAME, 327x1234) + style: display: flex; flex-direction: column; row-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; position: relative; width: 100% + Image (FRAME, 327x327) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Column (SLOT, 327x843) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Body (FRAME, 327x167) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 327x129) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 327x29) + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (TEXT, 149x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text Heading" + Price (FRAME, 327x84) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; justify-content: center; align-items: flex-start; align-self: STRETCH; width: 100% + Tag (INSTANCE, 44x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #CFF7D3 /* var:VariableID:3919:36435 */; border-radius: 8px + Tag (TEXT, 28x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #02542D /* var:VariableID:3919:36467 */; text: "Tag" + Text Price (INSTANCE, 80x48) + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 80x48) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 16x24) + style: font-family: "Inter"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + 50 (TEXT, 64x48) + style: font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "50" + Text (INSTANCE, 327x22) + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 327x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Text" + Fields (FRAME, 327x156) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; justify-content: center; align-items: flex-start; align-self: STRETCH; width: 100% + Select Field (INSTANCE, 327x70) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Label (TEXT, 327x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Select (FRAME, 327x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; position: relative; padding: 12px 12px 12px 16px /* var:VariableID:9:11260 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 120px + Value (TEXT, 275x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Value" + Chevron down (INSTANCE, 16x16) + style: overflow: hidden + Icon (VECTOR, 8x4) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Select Field (INSTANCE, 327x70) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Label (TEXT, 327x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Select (FRAME, 327x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; position: relative; padding: 12px 12px 12px 16px /* var:VariableID:9:11260 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 120px + Value (TEXT, 275x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Value" + Chevron down (INSTANCE, 16x16) + style: overflow: hidden + Icon (VECTOR, 8x4) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Button (INSTANCE, 327x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Button" + Accordion (INSTANCE, 327x408) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100%; max-width: 640px + Accordion Item (INSTANCE, 327x128) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 295x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; width: 100% + Title (TEXT, 267x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron up (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Content (FRAME, 295x66) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Body (TEXT, 295x66) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list." + Items (SLOT, 327x264) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; align-self: STRETCH; width: 100% + Icon Button (INSTANCE, 36x36) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; position: absolute; top: 10px; left: 10px; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 32px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Heart (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x15) + style: border: 2px solid #F5F5F5; svg: + Card Grid Reviews (INSTANCE, 375x800) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: rgba(0, 0, 0, 0.5) /* var:VariableID:7786:36548 */; max-width: 1200px + Text Heading (INSTANCE, 163x29) + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 163x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Latest reviews" + Card Grid (FRAME, 327x699) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Review Card (INSTANCE, 327x217) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FAE1FA /* var:VariableID:72:9197 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Rating (FRAME, 116x20) + style: display: flex; flex-direction: row; column-gap: 4px /* var:VariableID:9:11258 */; align-items: center + Star (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Review Body (FRAME, 279x55) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 130x29) + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 130x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review title" + Text (INSTANCE, 279x22) + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 279x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review body" + Avatar Block (INSTANCE, 279x46) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Avatar (INSTANCE, 40x40) + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 40x40) + style: content-image: url(images/shape@2x.png); object-fit: cover + Info (FRAME, 227x46) + style: display: flex; flex-direction: column; row-gap: 2px; align-items: flex-start; flex-grow: 1 + Title (TEXT, 227x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Reviewer name" + Description (TEXT, 227x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Date" + Review Card (INSTANCE, 327x217) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FAE1FA /* var:VariableID:72:9197 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Rating (FRAME, 116x20) + style: display: flex; flex-direction: row; column-gap: 4px /* var:VariableID:9:11258 */; align-items: center + Star (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Review Body (FRAME, 279x55) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 130x29) + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 130x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review title" + Text (INSTANCE, 279x22) + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 279x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review body" + Avatar Block (INSTANCE, 279x46) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Avatar (INSTANCE, 40x40) + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 40x40) + style: content-image: url(images/shape-2@2x.png); object-fit: cover + Info (FRAME, 227x46) + style: display: flex; flex-direction: column; row-gap: 2px; align-items: flex-start; flex-grow: 1 + Title (TEXT, 227x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Reviewer name" + Description (TEXT, 227x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Date" + Review Card (INSTANCE, 327x217) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FAE1FA /* var:VariableID:72:9197 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Rating (FRAME, 116x20) + style: display: flex; flex-direction: row; column-gap: 4px /* var:VariableID:9:11258 */; align-items: center + Star (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Review Body (FRAME, 279x55) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 130x29) + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 130x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review title" + Text (INSTANCE, 279x22) + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 279x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review body" + Avatar Block (INSTANCE, 279x46) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Avatar (INSTANCE, 40x40) + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 40x40) + style: content-image: url(images/shape-3@2x.png); object-fit: cover + Info (FRAME, 227x46) + style: display: flex; flex-direction: column; row-gap: 2px; align-items: flex-start; flex-grow: 1 + Title (TEXT, 227x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Reviewer name" + Description (TEXT, 227x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Date" + Page Newsletter (INSTANCE, 375x173) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #D9D9D9 /* var:VariableID:3919:36448 */; max-width: 1200px + Text Content Heading (INSTANCE, 327x61) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; width: 100% + Heading (TEXT, 327x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Follow the latest trends" + Subheading (TEXT, 327x24) + style: align-self: STRETCH; width: 100%; /* text-style: Subheading */; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "With our daily newsletterWith our daily newsletterWith our daily newsletter" + Form Newsletter (INSTANCE, 327x40) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Input Field (INSTANCE, 238x40) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; flex-grow: 1 + Input (FRAME, 238x40) + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 12px 16px 12px 16px /* var:VariableID:9:11260 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 120px + Value (TEXT, 206x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "you@example.com" + Button (INSTANCE, 77x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 53x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Submit" + Footer (INSTANCE, 375x919) + style: display: flex; flex-direction: column; row-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Title (SLOT, 311x35) + style: display: flex; flex-direction: row; column-gap: 16px; justify-content: space-between; align-items: center; align-self: STRETCH; width: 100%; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Links (FRAME, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; width: 100%; background: #EBFFEE /* var:VariableID:2002:7433 */ + Slot (SLOT, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Text Link List (INSTANCE, 311x236) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 81x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 81x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 311x236) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 59x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 311x236) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 83x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 83x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/diff-base.png new file mode 100644 index 00000000..758756ad Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/figma-base.png new file mode 100644 index 00000000..7d778d30 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/images/image@2x.png new file mode 100644 index 00000000..86ddb82a Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/images/mapping.json new file mode 100644 index 00000000..3e11702b --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/images/mapping.json @@ -0,0 +1,6 @@ +{ + "I562:10933;3049:2455": "image@2x.png", + "I562:10934;348:15217;2236:16098;2010:15576;9762:1114": "shape@2x.png", + "I562:10934;348:15218;2236:16098;2010:15576;9762:1114": "shape-2@2x.png", + "I562:10934;348:15219;2236:16098;2010:15576;9762:1114": "shape-3@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/images/shape-2@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/images/shape-2@2x.png new file mode 100644 index 00000000..0286f0fb Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/images/shape-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/images/shape-3@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/images/shape-3@2x.png new file mode 100644 index 00000000..0286f0fb Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/images/shape-3@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/images/shape@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/images/shape@2x.png new file mode 100644 index 00000000..0286f0fb Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/images/shape@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/output.html b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/output.html new file mode 100644 index 00000000..b480bb63 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/output.html @@ -0,0 +1,527 @@ + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+ +
+ +
+ + +
+ +
+ +
+
+
Text Heading
+
+ +
+
+
Tag
+
+
+
+
$
+
50
+
+
+
+
+
+
Text
+
+
+ + +
+ +
+
Label
+
+
Value
+
+ + + +
+
+
+ + +
+
Label
+
+
Value
+
+ + + +
+
+
+
+ + +
+
Button
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+
+
+
+ + +
+
+ + + +
+
+
+
+ + +
+
+
Latest reviews
+
+
+ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+
+
+ + +
+
+
Follow the latest trends
+
With our daily newsletterWith our daily newsletterWith our daily newsletter
+
+
+
+
+
you@example.com
+
+
+
+
Submit
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+ +
+
+
Use cases
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
Explore
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
Resources
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/response.txt new file mode 100644 index 00000000..026d01f5 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/response.txt @@ -0,0 +1,530 @@ +```html +// filename: index.html + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+ +
+ +
+ + +
+ +
+ +
+
+
Text Heading
+
+ +
+
+
Tag
+
+
+
+
$
+
50
+
+
+
+
+
+
Text
+
+
+ + +
+ +
+
Label
+
+
Value
+
+ + + +
+
+
+ + +
+
Label
+
+
Value
+
+ + + +
+
+
+
+ + +
+
Button
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+
+
+
+ + +
+
+ + + +
+
+
+
+ + +
+
+
Latest reviews
+
+
+ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+
+
+ + +
+
+
Follow the latest trends
+
With our daily newsletterWith our daily newsletterWith our daily newsletter
+
+
+
+
+
you@example.com
+
+
+
+
Submit
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+ +
+
+
Use cases
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
Explore
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
Resources
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/result.json b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/result.json new file mode 100644 index 00000000..7b725deb --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/component-references/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "mobile-product-detail", + "type": "component-references", + "runIndex": 0, + "similarity": 81, + "inputTokens": 23801, + "outputTokens": 18321, + "totalTokens": 42122, + "htmlBytes": 50920, + "htmlLines": 527, + "cssClassCount": 8, + "cssVariableCount": 14, + "timestamp": "2026-03-28T11:11:04.032Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/code-base.png new file mode 100644 index 00000000..e06be2be Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/design-tree.txt new file mode 100644 index 00000000..c3bca301 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/design-tree.txt @@ -0,0 +1,442 @@ +# Design Tree +# Root: 375px x 3258px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Mobile (COMPONENT, 375x3258) + style: background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 375x84) [component: Platform=Mobile, State=Default] + component-properties: Platform=Mobile, State=Default + style: width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Block (FRAME, 40x35) + Figma (FRAME, 40x35) + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=68:15863, Variant=Subtle, State=Default, Size=Small + style: border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Menu (INSTANCE, 20x20) [component: Menu] + style: overflow: hidden + Icon (VECTOR, 15x10) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Page Product (INSTANCE, 375x1282) [component: Platform=Mobile] + component-properties: Column#6062:42={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: width: 100%; background: #FFF1C2 /* var:VariableID:3919:36440 */; min-width: 240px; max-width: 1200px + Section (FRAME, 327x1234) + style: position: relative; width: 100% + Image (FRAME, 327x327) + style: width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Column (SLOT, 327x843) + style: width: 100% + Body (FRAME, 327x167) + style: width: 100% + Title (FRAME, 327x129) + style: width: 100% + Text Heading (INSTANCE, 327x29) [component: Text Heading] + component-properties: Text#2104:5=Text Heading + style: width: 100% + Text Heading (TEXT, 149x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text Heading" + Price (FRAME, 327x84) + style: width: 100% + Tag (INSTANCE, 44x32) [component: Scheme=Positive, State=Default, Variant=Secondary] + component-properties: Label#9765:0=Tag, Removable#147:0=false, Scheme=Positive, State=Default, Variant=Secondary + style: background: #CFF7D3 /* var:VariableID:3919:36435 */; border-radius: 8px + Tag (TEXT, 28x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #02542D /* var:VariableID:3919:36467 */; text: "Tag" + Text Price (INSTANCE, 80x48) [component: Size=Large] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=false, Size=Large + Price (FRAME, 80x48) + $ (TEXT, 16x24) + style: font-family: "Inter"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + 50 (TEXT, 64x48) + style: font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "50" + Text (INSTANCE, 327x22) [component: Text] + component-properties: Text#2104:7=Text + style: width: 100% + Text (TEXT, 327x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Text" + Fields (FRAME, 327x156) + style: width: 100% + Select Field (INSTANCE, 327x70) [component: State=Default, Value Type=Default] + component-properties: Error#280:88=Error, Value#630:7=Value, Has Description#611:4=false, Has Error#72:6=true, Description#611:0=Description, Label#280:85=Label, Open#586:0=false, Has Label#57:0=true, State=Default, Value Type=Default + style: width: 100% + Label (TEXT, 327x22) + style: width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Select (FRAME, 327x40) + style: position: relative; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 120px + Value (TEXT, 275x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Value" + Chevron down (INSTANCE, 16x16) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 8x4) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Select Field (INSTANCE, 327x70) [component: State=Default, Value Type=Default] + component-properties: Error#280:88=Error, Value#630:7=Value, Has Description#611:4=false, Has Error#72:6=true, Description#611:0=Description, Label#280:85=Label, Open#586:0=false, Has Label#57:0=true, State=Default, Value Type=Default + style: width: 100% + Label (TEXT, 327x22) + style: width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Select (FRAME, 327x40) + style: position: relative; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 120px + Value (TEXT, 275x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Value" + Chevron down (INSTANCE, 16x16) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 8x4) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Button (INSTANCE, 327x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Primary, State=Default, Size=Medium + style: width: 100%; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Button" + Accordion (INSTANCE, 327x408) [component: Accordion] + component-properties: Items#6031:6={"guid":{"sessionID":-1,"localID":-1}} + style: width: 100%; max-width: 640px + Accordion Item (INSTANCE, 327x128) [component: State=Open] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Open + style: width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 295x22) + style: width: 100% + Title (TEXT, 267x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron up (INSTANCE, 20x20) [component: Chevron up] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Content (FRAME, 295x66) + style: width: 100% + Body (TEXT, 295x66) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list." + Items (SLOT, 327x264) + style: width: 100% + Icon Button (INSTANCE, 36x36) [component: Variant=Primary, State=Default, Size=Small] + component-properties: Icon#4:192=4039:12363, Variant=Primary, State=Default, Size=Small + style: position: absolute; top: 10px; left: 10px; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 32px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Heart (INSTANCE, 20x20) [component: Heart] + style: overflow: hidden + Icon (VECTOR, 17x15) + style: border: 2px solid #F5F5F5; svg: + Card Grid Reviews (INSTANCE, 375x800) [component: Platform=Mobile] + component-properties: Platform=Mobile + style: width: 100%; background: rgba(0, 0, 0, 0.5) /* var:VariableID:7786:36548 */; max-width: 1200px + Text Heading (INSTANCE, 163x29) [component: Text Heading] + component-properties: Text#2104:5=Latest reviews + Text Heading (TEXT, 163x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Latest reviews" + Card Grid (FRAME, 327x699) + style: width: 100% + Review Card (INSTANCE, 327x217) [component: Review Card] + style: flex-grow: 1; background: #FAE1FA /* var:VariableID:72:9197 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Rating (FRAME, 116x20) + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Review Body (FRAME, 279x55) + style: width: 100% + Text Heading (INSTANCE, 130x29) [component: Text Heading] + component-properties: Text#2104:5=Review title + Text Heading (TEXT, 130x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review title" + Text (INSTANCE, 279x22) [component: Text] + component-properties: Text#2104:7=Review body + style: width: 100% + Text (TEXT, 279x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review body" + Avatar Block (INSTANCE, 279x46) [component: Avatar Block] + component-properties: Description#2010:8=Date, Title#2010:7=Reviewer name + style: width: 100% + Avatar (INSTANCE, 40x40) [component: Type=Image, Size=Large, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Large, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 40x40) + style: content-image: url(images/shape@2x.png); object-fit: cover + Info (FRAME, 227x46) + style: flex-grow: 1 + Title (TEXT, 227x22) + style: width: 100%; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Reviewer name" + Description (TEXT, 227x22) + style: width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Date" + Review Card (INSTANCE, 327x217) [component: Review Card] + style: flex-grow: 1; background: #FAE1FA /* var:VariableID:72:9197 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Rating (FRAME, 116x20) + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Review Body (FRAME, 279x55) + style: width: 100% + Text Heading (INSTANCE, 130x29) [component: Text Heading] + component-properties: Text#2104:5=Review title + Text Heading (TEXT, 130x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review title" + Text (INSTANCE, 279x22) [component: Text] + component-properties: Text#2104:7=Review body + style: width: 100% + Text (TEXT, 279x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review body" + Avatar Block (INSTANCE, 279x46) [component: Avatar Block] + component-properties: Description#2010:8=Date, Title#2010:7=Reviewer name + style: width: 100% + Avatar (INSTANCE, 40x40) [component: Type=Image, Size=Large, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Large, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 40x40) + style: content-image: url(images/shape-2@2x.png); object-fit: cover + Info (FRAME, 227x46) + style: flex-grow: 1 + Title (TEXT, 227x22) + style: width: 100%; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Reviewer name" + Description (TEXT, 227x22) + style: width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Date" + Review Card (INSTANCE, 327x217) [component: Review Card] + style: flex-grow: 1; background: #FAE1FA /* var:VariableID:72:9197 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Rating (FRAME, 116x20) + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Review Body (FRAME, 279x55) + style: width: 100% + Text Heading (INSTANCE, 130x29) [component: Text Heading] + component-properties: Text#2104:5=Review title + Text Heading (TEXT, 130x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review title" + Text (INSTANCE, 279x22) [component: Text] + component-properties: Text#2104:7=Review body + style: width: 100% + Text (TEXT, 279x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review body" + Avatar Block (INSTANCE, 279x46) [component: Avatar Block] + component-properties: Description#2010:8=Date, Title#2010:7=Reviewer name + style: width: 100% + Avatar (INSTANCE, 40x40) [component: Type=Image, Size=Large, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Large, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 40x40) + style: content-image: url(images/shape-3@2x.png); object-fit: cover + Info (FRAME, 227x46) + style: flex-grow: 1 + Title (TEXT, 227x22) + style: width: 100%; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Reviewer name" + Description (TEXT, 227x22) + style: width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Date" + Page Newsletter (INSTANCE, 375x173) [component: Platform=Mobile] + component-properties: Platform=Mobile + style: width: 100%; background: #D9D9D9 /* var:VariableID:3919:36448 */; max-width: 1200px + Text Content Heading (INSTANCE, 327x61) [component: Align=Start] + component-properties: Has Subheading#2153:9=true, Subheading#2153:11=With our daily newsletterWith our daily newsletterWith our daily newsletter, Heading#2153:10=Follow the latest trends, Align=Start + style: width: 100% + Heading (TEXT, 327x29) + style: width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Follow the latest trends" + Subheading (TEXT, 327x24) + style: width: 100%; /* text-style: Subheading */; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; color: #757575 /* var:VariableID:3919:36451 */; text: "With our daily newsletterWith our daily newsletterWith our daily newsletter" + Form Newsletter (INSTANCE, 327x40) [component: Form Newsletter] + style: width: 100% + Input Field (INSTANCE, 238x40) [component: State=Default, Value Type=Default] + component-properties: Value#630:14=you@example.com, Description#611:27=Description, Has Label#57:0=false, Error#280:44=Error, Has Error#72:6=false, Label#280:41=Email address, Has Description#611:20=false, State=Default, Value Type=Default + style: flex-grow: 1 + Input (FRAME, 238x40) + style: width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 120px + Value (TEXT, 206x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "you@example.com" + Button (INSTANCE, 77x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Submit, Variant=Primary, State=Default, Size=Medium + style: background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 53x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Submit" + Footer (INSTANCE, 375x919) [component: Platform=Mobile] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Title (SLOT, 311x35) + style: width: 100%; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Links (FRAME, 311x756) + style: width: 100%; background: #EBFFEE /* var:VariableID:2002:7433 */ + Slot (SLOT, 311x756) + style: width: 100% + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: width: 100% + Title (FRAME, 311x26) + style: width: 100% + Text Strong (INSTANCE, 81x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + Text Strong (TEXT, 81x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x202) + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: width: 100% + Title (FRAME, 311x26) + style: width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + Text Strong (TEXT, 59x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x202) + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: width: 100% + Title (FRAME, 311x26) + style: width: 100% + Text Strong (INSTANCE, 83x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + Text Strong (TEXT, 83x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x202) + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/diff-base.png new file mode 100644 index 00000000..884d966a Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/figma-base.png new file mode 100644 index 00000000..7d778d30 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/images/image@2x.png new file mode 100644 index 00000000..86ddb82a Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/images/mapping.json new file mode 100644 index 00000000..3e11702b --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/images/mapping.json @@ -0,0 +1,6 @@ +{ + "I562:10933;3049:2455": "image@2x.png", + "I562:10934;348:15217;2236:16098;2010:15576;9762:1114": "shape@2x.png", + "I562:10934;348:15218;2236:16098;2010:15576;9762:1114": "shape-2@2x.png", + "I562:10934;348:15219;2236:16098;2010:15576;9762:1114": "shape-3@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/images/shape-2@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/images/shape-2@2x.png new file mode 100644 index 00000000..0286f0fb Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/images/shape-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/images/shape-3@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/images/shape-3@2x.png new file mode 100644 index 00000000..0286f0fb Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/images/shape-3@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/images/shape@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/images/shape@2x.png new file mode 100644 index 00000000..0286f0fb Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/images/shape@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/output.html b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/output.html new file mode 100644 index 00000000..f8f9ecff --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/output.html @@ -0,0 +1,396 @@ + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+ + + +
+
+ + +
+
+ +
+ +
+ + +
+ + + +
+ + +
+ +
+
+
Text Heading
+
+
+
Tag
+
+
+
$
+
50
+
+
+
+
Text
+
+ + +
+
+
Label
+
+
Value
+ + + +
+
+
+
Label
+
+
Value
+ + + +
+
+
+ + +
+
Button
+
+ + +
+
+
+
Title
+ + + +
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+
+
+
+ + +
+
Latest reviews
+
+ +
+
+ + + + + + + + + + + + + + + +
+
+
Review title
+
Review body
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+ + + + + + + + + + + + + + + +
+
+
Review title
+
Review body
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+ + + + + + + + + + + + + + + +
+
+
Review title
+
Review body
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+
+
+ + +
+
+
Follow the latest trends
+
With our daily newsletterWith our daily newsletterWith our daily newsletter
+
+
+
+
you@example.com
+
+
+
Submit
+
+
+
+ + +
+ +
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ + +
+ +
+
+
Use cases
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+ + +
+
+
Explore
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+ + +
+
+
Resources
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/response.txt new file mode 100644 index 00000000..e089a72e --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/response.txt @@ -0,0 +1,404 @@ +```html +// filename: index.html + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+ + + +
+
+ + +
+
+ +
+ +
+ + +
+ + + +
+ + +
+ +
+
+
Text Heading
+
+
+
Tag
+
+
+
$
+
50
+
+
+
+
Text
+
+ + +
+
+
Label
+
+
Value
+ + + +
+
+
+
Label
+
+
Value
+ + + +
+
+
+ + +
+
Button
+
+ + +
+
+
+
Title
+ + + +
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+
+
+
+ + +
+
Latest reviews
+
+ +
+
+ + + + + + + + + + + + + + + +
+
+
Review title
+
Review body
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+ + + + + + + + + + + + + + + +
+
+
Review title
+
Review body
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+ + + + + + + + + + + + + + + +
+
+
Review title
+
Review body
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+
+
+ + +
+
+
Follow the latest trends
+
With our daily newsletterWith our daily newsletterWith our daily newsletter
+
+
+
+
you@example.com
+
+
+
Submit
+
+
+
+ + +
+ +
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ + +
+ +
+
+
Use cases
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+ + +
+
+
Explore
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+ + +
+
+
Resources
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+ + +``` + +// interpretations: +- Used flexbox layout for component positioning and alignment where the design tree didn't specify exact positioning methods +- Applied standard padding and margins for spacing between elements where not explicitly specified in the design data +- Used display: flex for button and form element layouts to achieve proper alignment +- Added gap properties for consistent spacing in star ratings and social media icons +- Applied standard hover cursor behavior for interactive elements (buttons, links) \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/result.json b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/result.json new file mode 100644 index 00000000..8f669329 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/layout-direction-spacing/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "mobile-product-detail", + "type": "layout-direction-spacing", + "runIndex": 0, + "similarity": 89, + "inputTokens": 21585, + "outputTokens": 14815, + "totalTokens": 36400, + "htmlBytes": 37059, + "htmlLines": 396, + "cssClassCount": 14, + "cssVariableCount": 14, + "timestamp": "2026-03-28T11:07:52.765Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/code-base.png new file mode 100644 index 00000000..148a4d1d Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/design-tree.txt new file mode 100644 index 00000000..87626363 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/design-tree.txt @@ -0,0 +1,482 @@ +# Design Tree +# Root: 375px x 3258px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Node1 (COMPONENT, 375x3258) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Node2 (INSTANCE, 375x84) [component: Platform=Mobile, State=Default] + component-properties: Platform=Mobile, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 0px; justify-content: space-between; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Node3 (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Node4 (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node5 (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Node6 (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=68:15863, Variant=Subtle, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Node7 (INSTANCE, 20x20) [component: Menu] + style: overflow: hidden + Node8 (VECTOR, 15x10) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Node9 (INSTANCE, 375x1282) [component: Platform=Mobile] + component-properties: Column#6062:42={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #FFF1C2 /* var:VariableID:3919:36440 */; min-width: 240px; max-width: 1200px + Node10 (FRAME, 327x1234) + style: display: flex; flex-direction: column; row-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; position: relative; width: 100% + Node11 (FRAME, 327x327) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Node12 (SLOT, 327x843) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Node13 (FRAME, 327x167) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node14 (FRAME, 327x129) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node15 (INSTANCE, 327x29) [component: Text Heading] + component-properties: Text#2104:5=Text Heading + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Node16 (TEXT, 149x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text Heading" + Node17 (FRAME, 327x84) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; justify-content: center; align-items: flex-start; align-self: STRETCH; width: 100% + Node18 (INSTANCE, 44x32) [component: Scheme=Positive, State=Default, Variant=Secondary] + component-properties: Label#9765:0=Tag, Removable#147:0=false, Scheme=Positive, State=Default, Variant=Secondary + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #CFF7D3 /* var:VariableID:3919:36435 */; border-radius: 8px + Node19 (TEXT, 28x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #02542D /* var:VariableID:3919:36467 */; text: "Tag" + Node20 (INSTANCE, 80x48) [component: Size=Large] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=false, Size=Large + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Node21 (FRAME, 80x48) + style: display: flex; flex-direction: row; align-items: flex-start + Node22 (TEXT, 16x24) + style: font-family: "Inter"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + Node23 (TEXT, 64x48) + style: font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "50" + Node24 (INSTANCE, 327x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Node25 (TEXT, 327x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Text" + Node26 (FRAME, 327x156) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; justify-content: center; align-items: flex-start; align-self: STRETCH; width: 100% + Node27 (INSTANCE, 327x70) [component: State=Default, Value Type=Default] + component-properties: Error#280:88=Error, Value#630:7=Value, Has Description#611:4=false, Has Error#72:6=true, Description#611:0=Description, Label#280:85=Label, Open#586:0=false, Has Label#57:0=true, State=Default, Value Type=Default + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node28 (TEXT, 327x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Node29 (FRAME, 327x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; position: relative; padding: 12px 12px 12px 16px /* var:VariableID:9:11260 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 120px + Node30 (TEXT, 275x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Value" + Node31 (INSTANCE, 16x16) [component: Chevron down] + style: overflow: hidden + Node32 (VECTOR, 8x4) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Node33 (INSTANCE, 327x70) [component: State=Default, Value Type=Default] + component-properties: Error#280:88=Error, Value#630:7=Value, Has Description#611:4=false, Has Error#72:6=true, Description#611:0=Description, Label#280:85=Label, Open#586:0=false, Has Label#57:0=true, State=Default, Value Type=Default + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node34 (TEXT, 327x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Node35 (FRAME, 327x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; position: relative; padding: 12px 12px 12px 16px /* var:VariableID:9:11260 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 120px + Node36 (TEXT, 275x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Value" + Node37 (INSTANCE, 16x16) [component: Chevron down] + style: overflow: hidden + Node38 (VECTOR, 8x4) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Node39 (INSTANCE, 327x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Node40 (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Button" + Node41 (INSTANCE, 327x408) [component: Accordion] + component-properties: Items#6031:6={"guid":{"sessionID":-1,"localID":-1}} + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100%; max-width: 640px + Node42 (INSTANCE, 327x128) [component: State=Open] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Open + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px + Node43 (FRAME, 295x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; width: 100% + Node44 (TEXT, 267x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Node45 (INSTANCE, 20x20) [component: Chevron up] + style: overflow: hidden + Node46 (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Node47 (FRAME, 295x66) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Node48 (TEXT, 295x66) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list." + Node49 (SLOT, 327x264) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; align-self: STRETCH; width: 100% + Node50 (INSTANCE, 36x36) [component: Variant=Primary, State=Default, Size=Small] + component-properties: Icon#4:192=4039:12363, Variant=Primary, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; position: absolute; top: 10px; left: 10px; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 32px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Node51 (INSTANCE, 20x20) [component: Heart] + style: overflow: hidden + Node52 (VECTOR, 17x15) + style: border: 2px solid #F5F5F5; svg: + Node53 (INSTANCE, 375x800) [component: Platform=Mobile] + component-properties: Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: rgba(0, 0, 0, 0.5) /* var:VariableID:7786:36548 */; max-width: 1200px + Node54 (INSTANCE, 163x29) [component: Text Heading] + component-properties: Text#2104:5=Latest reviews + style: display: flex; flex-direction: row; align-items: flex-start + Node55 (TEXT, 163x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Latest reviews" + Node56 (FRAME, 327x699) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Node57 (INSTANCE, 327x217) [component: Review Card] + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FAE1FA /* var:VariableID:72:9197 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Node58 (FRAME, 116x20) + style: display: flex; flex-direction: row; column-gap: 4px /* var:VariableID:9:11258 */; align-items: center + Node59 (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Node60 (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Node61 (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Node62 (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Node63 (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Node64 (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Node65 (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Node66 (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Node67 (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Node68 (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Node69 (FRAME, 279x55) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node70 (INSTANCE, 130x29) [component: Text Heading] + component-properties: Text#2104:5=Review title + style: display: flex; flex-direction: row; align-items: flex-start + Node71 (TEXT, 130x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review title" + Node72 (INSTANCE, 279x22) [component: Text] + component-properties: Text#2104:7=Review body + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Node73 (TEXT, 279x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review body" + Node74 (INSTANCE, 279x46) [component: Avatar Block] + component-properties: Description#2010:8=Date, Title#2010:7=Reviewer name + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node75 (INSTANCE, 40x40) [component: Type=Image, Size=Large, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Large, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Node76 (RECTANGLE, 40x40) + style: content-image: url(images/shape@2x.png); object-fit: cover + Node77 (FRAME, 227x46) + style: display: flex; flex-direction: column; row-gap: 2px; align-items: flex-start; flex-grow: 1 + Node78 (TEXT, 227x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Reviewer name" + Node79 (TEXT, 227x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Date" + Node80 (INSTANCE, 327x217) [component: Review Card] + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FAE1FA /* var:VariableID:72:9197 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Node81 (FRAME, 116x20) + style: display: flex; flex-direction: row; column-gap: 4px /* var:VariableID:9:11258 */; align-items: center + Node82 (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Node83 (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Node84 (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Node85 (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Node86 (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Node87 (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Node88 (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Node89 (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Node90 (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Node91 (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Node92 (FRAME, 279x55) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node93 (INSTANCE, 130x29) [component: Text Heading] + component-properties: Text#2104:5=Review title + style: display: flex; flex-direction: row; align-items: flex-start + Node94 (TEXT, 130x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review title" + Node95 (INSTANCE, 279x22) [component: Text] + component-properties: Text#2104:7=Review body + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Node96 (TEXT, 279x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review body" + Node97 (INSTANCE, 279x46) [component: Avatar Block] + component-properties: Description#2010:8=Date, Title#2010:7=Reviewer name + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node98 (INSTANCE, 40x40) [component: Type=Image, Size=Large, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Large, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Node99 (RECTANGLE, 40x40) + style: content-image: url(images/shape-2@2x.png); object-fit: cover + Node100 (FRAME, 227x46) + style: display: flex; flex-direction: column; row-gap: 2px; align-items: flex-start; flex-grow: 1 + Node101 (TEXT, 227x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Reviewer name" + Node102 (TEXT, 227x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Date" + Node103 (INSTANCE, 327x217) [component: Review Card] + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FAE1FA /* var:VariableID:72:9197 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Node104 (FRAME, 116x20) + style: display: flex; flex-direction: row; column-gap: 4px /* var:VariableID:9:11258 */; align-items: center + Node105 (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Node106 (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Node107 (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Node108 (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Node109 (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Node110 (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Node111 (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Node112 (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Node113 (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Node114 (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Node115 (FRAME, 279x55) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node116 (INSTANCE, 130x29) [component: Text Heading] + component-properties: Text#2104:5=Review title + style: display: flex; flex-direction: row; align-items: flex-start + Node117 (TEXT, 130x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review title" + Node118 (INSTANCE, 279x22) [component: Text] + component-properties: Text#2104:7=Review body + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Node119 (TEXT, 279x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review body" + Node120 (INSTANCE, 279x46) [component: Avatar Block] + component-properties: Description#2010:8=Date, Title#2010:7=Reviewer name + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node121 (INSTANCE, 40x40) [component: Type=Image, Size=Large, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Large, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Node122 (RECTANGLE, 40x40) + style: content-image: url(images/shape-3@2x.png); object-fit: cover + Node123 (FRAME, 227x46) + style: display: flex; flex-direction: column; row-gap: 2px; align-items: flex-start; flex-grow: 1 + Node124 (TEXT, 227x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Reviewer name" + Node125 (TEXT, 227x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Date" + Node126 (INSTANCE, 375x173) [component: Platform=Mobile] + component-properties: Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #D9D9D9 /* var:VariableID:3919:36448 */; max-width: 1200px + Node127 (INSTANCE, 327x61) [component: Align=Start] + component-properties: Has Subheading#2153:9=true, Subheading#2153:11=With our daily newsletterWith our daily newsletterWith our daily newsletter, Heading#2153:10=Follow the latest trends, Align=Start + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; width: 100% + Node128 (TEXT, 327x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Follow the latest trends" + Node129 (TEXT, 327x24) + style: align-self: STRETCH; width: 100%; /* text-style: Subheading */; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "With our daily newsletterWith our daily newsletterWith our daily newsletter" + Node130 (INSTANCE, 327x40) [component: Form Newsletter] + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node131 (INSTANCE, 238x40) [component: State=Default, Value Type=Default] + component-properties: Value#630:14=you@example.com, Description#611:27=Description, Has Label#57:0=false, Error#280:44=Error, Has Error#72:6=false, Label#280:41=Email address, Has Description#611:20=false, State=Default, Value Type=Default + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; flex-grow: 1 + Node132 (FRAME, 238x40) + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 12px 16px 12px 16px /* var:VariableID:9:11260 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 120px + Node133 (TEXT, 206x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "you@example.com" + Node134 (INSTANCE, 77x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Submit, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Node135 (TEXT, 53x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Submit" + Node136 (INSTANCE, 375x919) [component: Platform=Mobile] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Node137 (SLOT, 311x35) + style: display: flex; flex-direction: row; column-gap: 16px; justify-content: space-between; align-items: center; align-self: STRETCH; width: 100%; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Node138 (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node139 (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Node140 (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + Node141 (FRAME, 24x24) + Node142 (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node143 (FRAME, 24x24) + style: overflow: hidden + Node144 (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node145 (FRAME, 24x24) + style: overflow: hidden + Node146 (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node147 (FRAME, 24x24) + style: overflow: hidden + Node148 (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node149 (FRAME, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; width: 100%; background: #EBFFEE /* var:VariableID:2002:7433 */ + Node150 (SLOT, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Node151 (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node152 (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Node153 (INSTANCE, 81x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Node154 (TEXT, 81x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Node155 (SLOT, 144x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Node156 (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node157 (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Node158 (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node159 (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Node160 (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node161 (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Node162 (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node163 (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Node164 (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node165 (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Node166 (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node167 (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Node168 (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node169 (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Node170 (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node171 (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Node172 (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Node173 (TEXT, 59x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Node174 (SLOT, 168x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Node175 (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node176 (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Node177 (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node178 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Node179 (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node180 (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Node181 (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node182 (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Node183 (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node184 (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Node185 (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node186 (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Node187 (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node188 (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Node189 (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node190 (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Node191 (INSTANCE, 83x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Node192 (TEXT, 83x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Node193 (SLOT, 123x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Node194 (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node195 (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Node196 (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node197 (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Node198 (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node199 (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Node200 (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node201 (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Node202 (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node203 (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Node204 (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node205 (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Node206 (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node207 (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/diff-base.png new file mode 100644 index 00000000..3e554379 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/figma-base.png new file mode 100644 index 00000000..7d778d30 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/images/image@2x.png new file mode 100644 index 00000000..86ddb82a Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/images/mapping.json new file mode 100644 index 00000000..3e11702b --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/images/mapping.json @@ -0,0 +1,6 @@ +{ + "I562:10933;3049:2455": "image@2x.png", + "I562:10934;348:15217;2236:16098;2010:15576;9762:1114": "shape@2x.png", + "I562:10934;348:15218;2236:16098;2010:15576;9762:1114": "shape-2@2x.png", + "I562:10934;348:15219;2236:16098;2010:15576;9762:1114": "shape-3@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/images/shape-2@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/images/shape-2@2x.png new file mode 100644 index 00000000..0286f0fb Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/images/shape-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/images/shape-3@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/images/shape-3@2x.png new file mode 100644 index 00000000..0286f0fb Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/images/shape-3@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/images/shape@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/images/shape@2x.png new file mode 100644 index 00000000..0286f0fb Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/images/shape@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/output.html b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/output.html new file mode 100644 index 00000000..1290cf0d --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/output.html @@ -0,0 +1,491 @@ + + + + + + Design Tree + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+ + + + +
+ +
+
+
+
Text Heading
+
+
+
+
Tag
+
+
+
+
$
+
50
+
+
+
+
+
+
Text
+
+
+ + +
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+ + +
+
Button
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+
+
+
+ + +
+
+ + + +
+
+
+
+ + +
+
+
Latest reviews
+
+
+ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+
+
+ + +
+
+
Follow the latest trends
+
With our daily newsletterWith our daily newsletterWith our daily newsletter
+
+ +
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+ +
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/response.txt new file mode 100644 index 00000000..f59489ab --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/response.txt @@ -0,0 +1,494 @@ +```html +// filename: index.html + + + + + + Design Tree + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+ + + + +
+ +
+
+
+
Text Heading
+
+
+
+
Tag
+
+
+
+
$
+
50
+
+
+
+
+
+
Text
+
+
+ + +
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+ + +
+
Button
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+
+
+
+ + +
+
+ + + +
+
+
+
+ + +
+
+
Latest reviews
+
+
+ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+
+
+ + +
+
+
Follow the latest trends
+
With our daily newsletterWith our daily newsletterWith our daily newsletter
+
+ +
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+ +
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/result.json b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/result.json new file mode 100644 index 00000000..408f7123 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/node-names-hierarchy/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "mobile-product-detail", + "type": "node-names-hierarchy", + "runIndex": 0, + "similarity": 96, + "inputTokens": 26266, + "outputTokens": 19141, + "totalTokens": 45407, + "htmlBytes": 52214, + "htmlLines": 491, + "cssClassCount": 23, + "cssVariableCount": 14, + "timestamp": "2026-03-28T11:14:29.604Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/code-base.png new file mode 100644 index 00000000..825921e8 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/design-tree.txt new file mode 100644 index 00000000..895ea853 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/design-tree.txt @@ -0,0 +1,482 @@ +# Design Tree +# Root: 375px x 3258px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Mobile (COMPONENT, 375x3258) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 375x84) [component: Platform=Mobile, State=Default] + component-properties: Platform=Mobile, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 0px; justify-content: space-between; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=68:15863, Variant=Subtle, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Menu (INSTANCE, 20x20) [component: Menu] + style: overflow: hidden + Icon (VECTOR, 15x10) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Page Product (INSTANCE, 375x1282) [component: Platform=Mobile] + component-properties: Column#6062:42={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #FFF1C2 /* var:VariableID:3919:36440 */; min-width: 240px; max-width: 1200px + Section (FRAME, 327x1234) + style: display: flex; flex-direction: column; row-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; position: relative; width: 100% + Image (FRAME, 327x327) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Column (SLOT, 327x843) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Body (FRAME, 327x167) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 327x129) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 327x29) [component: Text Heading] + component-properties: Text#2104:5=Text Heading + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (TEXT, 149x29) + style: font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text Heading" + Price (FRAME, 327x84) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; justify-content: center; align-items: flex-start; align-self: STRETCH; width: 100% + Tag (INSTANCE, 44x32) [component: Scheme=Positive, State=Default, Variant=Secondary] + component-properties: Label#9765:0=Tag, Removable#147:0=false, Scheme=Positive, State=Default, Variant=Secondary + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #CFF7D3 /* var:VariableID:3919:36435 */; border-radius: 8px + Tag (TEXT, 28x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #02542D /* var:VariableID:3919:36467 */; text: "Tag" + Text Price (INSTANCE, 80x48) [component: Size=Large] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=false, Size=Large + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 80x48) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 16x24) + style: font-family: "Inter"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + 50 (TEXT, 64x48) + style: font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "50" + Text (INSTANCE, 327x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 327x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Text" + Fields (FRAME, 327x156) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; justify-content: center; align-items: flex-start; align-self: STRETCH; width: 100% + Select Field (INSTANCE, 327x70) [component: State=Default, Value Type=Default] + component-properties: Error#280:88=Error, Value#630:7=Value, Has Description#611:4=false, Has Error#72:6=true, Description#611:0=Description, Label#280:85=Label, Open#586:0=false, Has Label#57:0=true, State=Default, Value Type=Default + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Label (TEXT, 327x22) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Select (FRAME, 327x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; position: relative; padding: 12px 12px 12px 16px /* var:VariableID:9:11260 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 120px + Value (TEXT, 275x16) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Value" + Chevron down (INSTANCE, 16x16) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 8x4) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Select Field (INSTANCE, 327x70) [component: State=Default, Value Type=Default] + component-properties: Error#280:88=Error, Value#630:7=Value, Has Description#611:4=false, Has Error#72:6=true, Description#611:0=Description, Label#280:85=Label, Open#586:0=false, Has Label#57:0=true, State=Default, Value Type=Default + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Label (TEXT, 327x22) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Select (FRAME, 327x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; position: relative; padding: 12px 12px 12px 16px /* var:VariableID:9:11260 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 120px + Value (TEXT, 275x16) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Value" + Chevron down (INSTANCE, 16x16) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 8x4) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Button (INSTANCE, 327x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 51x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Button" + Accordion (INSTANCE, 327x408) [component: Accordion] + component-properties: Items#6031:6={"guid":{"sessionID":-1,"localID":-1}} + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100%; max-width: 640px + Accordion Item (INSTANCE, 327x128) [component: State=Open] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Open + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 295x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; width: 100% + Title (TEXT, 267x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron up (INSTANCE, 20x20) [component: Chevron up] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Content (FRAME, 295x66) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Body (TEXT, 295x66) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list." + Items (SLOT, 327x264) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; align-self: STRETCH; width: 100% + Icon Button (INSTANCE, 36x36) [component: Variant=Primary, State=Default, Size=Small] + component-properties: Icon#4:192=4039:12363, Variant=Primary, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; position: absolute; top: 10px; left: 10px; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 32px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Heart (INSTANCE, 20x20) [component: Heart] + style: overflow: hidden + Icon (VECTOR, 17x15) + style: border: 2px solid #F5F5F5; svg: + Card Grid Reviews (INSTANCE, 375x800) [component: Platform=Mobile] + component-properties: Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: rgba(0, 0, 0, 0.5) /* var:VariableID:7786:36548 */; max-width: 1200px + Text Heading (INSTANCE, 163x29) [component: Text Heading] + component-properties: Text#2104:5=Latest reviews + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 163x29) + style: font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Latest reviews" + Card Grid (FRAME, 327x699) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Review Card (INSTANCE, 327x217) [component: Review Card] + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FAE1FA /* var:VariableID:72:9197 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Rating (FRAME, 116x20) + style: display: flex; flex-direction: row; column-gap: 4px /* var:VariableID:9:11258 */; align-items: center + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Review Body (FRAME, 279x55) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 130x29) [component: Text Heading] + component-properties: Text#2104:5=Review title + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 130x29) + style: font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review title" + Text (INSTANCE, 279x22) [component: Text] + component-properties: Text#2104:7=Review body + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 279x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review body" + Avatar Block (INSTANCE, 279x46) [component: Avatar Block] + component-properties: Description#2010:8=Date, Title#2010:7=Reviewer name + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Avatar (INSTANCE, 40x40) [component: Type=Image, Size=Large, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Large, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 40x40) + style: content-image: url(images/shape@2x.png); object-fit: cover + Info (FRAME, 227x46) + style: display: flex; flex-direction: column; row-gap: 2px; align-items: flex-start; flex-grow: 1 + Title (TEXT, 227x22) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Reviewer name" + Description (TEXT, 227x22) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Date" + Review Card (INSTANCE, 327x217) [component: Review Card] + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FAE1FA /* var:VariableID:72:9197 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Rating (FRAME, 116x20) + style: display: flex; flex-direction: row; column-gap: 4px /* var:VariableID:9:11258 */; align-items: center + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Review Body (FRAME, 279x55) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 130x29) [component: Text Heading] + component-properties: Text#2104:5=Review title + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 130x29) + style: font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review title" + Text (INSTANCE, 279x22) [component: Text] + component-properties: Text#2104:7=Review body + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 279x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review body" + Avatar Block (INSTANCE, 279x46) [component: Avatar Block] + component-properties: Description#2010:8=Date, Title#2010:7=Reviewer name + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Avatar (INSTANCE, 40x40) [component: Type=Image, Size=Large, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Large, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 40x40) + style: content-image: url(images/shape-2@2x.png); object-fit: cover + Info (FRAME, 227x46) + style: display: flex; flex-direction: column; row-gap: 2px; align-items: flex-start; flex-grow: 1 + Title (TEXT, 227x22) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Reviewer name" + Description (TEXT, 227x22) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Date" + Review Card (INSTANCE, 327x217) [component: Review Card] + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FAE1FA /* var:VariableID:72:9197 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Rating (FRAME, 116x20) + style: display: flex; flex-direction: row; column-gap: 4px /* var:VariableID:9:11258 */; align-items: center + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Review Body (FRAME, 279x55) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 130x29) [component: Text Heading] + component-properties: Text#2104:5=Review title + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 130x29) + style: font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review title" + Text (INSTANCE, 279x22) [component: Text] + component-properties: Text#2104:7=Review body + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 279x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review body" + Avatar Block (INSTANCE, 279x46) [component: Avatar Block] + component-properties: Description#2010:8=Date, Title#2010:7=Reviewer name + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Avatar (INSTANCE, 40x40) [component: Type=Image, Size=Large, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Large, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 40x40) + style: content-image: url(images/shape-3@2x.png); object-fit: cover + Info (FRAME, 227x46) + style: display: flex; flex-direction: column; row-gap: 2px; align-items: flex-start; flex-grow: 1 + Title (TEXT, 227x22) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Reviewer name" + Description (TEXT, 227x22) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Date" + Page Newsletter (INSTANCE, 375x173) [component: Platform=Mobile] + component-properties: Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #D9D9D9 /* var:VariableID:3919:36448 */; max-width: 1200px + Text Content Heading (INSTANCE, 327x61) [component: Align=Start] + component-properties: Has Subheading#2153:9=true, Subheading#2153:11=With our daily newsletterWith our daily newsletterWith our daily newsletter, Heading#2153:10=Follow the latest trends, Align=Start + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; width: 100% + Heading (TEXT, 327x29) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Follow the latest trends" + Subheading (TEXT, 327x24) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "With our daily newsletterWith our daily newsletterWith our daily newsletter" + Form Newsletter (INSTANCE, 327x40) [component: Form Newsletter] + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Input Field (INSTANCE, 238x40) [component: State=Default, Value Type=Default] + component-properties: Value#630:14=you@example.com, Description#611:27=Description, Has Label#57:0=false, Error#280:44=Error, Has Error#72:6=false, Label#280:41=Email address, Has Description#611:20=false, State=Default, Value Type=Default + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; flex-grow: 1 + Input (FRAME, 238x40) + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 12px 16px 12px 16px /* var:VariableID:9:11260 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 120px + Value (TEXT, 206x16) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "you@example.com" + Button (INSTANCE, 77x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Submit, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 53x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Submit" + Footer (INSTANCE, 375x919) [component: Platform=Mobile] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Title (SLOT, 311x35) + style: display: flex; flex-direction: row; column-gap: 16px; justify-content: space-between; align-items: center; align-self: STRETCH; width: 100%; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Links (FRAME, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; width: 100%; background: #EBFFEE /* var:VariableID:2002:7433 */ + Slot (SLOT, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 81x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 81x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 72x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 78x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 92x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 100x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 105x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 138x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 144x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 53x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 167x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 120x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 168x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 117x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 55x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 83x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 83x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 34x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 109x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 49x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 90x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 61x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 86x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 123x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/diff-base.png new file mode 100644 index 00000000..4a250258 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/figma-base.png new file mode 100644 index 00000000..7d778d30 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/images/image@2x.png new file mode 100644 index 00000000..86ddb82a Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/images/mapping.json new file mode 100644 index 00000000..3e11702b --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/images/mapping.json @@ -0,0 +1,6 @@ +{ + "I562:10933;3049:2455": "image@2x.png", + "I562:10934;348:15217;2236:16098;2010:15576;9762:1114": "shape@2x.png", + "I562:10934;348:15218;2236:16098;2010:15576;9762:1114": "shape-2@2x.png", + "I562:10934;348:15219;2236:16098;2010:15576;9762:1114": "shape-3@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/images/shape-2@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/images/shape-2@2x.png new file mode 100644 index 00000000..0286f0fb Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/images/shape-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/images/shape-3@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/images/shape-3@2x.png new file mode 100644 index 00000000..0286f0fb Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/images/shape-3@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/images/shape@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/images/shape@2x.png new file mode 100644 index 00000000..0286f0fb Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/images/shape@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/output.html b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/output.html new file mode 100644 index 00000000..e0f7febb --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/output.html @@ -0,0 +1,571 @@ + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+ +
+ +
+ + +
+ +
+ +
+
+
Text Heading
+
+ +
+
+
Tag
+
+
+
+
$
+
50
+
+
+
+
+
+
Text
+
+
+ + +
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+ + +
+
Button
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+
+
+
+ + +
+
+ + + +
+
+
+
+ + +
+
+
Latest reviews
+
+
+ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+
+
+ + +
+
+
Follow the latest trends
+
With our daily newsletterWith our daily newsletterWith our daily newsletter
+
+
+
+
+
you@example.com
+
+
+
+
Submit
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/response.txt new file mode 100644 index 00000000..a8bd3640 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/response.txt @@ -0,0 +1,574 @@ +```html +// filename: index.html + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+ +
+ +
+ + +
+ +
+ +
+
+
Text Heading
+
+ +
+
+
Tag
+
+
+
+
$
+
50
+
+
+
+
+
+
Text
+
+
+ + +
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+ + +
+
Button
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+
+
+
+ + +
+
+ + + +
+
+
+
+ + +
+
+
Latest reviews
+
+
+ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+
+
+ + +
+
+
Follow the latest trends
+
With our daily newsletterWith our daily newsletterWith our daily newsletter
+
+
+
+
+
you@example.com
+
+
+
+
Submit
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/result.json b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/result.json new file mode 100644 index 00000000..fa7acc8b --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/style-references/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "mobile-product-detail", + "type": "style-references", + "runIndex": 0, + "similarity": 79, + "inputTokens": 25575, + "outputTokens": 18611, + "totalTokens": 44186, + "htmlBytes": 50817, + "htmlLines": 571, + "cssClassCount": 11, + "cssVariableCount": 14, + "timestamp": "2026-03-28T11:21:05.831Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/code-base.png new file mode 100644 index 00000000..417624a2 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/design-tree.txt new file mode 100644 index 00000000..61ecd550 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/design-tree.txt @@ -0,0 +1,482 @@ +# Design Tree +# Root: 375px x 3258px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Mobile (COMPONENT, 375x3258) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF; overflow: hidden + Header (INSTANCE, 375x84) [component: Platform=Mobile, State=Default] + component-properties: Platform=Mobile, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 0px; justify-content: space-between; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px; width: 100%; background: #FFFFFF; border-bottom: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=68:15863, Variant=Subtle, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Menu (INSTANCE, 20x20) [component: Menu] + style: overflow: hidden + Icon (VECTOR, 15x10) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Page Product (INSTANCE, 375x1282) [component: Platform=Mobile] + component-properties: Column#6062:42={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 24px; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px; width: 100%; background: #FFF1C2; min-width: 240px; max-width: 1200px + Section (FRAME, 327x1234) + style: display: flex; flex-direction: column; row-gap: 64px; align-items: flex-start; align-self: STRETCH; position: relative; width: 100% + Image (FRAME, 327x327) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Column (SLOT, 327x843) + style: display: flex; flex-direction: column; row-gap: 24px; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Body (FRAME, 327x167) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 327x129) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 327x29) [component: Text Heading] + component-properties: Text#2104:5=Text Heading + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (TEXT, 149x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "Text Heading" + Price (FRAME, 327x84) + style: display: flex; flex-direction: column; row-gap: 4px; justify-content: center; align-items: flex-start; align-self: STRETCH; width: 100% + Tag (INSTANCE, 44x32) [component: Scheme=Positive, State=Default, Variant=Secondary] + component-properties: Label#9765:0=Tag, Removable#147:0=false, Scheme=Positive, State=Default, Variant=Secondary + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; background: #CFF7D3; border-radius: 8px + Tag (TEXT, 28x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #02542D; text: "Tag" + Text Price (INSTANCE, 80x48) [component: Size=Large] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=false, Size=Large + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 80x48) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 16x24) + style: font-family: "Inter"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "$" + 50 (TEXT, 64x48) + style: font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; text-align: left; color: #1E1E1E; text: "50" + Text (INSTANCE, 327x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 327x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575; text: "Text" + Fields (FRAME, 327x156) + style: display: flex; flex-direction: column; row-gap: 16px; justify-content: center; align-items: flex-start; align-self: STRETCH; width: 100% + Select Field (INSTANCE, 327x70) [component: State=Default, Value Type=Default] + component-properties: Error#280:88=Error, Value#630:7=Value, Has Description#611:4=false, Has Error#72:6=true, Description#611:0=Description, Label#280:85=Label, Open#586:0=false, Has Label#57:0=true, State=Default, Value Type=Default + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Label (TEXT, 327x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Label" + Select (FRAME, 327x40) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center; align-self: STRETCH; position: relative; padding: 12px 12px 12px 16px; width: 100%; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 120px + Value (TEXT, 275x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E; text: "Value" + Chevron down (INSTANCE, 16x16) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 8x4) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Select Field (INSTANCE, 327x70) [component: State=Default, Value Type=Default] + component-properties: Error#280:88=Error, Value#630:7=Value, Has Description#611:4=false, Has Error#72:6=true, Description#611:0=Description, Label#280:85=Label, Open#586:0=false, Has Label#57:0=true, State=Default, Value Type=Default + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Label (TEXT, 327x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Label" + Select (FRAME, 327x40) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center; align-self: STRETCH; position: relative; padding: 12px 12px 12px 16px; width: 100%; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 120px + Value (TEXT, 275x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E; text: "Value" + Chevron down (INSTANCE, 16x16) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 8x4) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Button (INSTANCE, 327x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px; width: 100%; background: #2C2C2C; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5; text: "Button" + Accordion (INSTANCE, 327x408) [component: Accordion] + component-properties: Items#6031:6={"guid":{"sessionID":-1,"localID":-1}} + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; align-self: STRETCH; width: 100%; max-width: 640px + Accordion Item (INSTANCE, 327x128) [component: State=Open] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Open + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; padding: 16px 16px 16px 16px; width: 100%; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 295x22) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center; align-self: STRETCH; width: 100% + Title (TEXT, 267x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Title" + Chevron up (INSTANCE, 20x20) [component: Chevron up] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Content (FRAME, 295x66) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Body (TEXT, 295x66) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list." + Items (SLOT, 327x264) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; align-self: STRETCH; width: 100% + Icon Button (INSTANCE, 36x36) [component: Variant=Primary, State=Default, Size=Small] + component-properties: Icon#4:192=4039:12363, Variant=Primary, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; position: absolute; top: 10px; left: 10px; padding: 8px 8px 8px 8px; background: #2C2C2C; border: 1px solid #2C2C2C; border-radius: 32px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Heart (INSTANCE, 20x20) [component: Heart] + style: overflow: hidden + Icon (VECTOR, 17x15) + style: border: 2px solid #F5F5F5; svg: + Card Grid Reviews (INSTANCE, 375x800) [component: Platform=Mobile] + component-properties: Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; padding: 24px 24px 24px 24px; width: 100%; background: rgba(0, 0, 0, 0.5); max-width: 1200px + Text Heading (INSTANCE, 163x29) [component: Text Heading] + component-properties: Text#2104:5=Latest reviews + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 163x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "Latest reviews" + Card Grid (FRAME, 327x699) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Review Card (INSTANCE, 327x217) [component: Review Card] + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px; background: #FAE1FA; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Rating (FRAME, 116x20) + style: display: flex; flex-direction: row; column-gap: 4px; align-items: center + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Review Body (FRAME, 279x55) + style: display: flex; flex-direction: column; row-gap: 4px; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 130x29) [component: Text Heading] + component-properties: Text#2104:5=Review title + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 130x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "Review title" + Text (INSTANCE, 279x22) [component: Text] + component-properties: Text#2104:7=Review body + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 279x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Review body" + Avatar Block (INSTANCE, 279x46) [component: Avatar Block] + component-properties: Description#2010:8=Date, Title#2010:7=Reviewer name + style: display: flex; flex-direction: row; column-gap: 12px; align-items: flex-start; align-self: STRETCH; width: 100% + Avatar (INSTANCE, 40x40) [component: Type=Image, Size=Large, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Large, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 40x40) + style: content-image: url(images/shape@2x.png); object-fit: cover + Info (FRAME, 227x46) + style: display: flex; flex-direction: column; row-gap: 2px; align-items: flex-start; flex-grow: 1 + Title (TEXT, 227x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575; text: "Reviewer name" + Description (TEXT, 227x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #B3B3B3; text: "Date" + Review Card (INSTANCE, 327x217) [component: Review Card] + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px; background: #FAE1FA; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Rating (FRAME, 116x20) + style: display: flex; flex-direction: row; column-gap: 4px; align-items: center + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Review Body (FRAME, 279x55) + style: display: flex; flex-direction: column; row-gap: 4px; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 130x29) [component: Text Heading] + component-properties: Text#2104:5=Review title + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 130x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "Review title" + Text (INSTANCE, 279x22) [component: Text] + component-properties: Text#2104:7=Review body + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 279x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Review body" + Avatar Block (INSTANCE, 279x46) [component: Avatar Block] + component-properties: Description#2010:8=Date, Title#2010:7=Reviewer name + style: display: flex; flex-direction: row; column-gap: 12px; align-items: flex-start; align-self: STRETCH; width: 100% + Avatar (INSTANCE, 40x40) [component: Type=Image, Size=Large, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Large, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 40x40) + style: content-image: url(images/shape-2@2x.png); object-fit: cover + Info (FRAME, 227x46) + style: display: flex; flex-direction: column; row-gap: 2px; align-items: flex-start; flex-grow: 1 + Title (TEXT, 227x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575; text: "Reviewer name" + Description (TEXT, 227x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #B3B3B3; text: "Date" + Review Card (INSTANCE, 327x217) [component: Review Card] + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px; background: #FAE1FA; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Rating (FRAME, 116x20) + style: display: flex; flex-direction: row; column-gap: 4px; align-items: center + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Review Body (FRAME, 279x55) + style: display: flex; flex-direction: column; row-gap: 4px; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 130x29) [component: Text Heading] + component-properties: Text#2104:5=Review title + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 130x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "Review title" + Text (INSTANCE, 279x22) [component: Text] + component-properties: Text#2104:7=Review body + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 279x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Review body" + Avatar Block (INSTANCE, 279x46) [component: Avatar Block] + component-properties: Description#2010:8=Date, Title#2010:7=Reviewer name + style: display: flex; flex-direction: row; column-gap: 12px; align-items: flex-start; align-self: STRETCH; width: 100% + Avatar (INSTANCE, 40x40) [component: Type=Image, Size=Large, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Large, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 40x40) + style: content-image: url(images/shape-3@2x.png); object-fit: cover + Info (FRAME, 227x46) + style: display: flex; flex-direction: column; row-gap: 2px; align-items: flex-start; flex-grow: 1 + Title (TEXT, 227x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575; text: "Reviewer name" + Description (TEXT, 227x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #B3B3B3; text: "Date" + Page Newsletter (INSTANCE, 375x173) [component: Platform=Mobile] + component-properties: Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 24px; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px; width: 100%; background: #D9D9D9; max-width: 1200px + Text Content Heading (INSTANCE, 327x61) [component: Align=Start] + component-properties: Has Subheading#2153:9=true, Subheading#2153:11=With our daily newsletterWith our daily newsletterWith our daily newsletter, Heading#2153:10=Follow the latest trends, Align=Start + style: display: flex; flex-direction: column; row-gap: 8px; align-items: center; align-self: STRETCH; width: 100% + Heading (TEXT, 327x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E; text: "Follow the latest trends" + Subheading (TEXT, 327x24) + style: align-self: STRETCH; width: 100%; /* text-style: Subheading */; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; display: flex; align-items: center; color: #757575; text: "With our daily newsletterWith our daily newsletterWith our daily newsletter" + Form Newsletter (INSTANCE, 327x40) [component: Form Newsletter] + style: display: flex; flex-direction: row; column-gap: 12px; align-items: flex-start; align-self: STRETCH; width: 100% + Input Field (INSTANCE, 238x40) [component: State=Default, Value Type=Default] + component-properties: Value#630:14=you@example.com, Description#611:27=Description, Has Label#57:0=false, Error#280:44=Error, Has Error#72:6=false, Label#280:41=Email address, Has Description#611:20=false, State=Default, Value Type=Default + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; flex-grow: 1 + Input (FRAME, 238x40) + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 12px 16px 12px 16px; width: 100%; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 120px + Value (TEXT, 206x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E; text: "you@example.com" + Button (INSTANCE, 77x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Submit, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 12px 12px 12px 12px; background: #2C2C2C; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 53x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5; text: "Submit" + Footer (INSTANCE, 375x919) [component: Platform=Mobile] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 64px; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 32px 32px; width: 100%; background: #5A5A5A; border-top: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Title (SLOT, 311x35) + style: display: flex; flex-direction: row; column-gap: 16px; justify-content: space-between; align-items: center; align-self: STRETCH; width: 100%; background: #CFF7D3; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E; svg: + Links (FRAME, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100%; background: #EBFFEE + Slot (SLOT, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px; width: 100% + Text Strong (INSTANCE, 81x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 81x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Use cases" + Slot (SLOT, 144x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Team collaboration" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px; width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Explore" + Slot (SLOT, 168x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "FigJam" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px; width: 100% + Text Strong (INSTANCE, 83x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 83x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Resources" + Slot (SLOT, 123x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/diff-base.png new file mode 100644 index 00000000..555e0498 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/figma-base.png new file mode 100644 index 00000000..7d778d30 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/images/image@2x.png new file mode 100644 index 00000000..86ddb82a Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/images/mapping.json new file mode 100644 index 00000000..3e11702b --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/images/mapping.json @@ -0,0 +1,6 @@ +{ + "I562:10933;3049:2455": "image@2x.png", + "I562:10934;348:15217;2236:16098;2010:15576;9762:1114": "shape@2x.png", + "I562:10934;348:15218;2236:16098;2010:15576;9762:1114": "shape-2@2x.png", + "I562:10934;348:15219;2236:16098;2010:15576;9762:1114": "shape-3@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/images/shape-2@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/images/shape-2@2x.png new file mode 100644 index 00000000..0286f0fb Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/images/shape-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/images/shape-3@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/images/shape-3@2x.png new file mode 100644 index 00000000..0286f0fb Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/images/shape-3@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/images/shape@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/images/shape@2x.png new file mode 100644 index 00000000..0286f0fb Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/images/shape@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/output.html b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/output.html new file mode 100644 index 00000000..816c0184 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/output.html @@ -0,0 +1,602 @@ + + + + + + Platform Mobile + + + + +
+ + +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+ + +
+ +
+ + +
+ + +
+ + +
+
+
Text Heading
+
+ + +
+
+
Tag
+
+
+
+
$
+
50
+
+
+
+
+ +
+
Text
+
+
+ + +
+ + +
+
Label
+
+
Value
+
+ + + +
+
+
+ + +
+
Label
+
+
Value
+
+ + + +
+
+
+
+ + +
+
Button
+
+ + +
+ + +
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+ + +
+
+
+ + +
+
+ + + +
+
+
+
+ + +
+
+
Latest reviews
+
+ + +
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+
+
+ + +
+
+
Follow the latest trends
+
With our daily newsletterWith our daily newsletterWith our daily newsletter
+
+
+
+
+
you@example.com
+
+
+
+
Submit
+
+
+
+ + +
+ + +
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ + +
+
+ + +
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/response.txt new file mode 100644 index 00000000..aa484074 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/response.txt @@ -0,0 +1,605 @@ +```html +// filename: index.html + + + + + + Platform Mobile + + + + +
+ + +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+ + +
+ +
+ + +
+ + +
+ + +
+
+
Text Heading
+
+ + +
+
+
Tag
+
+
+
+
$
+
50
+
+
+
+
+ +
+
Text
+
+
+ + +
+ + +
+
Label
+
+
Value
+
+ + + +
+
+
+ + +
+
Label
+
+
Value
+
+ + + +
+
+
+
+ + +
+
Button
+
+ + +
+ + +
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+ + +
+
+
+ + +
+
+ + + +
+
+
+
+ + +
+
+
Latest reviews
+
+ + +
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+
+
+ + +
+
+
Follow the latest trends
+
With our daily newsletterWith our daily newsletterWith our daily newsletter
+
+
+
+
+
you@example.com
+
+
+
+
Submit
+
+
+
+ + +
+ + +
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ + +
+
+ + +
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/result.json b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/result.json new file mode 100644 index 00000000..8b715477 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-product-detail/variable-references/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "mobile-product-detail", + "type": "variable-references", + "runIndex": 0, + "similarity": 97, + "inputTokens": 24006, + "outputTokens": 19202, + "totalTokens": 43208, + "htmlBytes": 53019, + "htmlLines": 602, + "cssClassCount": 15, + "cssVariableCount": 7, + "timestamp": "2026-03-28T11:17:51.828Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/code-base.png new file mode 100644 index 00000000..05b17eb5 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/design-tree.txt new file mode 100644 index 00000000..202f9dff --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/design-tree.txt @@ -0,0 +1,355 @@ +# Design Tree +# Root: 375px x 3377px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Mobile (COMPONENT, 375x3377) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 375x84) [component: Platform=Mobile, State=Default] + component-properties: Platform=Mobile, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 0px; justify-content: space-between; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=68:15863, Variant=Subtle, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Menu (INSTANCE, 20x20) [component: Menu] + style: overflow: hidden + Icon (VECTOR, 15x10) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Page Product Results (INSTANCE, 375x2374) [component: Platform=Mobile] + component-properties: Card Grid#6062:51={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:48={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #009951 /* var:VariableID:3919:36436 */; max-width: 1200px + Section Product Grid (FRAME, 327x2326) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; justify-content: center; align-items: flex-start; align-self: STRETCH; width: 100%; border-radius: 8px; overflow: hidden + Filter Bar (FRAME, 327x100) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; width: 100% + Search Filter (FRAME, 327x44) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center; align-self: STRETCH; width: 100% + Icon Button (INSTANCE, 44x44) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon#4:192=4039:12253, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 32px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Sliders (INSTANCE, 20x20) [component: Sliders] + style: overflow: hidden + Icon (VECTOR, 18x15) + style: border: 2px solid #F5F5F5; svg: + Search (INSTANCE, 259x40) [component: State=Default, Value Type=Placeholder] + component-properties: Value#29:2=Search, State=Default, Value Type=Placeholder + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1; padding: 12px 16px 12px 16px /* var:VariableID:9:11260 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 9999px; overflow: hidden; min-width: 120px + Value (TEXT, 203x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Search" + Search (INSTANCE, 16x16) [component: Search] + style: overflow: hidden + Icon (VECTOR, 12x12) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Tag Toggle Group (INSTANCE, 327x32) [component: Tag Toggle Group] + component-properties: Slot#6031:28={"guid":{"sessionID":6062,"localID":15529}} + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Slot (SLOT, 447x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Tag Toggle (INSTANCE, 75x32) [component: State=On] + component-properties: Icon#87:4=68:15641, Label#156:33=New, Show Icon#86:12=true, State=On + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 8px + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Title (TEXT, 35x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "New" + Tag Toggle (INSTANCE, 137x32) [component: State=Off] + component-properties: Show Icon#86:12=true, Icon#87:4=68:15641, Label#156:33=Price ascending, State=Off + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 121x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36458 */; text: "Price ascending" + Tag Toggle (INSTANCE, 147x32) [component: State=Off] + component-properties: Show Icon#86:12=true, Icon#87:4=68:15641, Label#156:33=Price descending, State=Off + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 131x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36458 */; text: "Price descending" + Tag Toggle (INSTANCE, 64x32) [component: State=Off] + component-properties: Show Icon#86:12=true, Icon#87:4=68:15641, Label#156:33=Rating, State=Off + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 48x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36458 */; text: "Rating" + Card Grid (SLOT, 327x2202) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px /* var:VariableID:9:11262 */; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Product Info Card (INSTANCE, 290x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 258x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 290x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 258x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-2@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 290x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 258x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-3@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 290x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 258x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-4@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 290x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 258x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-5@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 290x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 258x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-6@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Footer (INSTANCE, 375x919) [component: Platform=Mobile] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Title (SLOT, 311x35) + style: display: flex; flex-direction: row; column-gap: 16px; justify-content: space-between; align-items: center; align-self: STRETCH; width: 100%; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Links (FRAME, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; width: 100%; background: #EBFFEE /* var:VariableID:2002:7433 */ + Slot (SLOT, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 81x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 81x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 83x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 83x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/diff-base.png new file mode 100644 index 00000000..edc6f0e1 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/figma-base.png new file mode 100644 index 00000000..0b3eb428 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/images/image-2@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/images/image-2@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/images/image-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/images/image-3@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/images/image-3@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/images/image-3@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/images/image-4@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/images/image-4@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/images/image-4@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/images/image-5@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/images/image-5@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/images/image-5@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/images/image-6@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/images/image-6@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/images/image-6@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/images/image@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/images/mapping.json new file mode 100644 index 00000000..e91507fe --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/images/mapping.json @@ -0,0 +1,8 @@ +{ + "I562:10413;348:13551;638:13763": "image@2x.png", + "I562:10413;348:13552;638:13763": "image-2@2x.png", + "I562:10413;348:13553;638:13763": "image-3@2x.png", + "I562:10413;348:13554;638:13763": "image-4@2x.png", + "I562:10413;348:13555;638:13763": "image-5@2x.png", + "I562:10413;348:13556;638:13763": "image-6@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/output.html b/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/output.html new file mode 100644 index 00000000..12d6f643 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/output.html @@ -0,0 +1,329 @@ + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+ +
+ +
+ +
+
+
+ + + +
+
+
+
Search
+
+ + + +
+
+
+ + +
+
+
+
+ + + +
+
New
+
+
+
Price ascending
+
+
+
Price descending
+
+
+
Rating
+
+
+
+
+ + +
+
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+
+
+
+ + +
+ +
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ + +
+
+ +
+
+
Use cases
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
Explore
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
Resources
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/response.txt new file mode 100644 index 00000000..d0ca658a --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/response.txt @@ -0,0 +1,332 @@ +```html +// filename: index.html + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+ +
+ +
+ +
+
+
+ + + +
+
+
+
Search
+
+ + + +
+
+
+ + +
+
+
+
+ + + +
+
New
+
+
+
Price ascending
+
+
+
Price descending
+
+
+
Rating
+
+
+
+
+ + +
+
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+
+
+
+ + +
+ +
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ + +
+
+ +
+
+
Use cases
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
Explore
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
Resources
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/result.json b/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/result.json new file mode 100644 index 00000000..710a162b --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-shop/baseline/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "mobile-shop", + "type": "baseline", + "runIndex": 0, + "similarity": 82, + "inputTokens": 19294, + "outputTokens": 11671, + "totalTokens": 30965, + "htmlBytes": 31688, + "htmlLines": 329, + "cssClassCount": 14, + "cssVariableCount": 12, + "timestamp": "2026-03-28T10:54:27.097Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/code-base.png new file mode 100644 index 00000000..2bf8cc44 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/design-tree.txt new file mode 100644 index 00000000..85b85181 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/design-tree.txt @@ -0,0 +1,299 @@ +# Design Tree +# Root: 375px x 3377px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Mobile (COMPONENT, 375x3377) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 375x84) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 0px; justify-content: space-between; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Menu (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 15x10) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Page Product Results (INSTANCE, 375x2374) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #009951 /* var:VariableID:3919:36436 */; max-width: 1200px + Section Product Grid (FRAME, 327x2326) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; justify-content: center; align-items: flex-start; align-self: STRETCH; width: 100%; border-radius: 8px; overflow: hidden + Filter Bar (FRAME, 327x100) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; width: 100% + Search Filter (FRAME, 327x44) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center; align-self: STRETCH; width: 100% + Icon Button (INSTANCE, 44x44) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 32px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Sliders (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 18x15) + style: border: 2px solid #F5F5F5; svg: + Search (INSTANCE, 259x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1; padding: 12px 16px 12px 16px /* var:VariableID:9:11260 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 9999px; overflow: hidden; min-width: 120px + Value (TEXT, 203x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Search" + Search (INSTANCE, 16x16) + style: overflow: hidden + Icon (VECTOR, 12x12) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Tag Toggle Group (INSTANCE, 327x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Slot (SLOT, 447x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Tag Toggle (INSTANCE, 75x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 8px + Check (INSTANCE, 16x16) + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Title (TEXT, 35x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "New" + Tag Toggle (INSTANCE, 137x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 121x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36458 */; text: "Price ascending" + Tag Toggle (INSTANCE, 147x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 131x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36458 */; text: "Price descending" + Tag Toggle (INSTANCE, 64x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 48x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36458 */; text: "Rating" + Card Grid (SLOT, 327x2202) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px /* var:VariableID:9:11262 */; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Product Info Card (INSTANCE, 290x347) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 258x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 290x347) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 258x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-2@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 290x347) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 258x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-3@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 290x347) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 258x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-4@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 290x347) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 258x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-5@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 290x347) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 258x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-6@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Footer (INSTANCE, 375x919) + style: display: flex; flex-direction: column; row-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Title (SLOT, 311x35) + style: display: flex; flex-direction: row; column-gap: 16px; justify-content: space-between; align-items: center; align-self: STRETCH; width: 100%; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Links (FRAME, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; width: 100%; background: #EBFFEE /* var:VariableID:2002:7433 */ + Slot (SLOT, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Text Link List (INSTANCE, 311x236) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 81x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 81x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 311x236) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 59x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 311x236) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 83x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 83x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/diff-base.png new file mode 100644 index 00000000..8bb6ec90 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/figma-base.png new file mode 100644 index 00000000..0b3eb428 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/images/image-2@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/images/image-2@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/images/image-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/images/image-3@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/images/image-3@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/images/image-3@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/images/image-4@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/images/image-4@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/images/image-4@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/images/image-5@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/images/image-5@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/images/image-5@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/images/image-6@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/images/image-6@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/images/image-6@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/images/image@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/images/mapping.json new file mode 100644 index 00000000..e91507fe --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/images/mapping.json @@ -0,0 +1,8 @@ +{ + "I562:10413;348:13551;638:13763": "image@2x.png", + "I562:10413;348:13552;638:13763": "image-2@2x.png", + "I562:10413;348:13553;638:13763": "image-3@2x.png", + "I562:10413;348:13554;638:13763": "image-4@2x.png", + "I562:10413;348:13555;638:13763": "image-5@2x.png", + "I562:10413;348:13556;638:13763": "image-6@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/output.html b/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/output.html new file mode 100644 index 00000000..a9cbd46d --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/output.html @@ -0,0 +1,297 @@ + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+ +
+
+
+
+ + + +
+
+
+
Search
+
+ + + +
+
+
+
+
+
+
+ + + +
+
New
+
+
+
Price ascending
+
+
+
Price descending
+
+
+
Rating
+
+
+
+
+ + +
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ + +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ + +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ + +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ + +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ + +
+ +
+
+
Text
+
+
+
$0
+
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+ +
+
+
Use cases
+
+
+
UI design
+
UX design
+
Wireframing
+
Diagramming
+
Brainstorming
+
Online whiteboard
+
Team collaboration
+
+
+ + +
+
+
Explore
+
+
+
Design
+
Prototyping
+
Development features
+
Design systems
+
Collaboration features
+
Design process
+
FigJam
+
+
+ + +
+
+
Resources
+
+
+
Blog
+
Best practices
+
Colors
+
Color wheel
+
Support
+
Developers
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/response.txt new file mode 100644 index 00000000..67a218f3 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/response.txt @@ -0,0 +1,300 @@ +```html +// filename: index.html + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+ +
+
+
+
+ + + +
+
+
+
Search
+
+ + + +
+
+
+
+
+
+
+ + + +
+
New
+
+
+
Price ascending
+
+
+
Price descending
+
+
+
Rating
+
+
+
+
+ + +
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ + +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ + +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ + +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ + +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ + +
+ +
+
+
Text
+
+
+
$0
+
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+ +
+
+
Use cases
+
+
+
UI design
+
UX design
+
Wireframing
+
Diagramming
+
Brainstorming
+
Online whiteboard
+
Team collaboration
+
+
+ + +
+
+
Explore
+
+
+
Design
+
Prototyping
+
Development features
+
Design systems
+
Collaboration features
+
Design process
+
FigJam
+
+
+ + +
+
+
Resources
+
+
+
Blog
+
Best practices
+
Colors
+
Color wheel
+
Support
+
Developers
+
Resource library
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/result.json b/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/result.json new file mode 100644 index 00000000..9616596b --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-shop/component-references/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "mobile-shop", + "type": "component-references", + "runIndex": 0, + "similarity": 98, + "inputTokens": 17545, + "outputTokens": 12165, + "totalTokens": 29710, + "htmlBytes": 32344, + "htmlLines": 297, + "cssClassCount": 5, + "cssVariableCount": 17, + "timestamp": "2026-03-28T11:37:20.693Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/code-base.png new file mode 100644 index 00000000..2df9fe1b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/design-tree.txt new file mode 100644 index 00000000..11195ecf --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/design-tree.txt @@ -0,0 +1,311 @@ +# Design Tree +# Root: 375px x 3377px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Mobile (COMPONENT, 375x3377) + style: background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 375x84) [component: Platform=Mobile, State=Default] + component-properties: Platform=Mobile, State=Default + style: width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Block (FRAME, 40x35) + Figma (FRAME, 40x35) + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=68:15863, Variant=Subtle, State=Default, Size=Small + style: border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Menu (INSTANCE, 20x20) [component: Menu] + style: overflow: hidden + Icon (VECTOR, 15x10) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Page Product Results (INSTANCE, 375x2374) [component: Platform=Mobile] + component-properties: Card Grid#6062:51={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:48={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: width: 100%; background: #009951 /* var:VariableID:3919:36436 */; max-width: 1200px + Section Product Grid (FRAME, 327x2326) + style: width: 100%; border-radius: 8px; overflow: hidden + Filter Bar (FRAME, 327x100) + style: width: 100% + Search Filter (FRAME, 327x44) + style: width: 100% + Icon Button (INSTANCE, 44x44) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon#4:192=4039:12253, Variant=Primary, State=Default, Size=Medium + style: background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 32px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Sliders (INSTANCE, 20x20) [component: Sliders] + style: overflow: hidden + Icon (VECTOR, 18x15) + style: border: 2px solid #F5F5F5; svg: + Search (INSTANCE, 259x40) [component: State=Default, Value Type=Placeholder] + component-properties: Value#29:2=Search, State=Default, Value Type=Placeholder + style: flex-grow: 1; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 9999px; overflow: hidden; min-width: 120px + Value (TEXT, 203x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Search" + Search (INSTANCE, 16x16) [component: Search] + style: overflow: hidden + Icon (VECTOR, 12x12) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Tag Toggle Group (INSTANCE, 327x32) [component: Tag Toggle Group] + component-properties: Slot#6031:28={"guid":{"sessionID":6062,"localID":15529}} + style: width: 100% + Slot (SLOT, 447x32) + Tag Toggle (INSTANCE, 75x32) [component: State=On] + component-properties: Icon#87:4=68:15641, Label#156:33=New, Show Icon#86:12=true, State=On + style: background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 8px + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Title (TEXT, 35x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "New" + Tag Toggle (INSTANCE, 137x32) [component: State=Off] + component-properties: Show Icon#86:12=true, Icon#87:4=68:15641, Label#156:33=Price ascending, State=Off + style: background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 121x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #757575 /* var:VariableID:3919:36458 */; text: "Price ascending" + Tag Toggle (INSTANCE, 147x32) [component: State=Off] + component-properties: Show Icon#86:12=true, Icon#87:4=68:15641, Label#156:33=Price descending, State=Off + style: background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 131x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #757575 /* var:VariableID:3919:36458 */; text: "Price descending" + Tag Toggle (INSTANCE, 64x32) [component: State=Off] + component-properties: Show Icon#86:12=true, Icon#87:4=68:15641, Label#156:33=Rating, State=Off + style: background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 48x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #757575 /* var:VariableID:3919:36458 */; text: "Rating" + Card Grid (SLOT, 327x2202) + style: width: 100% + Product Info Card (INSTANCE, 290x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: flex-grow: 1; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 258x247) + style: width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 290x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: flex-grow: 1; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 258x247) + style: width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-2@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 290x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: flex-grow: 1; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 258x247) + style: width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-3@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 290x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: flex-grow: 1; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 258x247) + style: width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-4@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 290x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: flex-grow: 1; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 258x247) + style: width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-5@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 290x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: flex-grow: 1; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 258x247) + style: width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-6@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Footer (INSTANCE, 375x919) [component: Platform=Mobile] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Title (SLOT, 311x35) + style: width: 100%; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Links (FRAME, 311x756) + style: width: 100%; background: #EBFFEE /* var:VariableID:2002:7433 */ + Slot (SLOT, 311x756) + style: width: 100% + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: width: 100% + Title (FRAME, 311x26) + style: width: 100% + Text Strong (INSTANCE, 81x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + Text Strong (TEXT, 81x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x202) + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: width: 100% + Title (FRAME, 311x26) + style: width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + Text Strong (TEXT, 59x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x202) + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: width: 100% + Title (FRAME, 311x26) + style: width: 100% + Text Strong (INSTANCE, 83x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + Text Strong (TEXT, 83x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x202) + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/diff-base.png new file mode 100644 index 00000000..a484e728 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/figma-base.png new file mode 100644 index 00000000..0b3eb428 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/images/image-2@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/images/image-2@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/images/image-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/images/image-3@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/images/image-3@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/images/image-3@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/images/image-4@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/images/image-4@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/images/image-4@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/images/image-5@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/images/image-5@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/images/image-5@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/images/image-6@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/images/image-6@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/images/image-6@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/images/image@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/images/mapping.json new file mode 100644 index 00000000..e91507fe --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/images/mapping.json @@ -0,0 +1,8 @@ +{ + "I562:10413;348:13551;638:13763": "image@2x.png", + "I562:10413;348:13552;638:13763": "image-2@2x.png", + "I562:10413;348:13553;638:13763": "image-3@2x.png", + "I562:10413;348:13554;638:13763": "image-4@2x.png", + "I562:10413;348:13555;638:13763": "image-5@2x.png", + "I562:10413;348:13556;638:13763": "image-6@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/output.html b/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/output.html new file mode 100644 index 00000000..62740ebe --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/output.html @@ -0,0 +1,344 @@ + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+ +
+ +
+
+ + + +
+
+
Search
+ + + +
+
+ + +
+
+ + + + New +
+
+ Price ascending +
+
+ Price descending +
+
+ Rating +
+
+
+ + +
+
+
+ +
+
+
Text
+
$0
+
+
+ +
+
+ +
+
+
Text
+
$0
+
+
+ +
+
+ +
+
+
Text
+
$0
+
+
+ +
+
+ +
+
+
Text
+
$0
+
+
+ +
+
+ +
+
+
Text
+
$0
+
+
+ +
+
+ +
+
+
Text
+
$0
+
+
+
+
+
+ + +
+ +
+ + + +
+ + + + + + + + + + + + +
+
+ + +
+ +
+
+
Use cases
+
+
+
UI design
+
UX design
+
Wireframing
+
Diagramming
+
Brainstorming
+
Online whiteboard
+
Team collaboration
+
+
+ + +
+
+
Explore
+
+
+
Design
+
Prototyping
+
Development features
+
Design systems
+
Collaboration features
+
Design process
+
FigJam
+
+
+ + +
+
+
Resources
+
+
+
Blog
+
Best practices
+
Colors
+
Color wheel
+
Support
+
Developers
+
Resource library
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/response.txt new file mode 100644 index 00000000..837983d0 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/response.txt @@ -0,0 +1,352 @@ +```html +// filename: index.html + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+ +
+ +
+
+ + + +
+
+
Search
+ + + +
+
+ + +
+
+ + + + New +
+
+ Price ascending +
+
+ Price descending +
+
+ Rating +
+
+
+ + +
+
+
+ +
+
+
Text
+
$0
+
+
+ +
+
+ +
+
+
Text
+
$0
+
+
+ +
+
+ +
+
+
Text
+
$0
+
+
+ +
+
+ +
+
+
Text
+
$0
+
+
+ +
+
+ +
+
+
Text
+
$0
+
+
+ +
+
+ +
+
+
Text
+
$0
+
+
+
+
+
+ + +
+ +
+ + + +
+ + + + + + + + + + + + +
+
+ + +
+ +
+
+
Use cases
+
+
+
UI design
+
UX design
+
Wireframing
+
Diagramming
+
Brainstorming
+
Online whiteboard
+
Team collaboration
+
+
+ + +
+
+
Explore
+
+
+
Design
+
Prototyping
+
Development features
+
Design systems
+
Collaboration features
+
Design process
+
FigJam
+
+
+ + +
+
+
Resources
+
+
+
Blog
+
Best practices
+
Colors
+
Color wheel
+
Support
+
Developers
+
Resource library
+
+
+
+
+
+ + +``` + +// interpretations: +- Used flexbox layout for components that needed to be arranged horizontally or vertically based on visual structure +- Added padding and margins to achieve proper spacing between elements where exact positioning wasn't specified +- Interpreted the card grid as a vertical stack of product cards based on the mobile layout context +- Used display: flex with gap properties for tag toggle group horizontal arrangement +- Applied overflow-x: auto to tag toggle group to handle potential horizontal scrolling on mobile \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/result.json b/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/result.json new file mode 100644 index 00000000..3741bdd1 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-shop/layout-direction-spacing/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "mobile-shop", + "type": "layout-direction-spacing", + "runIndex": 0, + "similarity": 87, + "inputTokens": 15541, + "outputTokens": 10780, + "totalTokens": 26321, + "htmlBytes": 26342, + "htmlLines": 344, + "cssClassCount": 14, + "cssVariableCount": 12, + "timestamp": "2026-03-28T11:35:06.820Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/code-base.png new file mode 100644 index 00000000..442e670d Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/design-tree.txt new file mode 100644 index 00000000..77f17cab --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/design-tree.txt @@ -0,0 +1,355 @@ +# Design Tree +# Root: 375px x 3377px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Node1 (COMPONENT, 375x3377) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Node2 (INSTANCE, 375x84) [component: Platform=Mobile, State=Default] + component-properties: Platform=Mobile, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 0px; justify-content: space-between; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Node3 (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Node4 (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node5 (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Node6 (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=68:15863, Variant=Subtle, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Node7 (INSTANCE, 20x20) [component: Menu] + style: overflow: hidden + Node8 (VECTOR, 15x10) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Node9 (INSTANCE, 375x2374) [component: Platform=Mobile] + component-properties: Card Grid#6062:51={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:48={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #009951 /* var:VariableID:3919:36436 */; max-width: 1200px + Node10 (FRAME, 327x2326) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; justify-content: center; align-items: flex-start; align-self: STRETCH; width: 100%; border-radius: 8px; overflow: hidden + Node11 (FRAME, 327x100) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node12 (FRAME, 327x44) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center; align-self: STRETCH; width: 100% + Node13 (INSTANCE, 44x44) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon#4:192=4039:12253, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 32px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Node14 (INSTANCE, 20x20) [component: Sliders] + style: overflow: hidden + Node15 (VECTOR, 18x15) + style: border: 2px solid #F5F5F5; svg: + Node16 (INSTANCE, 259x40) [component: State=Default, Value Type=Placeholder] + component-properties: Value#29:2=Search, State=Default, Value Type=Placeholder + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1; padding: 12px 16px 12px 16px /* var:VariableID:9:11260 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 9999px; overflow: hidden; min-width: 120px + Node17 (TEXT, 203x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Search" + Node18 (INSTANCE, 16x16) [component: Search] + style: overflow: hidden + Node19 (VECTOR, 12x12) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Node20 (INSTANCE, 327x32) [component: Tag Toggle Group] + component-properties: Slot#6031:28={"guid":{"sessionID":6062,"localID":15529}} + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node21 (SLOT, 447x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Node22 (INSTANCE, 75x32) [component: State=On] + component-properties: Icon#87:4=68:15641, Label#156:33=New, Show Icon#86:12=true, State=On + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 8px + Node23 (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Node24 (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Node25 (TEXT, 35x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "New" + Node26 (INSTANCE, 137x32) [component: State=Off] + component-properties: Show Icon#86:12=true, Icon#87:4=68:15641, Label#156:33=Price ascending, State=Off + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Node27 (TEXT, 121x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36458 */; text: "Price ascending" + Node28 (INSTANCE, 147x32) [component: State=Off] + component-properties: Show Icon#86:12=true, Icon#87:4=68:15641, Label#156:33=Price descending, State=Off + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Node29 (TEXT, 131x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36458 */; text: "Price descending" + Node30 (INSTANCE, 64x32) [component: State=Off] + component-properties: Show Icon#86:12=true, Icon#87:4=68:15641, Label#156:33=Rating, State=Off + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Node31 (TEXT, 48x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36458 */; text: "Rating" + Node32 (SLOT, 327x2202) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px /* var:VariableID:9:11262 */; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Node33 (INSTANCE, 290x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Node34 (FRAME, 258x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Node35 (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Node36 (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Node37 (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Node38 (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Node39 (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Node40 (INSTANCE, 290x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Node41 (FRAME, 258x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-2@2x.png); object-fit: contain; overflow: hidden + Node42 (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Node43 (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Node44 (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Node45 (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Node46 (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Node47 (INSTANCE, 290x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Node48 (FRAME, 258x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-3@2x.png); object-fit: contain; overflow: hidden + Node49 (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Node50 (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Node51 (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Node52 (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Node53 (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Node54 (INSTANCE, 290x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Node55 (FRAME, 258x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-4@2x.png); object-fit: contain; overflow: hidden + Node56 (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Node57 (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Node58 (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Node59 (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Node60 (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Node61 (INSTANCE, 290x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Node62 (FRAME, 258x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-5@2x.png); object-fit: contain; overflow: hidden + Node63 (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Node64 (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Node65 (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Node66 (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Node67 (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Node68 (INSTANCE, 290x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Node69 (FRAME, 258x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-6@2x.png); object-fit: contain; overflow: hidden + Node70 (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Node71 (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Node72 (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Node73 (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Node74 (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Node75 (INSTANCE, 375x919) [component: Platform=Mobile] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Node76 (SLOT, 311x35) + style: display: flex; flex-direction: row; column-gap: 16px; justify-content: space-between; align-items: center; align-self: STRETCH; width: 100%; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Node77 (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node78 (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Node79 (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + Node80 (FRAME, 24x24) + Node81 (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node82 (FRAME, 24x24) + style: overflow: hidden + Node83 (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node84 (FRAME, 24x24) + style: overflow: hidden + Node85 (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node86 (FRAME, 24x24) + style: overflow: hidden + Node87 (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node88 (FRAME, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; width: 100%; background: #EBFFEE /* var:VariableID:2002:7433 */ + Node89 (SLOT, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Node90 (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node91 (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Node92 (INSTANCE, 81x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Node93 (TEXT, 81x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Node94 (SLOT, 144x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Node95 (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node96 (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Node97 (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node98 (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Node99 (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node100 (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Node101 (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node102 (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Node103 (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node104 (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Node105 (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node106 (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Node107 (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node108 (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Node109 (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node110 (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Node111 (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Node112 (TEXT, 59x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Node113 (SLOT, 168x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Node114 (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node115 (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Node116 (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node117 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Node118 (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node119 (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Node120 (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node121 (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Node122 (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node123 (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Node124 (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node125 (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Node126 (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node127 (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Node128 (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node129 (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Node130 (INSTANCE, 83x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Node131 (TEXT, 83x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Node132 (SLOT, 123x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Node133 (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node134 (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Node135 (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node136 (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Node137 (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node138 (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Node139 (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node140 (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Node141 (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node142 (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Node143 (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node144 (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Node145 (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + Node146 (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/diff-base.png new file mode 100644 index 00000000..30a45f35 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/figma-base.png new file mode 100644 index 00000000..0b3eb428 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/images/image-2@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/images/image-2@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/images/image-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/images/image-3@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/images/image-3@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/images/image-3@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/images/image-4@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/images/image-4@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/images/image-4@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/images/image-5@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/images/image-5@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/images/image-5@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/images/image-6@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/images/image-6@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/images/image-6@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/images/image@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/images/mapping.json new file mode 100644 index 00000000..e91507fe --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/images/mapping.json @@ -0,0 +1,8 @@ +{ + "I562:10413;348:13551;638:13763": "image@2x.png", + "I562:10413;348:13552;638:13763": "image-2@2x.png", + "I562:10413;348:13553;638:13763": "image-3@2x.png", + "I562:10413;348:13554;638:13763": "image-4@2x.png", + "I562:10413;348:13555;638:13763": "image-5@2x.png", + "I562:10413;348:13556;638:13763": "image-6@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/output.html b/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/output.html new file mode 100644 index 00000000..1efa5305 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/output.html @@ -0,0 +1,438 @@ + + + + + + Design Interface + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+ +
+
+
+
+ + + +
+
+
+
Search
+
+ + + +
+
+
+
+
+
+
+ + + +
+
New
+
+
+
Price ascending
+
+
+
Price descending
+
+
+
Rating
+
+
+
+
+ + +
+
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+ +
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/response.txt new file mode 100644 index 00000000..0aca87e0 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/response.txt @@ -0,0 +1,441 @@ +```html +// filename: index.html + + + + + + Design Interface + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+ +
+
+
+
+ + + +
+
+
+
Search
+
+ + + +
+
+
+
+
+
+
+ + + +
+
New
+
+
+
Price ascending
+
+
+
Price descending
+
+
+
Rating
+
+
+
+
+ + +
+
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+ +
+ +
+
+
Text
+
+
+
$0
+
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+ +
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/result.json b/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/result.json new file mode 100644 index 00000000..c7536b8e --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-shop/node-names-hierarchy/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "mobile-shop", + "type": "node-names-hierarchy", + "runIndex": 0, + "similarity": 98, + "inputTokens": 19434, + "outputTokens": 12699, + "totalTokens": 32133, + "htmlBytes": 35292, + "htmlLines": 438, + "cssClassCount": 14, + "cssVariableCount": 12, + "timestamp": "2026-03-28T11:39:38.505Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/code-base.png new file mode 100644 index 00000000..65711aa2 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/design-tree.txt new file mode 100644 index 00000000..9843beb2 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/design-tree.txt @@ -0,0 +1,355 @@ +# Design Tree +# Root: 375px x 3377px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Mobile (COMPONENT, 375x3377) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 375x84) [component: Platform=Mobile, State=Default] + component-properties: Platform=Mobile, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 0px; justify-content: space-between; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=68:15863, Variant=Subtle, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Menu (INSTANCE, 20x20) [component: Menu] + style: overflow: hidden + Icon (VECTOR, 15x10) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Page Product Results (INSTANCE, 375x2374) [component: Platform=Mobile] + component-properties: Card Grid#6062:51={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:48={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; width: 100%; background: #009951 /* var:VariableID:3919:36436 */; max-width: 1200px + Section Product Grid (FRAME, 327x2326) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; justify-content: center; align-items: flex-start; align-self: STRETCH; width: 100%; border-radius: 8px; overflow: hidden + Filter Bar (FRAME, 327x100) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; width: 100% + Search Filter (FRAME, 327x44) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center; align-self: STRETCH; width: 100% + Icon Button (INSTANCE, 44x44) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon#4:192=4039:12253, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 32px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Sliders (INSTANCE, 20x20) [component: Sliders] + style: overflow: hidden + Icon (VECTOR, 18x15) + style: border: 2px solid #F5F5F5; svg: + Search (INSTANCE, 259x40) [component: State=Default, Value Type=Placeholder] + component-properties: Value#29:2=Search, State=Default, Value Type=Placeholder + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; flex-grow: 1; padding: 12px 16px 12px 16px /* var:VariableID:9:11260 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 9999px; overflow: hidden; min-width: 120px + Value (TEXT, 203x16) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Search" + Search (INSTANCE, 16x16) [component: Search] + style: overflow: hidden + Icon (VECTOR, 12x12) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Tag Toggle Group (INSTANCE, 327x32) [component: Tag Toggle Group] + component-properties: Slot#6031:28={"guid":{"sessionID":6062,"localID":15529}} + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Slot (SLOT, 447x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Tag Toggle (INSTANCE, 75x32) [component: State=On] + component-properties: Icon#87:4=68:15641, Label#156:33=New, Show Icon#86:12=true, State=On + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border-radius: 8px + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Title (TEXT, 35x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "New" + Tag Toggle (INSTANCE, 137x32) [component: State=Off] + component-properties: Show Icon#86:12=true, Icon#87:4=68:15641, Label#156:33=Price ascending, State=Off + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 121x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36458 */; text: "Price ascending" + Tag Toggle (INSTANCE, 147x32) [component: State=Off] + component-properties: Show Icon#86:12=true, Icon#87:4=68:15641, Label#156:33=Price descending, State=Off + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 131x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36458 */; text: "Price descending" + Tag Toggle (INSTANCE, 64x32) [component: State=Off] + component-properties: Show Icon#86:12=true, Icon#87:4=68:15641, Label#156:33=Rating, State=Off + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 48x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36458 */; text: "Rating" + Card Grid (SLOT, 327x2202) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px /* var:VariableID:9:11262 */; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Product Info Card (INSTANCE, 290x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 258x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 290x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 258x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-2@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 290x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 258x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-3@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 290x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 258x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-4@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 290x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 258x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-5@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Product Info Card (INSTANCE, 290x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 258x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-6@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$0" + Footer (INSTANCE, 375x919) [component: Platform=Mobile] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Title (SLOT, 311x35) + style: display: flex; flex-direction: row; column-gap: 16px; justify-content: space-between; align-items: center; align-self: STRETCH; width: 100%; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Links (FRAME, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; width: 100%; background: #EBFFEE /* var:VariableID:2002:7433 */ + Slot (SLOT, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 81x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 81x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 72x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 78x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 92x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 100x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 105x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 138x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 144x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 53x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 167x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 120x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 168x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 117x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 55x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px /* var:VariableID:9:11258 */; width: 100% + Text Strong (INSTANCE, 83x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 83x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 34x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 109x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 49x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 90x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 61x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 86x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 123x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/diff-base.png new file mode 100644 index 00000000..8e125ff1 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/figma-base.png new file mode 100644 index 00000000..0b3eb428 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/images/image-2@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/images/image-2@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/images/image-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/images/image-3@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/images/image-3@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/images/image-3@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/images/image-4@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/images/image-4@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/images/image-4@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/images/image-5@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/images/image-5@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/images/image-5@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/images/image-6@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/images/image-6@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/images/image-6@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/images/image@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/images/mapping.json new file mode 100644 index 00000000..e91507fe --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/images/mapping.json @@ -0,0 +1,8 @@ +{ + "I562:10413;348:13551;638:13763": "image@2x.png", + "I562:10413;348:13552;638:13763": "image-2@2x.png", + "I562:10413;348:13553;638:13763": "image-3@2x.png", + "I562:10413;348:13554;638:13763": "image-4@2x.png", + "I562:10413;348:13555;638:13763": "image-5@2x.png", + "I562:10413;348:13556;638:13763": "image-6@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/output.html b/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/output.html new file mode 100644 index 00000000..7d3757da --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/output.html @@ -0,0 +1,443 @@ + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+ +
+
+
+
+ + + +
+
+
+
Search
+
+ + + +
+
+
+
+
+
+
+ + + +
+
New
+
+
+
Price ascending
+
+
+
Price descending
+
+
+
Rating
+
+
+
+
+ + +
+
+
+ +
+
+
+
Text
+
+
+
$0
+
+
+
+ +
+
+ +
+
+
+
Text
+
+
+
$0
+
+
+
+ +
+
+ +
+
+
+
Text
+
+
+
$0
+
+
+
+ +
+
+ +
+
+
+
Text
+
+
+
$0
+
+
+
+ +
+
+ +
+
+
+
Text
+
+
+
$0
+
+
+
+ +
+
+ +
+
+
+
Text
+
+
+
$0
+
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/response.txt new file mode 100644 index 00000000..f62d1db6 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/response.txt @@ -0,0 +1,446 @@ +```html +// filename: index.html + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+ +
+
+
+
+ + + +
+
+
+
Search
+
+ + + +
+
+
+
+
+
+
+ + + +
+
New
+
+
+
Price ascending
+
+
+
Price descending
+
+
+
Rating
+
+
+
+
+ + +
+
+
+ +
+
+
+
Text
+
+
+
$0
+
+
+
+ +
+
+ +
+
+
+
Text
+
+
+
$0
+
+
+
+ +
+
+ +
+
+
+
Text
+
+
+
$0
+
+
+
+ +
+
+ +
+
+
+
Text
+
+
+
$0
+
+
+
+ +
+
+ +
+
+
+
Text
+
+
+
$0
+
+
+
+ +
+
+ +
+
+
+
Text
+
+
+
$0
+
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/result.json b/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/result.json new file mode 100644 index 00000000..a8dc2bb1 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-shop/style-references/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "mobile-shop", + "type": "style-references", + "runIndex": 0, + "similarity": 98, + "inputTokens": 18937, + "outputTokens": 14259, + "totalTokens": 33196, + "htmlBytes": 38882, + "htmlLines": 443, + "cssClassCount": 11, + "cssVariableCount": 12, + "timestamp": "2026-03-28T11:44:30.760Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/code-base.png new file mode 100644 index 00000000..4338152d Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/design-tree.txt new file mode 100644 index 00000000..a9bf6c63 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/design-tree.txt @@ -0,0 +1,355 @@ +# Design Tree +# Root: 375px x 3377px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Mobile (COMPONENT, 375x3377) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF; overflow: hidden + Header (INSTANCE, 375x84) [component: Platform=Mobile, State=Default] + component-properties: Platform=Mobile, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 0px; justify-content: space-between; align-items: center; align-self: STRETCH; padding: 24px 24px 24px 24px; width: 100%; background: #FFFFFF; border-bottom: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=68:15863, Variant=Subtle, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Menu (INSTANCE, 20x20) [component: Menu] + style: overflow: hidden + Icon (VECTOR, 15x10) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Page Product Results (INSTANCE, 375x2374) [component: Platform=Mobile] + component-properties: Card Grid#6062:51={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:48={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; padding: 24px 24px 24px 24px; width: 100%; background: #009951; max-width: 1200px + Section Product Grid (FRAME, 327x2326) + style: display: flex; flex-direction: column; row-gap: 24px; justify-content: center; align-items: flex-start; align-self: STRETCH; width: 100%; border-radius: 8px; overflow: hidden + Filter Bar (FRAME, 327x100) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Search Filter (FRAME, 327x44) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center; align-self: STRETCH; width: 100% + Icon Button (INSTANCE, 44x44) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon#4:192=4039:12253, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 12px 12px 12px 12px; background: #2C2C2C; border: 1px solid #2C2C2C; border-radius: 32px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Sliders (INSTANCE, 20x20) [component: Sliders] + style: overflow: hidden + Icon (VECTOR, 18x15) + style: border: 2px solid #F5F5F5; svg: + Search (INSTANCE, 259x40) [component: State=Default, Value Type=Placeholder] + component-properties: Value#29:2=Search, State=Default, Value Type=Placeholder + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center; flex-grow: 1; padding: 12px 16px 12px 16px; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 9999px; overflow: hidden; min-width: 120px + Value (TEXT, 203x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #B3B3B3; text: "Search" + Search (INSTANCE, 16x16) [component: Search] + style: overflow: hidden + Icon (VECTOR, 12x12) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Tag Toggle Group (INSTANCE, 327x32) [component: Tag Toggle Group] + component-properties: Slot#6031:28={"guid":{"sessionID":6062,"localID":15529}} + style: display: flex; flex-direction: row; column-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Slot (SLOT, 447x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Tag Toggle (INSTANCE, 75x32) [component: State=On] + component-properties: Icon#87:4=68:15641, Label#156:33=New, Show Icon#86:12=true, State=On + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; background: #2C2C2C; border-radius: 8px + Check (INSTANCE, 16x16) [component: Check] + style: overflow: hidden + Icon (VECTOR, 11x7) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Title (TEXT, 35x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #F5F5F5; text: "New" + Tag Toggle (INSTANCE, 137x32) [component: State=Off] + component-properties: Show Icon#86:12=true, Icon#87:4=68:15641, Label#156:33=Price ascending, State=Off + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; background: #F5F5F5; border-radius: 8px + Title (TEXT, 121x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #757575; text: "Price ascending" + Tag Toggle (INSTANCE, 147x32) [component: State=Off] + component-properties: Show Icon#86:12=true, Icon#87:4=68:15641, Label#156:33=Price descending, State=Off + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; background: #F5F5F5; border-radius: 8px + Title (TEXT, 131x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #757575; text: "Price descending" + Tag Toggle (INSTANCE, 64x32) [component: State=Off] + component-properties: Show Icon#86:12=true, Icon#87:4=68:15641, Label#156:33=Rating, State=Off + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; background: #F5F5F5; border-radius: 8px + Title (TEXT, 48x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #757575; text: "Rating" + Card Grid (SLOT, 327x2202) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 24px; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Product Info Card (INSTANCE, 290x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 258x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "$0" + Product Info Card (INSTANCE, 290x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 258x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3; content-image: url(images/image-2@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "$0" + Product Info Card (INSTANCE, 290x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 258x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3; content-image: url(images/image-3@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "$0" + Product Info Card (INSTANCE, 290x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 258x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3; content-image: url(images/image-4@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "$0" + Product Info Card (INSTANCE, 290x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 258x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3; content-image: url(images/image-5@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "$0" + Product Info Card (INSTANCE, 290x347) [component: Product Info Card] + component-properties: Body#6208:0={"guid":{"sessionID":-1,"localID":-1}}, Show Description#2236:12=false + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; flex-grow: 1; padding: 16px 16px 16px 16px; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px; max-width: 290px + Image (FRAME, 258x247) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; width: 100%; background: #E3E3E3; content-image: url(images/image-6@2x.png); object-fit: contain; overflow: hidden + Body (SLOT, 208x52) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text (INSTANCE, 208x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Text" + Text Strong (INSTANCE, 22x22) [component: Text Strong] + component-properties: Text#2104:8=$0 + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 22x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "$0" + Footer (INSTANCE, 375x919) [component: Platform=Mobile] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Mobile + style: display: flex; flex-direction: column; row-gap: 64px; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 32px 32px; width: 100%; background: #5A5A5A; border-top: 1px solid #D9D9D9; overflow: hidden; max-width: 1200px + Title (SLOT, 311x35) + style: display: flex; flex-direction: row; column-gap: 16px; justify-content: space-between; align-items: center; align-self: STRETCH; width: 100%; background: #CFF7D3; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E; svg: + Links (FRAME, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100%; background: #EBFFEE + Slot (SLOT, 311x756) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px; width: 100% + Text Strong (INSTANCE, 81x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 81x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Use cases" + Slot (SLOT, 144x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Team collaboration" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px; width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Explore" + Slot (SLOT, 168x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "FigJam" + Text Link List (INSTANCE, 311x236) [component: Density=Tight] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Tight + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 311x26) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 4px 0px; width: 100% + Text Strong (INSTANCE, 83x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 83x22) + style: font-family: "Inter"; font-weight: 700; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Resources" + Slot (SLOT, 123x202) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/diff-base.png new file mode 100644 index 00000000..2141d843 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/figma-base.png new file mode 100644 index 00000000..0b3eb428 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/images/image-2@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/images/image-2@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/images/image-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/images/image-3@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/images/image-3@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/images/image-3@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/images/image-4@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/images/image-4@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/images/image-4@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/images/image-5@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/images/image-5@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/images/image-5@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/images/image-6@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/images/image-6@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/images/image-6@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/images/image@2x.png new file mode 100644 index 00000000..05f582d7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/images/mapping.json new file mode 100644 index 00000000..e91507fe --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/images/mapping.json @@ -0,0 +1,8 @@ +{ + "I562:10413;348:13551;638:13763": "image@2x.png", + "I562:10413;348:13552;638:13763": "image-2@2x.png", + "I562:10413;348:13553;638:13763": "image-3@2x.png", + "I562:10413;348:13554;638:13763": "image-4@2x.png", + "I562:10413;348:13555;638:13763": "image-5@2x.png", + "I562:10413;348:13556;638:13763": "image-6@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/output.html b/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/output.html new file mode 100644 index 00000000..3ce8b066 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/output.html @@ -0,0 +1,467 @@ + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+ +
+
+
+
+ + + +
+
+
+
Search
+
+ + + +
+
+
+
+
+
+
+ + + +
+
New
+
+
+
Price ascending
+
+
+
Price descending
+
+
+
Rating
+
+
+
+
+ + +
+
+
+ +
+
+
+
Text
+
+
+
$0
+
+
+
+ +
+
+ +
+
+
+
Text
+
+
+
$0
+
+
+
+ +
+
+ +
+
+
+
Text
+
+
+
$0
+
+
+
+ +
+
+ +
+
+
+
Text
+
+
+
$0
+
+
+
+ +
+
+ +
+
+
+
Text
+
+
+
$0
+
+
+
+ +
+
+ +
+
+
+
Text
+
+
+
$0
+
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+ +
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/response.txt new file mode 100644 index 00000000..5b354679 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/response.txt @@ -0,0 +1,470 @@ +```html +// filename: index.html + + + + + + Platform Mobile + + + + +
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+ + +
+
+ +
+
+
+
+ + + +
+
+
+
Search
+
+ + + +
+
+
+
+
+
+
+ + + +
+
New
+
+
+
Price ascending
+
+
+
Price descending
+
+
+
Rating
+
+
+
+
+ + +
+
+
+ +
+
+
+
Text
+
+
+
$0
+
+
+
+ +
+
+ +
+
+
+
Text
+
+
+
$0
+
+
+
+ +
+
+ +
+
+
+
Text
+
+
+
$0
+
+
+
+ +
+
+ +
+
+
+
Text
+
+
+
$0
+
+
+
+ +
+
+ +
+
+
+
Text
+
+
+
$0
+
+
+
+ +
+
+ +
+
+
+
Text
+
+
+
$0
+
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+ +
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/result.json b/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/result.json new file mode 100644 index 00000000..b1ab6ab9 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/mobile-shop/variable-references/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "mobile-shop", + "type": "variable-references", + "runIndex": 0, + "similarity": 98, + "inputTokens": 17558, + "outputTokens": 13027, + "totalTokens": 30585, + "htmlBytes": 36255, + "htmlLines": 467, + "cssClassCount": 14, + "cssVariableCount": 12, + "timestamp": "2026-03-28T11:42:01.616Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/summary.json b/data/ablation/phase1/72ffc72c9103/summary.json index 5d8b8c15..7219455c 100644 --- a/data/ablation/phase1/72ffc72c9103/summary.json +++ b/data/ablation/phase1/72ffc72c9103/summary.json @@ -3,440 +3,818 @@ "model": "sonnet", "runsPerCondition": 1, "fixtures": [ - "desktop-product-detail", - "desktop-landing-page", - "desktop-ai-chat" + "mobile-product-detail", + "mobile-landing-page", + "mobile-shop", + "mobile-pricing", + "desktop-pricing", + "desktop-shop" ], "results": [ { - "fixture": "desktop-product-detail", + "fixture": "mobile-product-detail", "type": "baseline", "runIndex": 0, "similarity": 98, - "inputTokens": 27891, - "outputTokens": 18731, - "totalTokens": 46622, - "htmlBytes": 52425, - "htmlLines": 697, - "cssClassCount": 24, - "cssVariableCount": 16, - "timestamp": "2026-03-28T08:36:29.145Z", + "inputTokens": 26027, + "outputTokens": 19069, + "totalTokens": 45096, + "htmlBytes": 52940, + "htmlLines": 642, + "cssClassCount": 17, + "cssVariableCount": 14, + "timestamp": "2026-03-28T10:49:51.135Z", "configVersion": "72ffc72c9103" }, { - "fixture": "desktop-product-detail", + "fixture": "mobile-product-detail", "type": "layout-direction-spacing", "runIndex": 0, "similarity": 89, - "inputTokens": 22931, - "outputTokens": 14988, - "totalTokens": 37919, - "htmlBytes": 38389, - "htmlLines": 422, - "cssClassCount": 21, - "cssVariableCount": 16, - "timestamp": "2026-03-28T09:29:40.879Z", + "inputTokens": 21585, + "outputTokens": 14815, + "totalTokens": 36400, + "htmlBytes": 37059, + "htmlLines": 396, + "cssClassCount": 14, + "cssVariableCount": 14, + "timestamp": "2026-03-28T11:07:52.765Z", "configVersion": "72ffc72c9103" }, { - "fixture": "desktop-product-detail", + "fixture": "mobile-product-detail", "type": "component-references", "runIndex": 0, - "similarity": 99, - "inputTokens": 25249, - "outputTokens": 20438, - "totalTokens": 45687, - "htmlBytes": 56185, - "htmlLines": 569, - "cssClassCount": 11, - "cssVariableCount": 16, - "timestamp": "2026-03-28T09:33:14.453Z", + "similarity": 81, + "inputTokens": 23801, + "outputTokens": 18321, + "totalTokens": 42122, + "htmlBytes": 50920, + "htmlLines": 527, + "cssClassCount": 8, + "cssVariableCount": 14, + "timestamp": "2026-03-28T11:11:04.032Z", "configVersion": "72ffc72c9103" }, { - "fixture": "desktop-product-detail", + "fixture": "mobile-product-detail", "type": "node-names-hierarchy", "runIndex": 0, - "similarity": 98, - "inputTokens": 28144, - "outputTokens": 20168, - "totalTokens": 48312, - "htmlBytes": 56197, - "htmlLines": 748, - "cssClassCount": 31, - "cssVariableCount": 29, - "timestamp": "2026-03-28T09:36:49.240Z", + "similarity": 96, + "inputTokens": 26266, + "outputTokens": 19141, + "totalTokens": 45407, + "htmlBytes": 52214, + "htmlLines": 491, + "cssClassCount": 23, + "cssVariableCount": 14, + "timestamp": "2026-03-28T11:14:29.604Z", "configVersion": "72ffc72c9103" }, { - "fixture": "desktop-product-detail", + "fixture": "mobile-product-detail", "type": "variable-references", "runIndex": 0, - "similarity": 98, - "inputTokens": 25437, - "outputTokens": 20460, - "totalTokens": 45897, - "htmlBytes": 56669, - "htmlLines": 723, - "cssClassCount": 27, - "cssVariableCount": 16, - "timestamp": "2026-03-28T09:40:24.579Z", + "similarity": 97, + "inputTokens": 24006, + "outputTokens": 19202, + "totalTokens": 43208, + "htmlBytes": 53019, + "htmlLines": 602, + "cssClassCount": 15, + "cssVariableCount": 7, + "timestamp": "2026-03-28T11:17:51.828Z", "configVersion": "72ffc72c9103" }, { - "fixture": "desktop-product-detail", + "fixture": "mobile-product-detail", "type": "style-references", "runIndex": 0, - "similarity": 98, - "inputTokens": 27316, - "outputTokens": 19956, - "totalTokens": 47272, - "htmlBytes": 55022, - "htmlLines": 690, - "cssClassCount": 22, - "cssVariableCount": 16, - "timestamp": "2026-03-28T09:43:53.163Z", + "similarity": 79, + "inputTokens": 25575, + "outputTokens": 18611, + "totalTokens": 44186, + "htmlBytes": 50817, + "htmlLines": 571, + "cssClassCount": 11, + "cssVariableCount": 14, + "timestamp": "2026-03-28T11:21:05.831Z", "configVersion": "72ffc72c9103" }, { - "fixture": "desktop-landing-page", + "fixture": "mobile-landing-page", "type": "baseline", "runIndex": 0, - "similarity": 99, - "inputTokens": 22076, - "outputTokens": 14403, - "totalTokens": 36479, - "htmlBytes": 38420, - "htmlLines": 454, - "cssClassCount": 18, + "similarity": 97, + "inputTokens": 20184, + "outputTokens": 13956, + "totalTokens": 34140, + "htmlBytes": 38067, + "htmlLines": 605, + "cssClassCount": 31, "cssVariableCount": 14, - "timestamp": "2026-03-28T08:39:01.879Z", + "timestamp": "2026-03-28T10:52:18.237Z", "configVersion": "72ffc72c9103" }, { - "fixture": "desktop-landing-page", + "fixture": "mobile-landing-page", "type": "layout-direction-spacing", "runIndex": 0, - "similarity": 93, - "inputTokens": 18130, - "outputTokens": 12828, - "totalTokens": 30958, - "htmlBytes": 32759, - "htmlLines": 455, - "cssClassCount": 20, - "cssVariableCount": 14, - "timestamp": "2026-03-28T09:46:14.669Z", + "similarity": 92, + "inputTokens": 16761, + "outputTokens": 10905, + "totalTokens": 27666, + "htmlBytes": 27546, + "htmlLines": 412, + "cssClassCount": 18, + "cssVariableCount": 13, + "timestamp": "2026-03-28T11:23:08.715Z", "configVersion": "72ffc72c9103" }, { - "fixture": "desktop-landing-page", + "fixture": "mobile-landing-page", "type": "component-references", "runIndex": 0, - "similarity": 99, - "inputTokens": 19549, - "outputTokens": 15997, - "totalTokens": 35546, - "htmlBytes": 43376, - "htmlLines": 405, + "similarity": 97, + "inputTokens": 18084, + "outputTokens": 12752, + "totalTokens": 30836, + "htmlBytes": 32613, + "htmlLines": 319, "cssClassCount": 9, - "cssVariableCount": 22, - "timestamp": "2026-03-28T09:49:03.549Z", + "cssVariableCount": 14, + "timestamp": "2026-03-28T11:25:25.234Z", "configVersion": "72ffc72c9103" }, { - "fixture": "desktop-landing-page", + "fixture": "mobile-landing-page", "type": "node-names-hierarchy", "runIndex": 0, - "similarity": 98, - "inputTokens": 22055, - "outputTokens": 14606, - "totalTokens": 36661, - "htmlBytes": 39215, - "htmlLines": 434, - "cssClassCount": 16, + "similarity": 97, + "inputTokens": 20149, + "outputTokens": 14214, + "totalTokens": 34363, + "htmlBytes": 38502, + "htmlLines": 501, + "cssClassCount": 20, "cssVariableCount": 14, - "timestamp": "2026-03-28T09:51:36.255Z", + "timestamp": "2026-03-28T11:27:55.699Z", "configVersion": "72ffc72c9103" }, { - "fixture": "desktop-landing-page", + "fixture": "mobile-landing-page", "type": "variable-references", "runIndex": 0, - "similarity": 98, - "inputTokens": 20132, - "outputTokens": 15206, - "totalTokens": 35338, - "htmlBytes": 40458, - "htmlLines": 478, - "cssClassCount": 20, + "similarity": 97, + "inputTokens": 18659, + "outputTokens": 13996, + "totalTokens": 32655, + "htmlBytes": 37807, + "htmlLines": 519, + "cssClassCount": 23, "cssVariableCount": 14, - "timestamp": "2026-03-28T09:54:17.306Z", + "timestamp": "2026-03-28T11:30:22.870Z", "configVersion": "72ffc72c9103" }, { - "fixture": "desktop-landing-page", + "fixture": "mobile-landing-page", "type": "style-references", "runIndex": 0, - "similarity": 99, - "inputTokens": 21594, - "outputTokens": 15201, - "totalTokens": 36795, - "htmlBytes": 39677, - "htmlLines": 403, + "similarity": 97, + "inputTokens": 19825, + "outputTokens": 15595, + "totalTokens": 35420, + "htmlBytes": 41006, + "htmlLines": 451, "cssClassCount": 11, "cssVariableCount": 14, - "timestamp": "2026-03-28T09:56:53.839Z", + "timestamp": "2026-03-28T11:33:02.653Z", "configVersion": "72ffc72c9103" }, { - "fixture": "desktop-ai-chat", + "fixture": "mobile-shop", "type": "baseline", "runIndex": 0, - "similarity": 91, - "inputTokens": 23305, - "outputTokens": 16445, - "totalTokens": 39750, - "htmlBytes": 43346, - "htmlLines": 616, - "cssClassCount": 23, - "cssVariableCount": 21, - "timestamp": "2026-03-28T08:29:54.552Z", + "similarity": 82, + "inputTokens": 19294, + "outputTokens": 11671, + "totalTokens": 30965, + "htmlBytes": 31688, + "htmlLines": 329, + "cssClassCount": 14, + "cssVariableCount": 12, + "timestamp": "2026-03-28T10:54:27.097Z", "configVersion": "72ffc72c9103" }, { - "fixture": "desktop-ai-chat", + "fixture": "mobile-shop", "type": "layout-direction-spacing", "runIndex": 0, - "similarity": 96, - "inputTokens": 19371, - "outputTokens": 13950, - "totalTokens": 33321, - "htmlBytes": 34183, - "htmlLines": 393, + "similarity": 87, + "inputTokens": 15541, + "outputTokens": 10780, + "totalTokens": 26321, + "htmlBytes": 26342, + "htmlLines": 344, "cssClassCount": 14, + "cssVariableCount": 12, + "timestamp": "2026-03-28T11:35:06.820Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "mobile-shop", + "type": "component-references", + "runIndex": 0, + "similarity": 98, + "inputTokens": 17545, + "outputTokens": 12165, + "totalTokens": 29710, + "htmlBytes": 32344, + "htmlLines": 297, + "cssClassCount": 5, "cssVariableCount": 17, - "timestamp": "2026-03-28T09:59:44.838Z", + "timestamp": "2026-03-28T11:37:20.693Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "mobile-shop", + "type": "node-names-hierarchy", + "runIndex": 0, + "similarity": 98, + "inputTokens": 19434, + "outputTokens": 12699, + "totalTokens": 32133, + "htmlBytes": 35292, + "htmlLines": 438, + "cssClassCount": 14, + "cssVariableCount": 12, + "timestamp": "2026-03-28T11:39:38.505Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "mobile-shop", + "type": "variable-references", + "runIndex": 0, + "similarity": 98, + "inputTokens": 17558, + "outputTokens": 13027, + "totalTokens": 30585, + "htmlBytes": 36255, + "htmlLines": 467, + "cssClassCount": 14, + "cssVariableCount": 12, + "timestamp": "2026-03-28T11:42:01.616Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "mobile-shop", + "type": "style-references", + "runIndex": 0, + "similarity": 98, + "inputTokens": 18937, + "outputTokens": 14259, + "totalTokens": 33196, + "htmlBytes": 38882, + "htmlLines": 443, + "cssClassCount": 11, + "cssVariableCount": 12, + "timestamp": "2026-03-28T11:44:30.760Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "mobile-pricing", + "type": "baseline", + "runIndex": 0, + "similarity": 98, + "inputTokens": 23853, + "outputTokens": 16979, + "totalTokens": 40832, + "htmlBytes": 48837, + "htmlLines": 666, + "cssClassCount": 30, + "cssVariableCount": 13, + "timestamp": "2026-03-28T10:57:19.384Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "mobile-pricing", + "type": "layout-direction-spacing", + "runIndex": 0, + "similarity": 90, + "inputTokens": 19110, + "outputTokens": 12167, + "totalTokens": 31277, + "htmlBytes": 32699, + "htmlLines": 592, + "cssClassCount": 39, + "cssVariableCount": 13, + "timestamp": "2026-03-28T11:46:44.836Z", "configVersion": "72ffc72c9103" }, { - "fixture": "desktop-ai-chat", + "fixture": "mobile-pricing", "type": "component-references", "runIndex": 0, - "similarity": 97, - "inputTokens": 21544, - "outputTokens": 16839, - "totalTokens": 38383, - "htmlBytes": 43841, - "htmlLines": 389, - "cssClassCount": 8, - "cssVariableCount": 16, - "timestamp": "2026-03-28T10:02:56.322Z", + "similarity": 98, + "inputTokens": 21224, + "outputTokens": 17243, + "totalTokens": 38467, + "htmlBytes": 49500, + "htmlLines": 458, + "cssClassCount": 9, + "cssVariableCount": 13, + "timestamp": "2026-03-28T11:49:41.599Z", "configVersion": "72ffc72c9103" }, { - "fixture": "desktop-ai-chat", + "fixture": "mobile-pricing", "type": "node-names-hierarchy", "runIndex": 0, "similarity": 97, - "inputTokens": 23052, - "outputTokens": 17346, - "totalTokens": 40398, - "htmlBytes": 45309, - "htmlLines": 457, - "cssClassCount": 8, - "cssVariableCount": 15, - "timestamp": "2026-03-28T10:06:13.301Z", + "inputTokens": 23995, + "outputTokens": 15956, + "totalTokens": 39951, + "htmlBytes": 46432, + "htmlLines": 631, + "cssClassCount": 24, + "cssVariableCount": 13, + "timestamp": "2026-03-28T11:52:25.329Z", "configVersion": "72ffc72c9103" }, { - "fixture": "desktop-ai-chat", + "fixture": "mobile-pricing", "type": "variable-references", "runIndex": 0, - "similarity": 96, - "inputTokens": 21407, - "outputTokens": 17137, - "totalTokens": 38544, - "htmlBytes": 44512, - "htmlLines": 557, - "cssClassCount": 19, - "cssVariableCount": 16, - "timestamp": "2026-03-28T10:09:30.267Z", + "similarity": 89, + "inputTokens": 21674, + "outputTokens": 14496, + "totalTokens": 36170, + "htmlBytes": 39606, + "htmlLines": 371, + "cssClassCount": 28, + "cssVariableCount": 13, + "timestamp": "2026-03-28T11:54:58.008Z", "configVersion": "72ffc72c9103" }, { - "fixture": "desktop-ai-chat", + "fixture": "mobile-pricing", "type": "style-references", "runIndex": 0, + "similarity": 97, + "inputTokens": 23350, + "outputTokens": 16250, + "totalTokens": 39600, + "htmlBytes": 44619, + "htmlLines": 548, + "cssClassCount": 23, + "cssVariableCount": 13, + "timestamp": "2026-03-28T11:57:43.044Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "desktop-pricing", + "type": "baseline", + "runIndex": 0, + "similarity": 88, + "inputTokens": 25468, + "outputTokens": 16731, + "totalTokens": 42199, + "htmlBytes": 47644, + "htmlLines": 596, + "cssClassCount": 23, + "cssVariableCount": 13, + "timestamp": "2026-03-28T11:00:14.686Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "desktop-pricing", + "type": "layout-direction-spacing", + "runIndex": 0, + "similarity": 84, + "inputTokens": 20328, + "outputTokens": 11265, + "totalTokens": 31593, + "htmlBytes": 29179, + "htmlLines": 435, + "cssClassCount": 22, + "cssVariableCount": 13, + "timestamp": "2026-03-28T11:59:50.267Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "desktop-pricing", + "type": "component-references", + "runIndex": 0, + "similarity": 89, + "inputTokens": 22422, + "outputTokens": 18463, + "totalTokens": 40885, + "htmlBytes": 52247, + "htmlLines": 473, + "cssClassCount": 9, + "cssVariableCount": 13, + "timestamp": "2026-03-28T12:02:58.480Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "desktop-pricing", + "type": "node-names-hierarchy", + "runIndex": 0, "similarity": 96, - "inputTokens": 22863, - "outputTokens": 18547, - "totalTokens": 41410, - "htmlBytes": 47914, - "htmlLines": 580, + "inputTokens": 25618, + "outputTokens": 17444, + "totalTokens": 43062, + "htmlBytes": 50849, + "htmlLines": 625, "cssClassCount": 18, - "cssVariableCount": 16, - "timestamp": "2026-03-28T10:12:56.511Z", + "cssVariableCount": 13, + "timestamp": "2026-03-28T12:05:59.162Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "desktop-pricing", + "type": "variable-references", + "runIndex": 0, + "similarity": 88, + "inputTokens": 22868, + "outputTokens": 16675, + "totalTokens": 39543, + "htmlBytes": 47402, + "htmlLines": 598, + "cssClassCount": 23, + "cssVariableCount": 13, + "timestamp": "2026-03-28T12:08:53.855Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "desktop-pricing", + "type": "style-references", + "runIndex": 0, + "similarity": 88, + "inputTokens": 24842, + "outputTokens": 18802, + "totalTokens": 43644, + "htmlBytes": 52902, + "htmlLines": 548, + "cssClassCount": 17, + "cssVariableCount": 13, + "timestamp": "2026-03-28T12:12:04.122Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "desktop-shop", + "type": "baseline", + "runIndex": 0, + "similarity": 99, + "inputTokens": 29200, + "outputTokens": 19624, + "totalTokens": 48824, + "htmlBytes": 58531, + "htmlLines": 697, + "cssClassCount": 19, + "cssVariableCount": 14, + "timestamp": "2026-03-28T11:03:34.313Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "desktop-shop", + "type": "layout-direction-spacing", + "runIndex": 0, + "similarity": 75, + "inputTokens": 23159, + "outputTokens": 13611, + "totalTokens": 36770, + "htmlBytes": 36629, + "htmlLines": 426, + "cssClassCount": 19, + "cssVariableCount": 15, + "timestamp": "2026-03-28T12:14:34.330Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "desktop-shop", + "type": "component-references", + "runIndex": 0, + "similarity": 99, + "inputTokens": 26241, + "outputTokens": 21467, + "totalTokens": 47708, + "htmlBytes": 63444, + "htmlLines": 581, + "cssClassCount": 6, + "cssVariableCount": 23, + "timestamp": "2026-03-28T12:18:07.575Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "desktop-shop", + "type": "node-names-hierarchy", + "runIndex": 0, + "similarity": 84, + "inputTokens": 29475, + "outputTokens": 18868, + "totalTokens": 48343, + "htmlBytes": 56699, + "htmlLines": 701, + "cssClassCount": 15, + "cssVariableCount": 15, + "timestamp": "2026-03-28T12:21:20.676Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "desktop-shop", + "type": "variable-references", + "runIndex": 0, + "similarity": 84, + "inputTokens": 26120, + "outputTokens": 17115, + "totalTokens": 43235, + "htmlBytes": 48941, + "htmlLines": 614, + "cssClassCount": 19, + "cssVariableCount": 13, + "timestamp": "2026-03-28T12:24:21.039Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "desktop-shop", + "type": "style-references", + "runIndex": 0, + "similarity": 82, + "inputTokens": 28522, + "outputTokens": 19256, + "totalTokens": 47778, + "htmlBytes": 55907, + "htmlLines": 646, + "cssClassCount": 15, + "cssVariableCount": 22, + "timestamp": "2026-03-28T12:27:35.849Z", "configVersion": "72ffc72c9103" } ], "rankings": [ { "type": "layout-direction-spacing", - "avgDeltaV": 3.3333333333333335, - "avgDeltaOutputTokens": -2604.3333333333335, - "avgDeltaHtmlBytes": -9620, - "avgDeltaCssClasses": -3.3333333333333335, - "avgDeltaCssVariables": -1.3333333333333333, - "fixtureCount": 3, + "avgDeltaV": 7.5, + "avgDeltaOutputTokens": -4081.1666666666665, + "avgDeltaHtmlBytes": -14708.833333333334, + "avgDeltaCssClasses": -1.3333333333333333, + "avgDeltaCssVariables": 0, + "fixtureCount": 6, "perFixture": { - "desktop-product-detail": { + "mobile-product-detail": { "deltaV": 9, - "deltaOutputTokens": -3743, - "deltaHtmlBytes": -14036, + "deltaOutputTokens": -4254, + "deltaHtmlBytes": -15881, "deltaCssClasses": -3, "deltaCssVariables": 0 }, - "desktop-landing-page": { - "deltaV": 6, - "deltaOutputTokens": -1575, - "deltaHtmlBytes": -5661, - "deltaCssClasses": 2, - "deltaCssVariables": 0 + "mobile-landing-page": { + "deltaV": 5, + "deltaOutputTokens": -3051, + "deltaHtmlBytes": -10521, + "deltaCssClasses": -13, + "deltaCssVariables": -1 }, - "desktop-ai-chat": { + "mobile-shop": { "deltaV": -5, - "deltaOutputTokens": -2495, - "deltaHtmlBytes": -9163, - "deltaCssClasses": -9, - "deltaCssVariables": -4 + "deltaOutputTokens": -891, + "deltaHtmlBytes": -5346, + "deltaCssClasses": 0, + "deltaCssVariables": 0 + }, + "mobile-pricing": { + "deltaV": 8, + "deltaOutputTokens": -4812, + "deltaHtmlBytes": -16138, + "deltaCssClasses": 9, + "deltaCssVariables": 0 + }, + "desktop-pricing": { + "deltaV": 4, + "deltaOutputTokens": -5466, + "deltaHtmlBytes": -18465, + "deltaCssClasses": -1, + "deltaCssVariables": 0 + }, + "desktop-shop": { + "deltaV": 24, + "deltaOutputTokens": -6013, + "deltaHtmlBytes": -21902, + "deltaCssClasses": 0, + "deltaCssVariables": 1 } } }, { - "type": "variable-references", - "avgDeltaV": -1.3333333333333333, - "avgDeltaOutputTokens": 1074.6666666666667, - "avgDeltaHtmlBytes": 2482.6666666666665, - "avgDeltaCssClasses": 0.3333333333333333, - "avgDeltaCssVariables": -1.6666666666666667, - "fixtureCount": 3, + "type": "style-references", + "avgDeltaV": 3.5, + "avgDeltaOutputTokens": 790.5, + "avgDeltaHtmlBytes": 1071, + "avgDeltaCssClasses": -7.666666666666667, + "avgDeltaCssVariables": 1.3333333333333333, + "fixtureCount": 6, "perFixture": { - "desktop-product-detail": { + "mobile-product-detail": { + "deltaV": 19, + "deltaOutputTokens": -458, + "deltaHtmlBytes": -2123, + "deltaCssClasses": -6, + "deltaCssVariables": 0 + }, + "mobile-landing-page": { "deltaV": 0, - "deltaOutputTokens": 1729, - "deltaHtmlBytes": 4244, - "deltaCssClasses": 3, + "deltaOutputTokens": 1639, + "deltaHtmlBytes": 2939, + "deltaCssClasses": -20, + "deltaCssVariables": 0 + }, + "mobile-shop": { + "deltaV": -16, + "deltaOutputTokens": 2588, + "deltaHtmlBytes": 7194, + "deltaCssClasses": -3, "deltaCssVariables": 0 }, - "desktop-landing-page": { + "mobile-pricing": { "deltaV": 1, - "deltaOutputTokens": 803, - "deltaHtmlBytes": 2038, - "deltaCssClasses": 2, + "deltaOutputTokens": -729, + "deltaHtmlBytes": -4218, + "deltaCssClasses": -7, "deltaCssVariables": 0 }, - "desktop-ai-chat": { - "deltaV": -5, - "deltaOutputTokens": 692, - "deltaHtmlBytes": 1166, + "desktop-pricing": { + "deltaV": 0, + "deltaOutputTokens": 2071, + "deltaHtmlBytes": 5258, + "deltaCssClasses": -6, + "deltaCssVariables": 0 + }, + "desktop-shop": { + "deltaV": 17, + "deltaOutputTokens": -368, + "deltaHtmlBytes": -2624, "deltaCssClasses": -4, - "deltaCssVariables": -5 + "deltaCssVariables": 8 } } }, { - "type": "style-references", - "avgDeltaV": -1.6666666666666667, - "avgDeltaOutputTokens": 1375, - "avgDeltaHtmlBytes": 2807.3333333333335, - "avgDeltaCssClasses": -4.666666666666667, - "avgDeltaCssVariables": -1.6666666666666667, - "fixtureCount": 3, + "type": "variable-references", + "avgDeltaV": 1.5, + "avgDeltaOutputTokens": -586.5, + "avgDeltaHtmlBytes": -2446.1666666666665, + "avgDeltaCssClasses": -2, + "avgDeltaCssVariables": -1.3333333333333333, + "fixtureCount": 6, "perFixture": { - "desktop-product-detail": { + "mobile-product-detail": { + "deltaV": 1, + "deltaOutputTokens": 133, + "deltaHtmlBytes": 79, + "deltaCssClasses": -2, + "deltaCssVariables": -7 + }, + "mobile-landing-page": { "deltaV": 0, - "deltaOutputTokens": 1225, - "deltaHtmlBytes": 2597, + "deltaOutputTokens": 40, + "deltaHtmlBytes": -260, + "deltaCssClasses": -8, + "deltaCssVariables": 0 + }, + "mobile-shop": { + "deltaV": -16, + "deltaOutputTokens": 1356, + "deltaHtmlBytes": 4567, + "deltaCssClasses": 0, + "deltaCssVariables": 0 + }, + "mobile-pricing": { + "deltaV": 9, + "deltaOutputTokens": -2483, + "deltaHtmlBytes": -9231, "deltaCssClasses": -2, "deltaCssVariables": 0 }, - "desktop-landing-page": { + "desktop-pricing": { "deltaV": 0, - "deltaOutputTokens": 798, - "deltaHtmlBytes": 1257, - "deltaCssClasses": -7, + "deltaOutputTokens": -56, + "deltaHtmlBytes": -242, + "deltaCssClasses": 0, "deltaCssVariables": 0 }, - "desktop-ai-chat": { - "deltaV": -5, - "deltaOutputTokens": 2102, - "deltaHtmlBytes": 4568, - "deltaCssClasses": -5, - "deltaCssVariables": -5 + "desktop-shop": { + "deltaV": 15, + "deltaOutputTokens": -2509, + "deltaHtmlBytes": -9590, + "deltaCssClasses": 0, + "deltaCssVariables": -1 } } }, { - "type": "node-names-hierarchy", - "avgDeltaV": -1.6666666666666667, - "avgDeltaOutputTokens": 847, - "avgDeltaHtmlBytes": 2176.6666666666665, - "avgDeltaCssClasses": -3.3333333333333335, + "type": "component-references", + "avgDeltaV": 0, + "avgDeltaOutputTokens": 396.8333333333333, + "avgDeltaHtmlBytes": 560.1666666666666, + "avgDeltaCssClasses": -14.666666666666666, "avgDeltaCssVariables": 2.3333333333333335, - "fixtureCount": 3, + "fixtureCount": 6, "perFixture": { - "desktop-product-detail": { + "mobile-product-detail": { + "deltaV": 17, + "deltaOutputTokens": -748, + "deltaHtmlBytes": -2020, + "deltaCssClasses": -9, + "deltaCssVariables": 0 + }, + "mobile-landing-page": { "deltaV": 0, - "deltaOutputTokens": 1437, - "deltaHtmlBytes": 3772, - "deltaCssClasses": 7, - "deltaCssVariables": 13 + "deltaOutputTokens": -1204, + "deltaHtmlBytes": -5454, + "deltaCssClasses": -22, + "deltaCssVariables": 0 }, - "desktop-landing-page": { - "deltaV": 1, - "deltaOutputTokens": 203, - "deltaHtmlBytes": 795, - "deltaCssClasses": -2, + "mobile-shop": { + "deltaV": -16, + "deltaOutputTokens": 494, + "deltaHtmlBytes": 656, + "deltaCssClasses": -9, + "deltaCssVariables": 5 + }, + "mobile-pricing": { + "deltaV": 0, + "deltaOutputTokens": 264, + "deltaHtmlBytes": 663, + "deltaCssClasses": -21, "deltaCssVariables": 0 }, - "desktop-ai-chat": { - "deltaV": -6, - "deltaOutputTokens": 901, - "deltaHtmlBytes": 1963, - "deltaCssClasses": -15, - "deltaCssVariables": -6 + "desktop-pricing": { + "deltaV": -1, + "deltaOutputTokens": 1732, + "deltaHtmlBytes": 4603, + "deltaCssClasses": -14, + "deltaCssVariables": 0 + }, + "desktop-shop": { + "deltaV": 0, + "deltaOutputTokens": 1843, + "deltaHtmlBytes": 4913, + "deltaCssClasses": -13, + "deltaCssVariables": 9 } } }, { - "type": "component-references", - "avgDeltaV": -2.3333333333333335, - "avgDeltaOutputTokens": 1231.6666666666667, - "avgDeltaHtmlBytes": 3070.3333333333335, - "avgDeltaCssClasses": -12.333333333333334, - "avgDeltaCssVariables": 1, - "fixtureCount": 3, + "type": "node-names-hierarchy", + "avgDeltaV": -1, + "avgDeltaOutputTokens": 48.666666666666664, + "avgDeltaHtmlBytes": 380.1666666666667, + "avgDeltaCssClasses": -3.3333333333333335, + "avgDeltaCssVariables": 0.16666666666666666, + "fixtureCount": 6, "perFixture": { - "desktop-product-detail": { - "deltaV": -1, - "deltaOutputTokens": 1707, - "deltaHtmlBytes": 3760, - "deltaCssClasses": -13, + "mobile-product-detail": { + "deltaV": 2, + "deltaOutputTokens": 72, + "deltaHtmlBytes": -726, + "deltaCssClasses": 6, "deltaCssVariables": 0 }, - "desktop-landing-page": { + "mobile-landing-page": { "deltaV": 0, - "deltaOutputTokens": 1594, - "deltaHtmlBytes": 4956, - "deltaCssClasses": -9, - "deltaCssVariables": 8 + "deltaOutputTokens": 258, + "deltaHtmlBytes": 435, + "deltaCssClasses": -11, + "deltaCssVariables": 0 + }, + "mobile-shop": { + "deltaV": -16, + "deltaOutputTokens": 1028, + "deltaHtmlBytes": 3604, + "deltaCssClasses": 0, + "deltaCssVariables": 0 }, - "desktop-ai-chat": { - "deltaV": -6, - "deltaOutputTokens": 394, - "deltaHtmlBytes": 495, - "deltaCssClasses": -15, - "deltaCssVariables": -5 + "mobile-pricing": { + "deltaV": 1, + "deltaOutputTokens": -1023, + "deltaHtmlBytes": -2405, + "deltaCssClasses": -6, + "deltaCssVariables": 0 + }, + "desktop-pricing": { + "deltaV": -8, + "deltaOutputTokens": 713, + "deltaHtmlBytes": 3205, + "deltaCssClasses": -5, + "deltaCssVariables": 0 + }, + "desktop-shop": { + "deltaV": 15, + "deltaOutputTokens": -756, + "deltaHtmlBytes": -1832, + "deltaCssClasses": -4, + "deltaCssVariables": 1 } } } diff --git a/src/agents/ablation/run-condition.ts b/src/agents/ablation/run-condition.ts index 062cf6dc..220585ac 100644 --- a/src/agents/ablation/run-condition.ts +++ b/src/agents/ablation/run-condition.ts @@ -9,7 +9,7 @@ * ANTHROPIC_API_KEY=sk-... npx tsx src/agents/ablation/run-condition.ts --type hover-interaction */ -import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs"; +import { existsSync, mkdirSync, readFileSync, writeFileSync, readdirSync } from "node:fs"; import { resolve, join } from "node:path"; import Anthropic from "@anthropic-ai/sdk"; @@ -59,10 +59,24 @@ async function runSizeConstraints(fixture: string, client: Anthropic, prompt: st copyFixtureImages(fixture, runDir); - // Baseline: full info → implement → remove root width → render at expanded - console.log(` [baseline] API call...`); - const baseResponse = await callApi(client, prompt, baselineTree); - const baseHtml = processHtml(getResponseText(baseResponse)).html; + // Baseline: reuse HTML from phase1 cache (no API call) + const phase1Dir = resolve("data/ablation/phase1"); + let baseHtml: string | null = null; + if (existsSync(phase1Dir)) { + const versions = readdirSync(phase1Dir).filter((d) => + existsSync(join(phase1Dir, d, fixture, "baseline", "run-0", "output.html")) + ); + if (versions.length > 0) { + const latest = versions.sort().reverse()[0]!; + baseHtml = readFileSync(join(phase1Dir, latest, fixture, "baseline", "run-0", "output.html"), "utf-8"); + console.log(` [baseline] Reusing from phase1 cache (${latest})`); + } + } + if (!baseHtml) { + console.log(` [baseline] No cache — calling API...`); + const baseResponse = await callApi(client, prompt, baselineTree); + baseHtml = processHtml(getResponseText(baseResponse)).html; + } const baseExpanded = removeRootFixedWidth(baseHtml); writeFileSync(join(runDir, "output-baseline.html"), baseHtml); writeFileSync(join(runDir, "output-baseline-expanded.html"), baseExpanded); @@ -87,7 +101,6 @@ async function runSizeConstraints(fixture: string, client: Anthropic, prompt: st baselineSimilarity: baseResult.similarity, strippedSimilarity: stripResult.similarity, deltaV, - baselineTokens: { input: baseResponse.usage.input_tokens, output: baseResponse.usage.output_tokens }, strippedTokens: { input: stripResponse.usage.input_tokens, output: stripResponse.usage.output_tokens }, timestamp: new Date().toISOString(), }; diff --git a/src/agents/ablation/run-responsive.ts b/src/agents/ablation/run-responsive.ts new file mode 100644 index 00000000..014f3868 --- /dev/null +++ b/src/agents/ablation/run-responsive.ts @@ -0,0 +1,118 @@ +/** + * Responsive comparison: reuse existing HTML from strip experiments. + * No API calls — only local rendering at expanded viewports. + * + * Takes baseline + size-constraints stripped HTML → removes root fixed width + * → renders at 1920px (desktop) or 768px (mobile) → compares vs expanded screenshot. + * + * Usage: + * npx tsx src/agents/ablation/run-responsive.ts + * ABLATION_FIXTURES=mobile-product-detail npx tsx src/agents/ablation/run-responsive.ts + */ + +import { existsSync, mkdirSync, readFileSync, writeFileSync, readdirSync } from "node:fs"; +import { resolve, join } from "node:path"; + +import { renderAndCompare, getFixtureScreenshotPath, copyFixtureImages, DEFAULT_FIXTURES } from "./helpers.js"; + +const PHASE1_DIR = resolve("data/ablation/phase1"); +const OUTPUT_DIR = resolve("data/ablation/conditions/size-constraints"); + +function removeRootFixedWidth(html: string): string { + return html + .replace(/width:\s*1200px/g, "width: 100%") + .replace(/width:\s*375px/g, "width: 100%") + .replace(/min-width:\s*1200px/g, "min-width: 0") + .replace(/min-width:\s*375px/g, "min-width: 0"); +} + +function findLatestHtml(fixture: string, type: string): string | null { + if (!existsSync(PHASE1_DIR)) return null; + const versions = readdirSync(PHASE1_DIR).filter((d) => { + const htmlPath = join(PHASE1_DIR, d, fixture, type, "run-0", "output.html"); + return existsSync(htmlPath); + }); + if (versions.length === 0) return null; + const latest = versions.sort().reverse()[0]!; + return join(PHASE1_DIR, latest, fixture, type, "run-0", "output.html"); +} + +async function main(): Promise { + const fixtures = process.env["ABLATION_FIXTURES"] + ? process.env["ABLATION_FIXTURES"].split(",").map((s) => s.trim()).filter(Boolean) + : DEFAULT_FIXTURES; + + console.log(`Responsive comparison (no API calls)\n`); + + for (const fixture of fixtures) { + const isMobile = fixture.startsWith("mobile-"); + const expandedWidth = isMobile ? 768 : 1920; + + console.log(`=== ${fixture} (→ ${expandedWidth}px) ===`); + + const expandedScreenshot = getFixtureScreenshotPath(fixture, expandedWidth); + if (!existsSync(expandedScreenshot)) { + console.log(` SKIP: screenshot-${expandedWidth}.png not found`); + continue; + } + + const runDir = resolve(OUTPUT_DIR, fixture); + mkdirSync(runDir, { recursive: true }); + copyFixtureImages(fixture, runDir); + + // Baseline HTML → expanded viewport + const baselineHtmlPath = findLatestHtml(fixture, "baseline"); + if (!baselineHtmlPath) { + console.log(` SKIP: no baseline HTML found`); + continue; + } + + const baselineHtml = readFileSync(baselineHtmlPath, "utf-8"); + const baselineExpanded = removeRootFixedWidth(baselineHtml); + writeFileSync(join(runDir, "output-baseline-expanded.html"), baselineExpanded); + + console.log(` [baseline] Rendering at ${expandedWidth}px...`); + const baseResult = await renderAndCompare( + join(runDir, "output-baseline-expanded.html"), + expandedScreenshot, runDir, `baseline-${expandedWidth}`, + ); + + // Size-constraints stripped HTML → expanded viewport + const strippedHtmlPath = findLatestHtml(fixture, "size-constraints"); + let stripResult: { similarity: number } | null = null; + + if (strippedHtmlPath) { + const strippedHtml = readFileSync(strippedHtmlPath, "utf-8"); + const strippedExpanded = removeRootFixedWidth(strippedHtml); + writeFileSync(join(runDir, "output-stripped-expanded.html"), strippedExpanded); + + console.log(` [stripped] Rendering at ${expandedWidth}px...`); + stripResult = await renderAndCompare( + join(runDir, "output-stripped-expanded.html"), + expandedScreenshot, runDir, `stripped-${expandedWidth}`, + ); + } else { + console.log(` SKIP: no size-constraints stripped HTML found`); + } + + const deltaV = stripResult ? baseResult.similarity - stripResult.similarity : null; + + const result = { + fixture, + expandedWidth, + baselineSimilarity: baseResult.similarity, + strippedSimilarity: stripResult?.similarity ?? null, + deltaV, + timestamp: new Date().toISOString(), + }; + + writeFileSync(join(runDir, "result.json"), JSON.stringify(result, null, 2)); + console.log(` ✓ baseline@${expandedWidth}=${baseResult.similarity.toFixed(1)}%${stripResult ? ` stripped@${expandedWidth}=${stripResult.similarity.toFixed(1)}% ΔV=${deltaV?.toFixed(1)}%` : ""}`); + console.log(""); + } +} + +main().catch((err) => { + console.error("Fatal:", err); + process.exit(1); +});