Daily Ticker Style Guide

Design system documentation for developers and designers

Colors

Daily Ticker uses a carefully selected color palette optimized for financial data visualization and readability in dark mode interfaces.

Background

Primary background color - deep navy blue

Hex:
Tailwind:background
Usage:Page backgrounds, main containers

Foreground

Primary text color - light gray

Hex:
Tailwind:foreground
Usage:Body text, headings

LED Green

Accent color for positive states and CTAs

Hex:
Tailwind:ledGreen
Usage:Buttons, links, positive indicators, glows

LED Red

Accent color for negative states

Hex:
Tailwind:ledRed
Usage:Error states, negative indicators

Card Background

Secondary background for cards and borders

Hex:
Usage:Cards, borders, elevated surfaces

Gray 300

Secondary text color

Hex:
Tailwind:gray-300
Usage:Descriptions, supporting text

Gray 400

Tertiary text color

Hex:
Tailwind:gray-400
Usage:Metadata, captions

Typography

Our typography system uses two high-quality typefaces for optimal readability and brand consistency.

Inter

Primary font for all UI text, headings, and body copy

font-sans
Available Weights:
400500600700
Example:

The quick brown fox jumps over the lazy dog

Space Mono

Monospace font for technical text, tickers, and LED-style displays

font-mono
Available Weights:
400700
Example:

AAPL $150.25 +2.5%

Text Scale

Heading 1

text-7xl font-bold

Heading 2

text-5xl font-bold

Heading 3

text-3xl font-bold

Heading 4

text-2xl font-bold

Heading 5

text-xl font-semibold

Body Large - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-lg text-gray-300

Body Regular - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-base text-gray-300

Body Small - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-sm text-gray-400

Spacing

Consistent spacing creates visual hierarchy and improves readability. We use Tailwind's default spacing scale.

xs
0.25rem(4px)
sm
0.5rem(8px)
md
1rem(16px)
lg
1.5rem(24px)
xl
2rem(32px)
2xl
3rem(48px)
3xl
4rem(64px)

Buttons

Button components for various actions and states across the application.

Primary (CTA)

bg-[#00ff88] text-[#0B1E32] font-bold rounded-lg hover:bg-[#00dd77]

Secondary

bg-[#1a3a52] text-white font-semibold rounded-lg hover:bg-[#244a62] border border-[#00ff88]/20

Outline

bg-transparent text-[#00ff88] border-2 border-[#00ff88] hover:bg-[#00ff88]/10

Ghost

bg-transparent text-gray-300 hover:bg-[#1a3a52]

Forms

Form elements for user input with consistent styling.

Text Input

bg-[#0B1E32] border border-[#1a3a52] focus:ring-2 focus:ring-[#00ff88]/50

Toggle Switch

Enabled
Disabled
bg-[#00ff88] (active) | bg-[#1a3a52] (inactive)

Cards

Card components for grouping related content.

Standard Card

This is a standard card component used throughout the application for grouping related information.

bg-[#1a3a52]/30 border border-[#1a3a52] rounded-lg p-6
Featured

Premium Card

Featured card with gradient background and accent border for highlighting important content.

bg-gradient-to-br from-[#1a3a52] to-[#0B1E32] border-2 border-[#00ff88]/40

Badges

Badge components for status indicators and labels.

LiveProMost PopularNewSave 20%

Animations

Pre-configured animations for interactive elements.

scroll

Horizontal scrolling animation for ticker tape

Duration:30s
Usage:Stock ticker carousel
animate-scroll

ping

Expanding ring pulse effect

Duration:1s
Usage:Live indicators, attention grabbers
animate-ping

pulse

Opacity fade in/out

Duration:2s
Usage:Loading states, breathing effects
animate-pulse

spin

360° rotation

Duration:1s
Usage:Loading spinners
animate-spin

border-beam

Animated border effect

Duration:calc(var(--duration)*1s)
Usage:Premium card borders
animate-border-beam

Effects

Special visual effects and utilities.

LED Text Glow

AAPL $150.25 +2.5%

text-[#00ff88] font-mono led-text (text-shadow: 0 0 10px currentColor)

Box Glow

Glowing Container
ticker-glow (box-shadow: 0 0 20px rgba(0, 255, 136, 0.3))

Gradient Text

Daily Ticker Pro

bg-gradient-to-r from-[#00ff88] to-[#00dd77] bg-clip-text text-transparent

Backdrop Blur

Blurred Background
bg-[#0B1E32]/80 backdrop-blur-sm

Icons

We use Lucide React icons throughout the application. Common icons include:

TrendingUp
Zap
BookOpen
Lock
import { TrendingUp, Zap, BookOpen, Lock } from "lucide-react"

Responsive Breakpoints

Tailwind's default breakpoints for responsive design.

sm640px and up
md768px and up
lg1024px and up
xl1280px and up
2xl1536px and up