Menu
    Prediction market · Component library · v1.0

    Predix
    Design System

    One library for every Predix screen. Each component ships in the dark Formula-Style theme and a separate Light set with the same structure.

    47Components
    410Variants
    88Variables
    14Text styles
    Showcase
    Order book
    Playground
    Bet Button
    Live flow
    Home → overview → detail → betReal Final screens, desktop and mobile.
    Visual style
    Tokens
    88Variables
    TypographyAa
    Plus Jakarta Sans · 14
    Components
    47 sets · 9 categories
    Notification
    Motion
    Market feed in motion

    Principles

    Two themes, two sets

    Dark components use the Formula-Style mode. Light/ components are separate sets with the same structure. Light screens only use Light/ components.

    Shared content

    Icons/Currency and Share/Image Card are shared by both themes. Logos, avatars and coin icons are content and never change colour by theme.

    Final work is the standard

    Components match the Final Dark and Final Light screens. Gradients are only allowed on the dark Betslip bet button. The mode switcher shows on mobile only.

    Playground

    Real Predix components. They animate on their own; switch to Try it to play with them.

    Component theme
    Bottom Nav BarNavigation/Bottom Nav Bar

    Bet ButtonBetslip/Bet Button

    State = Default

    Notification ItemNotification/Item
    Probability BarData/Probability Bar
    Probability RingData/Probability Ring
    70%up
    TabNavigation/Tab
    Mode SwitcherNavigation/Mode Switcher/Mobile

    Prediction

    Hashtag ChipEvent/Hashtag Chip

    State = Default

    Market PaginationNavigation/Market Pagination
    3 of 7
    Tennis

    Live flow

    The real Predix Final screens, linked into one flow: Home, event overview, event detail, then placing a bet.

    predix.app

    Color

    Every colour in the library is a variable. Open a group, then click a swatch to copy its value.

    Formula-StyleLight

    Space & radius

    Spacing and radius variables from the Layout collection.

    Typography

    Click a sample to edit the text.

    Showcase

    Visual style proposals from the Predix social campaign: posts, motion and device shots built with the same components.

    About
    Lee Van

    Lee Van

    User Experience Researcher · since Sep 2025

    As a User Experience Researcher since September 2025, I have focused on integrating Media Philosophy and Post-Nature frameworks to enhance UI/UX design as a medium for bridging digital governance and ecological sustainability. My contributions include operationalizing EU AI Act compliance through actionable design guidelines and creating the GOS Design System to translate complex climate data into intuitive interfaces. With advanced degrees in Industrial and Product Design from Shih Chien University and Tainan University of Technology, as well as a Master's in Natural Resources Management from National Dong Hwa University, I bring a multidisciplinary perspective to the intersection of technology, sustainability, and design innovation. My dedication lies in shaping ethical, user-focused digital experiences that align with emerging regulatory and environmental challenges.

    LinkedIn Articles on Medium
    kubrick.jo@gmail.com