DEMOS

[A] HOME
[B] MISSION
[C] VALUE
[D] FEATURES
[E] CAPABILITIES
RESOURCES

DEMOS

[A] HOME
[B] MISSION
[C] VALUE
[D] FEATURES
RESOURCES

Search...

Getting Started

Introduction to Demos Design System

Quick Start Guide

Design Principles

Components

Component Library

Design Tokens

Color System & Palette

Typography System

Layout System

Layout & Grid System

Brand Guidelines

Brand Identity & Visual Guidelines

Search...

Getting Started

Introduction to Demos Design System

Quick Start Guide

Design Principles

Components

Component Library

Design Tokens

Color System & Palette

Typography System

Layout System

Layout & Grid System

Brand Guidelines

Brand Identity & Visual Guidelines

Component Library

Visual Component Library

Interactive examples of all design system components with live previews and code.

Color Swatches

Royal Blue
#2563EB Cod Gray
#121212 Boulder
#757575 Success
#29B86B

Button Components

Primary Button

Primary Button 

.button-primary {
  background: rgb(37, 99, 235);
  color: rgb(255, 255, 255);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.button-primary:hover {
  background: rgb(17, 25, 230);
  transform: translateY(-1px);
}

Secondary Button

Secondary Button 

.button-secondary {
  background: transparent;
  color: rgb(246, 246, 246);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 12px 24px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.button-secondary:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
}

Button States

Default

Default

Hover

Hover

Disabled

Disabled

Card Components

Article Card

Image Placeholder

Technical

Understanding Cross-Chain Technology

Learn how Demos Network enables seamless communication between different blockchain networks...

.article-card {
  background: rgb(18, 18, 18);
  border-radius: 12px;
  padding: 14px;
  max-width: 344px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(255, 255, 255, 0.1);
}

Form Components

Input Field

Email Address 

.input-field {
  background: rgb(15, 15, 15);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px 16px;
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: rgb(246, 246, 246);
  transition: border-color 0.2s ease;
}

.input-field:focus {
  outline: none;
  border-color: rgb(37, 99, 235);
}

Search Bar

.search-bar {
  background: rgb(15, 15, 15);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px 16px;
  width: 276px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: rgb(246, 246, 246);
}

.search-bar:focus {
  outline: none;
  border-color: rgb(37, 99, 235);
}

Usage Guidelines

  • Consistency: Use the same component variants across the application

  • Accessibility: Ensure all interactive elements have proper focus states and ARIA labels

  • Spacing: Maintain consistent padding and margins using the spacing scale

  • Colors: Always use colors from the design system palette

  • Typography: Follow the typography scale for text sizing

  • Responsive: Test components at all breakpoints (mobile, tablet, desktop)

Component Specifications

Button Sizes

  • Small: padding: 8px 16px; font-size: 14px;

  • Medium: padding: 12px 24px; font-size: 16px; (default)

  • Large: padding: 16px 32px; font-size: 18px;

Card Variants

  • Article Card: 344px max-width, 14px padding

  • Product Card: 400px max-width, 20px padding

  • Feature Card: Full width, 24px padding

Input States

  • Default: border: 1px solid rgba(255, 255, 255, 0.1)

  • Focus: border-color: rgb(37, 99, 235)

  • Error: border-color: rgb(239, 68, 68)

  • Success: border-color: rgb(41, 184, 107)

  • Disabled: opacity: 0.5; cursor: not-allowed

FOOTER
[ CYA ]
A HOME
B MISSION
C VALUE
D FEATURES
E CAPABILITIES
RESOURCES
© DEMOS. All rights reserved 2025