# Contextine Design System

> Airy, enterprise-grade clarity defined by Nunito's rounded geometry and a high-contrast teal-on-white canvas.

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

## TL;DR
Contextine utilizes a clean, high-contrast monochrome foundation punctuated by a primary teal accent (`#40c1ac`). The system is built on the **Nunito** typeface, using its rounded terminals to soften a structured, corporate layout. Surfaces are predominantly pure white (`#ffffff`), while depth is achieved through a single, aggressive shadow tier (`rgba(0, 0, 0, 0.15)`) rather than complex layering. Components favor generous internal padding (60px) and a mix of sharp 0px corners for sections and soft 10px-50px radii for interactive elements and panels.

## Signature DNA
1. **Rounded Corporate Typography** (Nunito at weight 400 for display and 700 for headings provides a friendly but professional authority across all pages.)
2. **Teal High-Contrast Accents** (The use of `#40c1ac` for links and primary brand signals against a stark `#ffffff` background creates immediate focal points.)
3. **Deep Floating Elevation** (Large-scale cards use a heavy 40px blur shadow to lift content off the flat canvas, creating a distinct "floating" information architecture.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Primary surface, card background, modal background | 10 | 1.0 | `css_variable:--wp--preset--color--white` |
| `{color.black}` | `#000000` | Primary text, overlay backgrounds | 20 | 1.0 | `css_variable:--wp--preset--color--black` |
| `{color.gray.600}` | `#666666` | Secondary body text, article meta, borders | 96 | 0.8 | `computed_style` |
| `{color.gray.400}` | `#797a8a` | Deemphasized text, captions | 3 | 0.6 | `computed_style` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#40c1ac` | Brand signal, active links, primary icons | 12 | 0.8 | `computed_style` |
| `{color.secondary}` | `#00a4e8` | Secondary brand accent (decorative_only) | 10 | 0.6 | `computed_style` |
| `{color.orange}` | `#ff6900` | Primary CTA background (Free Demo) | 1 | 0.5 | `computed_style` |

### Semantic
| Token | Hex | Role | Source |
|---|---|---|---|
| `{color.error}` | `#cf2e2e` | Validation errors | `--wp--preset--color--vivid-red` |
| `{color.success}` | `#00d084` | Success states | `--wp--preset--color--vivid-green-cyan` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Nunito | 300, 400, 700 | All roles: Display, Heading, Body | Nunito (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display.xl}` | 46px | 55.2px | normal | 400 | Hero H1 | `h1` |
| `{text.display.lg}` | 46px | 46px | normal | 400 | Section H2 | `h2` |
| `{text.heading.md}` | 30px | 45px | normal | 400 | Sub-section H4 | `h4:nth-of-type(1)` |
| `{text.heading.sm}` | 24px | 35px | normal | 700 | Nav links / Titles | `a` |
| `{text.subheading}` | 18px | 18px | normal | 700 | Component labels | `h3` |
| `{text.body.lg}` | 18px | 28px | normal | 300 | Lead paragraphs | `p` |
| `{text.body.md}` | 16px | 24px | normal | 400 | Default article text | `article#post-2` |
| `{text.caption}` | 16px | 16px | normal | 300 | Meta data / Time | `time` |

### Principles
1. **Rounded Terminals.** All weights of Nunito must be used to maintain the brand's approachable enterprise feel.
2. **Lightweight Body.** Paragraphs frequently use weight 300 for a cleaner, more "airy" reading experience.
3. **Tight Display.** Large headers (46px) maintain a 1.2x line-height ratio to keep blocks of text cohesive.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.5}` | 20px | 31 |
| `{space.6}` | 24px | 40 |
| `{space.15}` | 60px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Page sections, global containers | 129 occurrences |
| `{radius.md}` | 10px | Content cards, form controls | `observed_once: Card` |
| `{radius.full}` | 50px | Large panels, decorative containers | `radii: panel` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.deep}` | `rgba(0, 0, 0, 0.15) 10px 5px 40px 0px` | Feature cards, testimonial blocks | `shadows[0]` |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action (e.g., Free Demo)
**Pages observed:** `https://contextine.com`, `https://contextine.com/about`
**Spec:** Background `#ff6900` / Text `#ffffff` / Radius `4px` / Typography `Nunito 700`
**States observed:** Default: captured | Hover: not captured

