# Sentilink Design System

> High-contrast precision engineering for fraud prevention, utilizing a clinical white canvas punctuated by aggressive red signals and deep navy structural elements.

**Source:** https://sentilink.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Sentilink employs a "high-signal" monochrome system where a stark white background (`#ffffff`) is organized by deep navy (`#0e172e`) and charcoal (`#222021`) typography. The brand's primary energy comes from a high-saturation red (`#e71b3d`), used exclusively for critical actions and brand-mark accents. Typography is a sophisticated pairing of **PP Mori** for display—bringing a modern, geometric precision—and **Inter** for functional body and UI text. Layouts are defined by generous vertical spacing (up to 160px) and a strict adherence to sharp corners (`0px`), with rounded elements reserved only for specific card and pill-button patterns.

## Signature DNA
1. **The Red Signal** (The use of `#e71b3d` as a high-contrast disruptor against a clinical white and navy base, signifying urgency and precision across all pages).
2. **Geometric Display** (PP Mori at weight 500 used for massive display headers up to 66px, creating a technical yet approachable "expert" aesthetic).
3. **Structural Density** (Alternating full-width bands of white, navy, and muted sage `#eff2ea` to separate product narratives without using traditional borders).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Primary page background and card surfaces | 46 | 1.0 | Computed Style |
| `{color.ink.primary}` | `#222021` | Primary body text and dark surface backgrounds | 103 | 0.8 | Computed Style |
| `{color.ink.deep}` | `#000000` | High-contrast headings and button text | 31 | 0.8 | Computed Style |
| `{color.ink.muted}` | `#958d92` | Secondary text and metadata | 14 | 0.8 | Computed Style |
| `{color.surface.soft}` | `#eff2ea` | Subtle section backgrounds (sage-tinted) | 8 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#e71b3d` | Primary CTA background, brand accents, and alerts | 17 | 0.8 | Computed Style |
| `{color.accent.navy}` | `#0e172e` | Hero backgrounds and secondary CTA surfaces | 16 | 0.8 | Computed Style |
| `{color.accent.slate}` | `#4c616d` | Decorative surface backgrounds | 4 | 0.6 | Computed Style |
| `{color.decorative.blue}` | `#007aff` | Swiper theme color (decorative only) | 1 | 1.0 | `--swiper-theme-color` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|---|
| PP Mori | 400, 500 | Display and primary headings | Montserrat | Proprietary |
| Inter | 400, 500, 600, 700 | Body, UI, and subheadings | Inter (Google Fonts) | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|---|
| `{text.display.xl}` | 66px | 75.9px | normal | 500 | Main Hero H1 | `h1.font-heading.text-[33px]` |
| `{text.display.lg}` | 56px | 64.4px | normal | 500 | Section Headers | `p.text-h2.w-1/3` |
| `{text.heading.md}` | 24px | 32.4px | normal | 400 | Sub-section headings | `h3.text-h6` |
| `{text.heading.sm}` | 20px | 30px | normal | 600 | Card titles | `h3.text-xl.font-semibold` |
| `{text.subheading}` | 18px | 27px | normal | 400 | Intro paragraphs | `h6.mb-4.w-full` |
| `{text.body.md}` | 16px | 24px | normal | 400 | Standard body text | `section.bg-white` |
| `{text.body.sm}` | 15px | 22.5px | normal | 400 | Footer/Small text | `div.mb-8.text-[15px]` |
| `{text.caption}` | 12px | 12px | normal | 600 | Labels and badges | `div.w-full.md:w-auto` |

### Principles
1. **Display weight is locked to 500.** PP Mori is never used at heavy weights; its geometric clarity provides authority.
2. **Inter for utility.** All interactive elements, including buttons and navigation, utilize Inter for maximum legibility.
3. **Normal tracking.** Unlike editorial brands, Sentilink does not use negative letter-spacing on display sizes.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xxs}` | 4px | 7 |
| `{space.xs}` | 8px | 5 |
| `{space.sm}` | 12px | 5 |
| `{space.md}` | 16px | 16 |
| `{space.lg}` | 24px | 22 |
| `{space.xl}` | 32px | 19 |
| `{space.section}` | 80px | 8 |
| `{space.hero}` | 160px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Default for sections, inputs, and most buttons | 190 occurrences |
| `{radius.card}` | 16px | Testimonial and blog cards | Card component spec |
| `{radius.pill}` | 9999px | "Get Started" and specific UI buttons | Radii evidence |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.flat}` | none | Standard section transitions | Surface component |
| `{shadow.card}` | `rgba(0, 0, 0, 0.1) 0px 4px 6px -1px` | Floating cards and hover states | Blog/Testimonial cards |

