Style Guide

Complete design system and brand guidelines for Edgerun. This page serves as the single source of truth for colors, typography, components, and spacing.

Color Palette

Edgerun uses a dark theme with purple and blue accents. All colors are defined as design tokens.

Backgrounds

--background

Background

oklch(0 0 0)

--card

Card

oklch(0.12 0 0)

--popover

Popover

oklch(0.15 0 0)

--muted

Muted

oklch(0.20 0 0)

Accent Colors

--primary

Primary (Purple)

oklch(0.65 0.22 285)

--accent

Accent (Blue)

oklch(0.60 0.18 250)

--secondary

Secondary

oklch(0.25 0 0)

--destructive

Destructive (Red)

oklch(0.55 0.22 25)

Text Colors

--foreground

Foreground

oklch(0.98 0 0)

--muted-foreground

Muted Foreground

oklch(0.60 0 0)

--primary-foreground

Primary Foreground

oklch(0.98 0 0)

--card-foreground

Card Foreground

oklch(0.98 0 0)

UI Elements

--border

Border

oklch(0.22 0 0)

--input

Input

oklch(0.22 0 0)

--ring

Ring

oklch(0.65 0.22 285)

Border Radius

--radius: 0.625rem

Typography

Edgerun uses Geist for UI text and Geist Mono for technical data like hashes and code.

Heading 1 - Bold Display

Heading 2 - Section Title

Heading 3 - Subsection

Heading 4 - Card Title

Heading 5 - Small Heading

This is body text in the default size. It uses the Geist font family with relaxed line height for optimal readability. Body text should be clear and comfortable to read for extended periods.

This is secondary body text, often used for descriptions, captions, or less prominent information. It uses a muted foreground color to create visual hierarchy.

0x7f3a9b2c8e1d4f6a9c2b5e8d1a4f7c3b9e2a5d8c1f4a7b3e6d9c2a5f8e1b4d7

Technical data like hashes, addresses, and code snippets use monospace font

Available Font Classes:

  • font-sans - Default UI font (Geist)
  • font-mono - Monospace font (Geist Mono)

Components

Standard UI components built with shadcn/ui and customized for the Edgerun brand.

Buttons

Badges

DefaultSecondaryOutlineDestructive

Input Fields

Cards

Card Title
Card description with additional context about the content

Card content goes here. Cards are used to group related information.

Muted Card
Cards can have different background colors

Use muted backgrounds for less prominent content.

Spacing

Consistent spacing using Tailwind's spacing scale (4px base unit).

Spacing Scale

Use Tailwind spacing utilities (p-*, m-*, gap-*) for consistent spacing

0
0
0px
1
0.25rem
4px
2
0.5rem
8px
3
0.75rem
12px
4
1rem
16px
5
1.25rem
20px
6
1.5rem
24px
8
2rem
32px
10
2.5rem
40px
12
3rem
48px
16
4rem
64px

Common Patterns:

  • gap-4 - Default gap between flex/grid items
  • p-6 - Card padding
  • space-y-4 - Vertical spacing between elements
  • mb-8 - Section bottom margin

Usage Guidelines

Brand Principles

  • •Professional: Clean, technical aesthetic that conveys trust and reliability
  • •Dark-First: Pure black hero sections with near-black cards for depth
  • •Monospace for Technical Data: Always use monospace font for hashes, addresses, and IDs
  • •Subtle Accents: Purple primary and blue accent colors used sparingly for CTAs and highlights
  • •No Crypto Hype: Avoid overly promotional language or flashy design elements

Design Patterns

  • •Hero Sections: Pure black background (--background) with large typography
  • •Content Cards: Use --card background with subtle borders
  • •Data Display: Tables and lists with clear hierarchy and monospace values
  • •Status Indicators: Use badges with appropriate variants for job/worker status
  • •CTAs: Primary buttons for main actions, outline for secondary actions