Creating Templates

Templates are the foundation of Spectra. They define how your visuals look and behave.

Template Structure

A Spectra template is a standard HTML file with CSS styling:

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      width: 1290px;
      height: 2796px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 80px;
    }

    .device-frame {
      /* Your device mockup styles */
    }

    .headline {
      font-size: 72px;
      font-weight: 700;
      color: white;
      text-align: center;
      margin-top: 60px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="device-frame">
      <img src="{{screenshot}}" alt="App Screenshot" />
    </div>
    <h1 class="headline">{{headline}}</h1>
  </div>
</body>
</html>

Variables

Use double curly braces for dynamic content:

{{headline}} - Text content
{{screenshot}} - Image URLs
{{locale}} - Current locale code

Device Presets

Spectra includes built-in device dimensions:

Device	Width	Height
iPhone 15 Pro	1290	2796
iPhone 15 Pro Max	1320	2868
iPad Pro 12.9”	2048	2732

Best Practices

Use system fonts - Ensures consistent rendering
Avoid external resources - Bundle all assets
Test at multiple sizes - Verify responsive behavior