Edna Design System Deep Dive

1. Brand Overview

Edna’s design language comes across as clean, controlled, and tech-oriented. Everything about the site screams “we handle complex communication infrastructure, but we make it approachable.” The brand’s visual tone leans heavily on green as a primary signal color — not the usual banking green, but a high-energy electric green (#00e118) that feels more like “activation” than “calm.” You see this in CTAs, gradients, and section banners. It’s paired with deep blacks (#000) and pure white (#fff) for maximum contrast.

There’s a clear utilitarian streak in the system — they’ve stuck to one typeface (Noto Sans) across the board. No decorative flourishes. No unnecessary color noise. That’s deliberate. It keeps the cognitive load low for users who may be dealing with technical dashboards or service sign-ups.

Their spacing system is disciplined. An 8px base grid underpins everything, which keeps layouts consistent. Border radii are modest — 5px for most interactive elements — so the UI feels modern without going full "rounded pill" aesthetic. Shadows are minimal and subtle; most depth cues are either tiny (0px 0px 1px) or soft glows on hover states.

The overall vibe: Edna wants to be perceived as reliable infrastructure, with just enough visual energy to keep it feeling current. This isn't a playful brand — it's a "you can trust us to handle your messaging and API integrations" brand. The design choices reinforce that: neutral grays for text (#59595a), accessible link blues (#0000ee and hover #1579dd), and green highlights for success cues.

If you’re building something in Edna’s style, you’re aiming for clarity, high contrast, and a restrained palette. The green is the hero. The typography is a workhorse. The spacing and layout are tight and predictable. I’d describe the philosophy as “minimalist tech with a neon heartbeat.”

2. Color System

2.1 Primary Colors

Primary brand color: #00e118 (electric green).
This is the “do something” color — buttons, highlights, gradients. It’s high visibility, reads as “go / active / success,” and stands out aggressively against black or white backgrounds. Compared to competitors in SaaS communication platforms, this is bolder — many use blues for trust or reds for urgency. Edna’s green is more energetic, almost sporty.

Psychologically, this green says: "we're fast, we're successful, we're alive." Against the dark gradient background (linear-gradient(300.49deg,#00e118 16.32%,#00700c 42.36%,#000 78.07%)), it pops hard.

2.2 Complete Palette

2.3 Color Relationships

The primary green (#00e118) has strong contrast against both black (#000) and white (#fff). On white, contrast ratio is about 2.3:1 — not WCAG AA for normal text, but fine for large text and non-text elements. On black, contrast ratio is over 15:1 — excellent. The link blue (#0000ee) is WCAG-compliant against white backgrounds, ratio ~8.6:1.

Accessibility-wise:

• White text on primary green: ratio ~3.0:1 — borderline for small text. Should be used for large text only.
• Black text on light green (#f0fff2): ratio ~15+:1 — safe.

Dark mode: They already have a dark gradient section background. Elements invert: white text, green accents.

2.4 Usage Guide

Works well:

• Green (#00e118) on black for CTAs.
• Blue links (#0000ee) on white backgrounds for clarity.
• Text gray (#59595a) for body text — easy on eyes.

Avoid:

• Green on light green — low contrast.
• Blue on dark gradient — too low contrast unless brightened.
• Using multiple accent colors together (green + blue + purple) without clear hierarchy — risks visual noise.

3. Typography

3.1 Font Families

One family: Noto Sans.
Fallbacks: none specified — but Google Fonts source. Variable font support is enabled. This is a utilitarian sans-serif with good multilingual glyph coverage. It's the right choice for a tech service brand that may handle mixed scripts.

3.2 Type Scale

3.3 Hierarchy

They lean into size jumps for hierarchy — 48px → 36px → 32px for major headings. 24px is used for both headings and links, which blurs the line between nav/UI and titles — could confuse if not styled differently. Body text is 16px, captions at 14px, fine print at 12px.

Line heights vary: headings often tight (1.20), body looser (1.60). Buttons are compact (1.20 or 1.15) to keep vertical size small.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px.
Values used: 1, 3, 4, 5, 8, 10, 15, 16, 20, 24, 32, 48, 64, 96, 104px.

Frequency shows the core sizes:

• 8px (81 occurrences) — micro gaps, padding.
• 16px (60) — standard padding/gaps.
• 24px (96) — section padding.
• 32px (25) — larger gaps.
• 48px (22) — major section spacing.
• 96px (16) — hero margins.

4.2 Layout

Breakpoints:
500px, 600px, 601px, 767px, 781px, 782px, 783px, 1024px, 1199px, 1200px.
This suggests a mobile-first approach with fine-tuned tablet breakpoints (~780px range) and desktop breakpoints at 1024px and 1200px.

5. Visual Elements

Border radius system:

• 0px 10px 10px 0px (rare, maybe list items with one straight edge)
• 3px (rare)
• 5px (common — buttons, cards, lists)
• 10px (occasional — images, divs)
• 14px (rare)
• 50% (carousel dots)

Shadows:

• rgb(136,136,136) 0px 0px 1px 0px — hairline shadow, almost border.
• rgba(0,0,0,0.1) 0px 0px 15px 0px — soft drop shadow.
• rgba(0,0,0,0.2) 1px 1px 4px 0px — subtle depth.

Borders & dividers:
Mix of 1px solid in grays/whites, and bottom borders for list items. No heavy borders — everything is light.

6. Components

6.1 Buttons

White Button .btn--white:
Default: transparent bg, white text, 0px top/bottom padding, 36px sides, 5px radius, 2px white border.
Hover: transparent bg, blue text (#1579dd), box-shadow glow (rgba(0,225,24,0.1) 0px 0px 0px 5px), black border, scale(1.05).
Active: black text, glow radius 7.5px, opacity 0.85, no border.
Focus: focus ring, black text, glow.

Flag Selector .iti__selected-flag:
Default: light overlay bg, white text, 0px radius, minimal padding. Hover: transparent.

6.2 Links

Four styles:

1. Blue (#0000ee) underlined — hover to lighter blue (#1579dd).
2. White underlined — hover to blue.
3. Black no underline — hover to blue underline.
4. Green (#00e118) underlined — hover to blue.

6.3 Forms

Text Inputs:

• Default: white bg, black text, 2px inset border (#767676), no radius, tiny padding.
• Focus: no outline, white border, green glow.

Transparent Inputs:

• Default: transparent bg, white text, no border, no radius, 10px vertical padding.
• Focus: black text, white border, green glow.

Selects:
Same as transparent input, focus to black text + white border + green glow.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-light-gray: #b9b9b9;
  --color-medium-gray: #999999;
  --color-link-blue: #0000ee;
  --color-ultra-light-gray: #ebebeb;
  --color-text-gradient-start: #17e23b;
  --color-text-gradient-end: #1ffbff;
  --color-admin-darker-20: #005a87;
  --color-bound-block: #7a00df;
  --color-admin-theme: #007cba;
  --color-dark-section-gradient: linear-gradient(300.49deg,#00e118 16.32%,#00700c 42.36%,#000 78.07%);
  --color-white: #ffffff;
  --color-text: #59595a;
  --color-black: #000000;
  --color-text-grey: #595959;
  --color-ultra-light-grey-bg: #f5f5f5;
  --color-light-green-bg: #f0fff2;
  --color-admin-darker-10: #006ba1;
  --color-primary: #00e118;

  /* Typography */
  --font-family-base: 'Noto Sans', sans-serif;
  --font-size-h1-xl: 48px;
  --font-size-h1-lg: 36px;
  --font-size-h1-md: 32px;
  --font-size-lg: 24px;
  --font-size-md: 16px;
  --font-size-sm: 14px;
  --font-size-xs: 12px;

  /* Spacing */
  --space-1: 1px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-104: 104px;

  /* Radius */
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-hairline: rgb(136, 136, 136) 0px 0px 1px 0px;
  --shadow-soft: rgba(0, 0, 0, 0.1) 0px 0px 15px 0px;
  --shadow-subtle: rgba(0, 0, 0, 0.2) 1px 1px 4px 0px;
}

8. AI Coding Assistant Prompt

# Edna Design System Specification

You are an Edna design expert. Build UIs matching their visual language exactly.

## Brand Context
Edna’s design philosophy: minimalistic tech interface with high-energy green accents. One sans-serif font (Noto Sans) across all elements. Consistent 8px spacing grid. Depth is subtle — small shadows or glows for focus states. Color palette is tightly controlled.

## Color Palette
- Primary Green: #00e118 — CTAs, highlights, gradients
- Light Gray: #b9b9b9 — borders, dividers
- Medium Gray: #999999 — secondary text
- Link Blue: #0000ee — default link color
- Ultra Light Gray: #ebebeb — backgrounds
- Text Gradient Start: #17e23b — gradient text start
- Text Gradient End: #1ffbff — gradient text end
- Text Gray: #59595a — body text
- Black: #000000 — text on light BG, backgrounds
- White: #ffffff — text on dark BG, backgrounds
- Light Green BG: #f0fff2 — success background
- Ultra Light Grey BG: #f5f5f5 — section backgrounds

## Typography
Font: "Noto Sans", sans-serif (Google Fonts, variable)
Sizes/weights:
| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 XL | 48px | 700 | 1.20 | Main page titles |
| H1 LG | 36px | 700 | 1.20 | Section headings |
| H1 MD | 32px | 700 | 1.60 | Subsection headings |
| Link LG | 24px | 500 | 1.60 | Navigation |
| Body | 16px | 400 | 1.60 | Paragraphs |
| Button | 16px | 700 | 1.20 | Primary buttons |
| Caption | 14px | 400/500 | 1.60 | Labels |
| Fine Print | 12px | 500 | 1.20 | Disclaimers |

## Spacing & Grid
Base: 8px grid
Values: 1, 3, 4, 5, 8, 10, 15, 16, 20, 24, 32, 48, 64, 96, 104px
Use: 8px for tight gaps, 16px for padding, 24px/32px for section spacing, 48px+ for hero spacing.

## Border Radius
- none: 0 (tables, inputs)
- sm: 3px
- md: 5px (buttons, cards)
- lg: 10px (images, divs)
- xl: 14px
- full: 50% (carousel dots)

## Shadows & Depth
- Hairline: rgb(136,136,136) 0px 0px 1px 0px
- Soft: rgba(0,0,0,0.1) 0px 0px 15px 0px
- Subtle: rgba(0,0,0,0.2) 1px 1px 4px 0px

## Component Specifications

### Primary Button (.btn--white)
Default:
- background: transparent
- color: #ffffff
- padding: 0 36px
- radius: 5px
- border: 2px solid #ffffff
Hover:
- color: #1579dd
- box-shadow: rgba(0,225,24,0.1) 0px 0px 0px 5px
- border: solid #000
- transform: scale(1.05)
Active:
- color: #000
- box-shadow: rgba(0,225,24,0.1) 0px 0px 0px 7.5px
- opacity: 0.85
Focus:
- outline: auto 3px
- color: #000
- box-shadow: rgba(0,225,24,0.1) 0px 0px 0px 7.5px

### Link Styles
1. Blue underlined (`#0000ee`), hover `#1579dd`
2. White underlined, hover blue
3. Black no underline, hover blue underline
4. Green underlined (`#00e118`), hover blue

### Input Field (white bg)
Default:
- background: #fff
- color: #000
- border: 2px inset #767676
- radius: 0
- padding: 1px 2px
Focus:
- border-color: #fff
- box-shadow: rgba(0,225,24,0.1) 0px 0px 0px 7.5px

### Card
- radius: 5px
- padding: multiples of 8px
- shadow: --shadow-soft

## Layout & Responsive Rules
Breakpoints:
- 500px, 600px (small devices)
- 767px, 781px–783px (tablet range)
- 1024px (desktop)
- 1199px/1200px (wide desktop)

## Interaction Rules
- Transitions: 150ms ease for hover/focus changes
- Focus indicators: visible outlines or glow
- Hover scale: max 1.05 for buttons

## DO List
- Use ONLY colors from palette
- Maintain 8px grid
- Use Noto Sans for all text
- Keep button radius at 5px
- Use green only for primary actions
- Apply subtle shadows for depth

## DON'T List
- Don't introduce new colors
- Don't mix sharp and rounded corners
- Don't use heavy shadows
- Don't overuse gradients — reserve for hero/text accents
- Don't remove focus indicators

## Code Examples

### Primary Button
```css
.btn--white {
  background: transparent;
  color: #fff;
  padding: 0 36px;
  border-radius: 5px;
  border: 2px solid #fff;
  font-weight: 700;
  font-size: 16px;
  transition: all 150ms ease;
}
.btn--white:hover {
  color: #1579dd;
  box-shadow: rgba(0,225,24,0.1) 0 0 0 5px;
  transform: scale(1.05);
}
.btn--white:focus {
  outline: auto 3px;
  color: #000;
  box-shadow: rgba(0,225,24,0.1) 0 0 0 7.5px;
}
```

### Input Field
```css
.input-text {
  background: #fff;
  color: #000;
  border: 2px inset #767676;
  padding: 1px 2px;
  border-radius: 0;
}
.input-text:focus {
  border-color: #fff;
  box-shadow: rgba(0,225,24,0.1) 0 0 0 7.5px;
  outline: none;
}
```

### Card
```css
.card {
  background: #fff;
  border-radius: 5px;
  padding: 24px;
  box-shadow: rgba(0,0,0,0.1) 0 0 15px 0;
}
```

9. Summary

TL;DR: Edna’s design system is a disciplined, minimal tech aesthetic with neon green as the hero color, one workhorse font (Noto Sans), and an 8px grid keeping everything aligned. Depth is subtle, corners are modestly rounded, and the palette is tightly controlled.

Brand Keywords: minimalist-tech, neon-accent, grid-disciplined, high-contrast