SEC.00 / BRAND SYSTEM

Newtop brand

One drawing sheet for everything brand. Logo, color tokens, typography, grid, motion, and voice, with the source values and downloadable assets. If it carries the Newtop name, it is built from what is on this page.

Download assets Color tokens

VERSION: 1.0
UPDATED: 2026-08
MAINTAINER: Design
SCOPE: usanewtop.com

SEC.01 / LOGO

The mark and lockup

An N lettermark: two paper verticals and one accent diagonal, set on a chamfered graphite plate. Chamfers, not fillets. The diagonal is the only place the mark carries orange, and it never moves.

NewtopLockup · on paper

NewtopLockup · on graphite

Full color

Ink mono · on light

Paper mono · on dark

CLEARSPACE

Keep clear space of at least S (one vertical stroke width) on every side. Nothing, type, image, or edge, enters the field.

MINIMUM SIZE & CONSTRUCTION

24px

40px

64px

MIN · DIGITAL24px
MIN · PRINT8mm
PLATE CHAMFER14 / 96 units
GRID96 · 96

MISUSE · DO NOT

Recolor the diagonal

Stretch the proportions

Rotate the mark

Add shadow or glow

Drop below min contrast

Invert the palette

SEC.02 / REGISTRATION MARK

The totem

The + registration tick is the system signature. It appears at corners where structure meets structure, hairline weight, in border color. Small, exact, everywhere the drawing grid registers.

Structure meets structure

WEIGHT

1px · border color

SIZE

size-3 (12px)

PLACEMENT

Section & card corners

SEC.03 / COLOR

Two registers, one accent

All color is OKLCH. Surfaces carry a faint cool steel cast (hue ~250), never pure grey. The system runs two registers: the Sheet (light, for catalog and content) and the Shop (dark, for brand moments). Click any swatch to copy its value.

THE SHEET · LIGHT · :root

THE SHOP · DARK · .shop

STATUS TOKENS · SEMANTIC ONLY

--status-live

oklch(0.47 0.15 145)

In production / in stock

● RUNNING NOW

--status-lead

oklch(0.50 0.12 85)

Made to order

LEAD 14 DAYS

--status-custom

oklch(0.55 0.10 250)

Quote required

RFQ ONLY

Never raw Tailwind reds, greens, or yellows. Status meaning always comes from a token. Accent orange is a scribe line: CTA, active nav, live indicator, focus ring. If it shows more than about three times in a viewport, it is decoration. Cut it.

SEC.04 / TYPOGRAPHY

Type is infrastructure

Three roles, no exceptions. Display for statements, body for reading, mono for every number. All numerics use tabular figures so columns line up like a spec sheet.

DISPLAY · SPACE GROTESK

Held to
±0.002mm

Uppercase, tight tracking. Hero statements and section titles.

BODY / UI · INTER

Quiet and legible, never the star. Send a drawing, get a quote, read a spec without friction.

Default UI and reading type. text-pretty on headings.

DATA · IBM PLEX MONO

AL 6061-T6
±0.005mm · Ra 0.8
MOQ 500 · LEAD 14D

All numbers, part nos., materials, dates. tabular-nums always.

TYPE SCALE · PX

12Precision as a promise

14Precision as a promise

16Precision as a promise

20Precision as a promise

28Precision as a promise

40Precision as a promise

56Precision as a promise

MICROLABEL PATTERN · TITLE BLOCK

SEC.03 / HOT PRODUCTS · RUNNING NOW

SEC.05 / GRID & GEOMETRY

Exposed structure

A 12-column grid on a 1440px max field. Dividers are real hairline borders, drawn full-bleed, not implied by whitespace. Corners are chamfered, radius pinned to 2px. Depth comes from borders and surface steps, never blur.

12 COLUMNS · GUTTER 24 / 16

GEOMETRY

MAX WIDTH1440px
GUTTER24px / 16px
RADIUS2px · chamfer
HAIRLINE1px · --border
SHADOWnone / shadow-sm

2px OK

✕ fillet

SEC.06 / MOTION

Motion is machine motion

CNC moves are linear, indexed, decisive. One easing curve, rapid traverse to a hard stop. No bounce, no spring, no wobble. Entrances index in from a single axis; loaders rotate a square, not a circle.

Easing · cubic-bezier(0.2, 0, 0, 1)

M.01 · Index

index-in · 0.4s · 80ms stagger

0±0.005mm

M.02 · Measure

measure-draw · 0.6s · origin left

NT-04-0072

M.03 · Stamp

stamp-in · 0.25s · scale 1.06→1

M.04 · SpindleLOOPING

spindle · 1s · square, not circle

RUNNING NOW

M.05 · Hot runLOOPING

pulse-ring · 2s · RUNNING NOW

M.06 · Reduced motion

Under prefers-reduced-motion, every keyframe collapses to a 150ms opacity fade. Motion is never load-bearing.

SEC.07 / VOICE

Machinist, not marketer

The buyer is an engineer. They read spec tables the way other people read headlines. Lead with material, process, tolerance. Adjectives only when load-bearing. Every claim quantifiable or cut.

✕ Don't

High-quality aluminum

✓ Do

AL 6061-T6 · anodized clear

✕ Don't

Tight tolerances, fast turnaround

✓ Do

±0.005mm held. Samples in 7 days.

✕ Don't

World-class precision solutions

✓ Do

Swiss CNC turning. 4µm roundness.

✕ Don't

Get started today!

✓ Do

Send your drawing.

BAN LIST

passionateempowerleverageinnovativecutting-edgestate-of-the-artworld-classsolutionsrevolutionizeseamlessunleash

HARD RULES

Numbers with units · not "fast", but "samples in 7 days".
No em dashes · use a period, comma, or middle dot ( · ).
English only · zero CJK anywhere, including alt text and metadata.
Plain imperative CTAs · "Send your drawing." "Request a quote."

SEC.08 / IMAGERY

Material truth

Photography shows parts as they are: white or transparent background, even light, macro chamfer detail, visible tool marks where honest. No lifestyle staging, no gradients over photos, no stock sparks. A spec table beats a bad photo.

RULES

· White or transparent background, catalog standard.
· Even light, macro detail, honest tool marks.
· No lifestyle staging or gradient overlays.
· Hero priority; everything below the fold lazy.

BUDGETS & ALT TEXT

FORMATAVIF → WebP
MAX SIZE300KB
HERO TARGET<200KB
LCP BUDGET<1.5s

Alt text is spec-flavored and English:

"CNC-machined aluminum arrow nock, PC material, 6.2mm ID"

SEC.09 / DOWNLOADS

Assets

Logo files as SVG. The mark is portable geometry; the wordmark is set in Space Grotesk SemiBold and should be outlined before print. Do not alter, recolor, or reconstruct the artwork.