← Back to Showcase Design Exploration

Content-Type Badges

Exploring different visual treatments for content-type indicators across cards, grids, and lists. Finding the right balance between clarity and minimalism.

Exploration Goal

Task: Evaluate 6 badge variations using only F12 design system colors. Choose the style that best identifies content types while maintaining our clean, minimalistic aesthetic. Consider scannability, flexibility, and accessibility.

01

Micro Label ⭐ Preferred

Ultra minimal uppercase label using eyebrow styling. Cleanest approach that treats content-type as subtle metadata. Perfect for F12's minimalistic aesthetic.

In Card Layout
VIDEO

Church Planting in Urban Contexts

Biblical frameworks for establishing healthy churches in cities across Asia and the Pacific.

ARTICLE

The Mission of God's People

Understanding our call to participate in God's redemptive work across all nations.

PODCAST

Cross-Cultural Ministry

Conversations on cultural adaptation and building lasting partnerships in Southeast Asia.

In Row Layout
VIDEO

Gospel-Centered Leadership

45 min

STUDY GUIDE

Church Planting Toolkit

PDF • 48 pages

✓ Pros Most minimal and clean approach Perfect alignment with F12 aesthetic Reuses existing eyebrow styling Ultra clean and spacious Separates content-type from metadata
⚠ Considerations Very subtle (perfect for editorial) Small text size (ensure good contrast) Metadata shown separately below
02

Soft Fill

Light background with content-type only. Creates visual container using F12 subtle background. Metadata displayed separately below for cleaner separation.

In Card Layout
VIDEO

Church Planting in Urban Contexts

Biblical frameworks for establishing healthy churches in cities across Asia and the Pacific.

ARTICLE

The Mission of God's People

Understanding our call to participate in God's redemptive work across all nations.

PODCAST

Cross-Cultural Ministry

Conversations on cultural adaptation and building lasting partnerships in Southeast Asia.

In Row Layout
VIDEO

Gospel-Centered Leadership

45 min

STUDY GUIDE

Church Planting Toolkit

PDF • 48 pages

✓ Pros Clear visual separation Uses F12 subtle background token Pill shape feels polished Easy to scan quickly Familiar pattern (like chips)
⚠ Considerations Slightly more visual weight than V1 May compete with other UI elements All types look identical (gray-first)
03

Icon + Text (Outlined)

Clean outlined icons with content-type text. Uses minimal, modern iconography that matches F12's clean aesthetic. Metadata shown separately below.

In Card Layout
VIDEO

Church Planting in Urban Contexts

Biblical frameworks for establishing healthy churches in cities across Asia and the Pacific.

ARTICLE

The Mission of God's People

Understanding our call to participate in God's redemptive work across all nations.

PODCAST

Cross-Cultural Ministry

Conversations on cultural adaptation and building lasting partnerships in Southeast Asia.

In Row Layout
VIDEO

Gospel-Centered Leadership

45 min

STUDY GUIDE

Church Planting Toolkit

PDF • 48 pages

✓ Pros Instant visual recognition via icons Clean outlined style (not colorful) Icons differentiate content types Modern, minimal aesthetic Highly scannable
⚠ Considerations Slightly more visual complexity Requires icon selection/maintenance SVG icons add markup Icons need to be recognizable
04

Icon + Text

Visual hierarchy with icon/emoji before text. Adds visual interest and makes content types instantly recognizable through iconography.

In Card Layout
Video • 45 min

Church Planting in Urban Contexts

Biblical frameworks for cities.

📄 Article • 12 min

The Mission of God's People

Understanding our call to serve.

🎙 Podcast • Ep. 24

Cross-Cultural Ministry

Conversations on adaptation.

In Row Layout
Video • 45 min

Gospel-Centered Leadership

📚 Study Guide

Church Planting Toolkit

✓ Pros Instant visual recognition Icons differentiate content types Adds personality and friendliness Highly scannable
⚠ Cons Icons may feel too playful Emoji rendering varies by platform Less minimal aesthetic Requires icon selection/maintenance
05

Micro Label (Eyebrow Style)

Ultra minimal uppercase label using F12 eyebrow styling. Smallest footprint, treating content-type as subtle metadata rather than prominent badge.

In Card Layout
VIDEO • 45 MIN

Church Planting in Urban Contexts

Biblical frameworks for cities.

ARTICLE • 12 MIN READ

The Mission of God's People

Understanding our call to serve.

PODCAST • EPISODE 24

Cross-Cultural Ministry

Conversations on adaptation.

In Row Layout
VIDEO • 45 MIN

Gospel-Centered Leadership

STUDY GUIDE • PDF

Church Planting Toolkit

✓ Pros Most minimal approach Reuses existing eyebrow styling Perfect for editorial aesthetic Ultra clean and spacious
⚠ Cons May be too subtle Very small text size Could blend into background Accessibility concern (tiny text)
06

Dot Indicator

Colored dot + gray text. Most minimal color differentiation possible. Subtle visual cue without drawing attention away from content.

In Card Layout
Video • 45 min

Church Planting in Urban Contexts

Biblical frameworks for cities.

Article • 12 min

The Mission of God's People

Understanding our call to serve.

Podcast • Ep. 24

Cross-Cultural Ministry

Conversations on adaptation.

In Row Layout
Video • 45 min

Gospel-Centered Leadership

Study Guide

Church Planting Toolkit

✓ Pros Extremely subtle and clean Dot provides minimal visual anchor Could use different dot colors per type Sophisticated, editorial feel
⚠ Cons Dot may be too small to notice Limited differentiation power Color coding requires learning May not be scannable enough
Side-by-Side Comparison

All Variations at a Glance

Compare the 3 refined badge styles. V1 (Micro Label) is the preferred approach.

V1: Micro ⭐ VIDEO
V2: Soft Fill VIDEO
V3: Icon VIDEO
Preferred Choice

Variation 1 (Micro Label) has been selected as the preferred approach. This ultra-minimal style perfectly aligns with F12's clean, editorial aesthetic. Content-type is shown as subtle metadata, with duration/length displayed separately below.