Design System

Reffle.

The complete visual language behind the Reffle platform — colors, gradients, type, elevation and a 395-piece component library, extracted straight from the source design file.

Extracted from Reffle_new.sketch · Symbols page

Colors

Gradients

Shadows

390

Components

Color

Click any swatch to copy its hex value. Token names mirror the original Sketch swatches.

Primary

The Reffle gold — brand voice, primary actions, highlights

Secondary

Deep navy — surfaces, text, structure

Neutral

Greyscale ramp for text, borders and backgrounds

Status

Semantic feedback — success & error states

Accent

Supporting hues for data, tags and illustration

Utility

Transparent / utility values

Gradients

Linear blends used for surfaces, buttons and decorative fades.

Typography

Manrope carries the UI; Sora handles display moments. Scale derived from real component usage.

Elevation

Soft, low-opacity shadows for inputs, buttons and floating widgets.

Borders

Outline tokens for inputs, checkboxes and drag targets.

Radius

Corner-radius scale extracted from the actual component geometry. Click to copy the px value.

Export / Code

Grab the tokens in your format of choice — Tailwind v4 @theme is aligned with the Nuxt stack.

:root {
  /* Colors */
  --color-bw-092-grey: #D8D8D8;
  --color-bw-094-grey-dark: #363636;
  --color-bw-098-black: #181818;
  --color-bw-090-white: #FFFFFF;
  --color-010-primary: #FACA15;
  --color-bw-093-grey: #7A7A7A;
  --color-bw-091-grey: #EFEFEF;
  --color-bw-090-white-almost: #F6F6F7;
  --color-bw-092-grey: #AAAAAA;
  --color-020-secondary: #131C39;
  --color-010-primary-45pct: #F9E6AA;
  --color-024-secondary-dark: #08102A;
  --color-bw-094-grey: #7A7A7A;
  --color-bw-095-grey-dark: #363636;
  --color-025-secondary-black: #050918;
  --color-traffic-080-green: #2BB574;
  --color-traffic-081-green-light: #DAF0E3;
  --color-traffic-084-red: #FF6974;
  --color-traffic-085-red-light: #FFE2E4;
  --color-021-secondary-10pct: #E8E9EC;
  --color-023-secondary-50pct: #888C9B;
  --color-099-empty: rgba(250, 202, 21, 0);
  --color-010-primary-10pct: #FFFAE8;
  --color-030-blue: #3366FF;
  --color-030-blue-10pct: #EAEFFF;
  --color-031-purple: #6B4FCC;
  --color-031-purple-10pct: #F0EDFA;
  --color-032-green: #2CD692;
  --color-032-green-10pct: #EAFBF5;
  --color-031-purple-50pct: #B5A7E5;
  --color-010-primary-65pct: #F9D964;
  --color-032-green-dark: #1A8F60;
  --color-032-green-50pct: #95EAC8;
  --color-traffic-082-green-dark: #1F8656;
  --color-022-secondary-30pct: #B8BAC3;
  --color-traffic-087-red-dark: #D4555E;
  --color-01-primary: #E5A700;
  --color-traffic-086-red-light-50pct: #F4B7BB;
  /* Radius */
  --radius-5: 5px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-11: 11px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-18: 18px;
  --radius-full: 9999px;
  /* Shadows */
  --shadow-input-6pct-10: 0px 0px 10px 0px rgba(0, 0, 0, 0.062);
  --shadow-input-12pct-4: 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
  --shadow-input-10pct-8: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
  --shadow-input-14pct-2: 0px 0px 2px 0px rgba(0, 0, 0, 0.14);
  --shadow-gradient-6pct-10: 0px 0px 10px 0px rgba(0, 0, 0, 0.062);
  --shadow-btn-6pct-10: 0px 0px 10px 0px rgba(0, 0, 0, 0.062);
  --shadow-btn-25pct-30b: 0px 0px 30px 0px rgba(0, 0, 0, 0.245);
  --shadow-btn-25pct-30b-w: 0px 0px 30px 0px rgba(0, 0, 0, 0.245);
  --shadow-gradient-10pct-15: 0px 0px 15px 0px rgba(0, 0, 0, 0.102);
  --shadow-input-10pct-4: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
  --shadow-input-12pct-4-primary: 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
  --shadow-widget-bg: 0px 0px 30px 0px rgba(0, 0, 0, 0.08);
  /* Borders */
  --border-checkbox-1px: 2px solid rgba(19, 28, 57, 1);
  --border-checkbox-selected-1px: 1px solid rgba(19, 28, 57, 1);
  --border-grey-1px: 2px solid rgba(184, 186, 195, 1);
  --border-dragndrop-1px: 1px solid rgba(184, 186, 195, 1);
}

