Use official assets only.
Use the approved logo and icon variants defined in the Logo and Icon sections.
2.0
The EC Brand is built on discipline, precision, and technical integrity. It reflects an engineering mindset applied to design – where logic defines beauty and standards ensure consistency. Every color, typeface, and pixel is intentional; there’s no decoration; only clarity. The breadth of the system is itself functional: each color, weight, and tone exists to encode meaning – state, hierarchy, context – never to ornament. Range serves clarity; it does not dilute it. The goal is to deliver information cleanly and accurately, without posturing, or pretense.
The EC voice is deliberate and confident, grounded in competence rather than loudness. Language is factual, structured, and concise. Every word earns its place. If empathy appears, it’s through precision: by respecting the reader’s time and intelligence. The written voice mirrors the visual system – disciplined, modular, and intentional.
Together, these traits form the framework for every EC artifact – from typography to tone.
The EC color system is organized into five palettes – Primary, Neutrals, Accents, Surface, and Tints – followed by application guidance. The Primary and Neutral palettes carry the brand and do the structural work; the Accent, Surface, and Tint palettes extend the system for UI, data visualization, and marketing. The rules below apply across all palettes.
For documents, presentations, and long-form reading, use Charcoal (#323E48) as body text on light backgrounds to reduce eye fatigue. Use EC Navy 900 (#002E6D) or EC Green 800 (#00524C) primarily for headings and emphasis, not as default body copy.
On dark backgrounds or slides, White (#FFFFFF) becomes the main text color, with EC Teal 500 (#00C4B3) or EC Green 700 (#007167) for accents. Avoid large bodies of text in Teal; reserve Teal for interactive elements, highlights, or small decorative areas (≤ 25% coverage of a layout).
This section defines the brand’s primary colors (core brand palette).
Primary colors carry the brand identity. Use EC Navy 900 and EC Green 800 for headings, dark backgrounds, and strong emphasis. Use EC Teal 500 and related teal values for links, highlights, interactive elements, and small accents rather than long body copy.
The neutral palette defines grayscale structural colors with contrast information and usage guidance.
High-chroma accent colors for specific semantic uses (alerts, highlights, etc).
Extended neutrals for UI surfaces and overlays.
Surface colors broaden the system for UI containers, dark headers, overlays, and inverse contexts. Use them as supporting structure, not as replacements for primary brand colors or official mark colors.
Low-chroma tints for subtle backgrounds and highlights.
Tints broaden the system for subtle backgrounds, UI highlights, data visualization, and marketing accents. They do not replace the primary colors and should not be used in logotypes or other brand-critical lockups.
Representative contrast pairings for the most common text/background combinations.
Contrast values are measured against the most legible foreground color, White or Charcoal, and computed per WCAG 2.2 using sRGB.
For applied color systems across reading, interface, presentation, and terminal contexts, see Functional Themes.
Defines the brand’s typographic hierarchy for digital, print, and interface applications. Typography is treated as a system of three layers – expressive, communicative, and technical – working together.
| Property | Value |
|---|---|
| Approved Weights | Regular · SemiBold · ExtraBold |
| Primary Use | Display (H1, hero, tagline) |
| Cross-Platform Size Range | 30 – 48 px (≈ 22 – 36 pt) |
| Additional Notes | Expressive headlines only. Use Regular for the official tagline “less stress, more success!℠”. Avoid small sizes in Word/PowerPoint. |
| Property | Value |
|---|---|
| Approved Weights | Regular · Italic · SemiBold · Bold |
| Primary Use | Headings (H2 – H4), body text, and UI labels |
| Cross-Platform Size Range | 13 – 28 px (≈ 10 – 21 pt) |
| Additional Notes | Default system typeface for all web and document contexts. Use Inter Tight for space-restricted headings. Inter Italic reserved for emphasis only. |
| Property | Value |
|---|---|
| Approved Weights | Regular · Italic · Bold |
| Primary Use | Inline code, command examples, technical labels |
| Cross-Platform Size Range | 13 – 16 px (≈ 10 – 12 pt) |
| Additional Notes | Monospaced grid alignment. Maintain AA contrast on both light and dark backgrounds. Avoid italics in long blocks. |
| Property | Value |
|---|---|
| Font / Weight | Delight ExtraBold |
| Size / Line Height | 48 px (≈ 36 pt) / 56 px (≈ 42 pt) |
| Color / Contrast | EC Navy 900 · 13.03:1 (AAA) |
| Usage / Notes | Use once per page or slide. Avoid stacking multiple Delight H1s. |
| Property | Value |
|---|---|
| Font / Weight | Inter Tight SemiBold |
| Size / Line Height | 32 px (≈ 24 pt) / 40 px (≈ 30 pt) |
| Color / Contrast | EC Neutral 700 · 10.95:1 (AAA) |
| Usage / Notes | Primary sub-head. Maintain one level of hierarchy per slide or section. |
| Property | Value |
|---|---|
| Font / Weight | Inter Tight Regular or SemiBold |
| Size / Line Height | 24 px (≈ 18 pt) / 32 px (≈ 24 pt) |
| Color / Contrast | EC Neutral 700 · 10.95:1 (AAA) |
| Usage / Notes | Use for tertiary titles or call-outs. Avoid italics; use weight for emphasis. |
| Property | Value |
|---|---|
| Font / Weight | Inter Regular |
| Size / Line Height | 16 px (≈ 12 pt) / 24 px (≈ 18 pt) |
| Color / Contrast | EC Neutral 700 on White · 10.95:1 (AAA) |
| Usage / Notes | Default paragraph style for all media. Do not reduce below 14 px (≈ 10.5 pt). |
| Property | Value |
|---|---|
| Font / Weight | Inter Regular |
| Size / Line Height | 13 px (≈ 10 pt) / 18 px (≈ 13 pt) |
| Color / Contrast | EC Neutral 500 · 5.87:1 (AA) |
| Usage / Notes | Captions, timestamps, footers. Maintain AA contrast on light backgrounds. |
| Property | Value |
|---|---|
| Font / Weight | Delight Regular |
| Size / Line Height | 30 px (≈ 22 pt) / 36 px (≈ 27 pt) (when logo ≈ 230 px wide) |
| Color / Contrast | EC Navy 900 · 13.03:1 (AAA) |
| Usage / Notes | Reserved for official brand tagline only: less stress, more success!℠. |
| Property | Value |
|---|---|
| Font / Weight | Inter SemiBold or Inter Italic |
| Size / Line Height | Same as Body Text |
| Color / Contrast | Inherits body text color (no color change) |
| Usage / Notes | Emphasis is conveyed by weight: use Inter SemiBold. Emphasis text inherits the surrounding body color – never recolor it; teal is reserved for hyperlinks. Avoid italics for UI text. |
| Property | Value |
|---|---|
| Font / Weight | Inter Regular |
| Size / Line Height | Same as Body Text |
| Color / Contrast | Follow the approved link/hover color pairs defined in the Functional Themes section. |
| Usage / Notes | Underline or color-only; hover state EC Teal 450. Never re-color links arbitrarily. |
| Property | Value |
|---|---|
| Font / Weight | IBM Plex Mono Regular |
| Size / Line Height | 15 px (≈ 11 pt) / 20 px (≈ 15 pt) |
| Color / Contrast | EC Neutral 700 on White · 10.95:1 (AAA) |
| Usage / Notes | Use for short snippets; no italics. Preserve AA contrast. |
| Property | Value |
|---|---|
| Font / Weight | IBM Plex Mono Regular or Bold |
| Size / Line Height | 14 px (≈ 10.5 pt) / 20 px (≈ 15 pt) |
| Color / Contrast | White on EC Neutral 700 · 10.95:1 (AAA) |
| Usage / Notes | Multi-line syntax blocks. Maintain monospace grid; no automatic line wrapping. |
| Rule | Description |
|---|---|
| R1 Font Family Limits | Only use: Delight, Inter / Inter Tight, and IBM Plex Mono. No system font substitutions in brand assets. |
| R2 Delight = Display Only | Limit to one headline per page/slide. Never use Delight in body, captions, or UI text. |
| R3 Inter = Primary Workhorse | Use Inter Regular for body; Inter SemiBold/Bold for emphasis and headings. Inter Tight is for compact layouts. |
| R4 IBM Plex Mono = Code Only | For inline snippets, command lines, and code blocks; keep contrast ≥ AA. |
| R5 Size Conversions | For Office/print: px × 0.75 ≈ pt. Rounded to the nearest 0.5 pt for simplicity. |
| R6 Hierarchy Integrity | H1 → H2 → H3 must step down at least 1 weight or 4 px (≈ 3 pt). |
| R7 Line Length & Spacing | Body ≈ 60 – 75 characters per line · Line height = 150 % of font size. |
| R8 No Manual Stretching | Never scale fonts horizontally/vertically in Word or PowerPoint. |
| R9 Heading Color Consistency | Use only approved heading colors: EC Navy 900 or EC Neutral 700 on light backgrounds; White on dark. |
| R10 Tagline Protection | The tagline “less stress, more success!℠” must use Delight Regular 30 px (≈ 22 pt) · ℠ included. |
| Check | Standard | How to Test |
|---|---|---|
| Contrast | WCAG 2.2 AA = 4.50:1 (normal), 3.00:1 (large) · AAA = 7.00:1 | Use built-in contrast plugin (Figma → Contrast Checker) or online tool like contrast-ratio.com. |
| Readable Size | Body ≥ 14 px (≈ 10.5 pt); Headings ≥ 18 px (≈ 13.5 pt). | Spot-check in both 100 % view (screen) and print scale at A4 or Letter. |
| Legibility in Office | Word/PowerPoint anti-aliasing varies; darker text yields best crispness. | Use EC Neutral 700 for default text – do not use pure black (#000). |
| No Color-Only Cues | Color emphasis must also have a weight or underline change. | Example: link = EC Teal 500 + underline; emphasis = SemiBold (weight, not color). |
| Screen Reader Order | Logical heading order (H1 > H2 > Body). | Verify with accessibility inspector or outline view in Word/PowerPoint. |
| Alt Text for Images | Always include concise text alternative. | Especially important for slides or documentation exports to PDF. |
| Platform | Guidance |
|---|---|
| Microsoft Word | Save styles as Heading 1 → H1, Heading 2 → H2, Normal → Body Text. Set default font to Inter 11 pt (≈ 14 px). |
| PowerPoint | Use Delight ExtraBold for title slide only. Body: Inter Regular 12 pt (≈ 16 px). Ensure text boxes use “Resize Shape to Fit Text = On.” |
| Web / App | Define typography in rem: 1 rem = 16 px (≈ 12 pt). Set root font to Inter Regular. All heading sizes defined as multiples of rem. |
| PDF / Print | Embed fonts before export. Convert Inter and Delight to outlines only if licensing requires. Never substitute system fonts. |
| Rule | Requirement |
|---|---|
| Trademark Symbol | Always include ℠ with tagline on first appearance per document. |
| Spacing | ℠ sits ¼ × logo height above baseline, right-aligned with final letter. |
| Do Not Alter | Never recolor, distort, rotate, add effects, or place on photographic textures below AA contrast. The only approved effect is Logo › Variants › Approved Emboss: white logo on EC Neutral 900 Dark Gunmetal with the specified inner shadow. |
| File Naming | Use delivered filenames exactly (e.g., EC-Logo_Color_Positive.svg). |
| Licensing | All logo assets © Eliezer Chavez – use only under direct authorization. |
The EC color system adapts across light and dark environments through six predefined Functional Themes. Each theme defines background, heading, body, and link/hover pairings that meet or exceed WCAG 2.2 AA contrast.
Use these themes as turnkey palettes for UI, Word, PowerPoint, or PDF layouts.
For Web/UI, treat these tokens as CSS themes.
For Word/Presentations, apply the same colors via Style presets (Heading, Body, Link).
For PDF/Print, maintain the same ratios; avoid opacity or gradients.
| Property | Value |
|---|---|
| Background | EC Neutral 100 · #FFFFFF |
| Headings | EC Neutral 700 · #323E48 |
| Body Text | EC Neutral 700 · #323E48 |
| Link | EC Neutral 500 · #5B6670 → 5.87 (AA) |
| Accent (Hover) | EC Neutral 900 · #1D252C → 15.52 (AAA) |
| Usage Notes | For editorial and document layouts. Calm tone, AAA readability. |
| Property | Value |
|---|---|
| Background | EC Neutral 100 · #FFFFFF |
| Headings | EC Navy 900 · #002E6D |
| Body Text | EC Neutral 700 · #323E48 |
| Link | EC Neutral 500 · #5B6670 → 5.87 (AA) |
| Accent (Hover) | EC Neutral 900 · #1D252C → 15.52 (AAA) |
| Usage Notes | Marketing and presentation contexts. Navy headlines add brand authority. |
| Property | Value |
|---|---|
| Background | EC Neutral 050 · #FAFBFC |
| Headings | EC Neutral 700 · #323E48 |
| Body Text | EC Neutral 700 · #323E48 |
| Link | EC Neutral 500 · #5B6670 → 5.66 (AA) |
| Accent (Hover) | EC Neutral 900 · #1D252C → 14.98 (AAA) |
| Usage Notes | UI and dashboard light mode. Neutral palette keeps interfaces minimal. |
| Property | Value |
|---|---|
| Background | EC Navy 900 · #002E6D |
| Headings | EC Neutral 100 · #FFFFFF |
| Body Text | EC Neutral 100 · #FFFFFF |
| Link | EC Teal 450 · #12B4A6 → 5.03 (AA) |
| Accent (Hover) | EC Teal 500 · #00C4B3 → 5.92 (AA) |
| Usage Notes | System-level or engineering environments. White text, teal accents, high contrast. |
| Property | Value |
|---|---|
| Background | EC Neutral 900 · #1D252C |
| Headings | EC Neutral 100 · #FFFFFF |
| Body Text | EC Neutral 100 · #FFFFFF |
| Link | EC Teal 450 · #12B4A6 → 5.99 (AA) |
| Accent (Hover) | EC Teal 500 · #00C4B3 → 7.05 (AAA) |
| Usage Notes | Default dark-mode environment. Teal pair maintains brand identity. |
| Property | Value |
|---|---|
| Background | EC Neutral 950 · #121820 |
| Headings | EC Neutral 100 · #FFFFFF |
| Body Text | EC Neutral 100 · #FFFFFF |
| Link | EC Teal 450 · #12B4A6 → 6.88 (AA) |
| Accent (Hover) | EC Teal 500 · #00C4B3 → 8.11 (AAA) |
| Usage Notes | For code and command-line visuals. Classic white-on-black tone with teal interaction. |
Editorial Light, Launchpad, and Interface Light correspond to standard or presentation documents.
Command Console, Interface Dark, and Terminal correspond to dark-mode and engineering environments.
| Theme | Context | Background | Heading | Body | Link | Hover | Contrast Notes |
|---|---|---|---|---|---|---|---|
| Editorial Light | Editorial and document layouts | EC Neutral 100 · #FFFFFF | EC Neutral 700 · #323E48 | EC Neutral 700 · #323E48 | EC Neutral 500 · #5B6670 → 5.87 (AA) | EC Neutral 900 · #1D252C → 15.52 (AAA) | Calm tone, AAA readability. |
| Launchpad | Marketing and presentation contexts | EC Neutral 100 · #FFFFFF | EC Navy 900 · #002E6D | EC Neutral 700 · #323E48 | EC Neutral 500 · #5B6670 → 5.87 (AA) | EC Neutral 900 · #1D252C → 15.52 (AAA) | Navy headlines add brand authority. |
| Interface Light | UI and dashboard light mode | EC Neutral 050 · #FAFBFC | EC Neutral 700 · #323E48 | EC Neutral 700 · #323E48 | EC Neutral 500 · #5B6670 → 5.66 (AA) | EC Neutral 900 · #1D252C → 14.98 (AAA) | Neutral palette keeps interfaces minimal. |
| Command Console | System-level or engineering environments | EC Navy 900 · #002E6D | EC Neutral 100 · #FFFFFF | EC Neutral 100 · #FFFFFF | EC Teal 450 · #12B4A6 → 5.03 (AA) | EC Teal 500 · #00C4B3 → 5.92 (AA) | White text, teal accents, high contrast. |
| Interface Dark | Default dark-mode environment | EC Neutral 900 · #1D252C | EC Neutral 100 · #FFFFFF | EC Neutral 100 · #FFFFFF | EC Teal 450 · #12B4A6 → 5.99 (AA) | EC Teal 500 · #00C4B3 → 7.05 (AAA) | Teal pair maintains brand identity. |
| Terminal | Code and command-line visuals | EC Neutral 950 · #121820 | EC Neutral 100 · #FFFFFF | EC Neutral 100 · #FFFFFF | EC Teal 450 · #12B4A6 → 6.88 (AA) | EC Teal 500 · #00C4B3 → 8.11 (AAA) | Classic white-on-black tone with teal interaction. |
For editorial and document layouts. Calm tone, AAA readability.
Example linkUse the approved logo and icon variants defined in the Logo and Icon sections.
Use the delivered one-color, color, grayscale, and outline artwork exactly as specified.
Apply the exact palette values and contrast rules documented in Palettes.
Follow the Logo and Icon clear-space diagrams before placing nearby type or imagery.
Keep marks, text, and interface elements legible when imagery is present.
Subtly desaturate or darken photography when needed to protect contrast.
Choose simple compositions that leave room for clean hierarchy and spacing.
Prefer precise, modern, natural imagery that supports the content without decoration.
The only approved effect is Logo › Variants › Approved Emboss.
Do not add, remove, merge, or redraw logo and icon geometry outside approved asset variants.
Do not adjust palette values, opacity, saturation, brightness, gradients, or unapproved fills.
Do not place marks or text on busy imagery, low-contrast surfaces, or unsupported backgrounds.