# Telljp Design System

> A structured, service-oriented interface pairing deep teal surfaces with slab-serif authority to anchor community mental health resources.

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

## TL;DR
Telljp utilizes a high-contrast palette of deep teal (`#008080`), primary teal (`#00a79d`), and pure white to establish a professional yet accessible healthcare environment. The typography is dominated by **Roboto Slab**, providing a sturdy, trustworthy foundation for headings and interactive elements, while **Open Sans** handles dense informational body copy. Layouts rely on alternating full-width color bands to separate service categories, using a consistent 4px border radius for interactive components. The system prioritizes legibility and clear action paths through high-contrast button states and a strictly organized informational hierarchy.

## Signature DNA
1. **Slab-Serif Anchoring** (Roboto Slab is used for every major heading and primary CTA, creating a "clinical yet warm" authority across the homepage and about sections.)
2. **Teal Sectioning** (Alternating bands of `#008080` and `#ffffff` create a rhythmic vertical flow that distinguishes "How We Help" from "How You Can Help" modules.)
3. **High-Contrast Utility Bar** (The top navigation utilizes a multi-color utility strip—teal, red, and white—to prioritize urgent actions like "Chat with the Lifeline" and "Exit".)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary page background and card surface | 238 | 1.0 | Computed Style |
| `{color.ink.primary}` | `#333333` | Primary body text for high legibility | 168 | 0.8 | Computed Style |
| `{color.ink.deep}` | `#000000` | Display text and input text | 95 | 1.0 | Computed Style |
| `{color.border.light}` | `#e1e5eb` | Input borders and subtle dividers | 2 | 1.0 | `--givewp-neutral-100` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.brand.primary}` | `#00a79d` | Primary CTA background and brand headers | 24 | 0.8 | Computed Style |
| `{color.brand.deep}` | `#008080` | Section backgrounds and footer surfaces | 11 | 0.8 | Computed Style |
| `{color.brand.vivid}` | `#0ab14b` | Social icons and "Add to LINE" accent | 45 | 0.8 | Computed Style |
| `{color.brand.alt}` | `#833ca3` | Decorative surface background | 4 | 0.6 | Computed Style |

### Semantic
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.error}` | `#cf2e2e` | "Exit" button and urgent alerts | 2 | 0.8 | `--wp--preset--color--vivid-red` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-------------------------|---------|
| **Roboto Slab** | 400, 500, 600, 700 | Headings, Buttons, Labels | N/A (Google Font) | Apache 2.0 |
| **Open Sans** | 300, 400, 500, 600, 700 | Body copy, Navigation, Meta | N/A (Google Font) | Apache 2.0 |
| **-apple-system** | 400, 600 | System UI fallback, Header | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 35px | 35px | normal | 600 | Hero/Slide Headings | `div.elementor-slide-heading` |
| `{type.h2}` | 30px | 45px | normal | 600 | Section Headlines | `h2.elementor-heading-title` |
| `{type.h3}` | 24px | 36px | normal | 600 | Icon Box Titles | `h3.elementor-icon-box-title` |
| `{type.h5}` | 20px | 24px | normal | 500 | Small Headings | `h5` |
| `{type.body.lg}` | 18px | 27px | normal | 300 | Lead Paragraphs | `p` |
| `{type.body}` | 16px | 24px | normal | 400 | Standard Body Copy | `p.elementor-icon-box-description` |
| `{type.button}` | 16px | 16px | normal | 500 | Primary CTA Text | `a.elementor-button` |
| `{type.caption}` | 12px | 15.6px | normal | 400 | Post Dates / Meta | `span.elementor-post-date` |

### Principles
1. **Slab for Structure:** Use Roboto Slab for any text that acts as a structural anchor (headings, buttons, labels).
2. **Sans for Substance:** Use Open Sans for running prose and descriptions to maintain legibility at smaller sizes.
3. **Tight Display Leading:** Large headings (`30px+`) use a 1.5x line-height ratio, while hero display text uses a 1:1 ratio for maximum impact.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 35 |
| `{space.sm}` | 12px | 10 |
| `{space.md}` | 16px | 16 |
| `{space.lg}` | 24px | 10 |
| `{space.xl}` | 50px | 15 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers, cards | 470 occurrences |
| `{radius.sm}` | 2px | Form buttons | `a.elementor-button` |
| `{radius.md}` | 4px | Primary action buttons | `Rounded Button` component |
| `{radius.full}` | 10% | Social media / Icon cards | `Card` component |

