---
version: alpha
name: Nova — Neon Mac Editor
description: A playful Mac-native code editor landing page on midnight navy, with
  a neon red wordmark, condensed serif headings, a purple editor-window hero, electric-blue
  download pills and lime purchase action. Three-column screenshot features and purple
  extension cards condense into a single mobile column.
colors:
  primary: '#008FFF'
  surface: '#061025'
  on-surface: '#FFFFFF'
  secondary: '#FF0043'
  purchase: '#0DFE06'
  feature-accent: '#FE9405'
  extension-surface: '#300A60'
  muted: '#B2B3B3'
typography:
  section:
    fontFamily: SerrifCompressed
    fontSize: 45.5px
    fontWeight: '300'
    lineHeight: 40.95px
    letterSpacing: -0.6825px
  feature-title:
    fontFamily: Hellix, Helvetica, sans-serif
    fontSize: 26px
    fontWeight: '600'
    lineHeight: 26px
  body:
    fontFamily: Hellix, Helvetica, sans-serif
    fontSize: 15.6px
    fontWeight: '400'
    lineHeight: 20.28px
  download:
    fontFamily: Hellix, Helvetica, sans-serif
    fontSize: 41.6px
    fontWeight: '700'
    lineHeight: 49.92px
  mobile-section:
    fontFamily: SerrifCompressed
    fontSize: 27.3px
    fontWeight: '300'
    lineHeight: 24.57px
    letterSpacing: -0.4095px
---

# Nova — Neon Mac Editor

## Overview

Observed 2026-09-23T06:02:59.833710+00:00 at 1440 × 1000 CSS pixels, device scale factor 1; mobile reviewed at 390 × 844. Measurements below are computed CSS unless explicitly labeled as visual estimates. Static capture cannot establish interaction or animation states.

Nova makes its editor the central visual metaphor: marketing copy is presented inside a purple Mac application window, including file navigation, line numbers and syntax-like emphasis. An oversized red wordmark and dimensional multicolor app icon introduce the product; a narrow serif tagline balances the masthead. The page then moves through a blue trial download, new features, everyday capabilities and an extension directory. Preserve this mixture of playful software personality and immediately visible product evidence.

## Colors

The measured page canvas is `color(display-p3 0.03 0.06 0.14)`, a nearly black navy. White type remains the constant foreground. Use the measured electric blue `color(display-p3 0.05 0.55 1)` for download and extension-browsing actions; reserve vivid lime `color(display-p3 0.46 0.98 0.3)` for the small purchase pill in navigation. Bright red-pink `color(display-p3 1 0.012 0.29)` marks the brand and new-feature headings, while orange `color(display-p3 0.94 0.6 0.22)` identifies Everyday Features.

Extension cards use measured deep purple `color(display-p3 0.17 0.05 0.36)`. Supporting feature copy is a neutral gray at `color(display-p3 0.7 0.7 0.7)`. The editor hero adds a measured #2D2256 selection background and #EE7BD8 code-like text. Thin orange-to-pink-to-blue divider lines connect the accent families without filling whole sections with gradients. The YAML palette contains sRGB equivalents obtained by painting these measured CSS values into a Chromium sRGB canvas and reading back the pixels. The pinned linter does not accept display-p3 syntax; measured P3 values remain documented here. Out-of-gamut colors clip in sRGB, so these tokens are derived fallbacks, not new measurements of the original CSS.

## Typography

Use Hellix with Helvetica/sans-serif fallbacks for interface and feature copy, contrasted with the distinctive narrow SerrifCompressed face for the tagline and section headings. At 1440px, the tagline measures 39px/35.1px, weight 300, tracking -0.585px. Section headings measure 45.5px/40.95px with -0.6825px tracking. Feature titles are 26px/26px at weight 600, with compact 15.6px/20.28px descriptions. The text inside the hero editor uses Menlo at 23.4px/35.1px; retain its code-like role rather than applying monospace to all marketing text.

The visible main download label is a nested span at 41.6px/49.92px and weight 700. Its outer full-width link reports only 26px, which does not describe the painted label. At 390px the label becomes 24.96px/29.952px, section headings 27.3px/24.57px and feature titles 15.6px/15.6px. Feature descriptions measure 9.36px/12.168px on mobile: record this compact source treatment, but use more legible body sizing when adapting the pattern. Extension introductory copy is larger than feature captions: 26px/31.2px on desktop. Font declarations are observations, not licensing grants.

## Layout

At 1440px, center the main content in a 1300px-wide region beginning at x=70. Keep a compact navigation row above a split brand/tagline row. The wordmark is left aligned and the tagline sits toward the right. The broad editor window spans the content width; its bottom fades into the navy canvas. Center the large blue download pill below it and tuck trial/platform information into a small gray line underneath.

Build New in Nova as three evenly spaced feature columns. Each measured image is 403 × 226.69px, approximately 16:9, with its heading and description above. Everyday Features continues the same geometry as a three-by-three grid. Keep the screenshots aligned and preserve breathing room between rows; the visual rhythm comes from repeated image proportions, not container borders around entire cards. Divider lines separate the hero and extension chapters. The extension section switches to longer left-aligned prose beneath centered headings, then a three-by-two directory grid and a right-aligned blue browse action. End with a centered Panic mark and minimal legal text.

At 390px, the brand and tagline center and stack, the main content is about 366.6px wide at x=11.7, and screenshot feature columns collapse to one. Feature images and captions have an additional inset, measuring about 343.25px wide at x=23.38. Extension cards also form a single column. The top navigation retains tiny horizontal icon/text links rather than a tested hamburger menu; do not mistake that observed density for a general mobile usability recommendation. Both measured document widths equal the viewport. Desktop and full mobile captures were reviewed; intermediate breakpoints were not measured.

## Elevation & Depth

Most of the page is flat navy. Depth comes from the dimensional app icon, application screenshots and soft dark shadows underneath feature artwork. The editor window fades out at its lower edge, making the download action stand alone without a separate card. Screenshot images themselves report no CSS box shadow, so the apparent depth may be in wrappers or artwork; exact shadow tokens were not established. Avoid applying generic large shadows to the text or every section.

## Shapes

Use rounded rectangular screenshots with measured 13px corner radii on desktop, alongside fully rounded action pills and circular download icon backing. A narrow bright edge and diagonal NEW ribbons identify selected screenshots. Keep the actual software window chrome and toolbar proportions intact. The main download pill is visually about 490px wide on desktop and 292px on mobile; these overall widths are estimates, unlike the measured nested text. The smaller Browse Extensions control has a measured 20.8px radius and 238.58px width on desktop.

## Components

The key components are the brand/tagline masthead, application-window hero, oversized download pill, trial-detail line, screenshot feature grid, extension directory cards and minimal brand footer. Extension cards combine a colorful square icon, name/version, author and short description on purple. Their content is a time-specific directory sample, not a stable ranking. The hero presents code-like text with raw emphasis markers as part of the editor concept, not as an unrendered page error. Only the static landing-page state was inspected; download, purchase, extension browsing, hover and focus transitions were not exercised.

## Do's and Don'ts

- Do make real application UI the dominant evidence, with concise captions above each feature image.
- Do assign blue to downloading, lime to purchasing and red/orange to chapter emphasis.
- Do preserve the contrast between geometric sans-serif copy and very narrow serif chapter titles.
- Don't replace the product-window hero with unrelated abstract neon artwork.
- Don't copy the source's unusually small mobile captions without checking readability in the new context.
- Don't infer animation or interactive application behavior from the static presentation.