Brand System
cordn Logo System
A single continuous cord — forming a lowercase c on the left and flowing into a lowercase n on the right. One clean cable moving through space, resolving into a software mark.
01 — The Mark
Exact brand SVG path. One continuous stroke.
Icon — Dark background
Icon — Light background
Icon — Brand blue
Icon — Brand blue on light
02 — Wordmark Lockups
Horizontal icon + cordn text across backgrounds and sizes.
Lockup · Dark · Large
Lockup · Light · Large
Lockup · Dark · Nav size
Lockup · Light · Nav size
Lockup · Brand blue · Dark
Lockup · Brand blue · Light
03 — App Icon Versions
Icon centered inside a rounded square across sizes and fills.
96px · Dark
96px · Blue fill
96px · Light
96px · Blue on dark
56px
32px
20px favicon
04 — Animation
Cord draws in via stroke-dashoffset. Plays once. Respects prefers-reduced-motion.
Cord draws in once on load
Draw-in · one-shot on load
Motion principles
• Path animates via stroke-dashoffset (620 → 0)
• Duration: 1.1s, ease-out cubic
• Plays once on first render — never loops
• Static fallback for prefers-reduced-motion
• Used: hero only. Nav uses static mark.
05 — Hero Lockup
Icon above wordmark for large-scale hero usage.
Coordination multiplied.
Design Notes
The cord concept
One continuous stroke — no break, no seam. The left arc reads as a lowercase c (open rightward). The cord then flows right, dips, and resolves into a subtle n shape — two legs with an arch. The path has direction: it moves left to right, like a cable routing through a system.
Single path discipline
The entire mark is one SVG path element. No duplicate shapes, no filled regions, no decorative extras. Rounded strokeLinecap and strokeLinejoin give it a cable-like, premium feel — not a wireframe, not a sketch.
Stroke weight
strokeWidth="30" on a 320×180 viewBox. Scales proportionally with the icon size. Thick enough to communicate physical cable, thin enough to remain clean and legible at small sizes.
Color usage
Works as a single flat color first. On dark backgrounds: #F7F4EA (warm white). On light: #111111 (near-black). Brand blue (hsl 213 67% 55%) as accent. No gradients, no glow, no shadows on the core mark.