// Colors
$color-bw-092-grey: #D8D8D8;
$color-bw-094-grey-dark: #363636;
$color-bw-098-black: #181818;
$color-bw-090-white: #FFFFFF;
$color-010-primary: #FACA15;
$color-bw-093-grey: #7A7A7A;
$color-bw-091-grey: #EFEFEF;
$color-bw-090-white-almost: #F6F6F7;
$color-bw-092-grey: #AAAAAA;
$color-020-secondary: #131C39;
$color-010-primary-45pct: #F9E6AA;
$color-024-secondary-dark: #08102A;
$color-bw-094-grey: #7A7A7A;
$color-bw-095-grey-dark: #363636;
$color-025-secondary-black: #050918;
$color-traffic-080-green: #2BB574;
$color-traffic-081-green-light: #DAF0E3;
$color-traffic-084-red: #FF6974;
$color-traffic-085-red-light: #FFE2E4;
$color-021-secondary-10pct: #E8E9EC;
$color-023-secondary-50pct: #888C9B;
$color-099-empty: rgba(250, 202, 21, 0);
$color-010-primary-10pct: #FFFAE8;
$color-030-blue: #3366FF;
$color-030-blue-10pct: #EAEFFF;
$color-031-purple: #6B4FCC;
$color-031-purple-10pct: #F0EDFA;
$color-032-green: #2CD692;
$color-032-green-10pct: #EAFBF5;
$color-031-purple-50pct: #B5A7E5;
$color-010-primary-65pct: #F9D964;
$color-032-green-dark: #1A8F60;
$color-032-green-50pct: #95EAC8;
$color-traffic-082-green-dark: #1F8656;
$color-022-secondary-30pct: #B8BAC3;
$color-traffic-087-red-dark: #D4555E;
$color-01-primary: #E5A700;
$color-traffic-086-red-light-50pct: #F4B7BB;

// Radius
$radius-5: 5px;
$radius-6: 6px;
$radius-8: 8px;
$radius-10: 10px;
$radius-11: 11px;
$radius-12: 12px;
$radius-14: 14px;
$radius-16: 16px;
$radius-18: 18px;
$radius-full: 9999px;

// Shadows
$shadow-input-6pct-10: 0px 0px 10px 0px rgba(0, 0, 0, 0.062);
$shadow-input-12pct-4: 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
$shadow-input-10pct-8: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
$shadow-input-14pct-2: 0px 0px 2px 0px rgba(0, 0, 0, 0.14);
$shadow-gradient-6pct-10: 0px 0px 10px 0px rgba(0, 0, 0, 0.062);
$shadow-btn-6pct-10: 0px 0px 10px 0px rgba(0, 0, 0, 0.062);
$shadow-btn-25pct-30b: 0px 0px 30px 0px rgba(0, 0, 0, 0.245);
$shadow-btn-25pct-30b-w: 0px 0px 30px 0px rgba(0, 0, 0, 0.245);
$shadow-gradient-10pct-15: 0px 0px 15px 0px rgba(0, 0, 0, 0.102);
$shadow-input-10pct-4: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
$shadow-input-12pct-4-primary: 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
$shadow-widget-bg: 0px 0px 30px 0px rgba(0, 0, 0, 0.08);

// Borders
$border-checkbox-1px: 2px solid rgba(19, 28, 57, 1);
$border-checkbox-selected-1px: 1px solid rgba(19, 28, 57, 1);
$border-grey-1px: 2px solid rgba(184, 186, 195, 1);
$border-dragndrop-1px: 1px solid rgba(184, 186, 195, 1);

