Styling System
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The styling system of the CoolTools platform is built upon a modern utility-first architecture using Tailwind CSS 4. It leverages a hybrid approach of global CSS variables, theme-aware utility classes, and dynamic React-based styling to provide a responsive, high-performance user interface. The system is designed to support both light and dark modes natively while maintaining brand consistency through a defined color palette and typography.
The architecture integrates Google Fonts (Geist Sans and Geist Mono) to ensure optimized font loading and a cohesive visual language across the mobile comparison and search interfaces. Sources: cooltools/app/layout.tsx:7-19, cooltools/package.json:33-34
Core Architecture
Utility-First Framework
The project utilizes Tailwind CSS as its primary styling engine. This is evidenced by the @import "tailwindcss" directive in the global styles and the presence of tailwindcss and @tailwindcss/postcss in the development dependencies. Sources: cooltools/app/globals.css:1, cooltools/package.json:33-34
Theme Configuration and Variables
The system defines a base theme using CSS variables (:root). These variables are then mapped to Tailwind's theme system using the @theme inline directive. This allows the application to dynamically switch between light and dark modes based on the user's system preference (prefers-color-scheme: dark).
| Variable | Light Mode (Default) | Dark Mode | Description |
|---|---|---|---|
--background | #ffffff | #0a0a0a | Primary background color for the viewport |
--foreground | #171717 | #ededed | Primary text and icon color |
--font-sans | Geist Sans | Geist Sans | Main typography font family |
--font-mono | Geist Mono | Geist Mono | Technical/Data typography font family |
Sources: cooltools/app/globals.css:3-19, cooltools/app/layout.tsx:7-19
Typography and Global Styles
Typography is managed through next/font/google, specifically using the Geist and Geist_Mono families. These fonts are injected into the application via CSS variables and applied to the HTML body with the antialiased utility class.
The system also enforces smooth scrolling at the html level and provides a consistent focus ring (#3b82f6) for accessibility. Sources: cooltools/app/globals.css:21-34, cooltools/app/layout.tsx:34-36
Visual Components and Layout
Navigation Styling
The navigation bar utilizes a sticky layout (sticky top-0) with high z-index (z-50) to remain visible during scrolling. It employs a complex set of classes to handle transparency, blurring, and borders across themes.
- Gradient Branding: The "CoolTools" logo uses a text gradient (
bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent) for brand identity. - Interactive States: Navigation links feature transition-based hover effects (
hover:text-blue-600 transition).
Sources: cooltools/app/layout.tsx:38-70
Design Patterns and Animations
The platform utilizes several recurring design patterns to enhance user experience:
- Gradients: Extensive use of linear gradients for backgrounds and decorative elements (e.g.,
from-blue-50 via-purple-50 to-pink-50). - Glassmorphism: Use of
backdrop-blurand semi-transparent backgrounds (bg-white/50 dark:bg-gray-800/50) for overlays and carousels. - Animations:
animate-pulse: Used for loading states and attention-grabbing headers.slideIn: A custom CSS keyframe animation used for entry transitions.hover:scale-105: Consistent transform transitions for interactive cards.
/* Custom Animation Definition */
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
Sources: cooltools/app/globals.css:36-47, cooltools/app/page.tsx:135-145
Specialized Interface Styling
Comparison Tables and Feature Grids
In the ComparePage, styling is used to distinguish between phone models while maintaining a readable grid. Features are organized into sections (Display, Performance, Camera, Battery) using consistent padding (p-3), background colors (bg-gray-50), and font weights. Sources: cooltools/app/compare/page.tsx:216-276
Tabbed Detail Views
The phone details interface implements a tabbed navigation system. Active states are indicated by high-contrast styling (bg-blue-600 text-white), while inactive states remain subtle to reduce cognitive load.
- Active:
bg-blue-600 text-white - Inactive:
text-gray-600 dark:text-gray-400 hover:bg-gray-100
Sources: cooltools/app/phones/[slug]/page.tsx:143-172
Data Visualization
The system includes recharts for visual data representation, although the primary UI relies on Lucide React icons to provide visual cues for technical specifications (e.g., Cpu for performance, Battery for power). Sources: cooltools/package.json:23, cooltools/app/phones/[slug]/page.tsx:180-250
Conclusion
The Styling System in CoolTools is a robust implementation of Tailwind CSS 4 that prioritizes responsiveness and theme flexibility. By combining Next.js font optimization with custom CSS animations and a strict color variable system, the platform delivers a high-quality, professional aesthetic suitable for technical comparison tools.