## Components
### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and secondary call-to-action.
**Pages observed:** Homepage, About.
**Spec:** Background `{color.brand.primary}` (#00a79d) | Text `{color.canvas}` (#ffffff) | Radius 4px | Padding 8px 10px | Typography `{type.body}`.
**States observed:** Default | Hover: Captured (lightens to `#6ca8a4`).

#### Text Input
**Role:** Search and newsletter sign-up fields.
**Pages observed:** Homepage, About.
**Spec:** Background `{color.canvas}` (#ffffff) | Text `{color.ink.deep}` (#000000) | Border 1px `{color.border.light}` (#e1e5eb) | Radius 3px | Padding 9px 15px.
**States observed:** Default | Focus: Captured.

### Tier 2: Patterns

#### Service Card
**Role:** Highlighting specific help categories (Lifeline, Clinic, etc.).
**Pages observed:** Homepage.
**Spec:** Background `{color.brand.deep}` (#008080) | Text `{color.canvas}` (#ffffff) | Radius 0px | Padding 10px | Typography `{type.h3}`.
**States observed:** Default.

#### Social Card
**Role:** Footer social media links.
**Pages observed:** Homepage, About.
**Spec:** Background `#3b5992` (Facebook) or `#000000` (X) | Radius 10% | Icon Size 14px.
**States observed:** Default.

### Tier 3: Surface-specific

#### Emergency Utility Bar
**Role:** Immediate access to crisis resources.
**Pages observed:** Global Header.
**Spec:** Background `{color.brand.primary}` (#00a79d) for Chat, `{color.error}` (#cf2e2e) for Exit | Text `{color.canvas}` (#ffffff) | Radius 4px.
**States observed:** Default.

#### Information Tab
**Role:** Location-specific contact details.
**Pages observed:** About.
**Spec:** Background `{color.canvas}` (#ffffff) | Border-top 1px `#e1e5eb` | Text `{color.ink.primary}` (#333333).
**States observed:** Active: Teal underline.

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1140px |
| Section Padding | 50px (vertical) |
| Column Gap | 20px |

## Do's
- Use **Roboto Slab** for all section headings to maintain brand authority.
- Apply `#008080` (Deep Teal) for full-width background bands to denote primary service areas.
- Ensure all primary buttons use the `{radius.md}` (4px) corner treatment.
- Maintain high contrast by using `#ffffff` text on all teal backgrounds.
- Use `#333333` for body copy on white backgrounds to reduce eye strain.

## Don'ts
- Do not use `#0ab14b` (Vivid Green) for primary action buttons; this is reserved for social/LINE accents.
- Do not apply border-radius to section containers; the brand uses a "sharp" edge for layout blocks.
- Do not use Roboto Slab for long-form body paragraphs.
- Avoid using `#00a79d` (Primary Teal) as a text color on white backgrounds for small body copy (contrast warning).

## Quick start

```css
/* CSS Variables */
:root {
  --color-teal-primary: #00a79d;
  --color-teal-deep: #008080;
  --color-white: #ffffff;
  --color-ink: #333333;
  --font-heading: 'Roboto Slab', serif;
  --font-body: 'Open Sans', sans-serif;
  --radius-button: 4px;
}
```

## Agent prompt examples
- "Create a hero section with a white background, a 30px Roboto Slab heading in #000000, and a primary pill button using #00a79d."
- "Design a three-column grid of service cards with #008080 backgrounds, white icons, and 24px Roboto Slab titles."
- "Generate a footer using a #008080 background with white Open Sans text and social icons in 10% rounded cards."

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://telljp.com | Desktop 1440 | 2026-06-06 |
| About Us | https://telljp.com/about | Desktop 1440 | 2026-06-06 |