Lunatechs · Internal

Web UI style guide

The living spec for pages on lunatechs.social, the chapter sites and the app — every specimen below is rendered with the real CSS. Brand-wide rules (mascots, print palettes, voice) live in the graphics repo: lunatechs-graphics/brand/brand-guidelines.md.

Palette

Dark is the native mode — there is no light theme. Click a swatch to copy its CSS variable.


  
Copy this :root block into every new page. Gold = “look here” (upcoming, warnings, limited runs). Cyan = identity & interactivity. Red/green = status only.


  
Typography

  
Inter for text · JetBrains Mono for labels, stats and code. Self-hosted only (/assets/fonts/fonts.css) — never a CDN.

  
Hero — Inter 900, -0.02em, one word in cyan

    
Wear the statement

  
Eyebrow label — JBMono 700 · 11–13px · tracking 2–4px · uppercase

    
Merch · Drop 001

    
Tutorial · 1 of 5

  
Section heading — Inter 800

    
Upcoming events

  
Body — Inter 400 · 15–17px · --text-secondary

    
One design language, our mascot on everything — statement tees, caps, stickers and pocket-size lunacy. Black or white where it matters.

  
Stat — JBMono, value in cyan

    
120+ lunatics  ·  9 demos


  
Components

  
Live renders — match these, don't reinvent. Hover them.


  

    
    
    First run · 30 pieces only
  

  

    
    
    
    
  

  

    

      

      

        
Card title

        
HK$19930 of 30 left

      

    

    
  

  
/* primary button */
font-family: 'JetBrains Mono'; font-weight: 700; text-transform: uppercase;
background: linear-gradient(135deg, var(--cyan), var(--blue)); color: #06121a;
border-radius: 12px; box-shadow: 0 4px 24px rgba(34,211,238,.28);
/* card */
background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
/* hover: border-color: var(--border-bright); translateY(-3px) */


  
Page skeleton

  

    
Always
    
      
  • Shared partials: <!--#include virtual="/_partials/nav.html" --> + footer.html
    • 
      
  • data-page="…" on <body> for the active-nav highlight
    • 
      
  • Copy the fixed .site-header CSS block from learn/merch
    • 
      
  • Test with npm run dev (processes SSI like production)
    • 
      
  • Layered cyan/blue radial gradients over --bg for atmosphere
    • 
    

    
Never
    
      
  • Third-party anything — fonts, CDNs, analytics (iOS Safari privacy banner)
    • 
      
  • Hand-rolled headers or footers
    • 
      
  • python3 -m http.server (silently drops the nav/footer)
    • 
      
  • A light theme, purple-gradient-on-white, moon imagery 🌙
    • 
      
  • Breaking the public/brand relative symlink
    • 
    

  


  
Brand assets on the site

  
Published under lunatechs.social/brand/ (symlink → content/assets/brand/). Master copies live in the lunatechs-graphics repo (T5) — update there first, then copy here.

  

    
mascot-head.png · nav + favicon

    
lunatechs-full-mascot.png · fixed 2026-07 art

    
lunatechs-wordmark-2tone.png

    
lunatechs-lockup-rect[-dark].png

    
lunatechs-lockup-square[-dark].png

  


  
Editorial quick rules

  

    
Do
    
      
  • “Lunatechs” title case in prose; wordmark lowercase
    • 
      
  • Punchy and grounded; verbs (“tech with us”)
    • 
      
  • Stats only when impressive (“120+”, “9 demos”)
    • 
      
  • City names plain — no flag emojis
    • 
      
  • Merch: “Designed for and by Lunatechs”
    • 
    

    
Don't
    
      
  • LunaTechs / LUNATECHS / “builder community” / AI-only framing
    • 
      
  • Cinematic copy — “the kind of space that…”, “fireside chat”
    • 
      
  • Moon or lunar imagery (Luna ≠ moon)
    • 
      
  • Middling stats (“23 attendees”)
    • 
      
  • Implying merch is individually numbered
    • 
    

  


  

    Source: lunatechs-www/public/styleguide/index.html (text twin: docs/styleguide.md) · Brand-wide rules:
    lunatechs-graphics/brand/brand-guidelines.md (v2) ·
    Merch specifics: docs/merch.md · Deploy: docs/deploy.md