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.
- 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.
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
- 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.
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
oklch(0.47 0.15 145) · #006F19
In production / in stock
● RUNNING NOW
oklch(0.50 0.12 85) · #825C00
Made to order
LEAD 14 DAYS
oklch(0.55 0.10 250) · #4075AA
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
MICROLABEL PATTERN · TITLE BLOCK
SEC.03 / HOT PRODUCTS · RUNNING NOW
SEC.05 / GRID & GEOMETRY
Exposed structure
A 12-column grid on a 1280px 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 WIDTH1280px
- GUTTER24px / 16px
- RADIUS2px · chamfer
- HAIRLINE1px · --border
- SHADOWnone / shadow-sm
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.
index-in · 0.4s · 80ms stagger
measure-draw · 0.6s · origin left
stamp-in · 0.25s · scale 1.06→1
spindle · 1s · square, not circle
pulse-ring · 2s · RUNNING NOW
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
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
Every asset in three cuts: SVG source, web PNG at 1024px long edge, print PNG at 4096px long edge. PNGs are transparent, text outlined. The wordmark SVG is set in Space Grotesk SemiBold; outline before print. Do not alter, recolor, or reconstruct the artwork.
Mark · full color
Chamfered graphite plate, accent diagonal
Social · square
Avatar, full-bleed graphite, crop-safe N
Social · circle
Avatar, graphite disc, transparent corners
Need a format that is not here, or a co-brand lockup? Ask and we will cut it. The mark stays the mark.
Contact design