@theme {
  /* Colors */
  --color-bw-092-grey: #D8D8D8;
  --color-bw-094-grey-dark: #363636;
  --color-bw-098-black: #181818;
  --color-bw-090-white: #FFFFFF;
  --color-010-primary: #FACA15;
  --color-bw-093-grey: #7A7A7A;
  --color-bw-091-grey: #EFEFEF;
  --color-bw-090-white-almost: #F6F6F7;
  --color-bw-092-grey: #AAAAAA;
  --color-020-secondary: #131C39;
  --color-010-primary-45pct: #F9E6AA;
  --color-024-secondary-dark: #08102A;
  --color-bw-094-grey: #7A7A7A;
  --color-bw-095-grey-dark: #363636;
  --color-025-secondary-black: #050918;
  --color-traffic-080-green: #2BB574;
  --color-traffic-081-green-light: #DAF0E3;
  --color-traffic-084-red: #FF6974;
  --color-traffic-085-red-light: #FFE2E4;
  --color-021-secondary-10pct: #E8E9EC;
  --color-023-secondary-50pct: #888C9B;
  --color-099-empty: rgba(250, 202, 21, 0);
  --color-010-primary-10pct: #FFFAE8;
  --color-030-blue: #3366FF;
  --color-030-blue-10pct: #EAEFFF;
  --color-031-purple: #6B4FCC;
  --color-031-purple-10pct: #F0EDFA;
  --color-032-green: #2CD692;
  --color-032-green-10pct: #EAFBF5;
  --color-031-purple-50pct: #B5A7E5;
  --color-010-primary-65pct: #F9D964;
  --color-032-green-dark: #1A8F60;
  --color-032-green-50pct: #95EAC8;
  --color-traffic-082-green-dark: #1F8656;
  --color-022-secondary-30pct: #B8BAC3;
  --color-traffic-087-red-dark: #D4555E;
  --color-01-primary: #E5A700;
  --color-traffic-086-red-light-50pct: #F4B7BB;
  /* Radius */
  --radius-5: 5px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-11: 11px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-18: 18px;
  --radius-full: 9999px;
  /* Shadows */
  --shadow-input-6pct-10: 0px 0px 10px 0px rgba(0, 0, 0, 0.062);
  --shadow-input-12pct-4: 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
  --shadow-input-10pct-8: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
  --shadow-input-14pct-2: 0px 0px 2px 0px rgba(0, 0, 0, 0.14);
  --shadow-gradient-6pct-10: 0px 0px 10px 0px rgba(0, 0, 0, 0.062);
  --shadow-btn-6pct-10: 0px 0px 10px 0px rgba(0, 0, 0, 0.062);
  --shadow-btn-25pct-30b: 0px 0px 30px 0px rgba(0, 0, 0, 0.245);
  --shadow-btn-25pct-30b-w: 0px 0px 30px 0px rgba(0, 0, 0, 0.245);
  --shadow-gradient-10pct-15: 0px 0px 15px 0px rgba(0, 0, 0, 0.102);
  --shadow-input-10pct-4: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
  --shadow-input-12pct-4-primary: 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
  --shadow-widget-bg: 0px 0px 30px 0px rgba(0, 0, 0, 0.08);
}

