Design Reference

TELA Design Reference

Quick reference for building professional-looking TELA applications. Copy-paste ready components optimized for TELA's size constraints.

Optional Reference: These patterns are suggestions to help non-designers build polished apps quickly. Use them as starting points or create your own designs.

Essential Color Palette

/* Brand Colors */
--primary-purple: #b959b6;
--secondary-purple: #f88efb;
--accent-cyan: #52c8db;
 
/* Text */
--text-primary: #ffffff;
--text-secondary: #b3b3b3;
--text-muted: #666666;
 
/* Backgrounds */
--bg-dark: #0a0c0e;
--bg-card: rgba(36, 40, 45, 0.96);
 
/* Status */
--success: #4ade80;
--warning: #fbbf24;
--error: #ef4444;

Copy-Paste Components

Enhanced Card (Most Common)

Perfect for content containers, info sections, and modules.

<div class="card">
  <h2>Card Title</h2>
  <p>Card content goes here</p>
</div>
 
<style>
.card {
  background: rgba(36, 40, 45, 0.96);
  border: 1px solid rgba(82, 200, 219, 0.3);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}
.card:hover {
  border-color: rgba(82, 200, 219, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.card h2 {
  color: #fff;
  font-size: 1.6rem;
  margin: 0 0 1rem 0;
}
</style>

Statistics Grid

Display metrics, blockchain data, or key numbers.

<div class="stats-grid">
  <div class="stat-card">
    <div class="stat-value">1,337</div>
    <div class="stat-label">Block Height</div>
  </div>
  <div class="stat-card">
    <div class="stat-value">42</div>
    <div class="stat-label">Transactions</div>
  </div>
  <div class="stat-card">
    <div class="stat-value">99.9%</div>
    <div class="stat-label">Uptime</div>
  </div>
</div>
 
<style>
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.stat-card {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(82, 200, 219, 0.3);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
}
.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: #52c8db;
  margin-bottom: 0.5rem;
}
.stat-label {
  color: #b3b3b3;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
</style>

Buttons

Primary, secondary, and disabled states.

<button class="btn-primary">Primary Action</button>
<button class="btn-secondary">Secondary Action</button>
<button class="btn-primary" disabled>Disabled</button>
 
<style>
.btn-primary, .btn-secondary {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  font-size: 1rem;
}
.btn-primary {
  background: linear-gradient(135deg, #52c8db 0%, #45a8b8 100%);
  color: #fff;
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(82, 200, 219, 0.4);
}
.btn-secondary {
  background: transparent;
  border: 2px solid #52c8db;
  color: #52c8db;
}
.btn-secondary:hover:not(:disabled) {
  background: rgba(82, 200, 219, 0.1);
}
.btn-primary:disabled, .btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>

Loading Spinner

Show activity while data loads.

<div class="spinner"></div>
 
<style>
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(82, 200, 219, 0.2);
  border-top-color: #52c8db;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>

Data Table

Display blockchain data, transactions, or lists.

<table class="data-table">
  <thead>
    <tr>
      <th>Block</th>
      <th>Hash</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>12345</td>
      <td>a1b2c3...</td>
      <td>2m ago</td>
    </tr>
  </tbody>
</table>
 
<style>
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  overflow: hidden;
}
.data-table th {
  background: rgba(82, 200, 219, 0.1);
  color: #52c8db;
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
}
.data-table td {
  padding: 1rem;
  border-top: 1px solid rgba(82, 200, 219, 0.1);
  color: #b3b3b3;
}
.data-table tr:hover {
  background: rgba(82, 200, 219, 0.05);
}
</style>

Size Optimization Tips

1. Use CSS Variables

Define once, use everywhere (saves bytes):

:root {
  --primary: #52c8db;
  --card-bg: rgba(36, 40, 45, 0.96);
}
.card { background: var(--card-bg); }
.btn { color: var(--primary); }

2. Inline Critical Styles

For small apps, inline styles in <style> tags to avoid external CSS files:

<style>
  /* All your styles here - no separate .css file needed */
</style>

3. Minify for Production

Before deployment, remove whitespace and comments:

/* Before (readable) */
.card {
  background: rgba(36, 40, 45, 0.96);
  padding: 1.5rem;
}
 
/* After (minified) - saves ~30% */
.card{background:rgba(36,40,45,.96);padding:1.5rem}

4. Reuse Classes

Don't create unique classes for every element:

<!-- ❌ Bad: 3 unique classes -->
<div class="header-card"></div>
<div class="content-card"></div>
<div class="footer-card"></div>
 
<!-- ✅ Good: 1 reusable class -->
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

5. Shorthand Properties

/* ❌ Verbose (43 bytes) */
padding-top: 1rem;
padding-right: 1.5rem;
padding-bottom: 1rem;
padding-left: 1.5rem;
 
/* ✅ Shorthand (23 bytes) */
padding: 1rem 1.5rem;

Quick Layout Patterns

Centered Container

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

Responsive Grid

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

Flex Layout

.flex {
  display: flex;
  gap: 1rem;
  align-items: center;
}

Typography Scale

h1 { font-size: 2.5rem; }   /* 40px */
h2 { font-size: 2rem; }     /* 32px */
h3 { font-size: 1.5rem; }   /* 24px */
body { font-size: 1rem; }   /* 16px */
small { font-size: 0.875rem; } /* 14px */

Common Animations

Fade In

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-in { animation: fadeIn 0.5s ease; }

Slide Up

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.slide-up { animation: slideUp 0.5s ease; }

Full Examples

These patterns are used in the complete template examples:

Pro Tip: Start with the Basic App Template and customize these components to match your app's needs.