#### Text Link
**Role:** Inline navigation and "Learn More" actions
**Pages observed:** `https://contextine.com`
**Spec:** Text `#40c1ac` / Typography `Nunito 400` / Decoration `none`
**States observed:** Default: captured | Hover: captured (underline)

### Tier 2: Patterns
#### Feature Card
**Role:** Displaying service USPs and industry categories
**Pages observed:** `https://contextine.com`
**Spec:** Background `#ffffff` / Text `#666666` / Radius `10px` / Padding `60px` / Shadow `{shadow.deep}`
**States observed:** Default: captured

#### Testimonial Block
**Role:** Customer social proof
**Pages observed:** `https://contextine.com`
**Spec:** Background `#ffffff` / Text `#000000` / Radius `10px` / Shadow `{shadow.deep}` / Border-bottom `5px solid #40c1ac` (observed in screenshots)

### Tier 3: Surface-specific
#### Global Header
**Role:** Site-wide navigation
**Pages observed:** `https://contextine.com`, `https://contextine.com/about`
**Spec:** Background `#ffffff` / Height `auto` / Padding `20px 0` / Text `#000000`

#### Footer
**Role:** Site-wide information and subscription
**Pages observed:** `https://contextine.com`
**Spec:** Background `#ffffff` / Text `#666666` / Border-top `1px solid #f0f0f0`

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px |
| Section Padding | 60px (Vertical) |
| Grid | 3-column (Features), 1-column (Mobile) |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Desktop | 1440px | Multi-column layouts, 60px padding |
| Mobile | 390px | Single-column stack, reduced padding, hamburger menu |

## Imagery & decoration
Contextine uses high-quality professional photography of people in tech/office environments. A recurring decorative motif is the **Orange Dot Grid**, used as a background element to add texture to white space without introducing heavy lines.

## Do's
- Use **Nunito 300** for long-form body text to maintain the "airy" brand feel.
- Apply the `{shadow.deep}` only to white cards sitting on white backgrounds.
- Use `#40c1ac` (Teal) for all primary interactive text and icons.
- Maintain a minimum of **60px padding** for major content sections.
- Keep background surfaces pure `#ffffff` unless using a light gray (`#f7f8f9`) for section alternating.

## Don'ts
- **Wrong:** Using a sharp 0px radius for content cards. **Right:** Use `10px`. **Reason:** Sharp corners are reserved for full-width layout sections only.
- **Wrong:** Setting display headers in weight 700. **Right:** Use `400`. **Reason:** The brand signature relies on the clean, lighter geometry of Nunito for large titles.
- **Wrong:** Using `#00a4e8` (Blue) for primary buttons. **Right:** Use `#ff6900` (Orange). **Reason:** Blue is a secondary decorative accent; Orange is the reserved CTA signal.

## Similar brands
- **Zendesk** (Rounded typography, clean white space)
- **Intercom** (High-contrast accents, friendly enterprise feel)
- **Freshworks** (Teal-centric palette, soft UI elements)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #40c1ac;
  --color-cta: #ff6900;
  --color-surface: #ffffff;
  --color-text: #000000;
  --color-text-muted: #666666;
  --font-main: 'Nunito', sans-serif;
  --shadow-deep: 10px 5px 40px 0px rgba(0, 0, 0, 0.15);
  --radius-card: 10px;
}
```

### Tailwind v4 @theme
```css
@theme {
  --color-primary: #40c1ac;
  --color-cta: #ff6900;
  --font-nunito: "Nunito", sans-serif;
  --shadow-deep: 10px 5px 40px 0px rgba(0, 0, 0, 0.15);
  --radius-card: 10px;
}
```

## Agent prompt examples
- "Generate a feature section with three cards using a 10px border radius, 60px padding, and the #40c1ac teal for icons."
- "Create a hero component with a 46px Nunito weight 400 heading and a primary button in #ff6900."
- "Design a testimonial slider where the active card has a 10px 5px 40px shadow and a 5px teal bottom border."

## Known gaps
- Hover and Active states for the primary orange CTA were not explicitly captured in the CSS tokens.
- The exact transition timing for the "Learn More" link underline was not recorded.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | `https://contextine.com` | Desktop 1440px | 2026-06-06 |
| About Page | `https://contextine.com/about` | Desktop 1440px | 2026-06-06 |
| Mobile Home | `https://contextine.com` | Mobile 390px | 2026-06-06 |