Developer Guide

NOVOSKY Design System

Single source of truth for future developers and AI agents: brand DNA, colors, typography, spacing, components, and interaction rules.

SvelteKit 2 Mac-inspired UI Token-first Mobile + Tablet Ready

1. Brand Core

Tone

Calm, technical, and confident. Never hype-y. Always factual, measurable, and transparent.

Visual Personality

Retro desktop feeling blended with modern quant interface. Soft paper background + crisp terminal accents.

Design Priorities

Readability first, hierarchy second, effects last. Data clarity must always beat decoration.

2. Logo and Wordmark

BRAND / LOGO
NOVOSKY wordmark with colored icon constellation. Responsive sizing: 140×18px on nav, scales down on mobile.
  • Do not stretch, rotate, or apply glow effects.
  • Do not recolor primary blue or icon gradients to non-brand colors.
  • Maintain aspect ratio; use max-width constraints for responsive sizing.
  • Icon constellation (blue, teal, cyan) is always part of the mark.

3. Color Tokens

--color-bg#f5f0e8
--color-surface#ffffff
--color-text#1d1d1f
--color-text-dim#6e6e73
--color-blue#0066cc
--color-green#1a7f37
--color-red#d73a49
--color-amber#a05c00

Rules: blue = action/info, green = positive/online, red = risk/error, amber = warning/armed state.

4. Typography

Font Families

Space Grotesk - display
Outfit - body copy and paragraph
JetBrains Mono - labels, metrics, code-like data

Type Scale

  • Hero title: clamp(2rem, 5vw, 3.25rem)
  • Section heading: 1.35rem to 1.8rem
  • Body text: 14px to 16px
  • Mono label: 10px to 11px uppercase

5. Layout Grid and Spacing

LAYOUT SPEC
Desktop1200px container max, 24px side padding, 2-4 col sections
Tablet16px side padding, mostly 1-2 col, reduce decorative density
Mobile12px side padding, 1 col stack, no overflow text, bigger tap targets

Spacing rhythm: 8, 12, 16, 24, 32, 48, 64. Prefer consistent rhythm over one-off values.

6. Core Component Patterns

Mac Window

Use for data panels and grouped content. Always include titlebar + dots.

Status Pill

Tiny uppercase labels for ONLINE/OFFLINE/ARMED with semantic color.

Metric Card

Small summary blocks with mono labels and strong numeric hierarchy.

7. Motion and Interaction

Motion Rules

  • Page enter and reveal: 450ms-650ms
  • Hover lift: max 3px vertical translate
  • Use cubic-bezier(0.16, 1, 0.3, 1) for most UI transitions
  • Avoid heavy looping animations on critical data panels

Touch Device Behavior

  • Custom cursor disabled automatically on coarse pointers
  • No hover-only critical information
  • Minimum interactive height: 40px
  • Prevent horizontal clipping on all cards and labels

8. Agent and Developer Guardrails

IMPLEMENTATION RULES

Do

  • Reuse tokens from src/app.css before adding new ones.
  • Preserve mac window structure and typography hierarchy.
  • Keep dark cards for dense technical data only.
  • Validate on mobile and tablet before merging.

Avoid

  • Random new color palette without token update.
  • Inconsistent fonts outside display/body/mono set.
  • Text that overflows card borders on small screens.
  • Complex animation that reduces readability.

9. Wireframe Library

Low-fidelity structures below define hierarchy and spacing behavior. Use these as first step before visual styling.

HOME / DESKTOP
HOME / TABLET
HOME / MOBILE

10. Responsive QA Matrix

RESPONSIVE CHECKLIST
ViewportTarget DevicesPass CriteriaStatus
320-389Small AndroidNo horizontal scroll, button height >= 40pxRequired
390-767iPhone classReadable labels, balanced card spacingRequired
768-1023iPad Mini/AirGrid can switch 1-2 columns without clippingRequired
1024-1279Tablet landscapeDesktop nav and content density stay cleanRequired
>=1280Laptop/DesktopMax-width rhythm and visual hierarchy stableRequired

Definition of done for UI PR: pass all rows above with screenshots before merge.