🎨 SciTeX Color System

Scientifically-inspired colors designed for extended research sessions. All colors tested for accessibility (WCAG AA compliance).

Brand Colors

Core SciTeX identity colors used across all applications

Primary
#1a2332
Deep Slate

Secondary
#34495e
Steel Blue

Accent
#506b7a
Sage Gray

Neutral Scale

Grayscale system for text, backgrounds, and subtle elements

Light Gray
#f8f9fa

Mid Gray
#e9ecef

Dark Gray
#6c757d

Status Colors

Semantic colors for feedback, alerts, and state indication

Success
#4a9b7e
Forest Green

Warning
#b8956a
Amber Gold

Error
#a67373
Muted Red

Info
#6b8fb3
Soft Blue

Application Colors

Module-specific accent colors for SciTeX applications

Scholar
#2563eb
Research Blue

Code
#059669
Terminal Green

Writer
#dc2626
Editor Red

Viz
#7c3aed
Data Purple

Color Usage Guidelines

Contrast: All color combinations meet WCAG AA standards (4.5:1 ratio minimum)
Hierarchy: Primary → Secondary → Accent for visual importance
Accessibility: Never rely on color alone to convey information
Consistency: Use semantic status colors consistently across all modules

🔘 Buttons

Consistent button styles across all SciTeX applications

Primary Buttons

<button class="scitex-btn-primary">Primary Button</button>
<button class="scitex-btn-primary scitex-btn-sm">Small</button>
<button class="scitex-btn-primary scitex-btn-lg">Large</button>
        

Secondary Buttons

<button class="scitex-btn-secondary">Secondary Button</button>
<button class="scitex-btn-secondary scitex-btn-sm">Small</button>
<button class="scitex-btn-secondary scitex-btn-lg">Large</button>
        

📻 Radio Buttons

Custom radio button groups with SciTeX styling

Standard Radio Group

Relevance Date Citations

<div class="scitex-radio-group" role="group">
    <input type="radio" class="scitex-radio" name="sort" id="sort-relevance" checked>
    <label class="scitex-radio-label" for="sort-relevance">Relevance</label>
    <input type="radio" class="scitex-radio" name="sort" id="sort-date">
    <label class="scitex-radio-label" for="sort-date">Date</label>
    <input type="radio" class="scitex-radio" name="sort" id="sort-citations">
    <label class="scitex-radio-label" for="sort-citations">Citations</label>
</div>
        

Small Radio Group

Option 1 Option 2 Option 3

<div class="scitex-radio-group scitex-radio-group-sm" role="group">
    <input type="radio" class="scitex-radio" name="options" id="option-1" checked>
    <label class="scitex-radio-label" for="option-1">Option 1</label>
    ...
</div>
        

☑️ Checkboxes

Custom checkbox styling with SciTeX design

Standard Checkboxes

Open Access Only

Last 5 Years

High Impact (IF > 5)

<div class="scitex-checkbox-wrapper">
    <input type="checkbox" class="scitex-checkbox" id="open-access" checked>
    <label class="scitex-checkbox-label" for="open-access">Open Access Only</label>
</div>
        

🔄 Toggle Switches

Source selection toggles and other switch controls

Source Selection Toggles

PubMed

Google Scholar

arXiv

Semantic Scholar

<div class="scitex-toggle-wrapper">
    <input class="scitex-toggle" type="checkbox" id="source-pubmed" checked>
    <label class="scitex-toggle-label" for="source-pubmed">PubMed</label>
</div>
        

📝 Form Controls

Input fields and form elements

Input Fields

<input type="text" class="scitex-input" placeholder="Enter text...">
<select class="scitex-select">
    <option>Select option</option>
</select>
        

📝 Typography System

Consistent typography scale for scientific content readability

Headings

H1 - Main Title (2.5rem)

H2 - Section Title (2rem)

H3 - Subsection (1.75rem)

H4 - Content Header (1.5rem)

H5 - Minor Header (1.25rem)

H6 - Caption (1rem)

Body Text & Variants

Lead text - Important introductions and summaries

Regular body text - Main content, abstracts, and descriptions

Small text - Metadata, citations, and secondary information

Muted text - Less important information

Code text - Technical references and snippets