{
  "color": {
    "bw-092-grey": "#AAAAAA",
    "bw-094-grey-dark": "#363636",
    "bw-098-black": "#181818",
    "bw-090-white": "#FFFFFF",
    "010-primary": "#FACA15",
    "bw-093-grey": "#7A7A7A",
    "bw-091-grey": "#EFEFEF",
    "bw-090-white-almost": "#F6F6F7",
    "020-secondary": "#131C39",
    "010-primary-45pct": "#F9E6AA",
    "024-secondary-dark": "#08102A",
    "bw-094-grey": "#7A7A7A",
    "bw-095-grey-dark": "#363636",
    "025-secondary-black": "#050918",
    "traffic-080-green": "#2BB574",
    "traffic-081-green-light": "#DAF0E3",
    "traffic-084-red": "#FF6974",
    "traffic-085-red-light": "#FFE2E4",
    "021-secondary-10pct": "#E8E9EC",
    "023-secondary-50pct": "#888C9B",
    "099-empty": "rgba(250, 202, 21, 0)",
    "010-primary-10pct": "#FFFAE8",
    "030-blue": "#3366FF",
    "030-blue-10pct": "#EAEFFF",
    "031-purple": "#6B4FCC",
    "031-purple-10pct": "#F0EDFA",
    "032-green": "#2CD692",
    "032-green-10pct": "#EAFBF5",
    "031-purple-50pct": "#B5A7E5",
    "010-primary-65pct": "#F9D964",
    "032-green-dark": "#1A8F60",
    "032-green-50pct": "#95EAC8",
    "traffic-082-green-dark": "#1F8656",
    "022-secondary-30pct": "#B8BAC3",
    "traffic-087-red-dark": "#D4555E",
    "01-primary": "#E5A700",
    "traffic-086-red-light-50pct": "#F4B7BB"
  },
  "radius": {
    "5": "5px",
    "6": "6px",
    "8": "8px",
    "10": "10px",
    "11": "11px",
    "12": "12px",
    "14": "14px",
    "16": "16px",
    "18": "18px",
    "full": "9999px"
  },
  "shadow": {
    "input-6pct-10": "0px 0px 10px 0px rgba(0, 0, 0, 0.062)",
    "input-12pct-4": "0px 0px 4px 0px rgba(0, 0, 0, 0.12)",
    "input-10pct-8": "0px 0px 8px 0px rgba(0, 0, 0, 0.1)",
    "input-14pct-2": "0px 0px 2px 0px rgba(0, 0, 0, 0.14)",
    "gradient-6pct-10": "0px 0px 10px 0px rgba(0, 0, 0, 0.062)",
    "btn-6pct-10": "0px 0px 10px 0px rgba(0, 0, 0, 0.062)",
    "btn-25pct-30b": "0px 0px 30px 0px rgba(0, 0, 0, 0.245)",
    "btn-25pct-30b-w": "0px 0px 30px 0px rgba(0, 0, 0, 0.245)",
    "gradient-10pct-15": "0px 0px 15px 0px rgba(0, 0, 0, 0.102)",
    "input-10pct-4": "0px 0px 4px 0px rgba(0, 0, 0, 0.1)",
    "input-12pct-4-primary": "0px 0px 4px 0px rgba(0, 0, 0, 0.12)",
    "widget-bg": "0px 0px 30px 0px rgba(0, 0, 0, 0.08)"
  },
  "border": {
    "checkbox-1px": "2px solid rgba(19, 28, 57, 1)",
    "checkbox-selected-1px": "1px solid rgba(19, 28, 57, 1)",
    "grey-1px": "2px solid rgba(184, 186, 195, 1)",
    "dragndrop-1px": "1px solid rgba(184, 186, 195, 1)"
  }
}

Component Library

390 symbols organised bottom-up, from atomic icons to full cards. Click any card to copy a suggested Vue snippet.

Normal122

Wide131

243

302

328

367

421

484

Special1

Tabs1

Toggles7

483

avatar10

checkbox2

chips10

dividers1

others2

radio_button2

table_row6

Analytics2

Bundle2

Instant_Wins3

Raffle4

step7

Subs2

users3

General1

blurb1

dropdown1

icon_text3

pagination1

table_row21

General2

General4

Rocket2

Trustpilot1

General7

Sitemap

The full SaaS application flow — onboarding, the sidebar app navigation and the top header menu.

Name, email, password

Email & password
Forgotten password

Forgotten password

Email input
Email link → set new password

Subscription plan

Basic Raffle plan
Enterprise plan

Payment page

Dashboard / Landing

Analytics
Total Revenue
Total Customers

Orders

Orders list
Item & Bill
Billing details

Customers

Add new customer
Customers list
Customer profile
Customer details
Customer wallet
Security actions
- Request password reset
- Lock wallet
- Suspend account

Raffles

All raffles
Create raffle
Raffle states
- Closed
- Running
- Draft
Stats & analytics
Edit & settings
Duplicate raffle
Winners
- Pick a winner
Payment history

Website / Settings

Website settings
Logo (add / replace)
Colour palette
Active offer
Listing page
Coupons
About us
Business contact details
Social media links
Payment setup
- Payment gateways
- Additional methods
Domain setup
Reviews (TrustPilot)
Media files
- Upload media
- Trash (restore / delete)
- Media info

Wallet

Wallet dashboard
Wallet details (list)
User wallet details
Wallet activity
Wallet transfer / fund
Reward settings
Wallet settings
Personalise wallet

Staff

Staff management
Roles & permissions
Team members

Marketing

Coupons
Notifications

Site preview / CTA

Help

Notifications

Notification settings
Recent activities
Dashboard notifications
SMS notifications
Email notifications

Upgrade CTA

Profile / Settings

Account settings
Profile info
Login info
2-step verification
Notifications
Subscription & billing
- Active plan
- Billing history
- Billing address
- Upgrade plan
- FAQ’s
Logout

Design System

Generated June 2026 from Reffle_new.sketch. Colors, gradients, shadows and borders extracted from saved document styles & swatches; the type scale and component inventory were derived from the Symbols page.