Base Radar

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/baseradar.com -->
<!-- Extracted: 2026-05-20T18:37:09.648Z | Schema: v1 | Quality: 90/100 -->
---
version: alpha
name: "Base Radar"
description: "Base Radar projects a sophisticated yet edgy vibe, blending technical expertise with a playful, almost rebellious spirit. It caters to an audience deeply entrenched in the fast-paced, jargon-heavy world of crypto and AI, offering insights with a blend of authority and excitement."
colors:
  primary: "#39b8ee"
  tertiary: "#db2777"
  neutral: "#3f3f46"
  surface: "#ffffff"
  on-surface: "#23181f"
  on-surface-secondary: "#3f3f46"
  border: "#d4c5a9"
  link: "#23181f"
  success: "#1a6b3c"
  primary-dark: "#1a0e08"
  surface-dark: "#241d28"
typography:
  headline-lg:
    fontFamily: "Fraunces"
    fontSize: "16px"
    fontWeight: "900"
    lineHeight: "24px"
    letterSpacing: "-0.4px"
  headline-md:
    fontFamily: "Fraunces"
    fontSize: "17.6px"
    fontWeight: "900"
    lineHeight: "22.528px"
  headline-sm:
    fontFamily: "DM Sans"
    fontSize: "14px"
    fontWeight: "600"
    lineHeight: "20px"
    letterSpacing: "0.7px"
  body-md:
    fontFamily: "Newsreader"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
rounded:
  sm: "7px"
  lg: "999px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-primary:
    backgroundColor: "#b63b68"
    textColor: "#fffdfa"
    rounded: "999px"
    padding: "8px 15px"
    fontSize: "11.52px"
    fontWeight: "700"
    borderWidth: "1px"
    boxShadow: "rgba(255, 255, 255, 0.18) 0px 1px 0px 0px inset"
  button-ghost:
    textColor: "#ffc400"
    rounded: "0px"
    padding: "12px 16px"
    fontSize: "12.16px"
    fontWeight: "720"
    borderColor: "#e5e7eb"
  button-outline:
    textColor: "#23181f"
    rounded: "0px"
    padding: "14px 24px"
    fontSize: "14.4px"
    fontWeight: "400"
    borderColor: "#ded0d7"
    borderWidth: "0px 0px 1px"
---

# Base Radar — Design System

## Overview

Base Radar's design atmosphere is a deliberate fusion of The Sage's authoritative knowledge and The Magician's transformative insight. It draws inspiration from the established credibility of CoinDesk and The Block, while injecting the dynamic, forward-looking energy seen in TechCrunch and Decrypt. This combination results in a sophisticated yet edgy aesthetic, perfectly tailored for an audience immersed in the rapid evolution of crypto and AI. The design communicates a sense of informed excitement, positioning Base Radar as a trusted guide through complex digital landscapes, delivering insights with both precision and flair.

The emotional register is one of confident discovery and intelligent engagement. It is not overtly corporate or sterile; instead, it embraces a modern, tech-savvy sensibility that resonates with early adopters and industry veterans alike. The design actively avoids generic, bland aesthetics, opting instead for a distinct visual language that is both memorable and functional. It prioritizes clarity and impact, ensuring that complex information is presented in an accessible and engaging manner, without sacrificing the underlying technical depth.

**Key characteristics:**

- Vibe — tech-savvy, edgy, informative, dynamic, crypto-focused, modern
- Archetypes — The Sage, The Magician
- Comparable to — CoinDesk, The Block, TechCrunch, Decrypt
- Design era — modern-editorial
- Emotional tone — authoritative-enthusiastic
- Target audience — Cryptocurrency traders, AI enthusiasts, blockchain developers, and tech-savvy investors who are comfortable with technical jargon and seek cutting-edge information and tools.
- Visual energy — 8/10 (high-energy/bold)

## Colors

The color palette is meticulously crafted to signal Base Radar's character. The primary color, `#39b8ee`, a vibrant and assertive blue, embodies the brand's tech-savvy and dynamic nature, evoking clarity and innovation. This bold hue is balanced by the clean, expansive `#ffffff` surface color, which provides a sophisticated backdrop for information. This contrast ensures high readability and a modern, crisp aesthetic, reinforcing the brand's commitment to delivering precise and impactful insights.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#39b8ee` | Deep Sky Blue |
| accent / tertiary | `#db2777` | Deep Pink |
| surface | `#ffffff` | White |
| background | `#ffffff` | White |
| text | `#23181f` | Near-Black |
| secondary text | `#3f3f46` | Dark Slate Gray |
| border | `#d4c5a9` | Silver |
| link | `#23181f` | Near-Black |
| muted | `#3f3f46` | Dark Slate Gray |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#1a0e08` | Near-Black |
| surface | `#241d28` | Near-Black |

### Semantic

| Role | Hex | Use |
|------|-----|-----|
| success | `#1a6b3c` | Confirmations, positive states |

## Typography

The typography system is a strategic blend of classic authority and modern dynamism. Newsreader and Fraunces provide a foundation of editorial gravitas, aligning with The Sage archetype and ensuring readability for in-depth analysis. DM Sans and Space Grotesk introduce a contemporary, tech-forward edge, reflecting the brand's playful yet rebellious spirit and its focus on crypto and AI. This hierarchy ensures clear differentiation between headlines, body text, and data, communicating authority and excitement in a structured, accessible manner.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Newsreader | body | google-fonts | 400 |
| Fraunces | heading | google-fonts | 900 |
| DM Sans | heading | self-hosted | 600 |
| Space Grotesk | body | google-fonts | 760 |
| DM Sans | body | self-hosted | 400, 700, 720 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Heading 2 | Fraunces | 16px | 900 | 24px | -0.4px |
| Heading 3 | Fraunces | 17.6px | 900 | 22.528px | — |
| Heading 4 | DM Sans | 14px | 600 | 20px | 0.7px |
| Body | Newsreader | 16px | 400 | 24px | — |