/* Typography CSS Classes */
.lead { font-size: 1.25rem; font-weight: 300; }
.small { font-size: 0.875rem; }
.text-muted { color: #6c757d; }
.text-primary { color: var(--primary-color); }
.fw-bold { font-weight: 700; }
.fw-medium { font-weight: 500; }
        

📐 Spacing & Layout System

Consistent spacing scale based on 0.25rem increments

Spacing Scale

0.25rem (4px) - xs

0.5rem (8px) - sm

1rem (16px) - md

1.5rem (24px) - lg

3rem (48px) - xl

Container Sizes

xs: <576px - Mobile

sm: ≥576px - Mobile landscape

md: ≥768px - Tablet

lg: ≥992px - Desktop

xl: ≥1200px - Large desktop

xxl: ≥1400px - Extra large

/* Spacing utilities */
.m-1 { margin: 0.25rem; }
.p-2 { padding: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }
.gap-3 { gap: 1rem; }
        

🎭 SciTeX Hero Section

The signature silverish AI light gradient used across the SciTeX platform

Silverish AI Light Hero

Primary hero gradient used across landing pages, Scholar, and all SciTeX applications

Accelerate your research

From literature discovery to final publication - community driven, fully open-sourced tools

🧬 Scientific 🎨 Accessible ⚡ Performant 🌐 Responsive

/* SciTeX Silverish AI Light Hero */
.hero-silverish-ai-light {
    background: linear-gradient(135deg, #506b7a 0%, #6c8ba0 30%, #8fa4b0 60%, #b5c7d1 100%);
    color: #1a2332;
    text-shadow: 0 1px 2px rgba(255,255,255,0.5);
    padding: 4rem 2rem;
    text-align: center;
}

.hero-silverish-ai-light .hero-subtitle {
    color: #1a2332;
    text-shadow: 0 1px 3px rgba(255,255,255,0.9);
    font-weight: 600;
}
        

Implementation Example

<!-- HTML Structure -->
<div class="hero-silverish-ai-light">
    <div class="container">
        <h1>Your Title</h1>
        <p class="hero-subtitle">Your subtitle</p>
        <button class="btn btn-primary">Call to Action</button>
    </div>
</div>

<!-- Include CSS -->
<link rel="stylesheet" href="{% static 'common/css/hero-gradients.css' %}">
            

🗃️ Cards & Containers

Consistent card designs for content organization

Basic Card

Card Title

Card content and description

Elevated Card

Enhanced shadow and accent border

Glass Card

Translucent with blur effect

/* Card variations */
.card-basic { background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.card-elevated { box-shadow: 0 4px 16px rgba(0,0,0,0.15); border-left: 4px solid var(--primary-color); }
.card-glass { background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3); }
        

🛠️ Implementation Guide

How to use the SciTeX Design System in your projects

1. Include the CSS

<link rel="stylesheet" href="{% static 'css/common/scitex-components.css' %}">
<link rel="stylesheet" href="{% static 'common/css/hero-gradients.css' %}">
        

2. Use CSS Custom Properties

/* Available CSS Variables */
:root {
    --primary-color: #1a2332;    /* Deep Slate - Primary actions, headers */
    --secondary-color: #34495e;  /* Steel Blue - Secondary elements */
    --accent-color: #506b7a;     /* Sage Gray - Subtle accents */
    --success-color: #4a9b7e;    /* Forest Green - Success states */
    --warning-color: #b8956a;    /* Amber Gold - Warning states */
    --error-color: #a67373;      /* Muted Red - Error states */
    --info-color: #6b8fb3;       /* Soft Blue - Information */
    
    /* Application-specific colors */
    --scholar-color: #2563eb;    /* Research Blue */
    --code-color: #059669;       /* Terminal Green */
    --writer-color: #dc2626;     /* Editor Red */
    --viz-color: #7c3aed;        /* Data Purple */
}
        

3. Replace Bootstrap Components

Replace Bootstrap buttons and form controls with SciTeX equivalents:

<button class="btn btn-primary">Button</button>
<input type="radio" class="btn-check">
<div class="form-check">


<button class="scitex-btn-primary">Button</button>
<input type="radio" class="scitex-radio">
<div class="scitex-checkbox-wrapper">
        

4. Design Principles

Consistency: Use the same components across all pages
Accessibility: All components are keyboard accessible and WCAG AA compliant
Responsiveness: Components adapt to mobile screens
Color Harmony: Stick to the defined color palette

Typography: Use the established font hierarchy
Spacing: Follow the 0.25rem increment spacing scale
Performance: Lightweight CSS with minimal dependencies
Scientific Focus: Optimized for research and academic content

5. File Structure

static/
├── css/
│   └── common/
│       └── scitex-components.css    # Main component library
├── common/
│   └── css/
│       ├── hero-gradients.css       # Hero section styles
│       └── components.css           # Additional components
└── js/
    └── scitex-components.js         # Interactive behavior
        