## Components

### Tier 1: Foundational

#### Primary Button (Sharp)
**Role:** Main call to action (e.g., "Get a Demo")
**Pages observed:** https://sentilink.com, https://sentilink.com/about
**Spec:** Background `{color.primary}` (#e71b3d) / Text `{color.foundation.white}` (#ffffff) / Radius `{radius.none}` (0px) / Padding 16px 24px / Typography `{text.caption}` (12px / 600)
**States observed:** Default | Hover: Not captured

#### Primary Button (Pill)
**Role:** Global navigation action ("Get Started")
**Pages observed:** https://sentilink.com, https://sentilink.com/pricing
**Spec:** Background `{color.accent.navy}` (#0e172e) / Text `{color.foundation.white}` (#ffffff) / Radius `{radius.pill}` (9999px) / Padding 10px 20px
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying product benefits or blog posts
**Pages observed:** https://sentilink.com
**Spec:** Background `{color.canvas}` (#ffffff) / Text `{color.ink.primary}` (#222021) / Radius `{radius.card}` (16px) / Padding 32px / Shadow `{shadow.card}`
**States observed:** Default | Hover: Not captured

#### Section Surface (Navy)
**Role:** High-impact transition bands
**Pages observed:** https://sentilink.com
**Spec:** Background `{color.accent.navy}` (#0e172e) / Text `{color.foundation.white}` (#ffffff) / Radius `{radius.none}` (0px) / Padding 80px 0px
**States observed:** Default | Hover: Not captured

### Tier 3: Surface-specific

#### Badge / Tag
**Role:** Content categorization (e.g., "BLOG")
**Pages observed:** https://sentilink.com
**Spec:** Background `{color.primary}` (#e71b3d) / Text `{color.foundation.white}` (#ffffff) / Radius `{radius.none}` (0px) / Padding 4px 16px / Typography 15px
**States observed:** Default | Hover: Not captured

#### Outlined Container
**Role:** Secondary content grouping
**Pages observed:** https://sentilink.com
**Spec:** Background transparent / Border 1px `{color.ink.muted}` (#9e9f9a) / Radius `{radius.none}` (0px) / Padding 28px
**States observed:** Default | Hover: Not captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1280px |
| Section Vertical Padding | 80px - 160px |
| Grid Gutter | 24px - 32px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Display headers scale down; 1-column stack for cards |
| Desktop | 1440px | Multi-column grids (3-up for cards); 160px hero padding |

## Do's
- Use `#e71b3d` only for primary actions and brand emphasis.
- Maintain sharp `0px` corners for all structural containers.
- Pair PP Mori (Display) with Inter (Body) to maintain the "Expert-backed" aesthetic.
- Use generous vertical spacing (`160px`) to separate major product narratives.
- Ensure all text on navy backgrounds is pure `#ffffff`.

## Don'ts
- **Wrong:** Using `#007aff` for buttons. **Right:** Use `#e71b3d`. **Reason:** Blue is a decorative swiper token, not a brand primary.
- Do not use rounded corners on primary section buttons.
- Do not use PP Mori for long-form body text; keep it for headings only.
- Do not use shadows on full-width section bands.
- Do not use `#e71b3d` for body text; it is reserved for signals and headers.

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary: #e71b3d;
  --color-navy: #0e172e;
  --color-canvas: #ffffff;
  --color-ink: #222021;
  --font-display: "PP Mori", sans-serif;
  --font-body: "Inter", sans-serif;
  --radius-card: 16px;
  --radius-none: 0px;
}
```

## Agent prompt examples
- "Create a hero section with a `#ffffff` background, a `66px` PP Mori heading in `#222021`, and a sharp-cornered primary button using `#e71b3d`."
- "Generate a 3-column feature grid using cards with `16px` border radius, `#ffffff` background, and the `{shadow.card}` elevation."
- "Design a footer using a `#ffffff` background, `#222021` text, and `15px` Inter typography for links."

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://sentilink.com | 1440px | 2026-06-06 |
| About | https://sentilink.com/about | 1440px | 2026-06-06 |
| Pricing | https://sentilink.com/pricing | 1440px | 2026-06-06 |