ERS Energy Design System

A comprehensive design system for building consistent and accessible designs for ERS Energy.

Version 1.2

Quick Links

Brand guidebook Logo files Deck template Letterhead Post elements Video tutorials

Brand Identity

Logo guidelines and brand assets for consistent representation across all touchpoints.

Logo System

Complete logo guidelines including formats, colors, clearspace, and misuse examples for consistent brand representation.

v1.2

Logo Symbol System

Guiding Star symbol variants, container shapes, clearspace, and minimum size specifications.

v1.2

Foundation

Core design tokens and visual foundations that define the look and feel of ERS Energy applications.

Color System

Brand colors, semantic colors, and complete 12-step color scales for all UI needs.

v1.2

Typography System

Type scale, font weights, text colors, and responsive typography guidelines.

v1.2

Button System

Button variants, sizes, states, and usage guidelines for consistent CTAs.

v1.2

Icon System

Google Material Symbols styled in ERS brand colors with interactive generators.

v1.2

Design Consistency

Great brands are built on consistent visual foundations that create trust and recognition across every touchpoint.

Before / After Comparison Drag the slider

Consistent Design

Using the ERS design system ensures visual harmony across all touchpoints.

Learn More After: Design System

Inconsistent Design

Without a system, designs become fragmented and hard to maintain.

Learn More Before: No System

When things come together, we build something more aesthetic and authentic.

Kay Optix Supervisor Engineer 012 345 6789
	ERS Energy – KL Office Level 8, Tower 2, Faber Towers, Jalan Desa Bahagia, Taman Desa, 58100, Kuala Lumpur
	Tel: +603 3099 1468 www.ers.my ISO 9001:2015 \| ISO 14001:2018 \| ISO 45001:2018

Jas Ammit Director of Provisions 012 345 6789
	ERS Energy – KL Office Level 8, Tower 2, Faber Towers, Jalan Desa Bahagia, Taman Desa, 58100, Kuala Lumpur	ERS Energy – Jakarta Office Menara Rajawali, 18th Floor, Jakarta Selatan 12950
	Tel: +603 3099 1468 www.ers.my ISO 9001:2015 \| ISO 14001:2018 \| ISO 45001:2018

Quick Start for Developers

Get started with the ERS Energy Design System by following these steps.

1. Include the fonts

<link rel=”preconnect” href=”https://fonts.googleapis.com”>
<link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin>
<link href=”https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap” rel=”stylesheet”>

2. Copy the CSS variables

:root {
  /* TIER 1: Reference Tokens */
  –orange-9: #F26522;
  –teal-8: #669998;
  –charcoal-10: #313032;

  /* TIER 2: Semantic Tokens */
  –color-brand-primary: var(–orange-9);
  –color-brand-secondary: var(–teal-8);

  –font-family: ‘Inter’, sans-serif;
  /* … see full v2 token list in docs */
}