CSS Architecture

RitoSwap’s CSS architecture represents a deliberate departure from utility-first frameworks in favor of a component-scoped, modular approach. Built entirely with CSS modules and custom properties, the system provides complete visual control while maintaining strict style isolation. This isn’t about following trends—it’s about creating a maintainable, performant styling system that scales with the application’s complexity.

System Overview

At its foundation, the CSS architecture divides styling responsibilities into two distinct categories: global design tokens that establish the visual language, and locally scoped modules that implement component-specific styles. This separation ensures that while every component shares the same design vocabulary, their implementations remain completely isolated from one another.

The decision to avoid Tailwind and similar utility frameworks stems from the need for precise control over RitoSwap’s distinctive aesthetic. Every gradient, every shadow, and every animation is crafted to support the Blade Runner-inspired atmosphere that defines the RitoVision brand. This level of visual precision demands custom CSS that can evolve with the design vision rather than being constrained by predefined utility classes.

Global Foundation

Only two files in the entire system apply styles globally, and their responsibilities are clearly delineated:

• styles
  • globals.css
  • wallet-variants.css

The globals.css file serves as the single source of truth for design tokens, typography, and foundational styles. It imports wallet-variants.css and establishes the CSS custom properties that flow through every component. Meanwhile, wallet-variants.css handles a specific responsive behavior pattern for navigation components, controlling their visibility across breakpoints.

Component-Level Isolation

Beyond these two global files, every style in RitoSwap lives within CSS modules, ensuring complete encapsulation. Each component maintains its styles in a companion .module.css file that lives alongside the component itself:

• NFTScreen
  • NFTScreen.tsx
  • NFTScreen.module.css

This co-location pattern extends throughout the entire codebase. Pages maintain their styles in page.module.css files, while components carry their .module.css companions regardless of their directory depth. The result is a file system where styles and logic travel together, making components truly self-contained and portable.

Design Tokens & Custom Properties

The heart of RitoSwap’s visual consistency lies in its carefully curated design tokens, implemented as CSS custom properties in globals.css:

:root {
  /* Core Color Palette */
  --primary-color: #012035;      /* Deep space blue */
  --secondary-color: #04426C;     /* Hologram blue */
  --accent-color: #FC1819;        /* Neon red primary */
  --accent-color-2: #f47838;      /* Warm orange accent */
  --background-white: #e9f9f9;    /* Soft cyan white */
  --secondary-red: #CE161B;       /* Deep crimson */
  --utility-green: #11C045;       /* Success/confirmation green */
  
  /* Computed Values */
  --background: var(--primary-color);
  --foreground: #ffffff;
  
  /* Typography Systems */
  --font-primary: "AgencyB", sans-serif;
  --font-body: "Michroma", sans-serif;
  
  /* Consistent Borders */
  --default-border: 2px solid var(--secondary-color);
}

Color System Usage Patterns

The --primary-color and --secondary-color form the foundation of RitoSwap’s visual identity and are used throughout the entire application:

