Skip to content
DesignMunkDesignMunk Submit a site

Andela

andela.com
The human layer powering production AI.
AI HR & Recruiting Webflow Homepage Droid Serif Inter
Share Visit site
andela.com DESKTOP · 1440
Andela

AI Breakdown

Design export

---
version: alpha
name: Andela
description: The human layer powering production AI.
colors:
  primary: "#132128"
  secondary: "#0c2c2c"
  neutral: "#ffffff"
  border: "#e5e7eb"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Droid Serif
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Droid Serif
    fontSize: 54px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.022em
  headline-sm:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.2
  headline-xs:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.22
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.006em
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 8px
  sm: 16px
  md: 32px
  lg: 52px
  xl: 88px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.full}"
    padding: 16px 52px 16px 24px
    height: 52px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 16px 52px 16px 24px
    height: 52px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Andela: Elegant Serif Headlines and Pill CTAs in Teal

## Overview

Andela's UI presents an enterprise-credible, human-centred brand: clear, serious, and spacious. The palette stays light with deep teal text on white and restrained green accents. Typography carries the voice—serif for authority, sans for utility—while pill buttons and soft cards keep interactions approachable. Density varies by section, but vertical rhythm remains generous, helping long pages scan quickly.

## Colors

- **primary (#132128):** Deep ink for headlines and core text.
- **secondary (#0c2c2c):** Accent for subheads, emphasis lines, and icons.
- **neutral (#ffffff):** Base canvas for pages and cards.
- **border (#e5e7eb):** Quiet dividers and input outlines.
- **surface ({colors.neutral}):** Same as neutral; standard card and section backgrounds.
- **on-surface ({colors.primary}):** Default text and icon color when placed on surfaces.

## Typography

- Headline (headline-lg, Droid Serif 72px/1.2, 400, -0.01em): Primary H1 treatment for hero and major section leads.
- Headline (headline-md, Droid Serif 54px/1.2, 400, -0.022em): Secondary section headers and key marketing claims.
- Utility heads (headline-sm, Inter 20px/1.2, 400) and (headline-xs, Inter 18px/1.22, 400): For eyebrow labels, module titles, and small section leaders.
- Body (body-md, Inter 16px/1.5, 400, -0.006em): Default paragraph, list items, and UI copy.
- Availability: Inter is a Google Font and can be loaded directly. Droid Serif is provided here as custom webfont files; if unavailable, substitute with Lora, Source Serif 4, or Georgia for similar x-height and contrast.

## Layout

- Spacing scale is 8px-based: xs 8, sm 16, md 32, lg 52, xl 88.
- Use xl (88px) to open the hero and top-level sections; lg (52px) for section padding and between stacked modules; md (32px) for intra-section grouping; sm/xs for element gutters.
- Lists and grids lean on consistent column widths with generous outer margins; cards align to the same rhythm for predictable scan paths.
- Headlines sit above 16–32px of body copy, then actions; keep buttons grouped with md (32px) gaps to maintain visual hierarchy.

## Elevation & Depth

- Shadows are subtle and functional. Use md (rgba(0,0,0,0.1) 0px 6.5px 16px) for lifted cards and media panels; sm (rgba(0,0,0,0.12) 0px -8px 8px) for small floating elements or tooltips; lg (rgba(0,0,0,0.03) 0px 58px 35px) sparingly for overlays or hero media.
- Heavier shadows are avoided (xl is none). Hierarchy also relies on borders (#e5e7eb) and white space.
- Inputs often use the inner shadow composite for gentle inset definition.

## Shapes

- Cards: rounded.sm = 8px for content containers and testimonial tiles.
- Buttons and chips: rounded.full = 9999px for recognizable, touch-friendly pills.
- Keep shape language consistent: utility surfaces at 8px, interactive CTAs as full pills; avoid mixing radii within the same group.

## Components

- Buttons
  - Primary: background #132128, text #ffffff, 52px tall with 16px 52px 16px 24px padding, rounded.full. Use for the main action per section.
  - Secondary: text #132128 on white surface, same size and padding, rounded.full. Use as alternate action next to the primary.
  - Link: text #132128, no radius. Use inline inside copy or card footers.
- Card: white background, text #132128, 8px radius, 16px padding. Pair with md shadow for prominence or border for quieter lists.

### Hero Headline Block
- headline-lg (Droid Serif 72px/1.2) for the first line; headline-md (54px/1.2) or a color shift to secondary #0c2c2c for the second line. Follow with body-md copy (Inter 16px) and an md (32px) gap before CTAs.

### Hero Checklist
- Three short bullets in body-md (Inter 16px) aligned inline; use border #e5e7eb for faint separators if needed and secondary for subtle icons.

### Showcase Panel
- A media card beneath the hero with card defaults, md shadow, and 8px radius. Overlay small chips or badges using rounded.full and sm (16px) internal padding.

### Ratings Row
- Compact badges for rating value and review count in Inter 18–20px; place after CTAs with sm (16px) gaps so they don't compete with the main action.

### Three-Column Feature Grid
- Section lead in headline-md, then three cards with 8px radius, 16px padding, and md (32px) gaps. Each uses headline-sm for titles and body-md for descriptions.

### Stats Row
- Large numerals as headline-md for figures (17K, 200K+, 98%), labels in body-md. Use lg (52px) vertical padding to maintain impact.

### Talent Profile Card
- Image header with candidate name/role in headline-sm, company tag in body-md. Card 8px radius, md shadow, actions as pill buttons.

### Publication Teasers
- List or grid of article cards: title in headline-sm, meta in body-md, link as button-link. Use border #e5e7eb dividers for compact lists.

## Do's and Don'ts

- Do reserve #132128 for all core text to maintain contrast on white.
- Do keep primary and secondary buttons the same 52px height and pill radius; vary only color/weight.
- Do space sections with lg (52px)–xl (88px) paddings; the design depends on generous vertical rhythm.
- Don't stack more than two CTAs side-by-side in the hero; use button-secondary or a link style for tertiary actions.
- Don't mix 8px and sharp corners within one component; cards are 8px, CTAs are full-round only.
- Don't substitute heavy shadows; use md or borders for separation instead.

## Agent Prompt Guide

Quick color reference
- Text: #132128
- Background: #ffffff
- Border: #e5e7eb
- Accent: #0c2c2c

1) Build the hero
- Canvas #ffffff. H1 line 1: Droid Serif, 72px, 400, line-height 1.2, letter-spacing -0.01em, color #132128. H1 line 2: Droid Serif, 54px, 400, color #0c2c2c. Paragraph: Inter 16px/1.5, color #132128, max-width ~65ch, spacing: 32px after paragraph. Two buttons: primary pill (#132128 text #ffffff) and secondary pill (text #132128 on white), both height 52px, padding 16px 52px 16px 24px, gap 16px. Section top/bottom padding 88px.

2) Three-column features
- Section header: Droid Serif 54px/1.2 #132128, 32px bottom margin. Grid of 3 cards: background #ffffff, radius 8px, padding 16px, shadow md (rgba(0,0,0,0.1) 0px 6.5px 16px). Card title: Inter 20px/1.2 #132128. Body: Inter 16px/1.5. Card gap 32px; section padding 52px.

3) Testimonial card
- Card: #ffffff, radius 8px, padding 16px, border #e5e7eb 1px (no heavy shadow). Quote set in Inter 16px/1.5 #132128; author line in Inter 18px. Place within a section with 52px vertical padding and 32px gaps.

4) Talent profile grid
- Card: radius 8px, md shadow, 16px padding. Name/title: Inter 20px. Meta: Inter 16px. Actions: primary/secondary pill buttons (52px). Grid gaps 32px, section padding 52px.

5) Newsletter bar
- Container: #ffffff with inner shadow (rgba(0,0,0,0.06) 0px 1px 2px, rgb(248,250,252) 0px -3px 2px inset), radius 8px, padding 16px. Label: Inter 18px. Input: 44–48px tall with border #e5e7eb. Submit: primary pill 52px aligned right.

## Similar Brands

- Toptal — Similar serif/sans pairing on a white canvas; diverges with a cooler blue palette and heavier navigation density.
- Scale AI — Enterprise AI services with testimonial and case-study grids; uses a darker, more industrial palette and bolder type weights.
- Anthropic — Calm serif headlines and restrained UI tone; more minimal layout and fewer marketing sections than Andela.
- Deel — Recruiting/payroll platform with pill buttons and cards; brighter, playful colors compared to Andela's deep teal restraint.

More like this

Browse AI →
kota.io
Kota Blog Fintech
Kota Blog
The platform that runs employee benefits on autopilot.
Blog · 1 hour ago
adapt.com
Adapt About AI
Adapt About
A minimal header with announcement bar and dual CTAs leads into a centered, punchy mission headline, followed by a friendly collage of…
About · 1 hour ago
openlayer.com
Openlayer About AI
Openlayer About
A high-contrast hero dominates with a black card, elegant serif headline, and a single purple CTA, establishing a clear hierarchy and sleek…
About · 2 hours ago
overmindlab.ai
Overmind AI
Overmind
The AI engineering copilot for agent optimisation and model training.
Homepage · 14 hours ago