Skip to content
truepredictsoftware.com logo

TRUEPREDiCT

truepredictsoftware.com

“Prediction Market Platform Development Company | TRUEPREDiCT presents a professional web presence.”

professional

Color Palette

Colors

Light Mode

#ffffff

background

#ffffff

surface

#334155

text

#4aa6a6

secondaryText

#e7e7e7

border

#046bd2

link

#4aa6a6

muted

Dark Mode

#ffffff

background


Typography

Fonts

-apple-system

body
400
system

BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif

Poppins

heading
700
800
self-hosted

sans-serif

poppins

body
800
self-hosted

Poppins

body
600
700
self-hosted

sans-serif

body

The quick brown fox

h1

The quick brown fox

h2

The quick brown fox

h3

The quick brown fox


Components

Design System

Turnkey Prediction Market
secondary
8px
#fafafa#000000
card
box-shadow

rgba(0, 0, 0, 0.043) 0px 8px 25px 0px

card
box-shadow

rgba(0, 60, 100, 0.25) 0px 18px 30px 0px

card
box-shadow

rgba(0, 0, 0, 0.06) 0px 10px 25px 0px

dropdown
box-shadow

rgba(5, 58, 170, 0.25) 0px 25px 60px -20px

button
box-shadow

rgba(0, 0, 0, 0.06) 0px 1px 3px 0px


Voice & Tone

Personality

Visual Energy

5/10

Design Era

contemporary

Emotional Tone

professional

Target Audience

general audience


Design Assets

Visual Elements

Truepredictsoftware
webp380×80
Explore All Blogs
webp1500×923
Prediction Market Software Development Company
webp662×492

DESIGN.md

AI-ready

Drop into any project root. Cursor, Claude Code, v0, Lovable, and other AI coding agents read this file to generate on-brand UI. Spec

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/truepredictsoftware.com -->
<!-- Extracted: 2026-10-17T06:28:19.513Z | Schema: v1 | Quality: 65/100 -->
---
version: alpha
name: "TRUEPREDiCT"
description: "Prediction Market Platform Development Company | TRUEPREDiCT presents a professional web presence."
colors:
  neutral: "#4aa6a6"
  surface: "#ffffff"
  on-surface: "#334155"
  on-surface-secondary: "#4aa6a6"
  border: "#e7e7e7"
  link: "#046bd2"
  surface-dark: "#ffffff"
typography:
  display-lg:
    fontFamily: "Poppins"
    fontSize: "61px"
    fontWeight: "800"
    lineHeight: "65px"
  headline-lg:
    fontFamily: "Poppins"
    fontSize: "50px"
    fontWeight: "700"
    lineHeight: "65px"
  headline-md:
    fontFamily: "Poppins"
    fontSize: "48px"
    fontWeight: "800"
    lineHeight: "62.4px"
  body-md:
    fontFamily: "-apple-system"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "26.4px"
rounded:
  md: "8px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-secondary:
    backgroundColor: "#fafafa"
    textColor: "#000000"
    rounded: "8px"
    padding: "10px 14px"
    fontSize: "14.5px"
    fontWeight: "600"
    borderColor: "#000000"
    boxShadow: "rgba(0, 0, 0, 0.06) 0px 1px 3px 0px"
---

# TRUEPREDiCT — Design System

## Overview

Prediction Market Platform Development Company | TRUEPREDiCT 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 25 distinct colors observed across the site, organized into semantic roles below.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| surface | `#ffffff` | White |
| background | `#ffffff` | White |
| text | `#334155` | Dark Slate Gray |
| secondary text | `#4aa6a6` | Cadet Blue |
| border | `#e7e7e7` | Lavender |
| link | `#046bd2` | Royal Blue |
| muted | `#4aa6a6` | Cadet Blue |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| background | `#ffffff` | White |

## Typography

Type is set in -apple-system, Poppins, poppins, with hierarchy expressed through size and weight contrast rather than family-switching.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| -apple-system | body | system | 400 |
| Poppins | heading | self-hosted | 700, 800 |
| poppins | body | self-hosted | 800 |
| Poppins | body | self-hosted | 600, 700 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Poppins | 61px | 800 | 65px | — |
| Heading 2 | Poppins | 50px | 700 | 65px | — |
| Heading 3 | Poppins | 48px | 800 | 62.4px | — |
| Body | -apple-system | 16px | 400 | 26.4px | — |

### Conventions

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

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| card | `rgba(0, 0, 0, 0.043) 0px 8px 25px 0px` |
| card | `rgba(0, 60, 100, 0.25) 0px 18px 30px 0px` |
| card | `rgba(0, 0, 0, 0.06) 0px 10px 25px 0px` |
| dropdown | `rgba(5, 58, 170, 0.25) 0px 25px 60px -20px` |
| button | `rgba(0, 0, 0, 0.06) 0px 1px 3px 0px` |

## Shapes

Border-radius scale:

- `md` — 8px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Secondary**

- Background — `#fafafa`
- Text — `#000000`
- Radius — `8px`
- Padding — `10px 14px`
- Font size — `14.5px`
- Font weight — `600`
- Border — ` solid #000000`
- Shadow — `rgba(0, 0, 0, 0.06) 0px 1px 3px 0px`
- Sample copy — "Turnkey Prediction Market"

## 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/truepredictsoftware.com) | 100% |
| favicon | — | ico | [link](brands/truepredictsoftware.com/logo-0.ico) | 95% |
| favicon | — | png | [link](brands/truepredictsoftware.com/logo-1.png) | 95% |
| favicon | — | webp | [link](#) | 95% |
| favicon | — | png | [link](brands/truepredictsoftware.com/logo-3.png) | 95% |
| favicon | — | png | [link](brands/truepredictsoftware.com/logo-4.png) | 95% |
| favicon | — | png | [link](brands/truepredictsoftware.com/logo-5.png) | 95% |
| favicon | — | png | [link](brands/truepredictsoftware.com/logo-6.png) | 95% |
| primary | — | webp | [link](brands/truepredictsoftware.com/logo-7.webp) | 85% |
| primary | — | — | [link](#) | 85% |

## Sources

- Official brand guidelines — https://www.pinterest.com/ideas/brand-kit-guidelines/950644889222/
- Live brand page — https://extractvibe.com/brand/truepredictsoftware.com
- Raw JSON — https://extractvibe.com/api/brand/truepredictsoftware.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/truepredictsoftware.com/design.md
- Extracted — 2026-10-17T06:28:19.513Z
- Generator — ExtractVibe vv1
- Quality score — 65/100
205 lines · 5,602 bytesView raw
How to use this file

1. Save this file as DESIGN.md in your project root (sibling to README.md).

2. AI agents that read project files (Claude Code, Cursor, v0, Lovable, Bolt, Windsurf) will discover it automatically.

3. Validate or export tokens with the official CLI:

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

Developer Access
cURL
# Fetch the full brand kit
curl https://extractvibe.com/api/brand/truepredictsoftware.com \
  -H "x-api-key: ev_your_key"

# Export as CSS variables
curl https://extractvibe.com/api/extract/JOB_ID/export/css \
  -H "x-api-key: ev_your_key"

# Export as Tailwind config
curl https://extractvibe.com/api/extract/JOB_ID/export/tailwind \
  -H "x-api-key: ev_your_key"

Extract your own brand kit

Get colors, fonts, voice, and personality from any website in seconds. Open source.