Skip to content

RawDigs Landing Page — Minimal Typography Version

Overview

Clean, minimal, typography-focused landing page using the RawDigs font map and color palette. Experimental and arty — letting type and white space do the work.

Design Approach

Typography First

  • Massive headline treatment: RAW / SOUND / LIVES
  • Space Grotesk at 10rem for desktop headlines
  • Responsive scaling down to 15vw on mobile
  • Tight line-height (0.85) and negative tracking for impact

Font Usage

font-grotesk  → Space Grotesk (headlines, section titles)
font-pixel    → VT323 (brand name, stats, terminal prompts)
font-mono-clean → Space Mono (body copy, terminal text)
font-chakra   → Chakra Petch (navigation, labels, CTAs)

Color System

From rawdigs-graphic-id.md:

Usage Class Value
Headings/Logo text-rawdigs-primary #1A2233
Accent/CTA text-rawdigs-secondary #F25757
Body Text text-rawdigs-muted #6C7A89
Background bg-white #FFFFFF
Highlight Block bg-rawdigs-highlight #FFF2CC
Borders border-rawdigs #E6E6E6

Page Structure

1. Header (Fixed)

  • VT323 pixel font for "RAWDIGS"
  • Chakra Petch for nav links (LOG IN / SIGN UP)
  • Minimal border bottom
  • Backdrop blur for depth

2. Hero Section

  • Three-line treatment:
  • RAW (primary)
  • SOUND (secondary/red)
  • LIVES (primary)
  • Terminal-style tagline with Space Mono
  • Simple CTAs: JOIN PLATFORM / READ MORE

3. Stats Bar

  • Pixel font numbers (00, 00, ∞, ✓)
  • Bordered top/bottom
  • Four stats: Algorithms, Investors, Artist Control, Transparent Fees

4. Info Grid

  • Two columns on desktop
  • "Against the Machine" / "Direct Connection"
  • Space Grotesk titles, clean body copy

5. Features

  • Six features with left border accent (#F25757)
  • Uppercase Chakra Petch titles
  • Text-only, no icons

6. Terminal Block

  • Yellow highlight background (#FFF2CC)
  • VT323 header: $ RELEASE_TYPES
  • Space Mono list with > prefix
  • Eight release types

7. Final CTA

  • Large "Ready?" headline
  • CREATE ACCOUNT button
  • Minimal single row
  • Pixel font brand name
  • Links + copyright

Responsive Behavior

Breakpoint Headline Size Grid Cols
Mobile 15vw 1-2 cols
Tablet 12vw 2 cols
Desktop 10rem (160px) 2-4 cols

Component Styles

All existing Laravel component styles are preserved. The landing page uses: - Custom typography utilities from resources/css/app.css - RawDigs color classes - Standard Tailwind utilities

No conflict with auth pages, dashboard, or settings.

Files Modified

  1. resources/views/app.blade.php

  2. Added Google Fonts: Space Grotesk, VT323, Space Mono, Chakra Petch

  3. resources/css/app.css

  4. Added font variables to @theme
  5. Added custom .font-* utilities

  6. Added .text-rawdigs-* and .bg-rawdigs-* color utilities

  7. resources/js/pages/welcome.tsx

  8. Complete rewrite with minimal approach
  9. Typography-focused layout
  10. Terminal/pixel aesthetic elements

Typography Scale

Hero:     text-[10rem] (160px)
H2:       text-4xl / text-5xl
H3:       text-3xl
H4:       text-sm (uppercase)
Body:     text-base
Small:    text-xs

Key Classes

// Hero headlines
className="font-grotesk text-[10rem] font-bold leading-[0.85] tracking-tighter text-rawdigs-primary"

// Terminal prompt
className="font-mono-clean text-base text-rawdigs-muted"

// Pixel brand
className="font-pixel text-2xl text-rawdigs-primary tracking-wider"

// Feature title
className="font-chakra text-sm font-semibold uppercase tracking-wider text-rawdigs-primary"

// CTA button
className="font-chakra text-sm font-semibold px-8 py-3 bg-rawdigs-primary text-white hover:bg-rawdigs-secondary"

Future Enhancements

When full graphic identity is ready: 1. Replace VT323 "RAWDIGS" with actual logo 2. Add subtle texture/grain overlays 3. Animated type reveals on scroll 4. Interactive terminal section 5. Experimental layout variations

  • Font map: docs/rawdigs-graphic-id.md
  • Typography guide: docs/frontend/typography.md
  • Previous version: docs/frontend/landing-page-v1-dark.md