# Ethosapp Design System

> High-contrast research utility pairing Poppins geometric headings with an energetic safety-orange accent on a clinical white canvas.

**Source:** [https://ethosapp.com](https://ethosapp.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Ethosapp utilizes a high-clarity, professional interface dominated by a clean white background (#ffffff) and sharp near-black text (#1c1c1c). The primary brand energy is delivered through a vibrant orange (#f9a226) used for high-priority CTAs and interactive highlights, supported by a technical sky blue (#0090cf) for secondary actions and navigation. Typography is strictly hierarchical, using Poppins for bold, geometric display moments and Inter for high-legibility UI and body content. The system relies on generous vertical spacing (up to 136px) and subtle container shadows to organize complex research data into digestible, approachable sections.

## Signature DNA
1. **The Orange Anchor** (Vibrant #f9a226 is the exclusive color for primary conversion points, creating a singular path for user action against the monochrome base.)
2. **Geometric Hierarchy** (Poppins 700-weight headings at 50px provide a structural "spine" to the page, contrasting with the neutral Inter body text.)
3. **Floating Data Surfaces** (Cards and forms use 8px-12px radii and deep, soft shadows like `rgba(37, 55, 63, 0.16) 0px 60px 73px` to lift interactive elements off the flat canvas.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.white}` | `#ffffff` | Page floor, button text, card background | 78 | 1 | `--white` |
| `{colors.ink}` | `#1c1c1c` | Primary text, heavy borders | 126 | 0.8 | Computed |
| `{colors.charcoal}` | `#333333` | Secondary text, button text | 21 | 0.8 | Computed |
| `{colors.light-gray}` | `#f8f8f8` | Subtle section backgrounds | 1 | 1 | `--light` |
| `{colors.border-soft}` | `#e0e0e0` | Form and divider lines | 15 | 0.8 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.secondary}` | `#f9a226` | Primary CTAs, active highlights | 22 | 1 | `--secondary-color` |
| `{colors.primary}` | `#0090cf` | Secondary buttons, links, nav | 26 | 1 | `--primary-color` |
| `{colors.error}` | `#eb5757` | Destructive text/alerts | 12 | 0.8 | Computed |
| `{colors.blue-deep}` | `#005daa` | Pricing emphasis, dark links | 12 | 0.8 | Computed |
| `{colors.blue-tint}` | `#f6fdff` | Decorative background wash | 3 | 0.6 | Computed |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|---|
| `__Poppins_1562c7` | 300, 400, 500, 600, 700 | Headings, Display | Poppins | Google Fonts |
| `__Inter_20951f` | 400, 500, 600, 700 | Body, UI, Buttons | Inter | Google Fonts |
| `__Roboto_979022` | 500, 600 | Buttons (v3) | Roboto | Google Fonts |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|---|
| `{type.display}` | 50px | 64px | normal | 700 | Hero H1 | `h1` |
| `{type.h2}` | 32px | 43px | normal | 700 | Section Headings | `h2` |
| `{type.h4}` | 22px | 34px | normal | 600 | Sub-section headings | `h4` |
| `{type.h4-alt}` | 20px | 24px | normal | 600 | FAQ titles | `h3.faq-title` |
| `{type.body-lg}` | 18px | 27px | normal | 400 | Primary list items | `li` |
| `{type.button}` | 18px | 27px | normal | 600 | Primary CTA text | `a.btn-orange` |
| `{type.body-md}` | 16px | 20px | normal | 400 | Tab links, UI labels | `a.tabs-link` |
| `{type.body-sm}` | 14px | 20px | normal | 400 | Footer, form help | `section.section-banner` |
| `{type.caption}` | 12px | 17px | normal | 500 | Annotations | `p` |

### Principles
- **Geometric Display:** All major headings use Poppins with a 700 weight to establish a modern, tech-forward tone.
- **Tight UI Tracking:** Letter spacing is kept at `normal` for almost all scales, except for specific `0.8px` tracking on Poppins 14px labels.
- **High Contrast Body:** Body text leverages Inter at 18px for maximum readability in research-heavy contexts.

## Spacing
**Base unit:** 8px (derived from common 8, 16, 24, 32, 40, 48 intervals)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 31 |
| `{space.sm}` | 16px | 15 |
| `{space.md}` | 24px | 4 |
| `{space.lg}` | 32px | 3 |
| `{space.xl}` | 40px | 11 |
| `{space.section}` | 136px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Sharp containers | 214 occurrences |
| `{radius.sm}` | 8px | Buttons, Inputs, Cards | Rounded Button, Text Input |
| `{radius.md}` | 12px | Surface containers | Surface component |
| `{radius.full}` | 70px | Pill-shaped badges | Surface (observed once) |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.deep}` | `rgba(37, 55, 63, 0.16) 0px 60px 73px 0px` | Hero feature cards | Pricing/Home |
| `{shadow.soft}` | `rgba(0, 0, 0, 0.05) 0px 20px 15px 0px` | Standard content cards | Home |
| `{shadow.glow}` | `rgba(0, 0, 0, 0.07) 0px 0px 48px 0px` | Elevated white surfaces | Home |

## Components

### Tier 1: Foundational

#### Text Input
**Role:** Data entry in contact and lead forms.
**Pages observed:** Home, Pricing.
**Spec:** Background `#ffffff` / Text `#000000` / Border `1px #e0e0e0` / Radius `8px` / Padding `8px 12px` / Typography `14px Inter`.
**States observed:** Default | Focus: captured.