### Conventions

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

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| card | `rgba(45, 37, 28, 0.12) 0px 22px 48px -40px` |
| card | `rgba(20, 24, 26, 0.035) 0px 1px 0px 0px` |
| navigation | `rgba(45, 37, 28, 0.12) 0px 12px 40px -34px` |
| navigation | `rgba(45, 37, 28, 0.12) 0px 10px 30px -24px` |
| button | `rgba(255, 255, 255, 0.18) 0px 1px 0px 0px inset` |

### Gradients

- `linear-gradient(oklch(0.951117 0.00730565 340.865) 0%, rgb(243, 238, 241) 38%, oklch(0.948483 0.00792235 341.049) 100%)`

## Shapes

Border-radius scale:

- `sm` — 7px
- `lg` — 999px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Primary**

- Background — `#b63b68`
- Text — `#fffdfa`
- Radius — `999px`
- Padding — `8px 15px`
- Font size — `11.52px`
- Font weight — `700`
- Shadow — `rgba(255, 255, 255, 0.18) 0px 1px 0px 0px inset`
- Sample copy — "Search"

**Ghost**

- Text — `#ffc400`
- Radius — `0px`
- Padding — `12px 16px`
- Font size — `12.16px`
- Font weight — `720`
- Border — ` solid #e5e7eb`

**Outline**

- Text — `#23181f`
- Radius — `0px`
- Padding — `14px 24px`
- Font size — `14.4px`
- Font weight — `400`
- Border — `0px 0px 1px solid #ded0d7`
- Sample copy — "Home"

## Do's and Don'ts

### Do

- Use Fraunces (900 weight) or DM Sans (600 weight) for headings, always in title-case.
- Employ Newsreader (400 weight) or DM Sans (400, 700, 720 weights) for body text, ensuring a line-height of 24px.
- Primary buttons must feature a #b63b68 background, #fffdfa text, a 999px border-radius (pill shape), 8px 15px padding, and an inset shadow of rgba(255, 255, 255, 0.18) 0px 1px 0px 0px.
- Ghost buttons should have #ffc400 text, 0px border-radius, a #e5e7eb border, and 12px 16px padding.
- Outline buttons should use #23181f text, 0px border-radius, a #ded0d7 border, and 14px 24px padding.
- Apply subtle, multi-layered shadows to cards (rgba(45, 37, 28, 0.12) 0px 22px 48px -40px and rgba(20, 24, 26, 0.035) 0px 1px 0px 0px) and navigation elements (rgba(45, 37, 28, 0.12) 0px 12px 40px -34px).
- Utilize the specified linear gradient (oklch(0.951117 0.00730565 340.865) 0%, rgb(243, 238, 241) 38%) for background elements to add subtle depth.
- Maintain a base spacing unit of 2px for all layout and component spacing, with border radii either small (7px) or large (999px).

### Don't

- Avoid using emojis in any copy or content; the brand maintains a serious yet enthusiastic tone without them.
- Refrain from excessive exclamations; use them rarely to maintain a measured and authoritative voice.
- Do not use any fonts other than Newsreader, Fraunces, DM Sans, or Space Grotesk.
- Do not deviate from the specified color system: Primary #39b8ee (light) / #1a0e08 (dark), Accent #db2777, Background #ffffff (light), Text #23181f (light).
- Do not use sharp, angular border radii for primary interactive elements; instead, opt for the pill-shaped 999px radius.
- Do not apply shadows to buttons; shadows are reserved for cards and navigation elements.
- Avoid using single, flat shadows; instead, implement the multi-layered shadow effects as specified for cards and navigation.
- Do not use a casual or overly playful tone; maintain a balance between formal and casual, leaning towards serious and enthusiastic.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 6/10 | balanced |
| Playful ↔ Serious | 7/10 | serious |
| Enthusiastic ↔ Matter-of-fact | 6/10 | balanced |
| Respectful ↔ Irreverent | 5/10 | balanced |
| Technical ↔ Accessible | 4/10 | technical |

### Copywriting style

- Avg. sentence length — 10 words
- Vocabulary — moderate
- Jargon — heavy
- CTA style — single, direct action verb

### Sample copy

> AI Compliance 2026: Navigating the EU AI Act and Global Shifts

> How to Snipe New Base Memecoins on Launch with DexScreener and Telegram Bots

> Top Base Memecoins Gainers Today: $SKI $BRETT $DEGEN Surge Analysis

> Fastest Bridges to Base Chain for Buying $BRETT and $DEGEN Memecoins 2026

> Strongest Base Memecoins 2026 Watchlist: $NOICE $RUSSELL $MIGGLES $DEGEN Analysis

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| logomark | — | png | [link](https://extractvibe.com/api/assets/brands/baseradar.com/logo-1.png) | 80% |
| favicon | — | png | [link](https://extractvibe.com/api/assets/brands/baseradar.com/logo-0.png) | 62% |

## Sources

- Live brand page — https://extractvibe.com/brand/baseradar.com
- Raw JSON — https://extractvibe.com/api/brand/baseradar.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/baseradar.com/design.md
- Extracted — 2026-05-20T18:37:09.648Z
- Generator — ExtractVibe vv1
- Quality score — 90/100

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md