• Primary Color (#012035): Functions as the default background color across all pages and major containers, creating the deep space atmosphere
• Secondary Color (#04426C): This hologram blue provides a smooth, subtle yet distinctive contrast against the primary color. It creates the effect of a holographic neon projection—less jarring than white but distinct enough to clearly define interactive elements. Powers nearly all borders and button hover states throughout the interface.

Text throughout the interface defaults to white (--foreground), maintaining high contrast against the dark backgrounds. The --accent-color serves as a highlight mechanism, drawing attention to important text elements and specific UI components like notification toasts.

The --default-border property appears ubiquitously across the component library. From modals to containers to form inputs, this standardized border creates visual consistency throughout the interface. Notable exceptions include buttons, which often employ custom border radius values for distinct interaction states.

Strategic use of the glow utility classes (.darkglow, .blueglow, .redglow) can amplify the atmospheric effect, creating depth and emphasis that reinforces the cyberpunk aesthetic.

Typography System

RitoSwap’s typography leverages three distinct typefaces, each serving specific hierarchical purposes:

Font Loading Strategy

/* AgencyB for primary headings (H1-H5) */
@font-face {
  font-family: "AgencyB";
  src: url("/fonts/AGENCYB.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
 
/* YoungAgency for H6 elements */
@font-face {
  font-family: "YoungAgency";
  src: url("/fonts/YoungAgency-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
 
/* Michroma for body text */
@font-face {
  font-family: "Michroma";
  src: url("/fonts/Michroma-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

Typography Defaults

The system establishes clear typographic defaults for all HTML elements:

Utility Classes

While RitoSwap avoids utility-first frameworks, it provides a small set of purpose-built utility classes for common patterns:

Layout Utilities

.defaulttopspace {
  margin-top: 8%;
}
 
.defaultbottomspace {
  margin-bottom: 8%;
}
 
.margincenter {
  margin-left: auto;
  margin-right: auto;
}

These spacing utilities adapt responsively, expanding to 20% margins on mobile devices (below 730px) to accommodate smaller viewports.

Visual Effects

.darkglow {
  box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.25);
}
 
.blueglow {
  box-shadow: 6px 6px 25px rgba(3, 62, 101, 0.25);
}
 
.redglow {
  box-shadow: 0 10px 20px rgba(252, 24, 25, 0.3);
}

These glow effects support the cyberpunk aesthetic by adding atmospheric lighting to key interface elements.

Typography Utilities

.headingLarge {
  font-size: 3rem;
  text-align: center;
}
 
.redText {
  color: var(--accent-color);
}

Accessibility Features

The CSS system includes built-in accessibility support through carefully considered patterns:

Screen Reader Support

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

This utility class enables developers to include screen reader-only content in any component, ensuring information accessibility without affecting visual design.

Focus States

All interactive elements inherit a consistent white outline focus state, making keyboard navigation clearly visible against RitoSwap’s dark backgrounds. This ensures users can tab through the interface with clear visual feedback at every step.

Custom Scrollbar Styling

RitoSwap implements custom scrollbar styling to maintain visual consistency with the overall design:

/* WebKit browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 15px;
}
 
::-webkit-scrollbar-track {
  background: rgb(90, 86, 86);
}
 
::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 5px;
}
 
::-webkit-scrollbar-thumb:hover {
  background: #01182a;
}

Form Input Styling

The system includes specific handling for autofilled form inputs to maintain visual consistency:

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: var(--foreground) !important;
  transition: background-color 9999s ease-in-out 0s;
}

This prevents the browser’s default yellow autofill background from disrupting the dark theme aesthetic.

Component Module Patterns

When creating component-specific styles, CSS modules provide complete isolation while maintaining access to global design tokens. Here’s a typical pattern from the NFTScreen component:

/* NFTScreen.module.css */
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 550px;
  opacity: 1;
  transform: scale(1);
  transition: all 0.5s ease-in-out;
}
 
.container {
  border: var(--default-border);  /* Using global token */
  border-radius: 10px;
  background-color: transparent;
  /* Component-specific styles */
}

Components can reference global custom properties while keeping their specific implementations completely isolated. This pattern scales infinitely—each new component adds zero global styles while inheriting the established design language.

Best Practices

When working with RitoSwap’s CSS architecture, follow these guidelines:

1. Use CSS modules for component styles to maintain isolation
2. Reference design tokens through custom properties rather than hardcoding values
3. Co-locate styles with their components in .module.css files
4. Respect the font-weight constraint for AgencyB—always use weight 1
5. Include .sr-only content where necessary for accessibility
6. Test focus states to ensure keyboard navigation remains visible

This architecture ensures that as RitoSwap grows, its styling remains maintainable, performant, and true to the RitoVision aesthetic vision.

Explore UI Implementation

To see these CSS patterns in action across RitoSwap’s interface components: