Design System & Brand Kit
The official styling guide and design specifications for DotMarket. Understand our visual elements, color hierarchy, and brand assets to build consistent interfaces.
1. Brand Overview
DotMarket is a high-frequency, non-custodial prediction protocol configured specifically for short-term Bitcoin price direction. Our brand reflects absolute clarity, cryptographic accuracy, and dynamic speed. We combine the elegance of premium dark-mode aesthetics with the responsiveness of institutional trading tools.
视觉理念 (Visual Philosophy)
We avoid distracting gradients, flashy colors, and unorganized elements. The DotMarket interface relies on a monochrome canvas, pristine typography, glassmorphism layers, and subtle micro-animations that make the platform feel responsive and alive.
2. Mission & Vision
Simplifying price dynamics
To provide a trustless, dynamic venue for short-term direction trading. We strip away the complexity of traditional margin accounts, funding structures, and leverage constraints, offering direct direction-only on-chain predictions.
On-chain precision
Building the most transparent, liquid, and fast-paced prediction protocol in decentralized finance, powered by verified on-chain oracle infrastructure and trustless settlement models.
3. Logo System
Our logo represents a balanced structure: the solid circle represents the target pool boundary, the diagonal line indicates split sentiment, and the inner point represents settlement accuracy.
Ensure the SVG mark is always rendered with high contrast against the background (e.g. pure white mark on deep black canvas). Keep a minimum clear margin spacing of 24px around the entire mark boundaries.
Do not stretch, distort, alter layout proportions, or introduce accent gradients/colors to the logomark or typography.
4. Color Palette
We stick strictly to a monochrome palette. Click on any color block below to copy its HEX code instantly to your clipboard.
5. Typography
Our type system relies on two font families to establish hierarchy: **Cormorant Garamond** for editorial hero titles and **Inter** for all interface structures, numbers, and descriptive body text.
The 1-Minute Prediction Engine
Used exclusively for landing page hero headings and large documentation headings.All UI elements, panel tabs, transaction details, active positions, and numerical tickers utilize the Inter sans-serif typeface to ensure crisp readability down to small font sizes.
Used for interface, labels, tables, code outputs, and body content.6. Iconography
We use line-style icons with consistent stroke weights (`1.5px` or `2px`) and square endpoints. Icons must always be presented in monochrome tints matching the surrounding typography.
7. UI Components
We build interfaces using modular, reusable components styled with custom CSS properties. Our buttons, badges, and cards feature a glassmorphic look with clear hover responses.
Button Specs
Badge Specs
8. Motion Principles
Motion is used to emphasize interface responses and active states. We do not use bouncy or aggressive spring physics.
1. Easing Curves
All element transitions (like card hover border changes or dropdown entries) must use the custom easing cubic curve: `cubic-bezier(0.16, 1, 0.3, 1)` (easeOutExpo). This makes movements feel immediate but highly fluid.
2. Transition Duration
UI shifts should remain short and tight. Standard hover actions must complete within `200ms` to `300ms` max to avoid making the interface feel sluggish.
9. Brand Voice & Messaging
We write content with a technical, direct, and authoritative voice. We avoid gamified terminology and hype-focused phrases.
Tone Principle
We present statistics, timelines, and mechanics neutrally. The user is a participant or trader, not a gambler.
Vocabulary Alignment
| USE THIS | AVOID THIS |
|---|---|
| Prediction, Predict UP/DOWN | Bet, Betting, Wager |
| Participant, Analyst, Trader | Bettor, Player, Gambler |
| Pari-mutuel Pool multiplier | Odds, Betting odds, Bookmaker cut |
10. Usage Guidelines
- Apply clean borders (`1px solid rgba(255,255,255,0.05)`) to divide contents.
- Verify that typography follows the hierarchy (Garamond vs Inter).
- Use micro-animations with strict durations under 300ms.
- Do not use gradient text or non-monochrome styling.
- Do not introduce bright, heavy background blocks for headers.
- Do not change layouts to unaligned grids.
11. Product Screenshots
Standard product screenshots for media publication. Ensure images are not cropped or modified.
12. Download Center
Logo Assets (SVG)
Official dotMarket vector logo files for dark and light backgrounds.
Typography Kit
TrueType and OpenType fonts package for design compilation.
Press Assets Bundle
High resolution raster images, team photos, and brand profile.
13. Press Kit
Media kit materials for writers and journalists. Get official copy descriptions, system features list, and press release templates.
"DotMarket is a non-custodial decentralized prediction market deployed on the Arc Testnet. The platform supportsrolling 1-minute Bitcoin direction predictions resolved via the Pyth Oracle network, combining absolute on-chain settlement transparently with institutional visual elements."
14. Contact Support
If you have custom visual needs, media queries, or developer integrations, contact our branding team.