TRUEPREDiCT
truepredictsoftware.com“Prediction Market Platform Development Company | TRUEPREDiCT presents a professional web presence.”
Color Palette
Colors
Light Mode
Dark Mode
Typography
Fonts
-apple-system
BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif
Poppins
sans-serif
poppins
Poppins
sans-serif
The quick brown fox
16pxThe quick brown fox
61pxThe quick brown fox
50pxThe quick brown fox
48pxComponents
Design System
rgba(0, 0, 0, 0.043) 0px 8px 25px 0px
rgba(0, 60, 100, 0.25) 0px 18px 30px 0px
rgba(0, 0, 0, 0.06) 0px 10px 25px 0px
rgba(5, 58, 170, 0.25) 0px 25px 60px -20px
rgba(0, 0, 0, 0.06) 0px 1px 3px 0px
Voice & Tone
Personality
Visual Energy
Design Era
contemporary
Emotional Tone
professional
Target Audience
general audience
Design Assets
Visual Elements
<!-- 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
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
# 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.



