PEN Design Format
Work with .pen design files efficiently.
Quick Reference
Root Structure
{
"version": "2.6",
"children": [...], // Design elements
"themes": {...}, // Theme definitions (e.g., Light/Dark)
"variables": {...} // Design tokens
}
Element Types
| Type |
Purpose |
Key Properties |
frame |
Container/layout |
layout, children, gap, padding, reusable |
text |
Typography |
content, fontFamily, fontSize, fontWeight |
rectangle |
Basic shape |
width, height, fill, cornerRadius |
path |
Vector graphics |
geometry (SVG path data) |
image |
Raster graphics |
url, mode |
ref |
Component instance |
ref (source ID), descendants (overrides) |
icon_font |
Icon |
iconFontName, iconFontFamily (e.g., "lucide") |
prompt |
AI generation |
model, content |
Token System
Tokens use $-- prefix:
- Colors:
$--primary, $--foreground, $--background, $--border
- Semantic:
$--color-success, $--color-warning, $--color-error
- Fonts:
$--font-primary, $--font-secondary
- Radii:
$--radius-none, $--radius-m, $--radius-pill
Layout
| Property |
Values |
layout |
"none" (absolute), "horizontal", "vertical" |
justifyContent |
start, center, end, space_between |
alignItems |
start, center, end, stretch |
Sizing
- Fixed:
360
- Flex:
"fill_container" or "fill_container(360)"
- Fit:
"fit_content" or "fit_content(717)"
Common Patterns
For detailed patterns and examples
See references/patterns.md
For complete JSON schema
See references/schema.json
Manipulation Guidelines
- Generate unique IDs - 5 alphanumeric chars (e.g.,
"xCEfn")
- Use tokens - Prefer
$--primary over hardcoded colors
- Component naming -
Category/Variant (e.g., "Button/Large/Primary")
- Reusable components - Add
"reusable": true to source, use ref for instances
- Override properties - Use
descendants object keyed by child ID
