Examples

Complete documents, exactly as the skill teaches them. Each one parses, resolves and draws: the renderer’s tests open every file here, so an example that stops working fails vDesign’s tests. Open one in vDesign, or hand it to a model as a starting point.

version 4
kind design
title "Launch hero"
$gap = 24
$paper = #ffffff
$accent = #5b5bd6
$highlight = #ffd166
$display = 40
$body = 16

font display = Inter
  fallback "system-ui, -apple-system, Segoe UI, sans-serif"

frame page w=1280 h=720 background=paper
  rect hero.bg x=$gap y=$gap w=(100% - $gap * 2) h=320 fill=accent radius=20
  rect logo x=(@hero.bg.left + 40) y=(@hero.bg.top + 40) w=72 h=72 fill=paper radius=16
  text hero.title x=(@logo.right + $gap) y=@logo.top w=680 h=96 font=display size=$display weight=700 fill=paper
    "An open document substrate for the "
    "agent era" fill=highlight
  text hero.sub x=@hero.title.left y=(@hero.title.bottom + 12) w=560 h=20 font=display size=$body fill=paper opacity=0.8
    "The document is the artifact, not the code that made it."
  rect cta x=@hero.title.left y=(@hero.sub.bottom + $gap) w=180 h=48 fill=paper radius=10
  text cta.label x=@cta.x y=@cta.y w=@cta.w h=@cta.h font=display size=$body weight=600 align=center valign=middle fill=accent
    "Read the spec"

version 4
kind design
title "Three feature cards"
$gap = 24
$paper = #ffffff
$muted = #eef2f7
$ink = #0f172a
$heading = 20
$body = 14

frame page w=1040 h=520 background=paper
  text section.title x=$gap y=$gap w=400 h=24 size=$heading weight=700 fill=ink
    "Three ways in"
  group cards
    rect card.1 x=$gap y=(@section.title.bottom + $gap) w=((100% - $gap * 4) / 3) h=220 fill=muted radius=12
    rect card.2 x=(@card.1.right + $gap) y=(prev.y) w=@card.1.w h=@card.1.h fill=muted radius=12
    rect card.3 x=(@card.2.right + $gap) y=(prev.y) w=@card.1.w h=@card.1.h fill=muted radius=12
  text card.1.label x=(@card.1.left + 16) y=(@card.1.top + 16) w=(@card.1.w - 32) h=17 size=$body weight=600 fill=ink
    "As a format"
  text card.2.label x=(@card.2.left + 16) y=(@card.1.label.top) w=(@card.1.label.w) h=17 size=$body weight=600 fill=ink
    "As an editor"
  text card.3.label x=(@card.3.left + 16) y=(@card.1.label.top) w=(@card.1.label.w) h=17 size=$body weight=600 fill=ink
    "As a protocol"

version 4
kind design
title "Title slide"
$ink = #101014
$paper = #fafafa
$accent = #d64545
$title = 56
$sub = 22

frame slide w=1600 h=900 background=ink
  text slide.title x=(parent.cx - self.w / 2) y=300 w=1100 h=68 size=$title weight=700 align=center fill=paper
    "The document is the artifact"
  rect rule x=(parent.cx - self.w / 2) y=(@slide.title.bottom + 40) w=120 h=4 fill=accent radius=2
  text slide.sub x=(parent.cx - self.w / 2) y=(@rule.bottom + 40) w=900 h=27 size=$sub align=center fill=paper opacity=0.7
    "vDesign — an open substrate for the agent era"

version 4
kind design
title "Launch plan"
$ink = #101014
$paper = #fafafa
$muted = #ececf1
$accent = #d64545
$gap = 64

frame intro x=0 y=0 w=1600 h=900 background=paper
  text intro.title x=$gap y=240 w=1100 h=116 size=96 weight=800 fill=ink
    "Launch plan"
  text intro.sub x=$gap y=(@intro.title.bottom + 24) w=900 h=39 size=32 fill=ink opacity=0.6
    "What ships, when, and what it costs"
  group intro.cta
    rect intro.cta.bg x=$gap y=620 w=280 h=72 fill=accent radius=36
    text intro.cta.label x=@intro.cta.bg.x y=@intro.cta.bg.y w=@intro.cta.bg.w h=@intro.cta.bg.h size=24 weight=700 align=center valign=middle fill=paper
      "See pricing"

frame plan x=1700 y=0 w=1600 h=900 background=paper
  text plan.title x=$gap y=$gap w=1000 h=58 size=48 weight=800 fill=ink
    "Three steps"
  rect plan.one x=$gap y=240 w=((100% - $gap * 4) / 3) h=480 fill=muted radius=24
  rect plan.two x=(@plan.one.right + $gap) y=(prev.y) w=@plan.one.w h=@plan.one.h fill=muted radius=24
  rect plan.three x=(@plan.two.right + $gap) y=(prev.y) w=@plan.one.w h=@plan.one.h fill=muted radius=24

frame pricing x=3400 y=0 w=1600 h=900 background=ink
  text pricing.title x=$gap y=$gap w=1000 h=58 size=48 weight=800 fill=paper
    "Pricing"
  text pricing.price x=$gap y=300 w=800 h=154 size=128 weight=800 fill=accent
    "$49 a month"
  text pricing.back x=$gap y=780 w=200 h=34 size=28 fill=paper
    "← Back"

motion intro enter=fade
  intro.title enter=rise
  intro.sub enter=fade delay=150 together
  intro.cta enter=pop go=#pricing

motion plan enter=push
  plan.title enter=fade
  plan.one enter=rise step
  plan.two enter=rise step
  plan.three enter=rise step

motion pricing enter=slide
  pricing.price enter=pop
  pricing.back go=back