<!-- Generated by ExtractVibe — https://extractvibe.com/brand/ardena.com -->
<!-- Extracted: 2026-10-06T06:25:17.671Z | Schema: v1 | Quality: 65/100 -->
---
version: alpha
name: "Ardena, Global CDMO, We Know Development"
description: "Ardena, Global CDMO, We Know Development presents a professional web presence."
colors:
  primary: "#1863dc"
  tertiary: "#7a00df"
  neutral: "#008000"
  surface: "#fff8fa"
  on-surface: "#222222"
  on-surface-secondary: "#008000"
  border: "#dddddd"
  link: "#212121"
  surface-dark: "#ca2c68"
typography:
  display-lg:
    fontFamily: "Ardena"
    fontSize: "57.6px"
    fontWeight: "700"
    lineHeight: "60.48px"
  headline-lg:
    fontFamily: "Ardena"
    fontSize: "39px"
    fontWeight: "700"
    lineHeight: "46.8px"
  headline-md:
    fontFamily: "Ardena"
    fontSize: "18px"
    fontWeight: "600"
    lineHeight: "28px"
  headline-sm:
    fontFamily: "Ardena"
    fontSize: "16px"
    fontWeight: "600"
    lineHeight: "24px"
    letterSpacing: "0.8px"
  body-md:
    fontFamily: "Ardena"
    fontSize: "18px"
    fontWeight: "400"
    lineHeight: "30.6px"
rounded:
  sm: "2px"
  lg: "50px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-ghost:
    textColor: "#222222"
    rounded: "0px"
    padding: "0px"
    fontSize: "18px"
    fontWeight: "400"
    borderColor: "#222222"
  button-outline:
    textColor: "#1863dc"
    rounded: "2px"
    padding: "8px 27px"
    fontSize: "14px"
    fontWeight: "500"
    borderColor: "#1863dc"
    borderWidth: "2px"
  button-primary:
    backgroundColor: "#1863dc"
    textColor: "#ffffff"
    rounded: "2px"
    padding: "8px 27px"
    fontSize: "14px"
    fontWeight: "500"
    borderColor: "#1863dc"
    borderWidth: "2px"
---

# Ardena, Global CDMO, We Know Development — Design System

## Overview

Ardena, Global CDMO, We Know Development presents a professional web presence.

Key characteristics: professional.

**Key characteristics:**

- Vibe — professional
- Design era — contemporary
- Emotional tone — professional
- Target audience — general audience
- Visual energy — 5/10 (moderate)

## Colors

The palette draws on 36 distinct colors observed across the site, organized into semantic roles below.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#1863dc` | Royal Blue |
| accent / tertiary | `#7a00df` | Dark Violet |
| surface | `#fff8fa` | Snow |
| background | `#ffffff` | White |
| text | `#222222` | Near-Black |
| secondary text | `#008000` | Green |
| border | `#dddddd` | Gainsboro |
| link | `#212121` | Near-Black |
| muted | `#008000` | Green |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| surface | `#ca2c68` | Crimson |

## Typography

Type is set in Ardena, Ardena, with hierarchy expressed through size and weight contrast rather than family-switching.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Ardena | body | self-hosted | 400, 500, 600, 700 |
| Ardena | heading | self-hosted | 600, 700 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Ardena | 57.6px | 700 | 60.48px | — |
| Heading 2 | Ardena | 39px | 700 | 46.8px | — |
| Heading 3 | Ardena | 18px | 600 | 28px | — |
| Heading 4 | Ardena | 16px | 600 | 24px | 0.8px |
| Body | Ardena | 18px | 400 | 30.6px | — |

### Conventions

- Heading case — title-case
- Body line-height — 30.6px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| modal | `rgba(0, 0, 0, 0.3) 0px 32px 68px 0px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.171839 0.0296637 -0.00166827 / 0.1) 0px 25px 50px -12px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.171839 0.0296637 -0.00166827 / 0.1) 0px 20px 25px -5px, oklab(0.171839 0.0296637 -0.00166827 / 0.1) 0px 8px 10px -6px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` |

### Gradients

- `linear-gradient(135deg, rgb(145, 1, 75) 0%, rgb(202, 44, 104) 40%, rgb(254, 79, 3) 65%, rgb(255, 145, 77) 80%, rgb(254, 206, 0) 100%)`
- `linear-gradient(to top, oklab(0.171839 0.0296637 -0.00166827 / 0.8) 0%, oklab(0.171839 0.0296637 -0.00166827 / 0.2) 50%, rgba(0, 0, 0, 0) 100%)`

## Shapes

Border-radius scale:

- `sm` — 2px
- `lg` — 50px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Ghost**

- Text — `#222222`
- Radius — `0px`
- Padding — `0px`
- Font size — `18px`
- Font weight — `400`
- Border — ` solid #222222`

**Outline**

- Text — `#1863dc`
- Radius — `2px`
- Padding — `8px 27px`
- Font size — `14px`
- Font weight — `500`
- Border — `2px solid #1863dc`
- Sample copy — "Customise"

**Primary**

- Background — `#1863dc`
- Text — `#ffffff`
- Radius — `2px`
- Padding — `8px 27px`
- Font size — `14px`
- Font weight — `500`
- Border — `2px solid #1863dc`
- Sample copy — "Reject All"

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 5/10 | balanced |
| Playful ↔ Serious | 5/10 | balanced |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 3/10 | respectful |
| Technical ↔ Accessible | 5/10 | balanced |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/ardena.com) | 100% |
| favicon | — | png | [link](brands/ardena.com/logo-0.png) | 95% |
| favicon | — | png | [link](brands/ardena.com/logo-1.png) | 95% |
| favicon | — | png | [link](brands/ardena.com/logo-2.png) | 95% |
| primary | color | png | [link](brands/ardena.com/logo-3.png) | 85% |
| primary | color | svg | [link](brands/ardena.com/logo-4.svg) | 85% |
| primary | — | — | [link](#) | 85% |
| secondary | — | — | [link](#) | 85% |

## Sources

- Official brand guidelines — https://ardena.com/design
- Live brand page — https://extractvibe.com/brand/ardena.com
- Raw JSON — https://extractvibe.com/api/brand/ardena.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/ardena.com/design.md
- Extracted — 2026-10-06T06:25:17.671Z
- Generator — ExtractVibe vv1
- Quality score — 65/100