⚡ Official Design System · Based on VES-UI-Kit Figma
EnergySense UI Kit
Design tokens, components & Squarespace embed code — extracted directly from the VES-UI-Kit Figma file.
14Components
PoppinsBrand Font
#246933Primary Green
Tokens
Components
Squarespace
Design Tokens
Color Palette
All colors extracted from the VES-UI-Kit Figma file. These are the exact hex values used across every component.
↗ View in Figma
Brand Greens
Green 900
#246933
Headings, nav, CTA buttons
Green 700
#2e8540
Active states, success, toggles
Green 500
#4a9960
Mid accent
Green 200
rgba(46,133,64,0.15)
Tinted backgrounds
Nav / Footer
#1d5c2e
Navigation bar, footer
Semantic Colors
Blue (Active)
#0075ff
Checkbox & radio active
Error
#ef4444
Error states, delete buttons
Error Light
#f87171
Error input border
Amber
#f59e0b
Warning / high usage alert
Neutrals & Text
Heading
#246933
All headings
Body Text
#4a4a4a
All body copy
Muted
rgba(74,74,74,0.7)
Subtitles, helper text
Placeholder
#adaebc
Input placeholder text
Page BG
#f7f7f7
Page background
Disabled BG
#f3f4f6
Disabled inputs
Border
#d1d5db
Input, card borders
Border Light
#e5e7eb
Subtle dividers
CSS Variables — paste in Squarespace → Design → Custom CSS
:root {
/* Brand Greens */
--ves-green-900: #246933; /* Primary brand — headings, nav, buttons */
--ves-green-700: #2e8540; /* Active, success, toggles, sliders */
--ves-green-nav: #1d5c2e; /* Navigation bar, footer background */
--ves-green-200: rgba(46,133,64,0.15); /* Tinted backgrounds */
/* Semantic */
--ves-blue: #0075ff; /* Checkbox & radio active state */
--ves-red: #ef4444; /* Error */
--ves-amber: #f59e0b; /* Warning */
/* Text */
--ves-text: #4a4a4a;
--ves-text-muted: rgba(74,74,74,0.7);
--ves-placeholder: #adaebc;
/* Surfaces */
--ves-bg: #f7f7f7;
--ves-card: #ffffff;
--ves-disabled: #f3f4f6;
/* Borders */
--ves-border: #d1d5db;
--ves-border-lt: #e5e7eb;
--ves-divider: rgba(46,133,64,0.2);
/* Font */
--ves-font: 'Poppins', 'Segoe UI', Arial, sans-serif;
}
Design Tokens
Typography
Poppins is the sole typeface across all components — Bold (700/800) for display, SemiBold (600) for headings and labels, Medium (500) for emphasis, Regular (400) for body.
Display / H1
48px · Bold 700
EnergySense
Section H2
30px · SemiBold 600
Input Fields
H3 / Card Title
24px · SemiBold 600
Energy Savings Assessment
H4 / Panel Title
16px · SemiBold 600
Energy Saving Interests
Body Subtitle
18px · Regular 400
Form Elements & Input Components
Body
16px · Regular 400
Helping Virginians save energy and reduce costs through education, innovation, and smart home improvements.
Label
14px · SemiBold 600
Default Input
Helper / Caption
14px · Regular 400
This field is required
Google Fonts — Settings → Advanced → Code Injection → Header (once per site)
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
Design Tokens
Spacing & Radius
Spacing Scale (from Figma grid)
4px · gap-1
8px · gap-2
12px · gap-3
16px · gap-4
24px · gap-6
32px · gap-8
48px · gap-12
64px · gap-16
Shadows (from Figma)
Card shadow
0px 4px 12px rgba(0,0,0,0.05)
0px 4px 12px rgba(0,0,0,0.05)
Modal shadow
0px 10px 15px rgba(0,0,0,0.1)
0px 10px 15px rgba(0,0,0,0.1)
Border Radius (from Figma)
4px — sm
Copy buttons, small elements
8px — md (inputs)
All inputs, selects, textareas
12px — lg
Panels, section containers
16px — card (cards)
Cards, modals, panels
9999px — pill
Buttons, toggles, badges
Components
Buttons
All buttons use Poppins SemiBold 600, pill shape (border-radius: 9999px). Primary uses #246933 background.
Button
primary · outline · ghost · danger · amber · white — sizes: sm, default, lg
Squarespace Code Block — Buttons
<style>
.ves-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.9rem;
padding: 11px 22px; border-radius: 9999px; border: 2px solid transparent;
cursor: pointer; text-decoration: none; transition: all 0.2s; line-height: 1.4;
}
.ves-btn-primary { background: #246933; color: white; border-color: #246933; }
.ves-btn-primary:hover { background: #2e8540; border-color: #2e8540; transform: translateY(-1px); }
.ves-btn-outline { background: transparent; color: #246933; border-color: #246933; }
.ves-btn-outline:hover { background: rgba(46,133,64,0.08); }
.ves-btn-danger { background: #ef4444; color: white; border-color: #ef4444; }
.ves-btn-amber { background: #f59e0b; color: white; border-color: #f59e0b; }
.ves-btn-ghost { background: transparent; color: #4a4a4a; border-color: #d1d5db; }
.ves-btn-white { background: white; color: #246933; border-color: white; }
</style>
<a href="/your-link" class="ves-btn ves-btn-primary">Continue</a>
<a href="/your-link" class="ves-btn ves-btn-ghost">Cancel</a>
Components
Badges & Status Pills
Show Success
Show Error
Show Confirmation
Show Info
Energy Saving
Inactive
Badge
success · error · amber · outline · light · neutral
Squarespace Code Block — Badges
<style>
.ves-badge {
display: inline-flex; align-items: center; font-family: 'Poppins', sans-serif;
font-size: 0.78rem; font-weight: 600; padding: 5px 14px; border-radius: 9999px;
}
.ves-badge-success { background: #246933; color: white; }
.ves-badge-error { background: #ef4444; color: white; }
.ves-badge-amber { background: #f59e0b; color: white; }
.ves-badge-outline { background: transparent; color: #246933; border: 1.5px solid #246933; }
.ves-badge-light { background: rgba(46,133,64,0.15); color: #246933; }
.ves-badge-neutral { background: #e5e7eb; color: #4a4a4a; }
</style>
<span class="ves-badge ves-badge-success">Active</span>
<span class="ves-badge ves-badge-error">Inactive</span>
Components
Input Fields & Textarea
All inputs: 50px height, 8px radius, Poppins 16px Regular, #adaebc placeholder, #d1d5db border. Focus border turns #2e8540.
✉
⚠ This field is required
✓ Email is valid
0 / 200
Input / Textarea / Select
default · icon · disabled · error · success · password · textarea · select
Squarespace Code Block — Inputs
<style>
.ves-label { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.875rem; color: #4a4a4a; display: block; margin-bottom: 6px; }
.ves-input, .ves-textarea, .ves-select {
width: 100%; font-family: 'Poppins', sans-serif; font-size: 1rem; color: #4a4a4a;
background: white; border: 1px solid #d1d5db; border-radius: 8px; outline: none;
transition: border-color 0.15s; box-sizing: border-box;
}
.ves-input { height: 50px; padding: 0 15px; }
.ves-textarea { padding: 12px 15px; min-height: 120px; resize: vertical; }
.ves-select { height: 50px; padding: 0 40px 0 12px; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a4a4a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.ves-input::placeholder, .ves-textarea::placeholder { color: #adaebc; }
.ves-input:focus, .ves-textarea:focus, .ves-select:focus { border: 2px solid #2e8540; }
.ves-input-error { border: 2px solid #f87171; }
.ves-input-success { border: 2px solid #2e8540; }
.ves-input-disabled, .ves-select-disabled { background: #f3f4f6; opacity: 0.7; pointer-events: none; }
.ves-helper { font-family: 'Poppins', sans-serif; font-size: 0.8rem; margin-top: 4px; display: block; }
.ves-helper-error { color: #ef4444; }
.ves-helper-success { color: #2e8540; }
</style>
<div>
<label class="ves-label">Email Address</label>
<input class="ves-input" type="email" placeholder="your.email@example.com" />
</div>
<div>
<label class="ves-label">State</label>
<select class="ves-select">
<option value="">Select your state</option>
<option>Virginia</option>
</select>
</div>
Components
Form Controls
Checkboxes & radios use #0075ff (blue) for active state — exactly as in the Figma file. Toggles use #2e8540 when on.
Checkboxes
Energy Saving Interests
Custom (with descriptions)
Radio Buttons
Property Type
Heating System (with descriptions)
Switches & Toggles
Notification Preferences
Email Notifications
SMS Alerts
Push Notifications
Energy Monitoring
Real-time Tracking
Monitor energy usage live
Weekly Reports
Receive usage summaries
Range Slider
$0$250$500
0%30%100%
File Upload
Squarespace Code Block — Toggles
<style>
.ves-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #e5e7eb; font-family: 'Poppins', sans-serif; }
.ves-toggle { position: relative; display: inline-block; width: 48px; height: 24px; flex-shrink: 0; }
.ves-toggle input { opacity: 0; width: 0; height: 0; }
.ves-toggle-track { position: absolute; inset: 0; background: #d1d5db; border-radius: 9999px; transition: background 0.2s; cursor: pointer; }
.ves-toggle input:checked + .ves-toggle-track { background: #2e8540; }
.ves-toggle-track::after { content: ''; position: absolute; width: 16px; height: 16px; background: white; border-radius: 50%; top: 4px; left: 4px; transition: left 0.2s; }
.ves-toggle input:checked + .ves-toggle-track::after { left: 28px; }
</style>
<div class="ves-toggle-row">
<span>Email Notifications</span>
<label class="ves-toggle">
<input type="checkbox" checked />
<span class="ves-toggle-track"></span>
</label>
</div>
Components
Cards & Panels
Cards: white bg, 16px border-radius, box-shadow: 0px 4px 12px rgba(0,0,0,0.05). No border.
🏠
Home Energy Audit
Professional assessment of your home's energy usage to identify savings opportunities.
⚡
Smart Device Status
Real-time monitoring of smart home devices and their energy consumption.
💰
Cost Savings
Track your monthly savings and see the impact of energy-efficient choices.
2,450 kWh
Energy Usage · This month
$126.50
Cost Savings · This month
8.5/10
Efficiency Score · Excellent
⚡ Energy Saving Tips
Quick ways to reduce your energy consumption
Switch to LED bulbs to save up to 75% on lighting
Set thermostat 7–10°F lower when away from home
Unplug electronics when not in use
🏠 Smart Device Status
Real-time monitoring dashboard
🌡 Smart Thermostat72°F ●
💡 Smart Lights8/12 On ●
🔌 Smart Outlets4/6 Active ●
Squarespace Code Block — Card
<style>
.ves-card {
background: white; border-radius: 16px;
box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.05);
padding: 24px; font-family: 'Poppins', sans-serif;
}
.ves-card h3 { font-weight: 600; font-size: 1rem; color: #4a4a4a; margin: 0 0 8px; }
.ves-card p { font-size: 0.875rem; color: rgba(74,74,74,0.7); line-height: 1.6; margin: 0; }
/* Stat card */
.ves-stat-val { font-weight: 700; font-size: 1.8rem; color: #246933; line-height: 1.1; }
.ves-stat-label { font-size: 0.82rem; color: rgba(74,74,74,0.7); margin-top: 3px; }
/* 3-column card grid */
.ves-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 768px) { .ves-card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ves-card-grid { grid-template-columns: 1fr; } }
</style>
<div class="ves-card-grid">
<div class="ves-card">
<h3>🏠 Home Energy Audit</h3>
<p>Professional assessment of your home's energy usage.</p>
</div>
<!-- repeat for each card -->
</div>
Components
Alert & Confirmation Modals
From the "Alert Modals" page in the Figma file. White card, 16px radius, strong drop shadow.
Confirmation Modal
🗑
Delete Energy Report
Are you sure you want to delete "Monthly Energy Usage Report"? This action cannot be undone.
💾
Save Changes
You have unsaved changes to your energy efficiency settings. Do you want to save them before leaving?
Squarespace Code Block — Alert Modal
<style>
.ves-alert {
background: white; border-radius: 16px; padding: 28px 24px; text-align: center;
box-shadow: 0px 10px 15px rgba(0,0,0,0.1), 0px 4px 6px rgba(0,0,0,0.05);
max-width: 320px; font-family: 'Poppins', sans-serif;
}
.ves-alert-icon { font-size: 36px; margin-bottom: 12px; }
.ves-alert h3 { font-weight: 700; font-size: 1.1rem; color: #246933; margin: 0 0 8px; }
.ves-alert p { font-size: 0.85rem; color: rgba(74,74,74,0.7); line-height: 1.6; margin: 0 0 18px; }
.ves-alert-actions { display: flex; gap: 10px; justify-content: center; }
</style>
<div class="ves-alert">
<div class="ves-alert-icon">✅</div>
<h3>Success!</h3>
<p>Your energy efficiency settings have been saved successfully.</p>
<div class="ves-alert-actions">
<a href="/" class="ves-btn ves-btn-primary">Continue</a>
</div>
</div>
Components
Navigation & Footer
Dark forest green (#1d5c2e) background. Poppins 500 nav links at rgba(255,255,255,0.75). Active links white.
Navigation Bar
Dark green #1d5c2e · Poppins 500 · Active state: white
Footer
Dark green #1d5c2e · centered · muted link color
Squarespace Code Block — Nav Bar
<style>
.ves-nav { display: flex; align-items: center; justify-content: space-between; background: #1d5c2e; padding: 0 32px; height: 56px; font-family: 'Poppins', sans-serif; }
.ves-nav-brand { display: flex; align-items: center; gap: 8px; color: white; font-weight: 700; text-decoration: none; font-size: 1rem; }
.ves-nav-links { display: flex; gap: 24px; }
.ves-nav-link { color: rgba(255,255,255,0.75); font-size: 0.85rem; font-weight: 500; text-decoration: none; }
.ves-nav-link:hover, .ves-nav-link.active { color: white; }
@media (max-width: 640px) { .ves-nav-links { display: none; } }
</style>
<nav class="ves-nav">
<a class="ves-nav-brand" href="/">⚡ EnergySense</a>
<div class="ves-nav-links">
<a class="ves-nav-link" href="/tips">Energy Tips</a>
<a class="ves-nav-link" href="/savings">Savings</a>
<a class="ves-nav-link" href="/contact">Contact</a>
</div>
</nav>
Squarespace
How to Embed Components
Each component tab above has a "Copy" button. Here's exactly where each snippet goes in Squarespace.
01
Load Poppins Font (once)
Go to Settings → Advanced → Code Injection → Header. Paste the Google Fonts link tag from the Typography tab. Do this once — it applies to all pages.
02
Add CSS Variables (once)
Go to Design → Custom CSS. Paste the
:root { } token block from the Colors tab. This makes brand colors available everywhere on your site.03
Add a Code Block to any page
In the page editor click (+) Add Block → Code. Make sure the mode is set to HTML (not Markdown). Then paste any component snippet.
04
Preview in Safe Mode
Squarespace shows an "Embedded Scripts" warning in the editor. Click "Preview in Safe Mode" to see components render accurately including toggles, tabs, and copy buttons.
⚡ Squarespace Tips
- Every snippet is self-contained — it includes its own <style> block so it won't break other pages.
- For full-width sections (nav bar, hero banners), add a Code Block inside a full-width section and set section padding to 0 in section settings.
- All component CSS uses the Figma-exact color values from the VES-UI-Kit file — no guesswork.
- The Poppins font must be loaded via Code Injection for all type to render correctly.
- To embed this entire design system reference page, add one Code Block on a new page and paste this whole file into it.
Squarespace
Global CSS
Paste into Design → Custom CSS. This applies Poppins and VES brand colors across your entire Squarespace site — including its native buttons and headings.
Squarespace → Design → Custom CSS
/* ═══════════════════════════════════════════════════════════ */
/* ENERGYSENSE / VIRGINIA ENERGY SENSE — Global Site CSS */
/* Source: VES-UI-Kit Figma (5IlxFwC3wsk6YMHO6VGFP1) */
/* Paste in: Squarespace → Design → Custom CSS */
/* ═══════════════════════════════════════════════════════════ */
:root {
--ves-green-900: #246933; /* Primary brand — headings, nav */
--ves-green-700: #2e8540; /* Active states, success */
--ves-green-nav: #1d5c2e; /* Nav bar / footer */
--ves-green-200: rgba(46,133,64,0.15);
--ves-blue: #0075ff; /* Checkbox & radio active */
--ves-red: #ef4444;
--ves-amber: #f59e0b;
--ves-text: #4a4a4a;
--ves-text-muted: rgba(74,74,74,0.7);
--ves-placeholder: #adaebc;
--ves-bg: #f7f7f7;
--ves-card: #ffffff;
--ves-disabled: #f3f4f6;
--ves-border: #d1d5db;
--ves-border-lt: #e5e7eb;
--ves-font: 'Poppins', 'Segoe UI', Arial, sans-serif;
}
/* Base */
body { font-family: var(--ves-font); color: var(--ves-text); background: var(--ves-bg); }
h1, h2, h3, h4, h5, h6 { font-family: var(--ves-font); color: var(--ves-green-900); }
p, li, label { font-family: var(--ves-font); }
a { color: var(--ves-green-900); }
a:hover { color: var(--ves-green-700); }
/* Squarespace button overrides */
.sqs-block-button-element--primary {
background-color: var(--ves-green-900) !important;
border-color: var(--ves-green-900) !important;
border-radius: 9999px !important;
font-family: var(--ves-font) !important;
font-weight: 600 !important;
}
.sqs-block-button-element--primary:hover {
background-color: var(--ves-green-700) !important;
border-color: var(--ves-green-700) !important;
}
.sqs-block-button-element--secondary {
border-color: var(--ves-green-900) !important;
color: var(--ves-green-900) !important;
border-radius: 9999px !important;
font-family: var(--ves-font) !important;
font-weight: 600 !important;
}
/* Inputs */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], textarea, select {
font-family: var(--ves-font) !important;
border-radius: 8px !important;
border-color: var(--ves-border) !important;
}
input:focus, textarea:focus, select:focus {
border-color: var(--ves-green-700) !important;
outline: none !important;
}
/* Background utilities */
.ves-bg-dark { background: var(--ves-green-nav); color: white; }
.ves-bg-light { background: var(--ves-bg); }
.ves-bg-white { background: white; }