StrojnoDESIGN SYSTEM · /KIT · V1
00—Brand

Every token. Every primitive.
If it's not on this page, it doesn't exist.

WORDMARK
Strojno™
BRACKET
[S]
MONOGRAM

TYPOGRAPHIC EXPLORATIONS — NOT A FINAL MARK. SEE DESIGN-SYSTEM README, CAVEATS.

Brief hubs▪Figma plugins▪Design ops▪You own the code▪Brief hubs▪Figma plugins▪Design ops▪You own the code▪
01

Color

INK — NEAR-BLACK SCALE
--ink-900
#0A0A0A
--ink-850
#101010
--ink-800
#141414
--ink-700
#1A1A1A
--ink-600
#2E2E2E
--ink-500
#3A3A3A
--ink-400
#565656
PAPER — WARM NEUTRAL, NEVER PURE WHITE
--paper-000
#FBF9F5
--paper-100
#F4F1EC
--paper-200
#ECE7DE
--paper-300
#E2DBCF
ORANGE — THE SINGLE ELECTRIC ACCENT
--orange-700
#C23A00
--orange-600
#E64500
--orange-500
#FF4D00
--orange-400
#FF6A2B
--orange-300
#FF8A54
--orange-100
#FFE3D5
SPARK & STATUS — TRAFFIC LIGHT (BRIEF-HUB METAPHOR)
--amber-500
#FFB800
--success-500
#1F8A4C
--warn-500
#E0A200
--danger-500
#D22B2B
THE ONLY BLESSED GRADIENTS — SILKY WAVES
--wave-orange
--wave-ink
01a—Semantic aliases — same markup, dark scope via .on-dark
SURFACE-CARD

Body text on a dark card.

Muted supporting copy.

--surface-card → --ink-700

SURFACE-PAGE

Deep card on the page surface.

Hairlines flip with the scope.

--surface-page → --ink-900

ACCENT

Black text sits on orange.

Never white on orange.

--on-accent: #0A0A0A

02

Type

--text-mega · SWITZER EXTRABOLD · --track-tight · --lh-tight
Aa
--text-giant · GEIST MONO · GIANT NUMBERS ARE CONTENT
33%
--text-d1 · SWITZER EXTRABOLD · TWO-TONE HEADLINE
Stop briefing in documents.
Start briefing in a system.
--text-d2 · SWITZER BOLD
A brief hub built around your process.
--text-d3 · SWITZER SEMIBOLD
Six gates. No surprises.
BODY — SWITZER · --text-xl / --text-md / --text-sm

Lead paragraph. We build tools — we don't decorate.

Base body, 17px. One system where briefs get written properly, routed automatically, and read comfortably.

Small print, 15px. US clients quoted in USD at parity uplift.

MONO — GEIST MONO · LABELS, INDEXES, FOOTNOTES01 — THE PROBLEMEACH STAGE: DEMO → SIGN-OFF¹ BETTERBRIEFS / IPA, 1,700+ RESPONDENTS
SERIF — SOURCE SERIF 4 · LONG-FORM ONLY

The brief is the most undervalued document in marketing. When it fails, everything downstream fails quietly — and expensively.

03

Spacing, radius & borders

SPACING SCALE — 4PX BASE
--space-14
--space-28
--space-312
--space-416
--space-524
--space-632
--space-748
--space-864
--space-996
--space-10128
RADIUS — HARD CORNERS, 8PX MAX ON STRUCTURE
0 · rules
2 · inputs, chips
6 · buttons
8 · cards, max
radius-full
999 · chips only
BORDERS — 1PX DEFAULT · 2PX EMPHATIC · NO SOFT SHADOWS
--bw-hair · --border
--bw-hair · --border-strong
--bw-bold · emphatic frame
GRID — 12-COL SWISS · 1.5REM GUTTER · 1320PX MAX
01
02
03
04
05
06
07
08
09
10
11
12
04

Components

BUTTON — PRIMARY / SOLID / GHOST · SM / MD / LG · CHIP
ARROWBUTTON — THE SQUARE-ARROW AFFORDANCE
EYEBROW — SWISS SECTION INDEX
01—The problem05—How we workCustom internal toolsMuted tone
TAG — MONO CATEGORY CHIP
Brief authoringRole-based workflowMost chosenAsset & naming order
STATUSCHIP — TRAFFIC-LIGHT STATUS
ApprovedIn reviewRejectedDraftApproved
ICONFRAME — CONSTRUCTION-GRID FRAME · PLACEHOLDER GLYPHS (PHOSPHOR ICONS LATER)
▪→◧↗▪▪
GIANTSTAT — NUMBERS ARE CONTENT
33%
of marketing budget wasted on misdirected work
¹ BetterBriefs / IPA
80/10
80% of marketers think their briefs are good. 10% of creatives agree.
¹ BetterBriefs / IPA
9 wks
from shared Word doc to role-aware product
Briefcraft case
CARD — PAPER / SUNK / DARK / DEEP / WAVE / WAVE-INK / ACCENT
01

Paper

Default surface. Hover lifts it.

02

Sunk

Recessed paper / zebra.

03

Dark

Card on dark sections.

04

Wave

The blessed orange→black gradient.

05

Wave ink

Silky near-black texture.

06

Accent

Black text sits on orange.

INPUT — 2PX RADIUS · 1PX BORDER · ORANGE FOCUS
05

Motion

COUNT-UP
33%
CountUp — digit runs animate on viewport entry

Lenis + GSAP drive smooth scroll, hero assembly and section reveals; reduced motion switches it all off.

EASING
--ease-out · cubic-bezier(.22, 1, .36, 1)--ease-in-out · cubic-bezier(.65, 0, .35, 1)

Mechanical, no bounce. Count-ups on viewport entry, chaos→system on scroll.

DURATION
--dur-fast120MS · HOVERS
--dur-med220MS · SURFACES
--dur-slow420MS · SECTIONS

prefers-reduced-motion collapses all of it.

06

Site primitives

BLUEPRINT GRID — .blueprint-grid · LINES FOLLOW --border, FLIP IN .on-dark
COCKPIT ATOMS — SLIDER / SEGMENTED / KPITILE · /INTERNAL DASHBOARDS
REGION
KPI TILE
8 wks
reactive demo value
PLAIN TILE
EU
segmented drives me
PAGEHERO — STANDALONE-PAGE HEADER BAND · ALIGN LEFT / CENTER
Pricing

Three ways to
work together.

Fixed-scope discovery, a turnkey build, or an ongoing care plan.