redthrd
Sign In

Brand Guidelines

The redthrd
style guide.

Our visual identity is minimal, bold, and purposeful. Everything connects back to the thread.

Color Palette

Three colours. That's it.

#000000

Black

Primary brand colour. Used for text, headers, CTAs, and backgrounds where we want authority and clarity.

bg-black
bg-black/80
text-black/60
text-black/40
#DC2626

Red (The Thread)

Accent colour. Represents the thread that connects everything. Use sparingly for emphasis, links, and key highlights.

bg-red-600 / text-red-600
bg-red-500 (lighter accent)
bg-red-600/20 (dot halos)
#F4F4F5

Grey (Zinc)

Supporting colour. Used for backgrounds, borders, and subtle elements that need visual separation without drawing attention.

bg-zinc-50
bg-zinc-100
bg-zinc-200 (borders)

Key Element

The thread dot.

The thread dot is our signature element. It represents a single node in the Intelligence Fabric—a point where data, AI, and human behaviour intersect.

Use it to mark key moments, highlight sections, or add visual rhythm to content. The outer halo suggests connection and expansion.

Standard
Large
Minimal

Typography

Fonts & Typefaces

Primary Typeface

Inter

Our primary typeface for all UI elements, headings, and body copy. Designed for screens, highly readable, used by GitHub, Figma, and Linear.

Regular (400)Body text, paragraphs
Medium (500)Labels, navigation
Semibold (600)Subheadings, emphasis
Bold (700)Headlines, CTAs
Extrabold (800)Display, hero text

Display Accent

Space Grotesk

Geometric sans-serif for distinctive headlines and brand moments. Technical, modern, adds character without being distracting.

Regular (400)Accent text
Medium (500)Callouts
Semibold (600)Subheadings
Bold (700)Hero headlines

CSS Variables: --font-sans (Inter) and --font-display (Space Grotesk). Use font-sans for standard text, font-display for brand moments.

Type Scale

Clear. Bold. Confident.

Hero Headlines

The quick brown fox
jumps over the lazy dog.

font-bold • leading-[1.1] • tracking-tight • Use two-tone for emphasis

Section Headers

Section heading style

text-3xl sm:text-4xl • font-bold

Eyebrow Labels

Eyebrow Label

text-xs • font-medium • uppercase • tracking-[0.2em] • with line prefix

Body Text

Body text should be readable and comfortable. We use text-black/60 for paragraphs to reduce visual weight while maintaining legibility. Line height is relaxed for easy scanning.

text-black/60 • leading-relaxed

Interactive Elements

Buttons & Links

Primary Buttons

bg-black • On light backgrounds

bg-red-600 • For key actions

bg-white • On dark backgrounds

Links

Standard text link →

text-red-600 • hover:text-red-700

Subtle link with hover

text-black/60 • hover:text-red-600

Eyebrow link style

With line prefix

Components

Cards & Containers

Standard Card

White background with subtle border. Hover darkens border.

Muted Card

Zinc background for subtle contrast against white.

Dark Card

Black background for emphasis and contrast.

Iconography

Icons, not emojis.

We use Lucide icons exclusively. They're clean, consistent, and align with our minimal aesthetic. Never use emojis in the product or marketing materials.

stroke-width: 2

Default Weight

Standard weight for most UI contexts. Clear and readable at all sizes.

stroke-width: 1.5

Light Weight

Use sparingly for large display icons or decorative elements.

stroke-width: 2.5

Bold Weight

For emphasis or when icons need to stand out against busy backgrounds.

16px (w-4)

Inline, compact UI

20px (w-5)

Buttons, navigation

24px (w-6)

Standard UI elements

32px (w-8)

Feature cards, heroes

Icon Library

Navigation & Arrows

ArrowRight
ArrowLeft
ArrowUpRight
ChevronDown
ChevronRight
ChevronUp
ChevronLeft
Menu
Home
ExternalLink
Link
Share2

Actions

Check
X
Plus
Minus
Search
Edit
Trash2
Copy
Download
Upload
Send
RefreshCw

Status & Feedback

CheckCircle
XCircle
AlertCircle
AlertTriangle
Info
HelpCircle
Loader2
Eye
EyeOff
Bell
BellOff
Activity

Users & Communication

User
Users
Mail
Phone
MessageSquare
Inbox
Archive
LogIn
LogOut
Settings
Lock
Unlock

Business & Analytics

Building2
Briefcase
Calendar
Clock
MapPin
TrendingUp
TrendingDown
BarChart3
PieChart
Target
Award
Trophy

Learning & Content

GraduationCap
BookOpen
FileText
Lightbulb
Brain
Sparkles
Zap
Star
Heart
ThumbsUp
Play
Pause

Technology & Security

Globe
Cloud
Database
Server
Cpu
Code
Terminal
Shield
ShieldCheck
Layers
Grid
Layout

UI Controls

Filter
SortAsc
List
Maximize2
Minimize2
Move
Grip
MoreHorizontal
MoreVertical
RotateCcw
Square
Info

Usage Examples

Button with Icon

<ArrowRight className="w-4 h-4" />

Feature Card Icon

<TrendingUp className="w-6 h-6 text-red-600" />

Status Indicators

CompleteLoadingError
<CheckCircle className="w-4 h-4 text-black" />

Navigation Elements

BackLearn more
<ArrowUpRight className="w-4 h-4" />

Icon Do's

  • Use Lucide icons consistently across the product
  • Match icon weight to text weight nearby
  • Use w-4 for inline text, w-5/w-6 for buttons
  • Add hover animations (translate, rotate) for interactivity
  • Use text-red-600 for accent icons sparingly

Icon Don'ts

  • Never use emojis (🚀 ✨ 🎉 👋) in UI or content
  • Don't mix icon libraries (FontAwesome, Heroicons, etc.)
  • Avoid filled/solid icons (we use stroke style)
  • Don't use coloured icons except black, white, or red
  • Avoid oversized icons that dominate the layout

Guidelines

Do's and Don'ts

Do

  • Use black, red, and grey only
  • Keep layouts clean and minimal
  • Use the thread dot as a signature element
  • Apply two-tone headlines for emphasis
  • Use Lucide icons exclusively
  • Keep CTAs consistent (black or red)
  • Use text-black/60 for body text

Don't

  • Introduce new colours (blue, green, yellow, etc.)
  • Use emojis anywhere (🚀 ✨ 👋 are banned)
  • Use rounded corners (except thread dot)
  • Add gradients or shadows
  • Mix icon libraries (only Lucide)
  • Over-use the red accent
  • Use all-caps for body text