#### Rounded Button (Primary)
**Role:** Main conversion action (Submit, Download).
**Pages observed:** Home, Pricing.
**Spec:** Background `#f9a226` / Text `#ffffff` / Border `1px #f9a226` / Radius `8px` / Padding `9.2px 12px` / Typography `18px Roboto`.
**States observed:** Default | Hover: captured.

### Tier 2: Patterns

#### Surface (Container)
**Role:** Content grouping with internal padding.
**Pages observed:** Home, Pricing.
**Spec:** Background `transparent` / Text `#1c1c1c` / Border `0px` / Radius `12px` / Padding `38.4px 48px 32px`.
**States observed:** Default: captured.

#### FAQ Item
**Role:** Accordion-style information disclosure.
**Pages observed:** Pricing.
**Spec:** Background `transparent` / Text `#1c1c1c` / Border `1px #0090cf` (on active) / Radius `0px` / Typography `16px Inter`.
**States observed:** Default | Active: captured.

### Tier 3: Surface-specific

#### Pricing Card (Elite)
**Role:** Featured plan highlight.
**Pages observed:** Pricing.
**Spec:** Background `rgba(53, 161, 219, 0.3)` / Text `#005daa` / Border `1px rgba(6, 96, 171, 0.4)` / Radius `10px` / Shadow `none`.
**States observed:** Default: captured.

#### Feature Card (Shadowed)
**Role:** Benefit explanation with visual lift.
**Pages observed:** Home.
**Spec:** Background `#ffffff` / Text `#1c1c1c` / Radius `8px` / Shadow `rgba(0, 0, 0, 0.05) 0px 20px 15px 0px`.
**States observed:** Default: captured.

## Layout
| Property | Value |
|---|---|
| Max-width | 1200px (approx) |
| Section Gap | 136px |
| Column Grid | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; H1 scales to ~36px; padding reduces to 16px. |
| Desktop | 1440px | Full horizontal nav; 136px section spacing; multi-column card grids. |

## Do's
- Use `#f9a226` exclusively for the primary "Submit" or "Download" actions.
- Pair Poppins 700 with Inter 400 for a clear distinction between display and utility.
- Apply `{radius.sm}` (8px) to all interactive controls (buttons and inputs).
- Use `{shadow.soft}` to distinguish cards from the flat white background.
- Maintain a minimum of 40px padding within content surfaces.

## Don'ts
- Do not use `#0090cf` for primary conversion buttons; it is reserved for secondary links and navigation.
- Do not use Poppins for long-form body text; use Inter.
- Avoid sharp corners (`0px` radius) on interactive UI elements.
- **Wrong:** Using `#f9a226` for background text links. **Right:** Use `#0090cf` for links. **Reason:** Orange is reserved for high-voltage button actions.

## Similar brands
- SurveyMonkey (Utility-first research tool)
- Zendesk (Clean, high-contrast UI with specific accent colors)
- Typeform (Focus on typography and clean input surfaces)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --ethos-primary: #0090cf;
  --ethos-secondary: #f9a226;
  --ethos-ink: #1c1c1c;
  --ethos-white: #ffffff;
  --ethos-radius-sm: 8px;
  --ethos-shadow-soft: 0px 20px 15px 0px rgba(0, 0, 0, 0.05);
}
```

## Agent prompt examples
- "Generate a primary CTA button using Ethosapp's orange #f9a226, 8px border radius, and 18px Roboto 600 text."
- "Create a pricing card with a white background, 8px radius, and the Ethosapp soft shadow `rgba(0, 0, 0, 0.05) 0px 20px 15px`."
- "Design a hero section with a Poppins 700 heading at 50px and a secondary action link in Ethosapp blue #0090cf."

## Known gaps
- Hover states for secondary buttons were not explicitly detailed in the rendered CSS tokens.
- Tablet-specific breakpoints (e.g., 768px) were not captured in the source viewports.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Home | `https://ethosapp.com` | 1440px | 2026-06-06 |
| Pricing | `https://ethosapp.com/pricing` | 1440px | 2026-06-06 |
| Home (Mobile) | `https://ethosapp.com` | 390px | 2026-06-06 |