DandyLine — Logo & Marks

01

The Dandelion Mark

A 20-seed puff drawn with depth simulation — back seeds dimmer and shorter, front seeds brighter and fuller — creating a sphere illusion. The animated version lives in digital environments. The static icon tiered system covers all size contexts from 128px down to 16px.

Motion Mark · Primary Tagline · Hero Lockup — Primary Brand Expression

DandyLine

The internet forgot how to wait.

DandyLine Remembers.

The animated mark is the primary brand expression for digital environments. Use for hero sections, onboarding screens, App Store listing, and launch materials. The animation runs continuously — 32 seeds with individual sway curves and floating particle release. Never use in email or static exports — use the static full-color mark instead.

Static Full-Color Mark · Dark Background · All Sizes

128px · Full

96px

64px

48px

32px · Mid

24px

16px · Micro

Three rendering tiers automatically adjust seed count and detail: Full (96px+) — 20 seeds, 5-filament parachutes, full gradient stems, specular seed glow. Mid (28–64px) — simplified filaments, lighter shadow. Micro (≤20px) — 8 seeds, no filaments, bold orb only. Minimum recommended display size: 16px.

Static Mark · Light Background

96px

48px

32px

Same mark, adjusted values. Gold-dk replaces gold for orb on light. Stems shifted to navy-toned cream.

When to use which version

Full color dark — primary digital use: web, app UI, motion, rich media. Works on deep bg (#020710) and navy (#0B1520).

Full color light — use on cream (#F5F0E8), warm paper backgrounds. Adjusted orb and stem values for light contrast.

Never place the mark on mid-value backgrounds (grays, warm tans). Dark, pitch, light paper, or navy only.

02

Color Treatments

Five rendering modes cover every production context. Full-color is the default for digital. 2C covers print and constrained environments. 1C Teardrop handles the most restricted contexts: single-ink print, embossing, cut vinyl, watermark, and small-format digital.

Full Color · Dark

DandyLine

Primary. Full gradient stems, radial orb glow, seed tip specular. Dark backgrounds only.

Full Color · Light

DandyLine

Same mark, adjusted values. Gold-dk for orb on light. Stems shifted to navy-toned cream.

2C-A · Gold + Cream · Flat

DandyLine

No gradients. Gold orb and seed tips; cream stems and filaments. Depth through opacity only. Works for screen print, risograph, two-color offset.

2C-B · Gold + Navy · Badged

DandyLine

Mark contained in a navy circle. Gold mark on navy badge = self-sufficient unit. Works on any background including white. Good for sticker, badge, wax seal, garment.

1C Teardrop · Size Ramp · Locked Style

Gold on Dark

64px

48px

32px

20px

14px

12px min

Cream on Dark

64px

48px

32px

20px

Navy on Light

64px

48px

32px

20px

Teardrop style: filled ellipse at each seed tip. Bezier stems, no parachute filaments. Clean and structured. Use for single-ink print, embossing, cut vinyl, watermark, and small-format digital. Minimum size: 12px gold on dark. 20px for all other single-color treatments.

03

Lockup System

Three arrangements — horizontal, stacked, wordmark-only — across a size scale from hero (160px mark) to micro (18px mark). The wordmark always splits: "Dandy" in Syne 700 gold, "Line" in Syne 400 at 68% cream opacity.

Horizontal · Hero · With Primary Tagline

DandyLine

The internet forgot how to wait.

DandyLine Remembers.

Horizontal · Large · With Tagline

DandyLine

The internet forgot how to wait.

DandyLine Remembers.

DandyLine

The internet forgot how to wait.

DandyLine Remembers.

Horizontal · No Tagline · Size Scale

DandyLine

Stacked · Large · With Tagline

DandyLine

The internet forgot how to wait.

DandyLine Remembers.

Stacked · Medium + Small

DandyLine

Light Background · Horizontal · With Tagline

DandyLine

The internet forgot how to wait.

DandyLine Remembers.

Light Background · Stacked

DandyLine

The internet forgot how to wait.

DandyLine Remembers.

Wordmark Only · Size Scale · Syne — Locked

DandyLine

52px · hero

DandyLine

34px · large

DandyLine

22px · medium

DandyLine

15px · small

DandyLine

11px · micro

Syne 700 gold for "Dandy" — Syne 400 at 68% cream opacity for "Line". Weight drops to 600 at 15px and below for optical compensation. Letter-spacing: −0.01em at hero, −0.005em at large, 0 at small. Never retype in any other font.

Lockup Spacing — The Negative Margin System

The horizontal lockup uses a deliberate negative right margin on the canvas element so the wordmark tucks visually into the mark, creating a unified grouping rather than two separate elements with a gap. This mimics how dandelion seeds "reach" toward the text. The margin values shown in this doc are locked — if you resize the mark, scale the negative margin proportionally (approximately −20% of the mark's pixel width).

Horizontal lockup: mark overlaps wordmark by ~20% of mark width
Vertical lockup: mark sits directly above wordmark with 4–8px gap
No-tagline: mark + wordmark only, tagline line removed entirely

04

App Icons

Four icon treatments in squircle shape (iOS/Android format). Navy is the primary app icon. Each treatment renders across 5 sizes. Export from this file's canvas renders — do not recreate from scratch.

Navy · Primary App Icon

200px

120px

60px

40px

20px

Navy background (#0B1520) with full-color mark. The primary icon treatment for App Store, home screen, and notification icons. Warm and inviting.

Pitch Black · Alternate App Icon

200px

120px

60px

40px

20px

Deep bg (#020710) with gold 1C Teardrop mark. Dramatic and minimal. Use when navy reads too light against a very dark wallpaper.

Gold · Special / Seasonal

200px

120px

60px

40px

20px

Gold gradient background with cream 2C mark. For seasonal campaigns, launch events, or alternate icon promotions. Use sparingly.

Paper · Light / Print Context

200px

120px

60px

40px

20px

Cream (#F5F0E8) background with light-adjusted full-color mark. For contexts requiring a light app icon. Press kits, light-mode mockups.

05

Usage Rules

Every mark decision locked. Follow these rules across all contexts — digital, print, social, and physical. When in doubt, use the full-color dark mark at the largest comfortable size.

✓ Do

Use the mark at the sizes shown in this doc — 16px minimum for icon, 24px minimum for lockup.
Use Syne 700 for "Dandy" and Syne 400 for "Line" — always as a unit, never separated.
Keep "Dandy" in gold (#D4A853) and "Line" in cream at 68% opacity on dark backgrounds.
Use the CSS token names (--gold, --cream, --navy, etc.) in all project code — never hardcode hex values directly.
Use the full-color mark for primary digital contexts and the 1C Teardrop for compact or single-color contexts.
Export app icons from this file's canvas renders — do not recreate them from scratch.
Use the animated mark for hero sections and loading states. Use the static mark for everything else.

✗ Don't

Don't retype the wordmark in any other font — it must always be Syne.
Don't stretch, rotate, skew, or recolor the dandelion mark outside the documented treatments.
Don't place the mark on a mid-value background (grays, warm tans) — use dark, pitch, light paper, or navy only.
Don't use the 1C Teardrop at sizes smaller than 12px.
Don't use the animated mark in still-image exports, email, or PDF — use the static full-color version.
Don't add a drop shadow to the wordmark — Syne reads cleanly without it.
Don't use the old SVG starburst icon — it has been removed from all files. Canvas only.

Minimum Sizes at a Glance

Context	Mark Version	Minimum Size	Minimum Lockup
Digital UI (icon only)	Full color dark or light	16px	—
Digital UI (with wordmark)	Full color dark or light	24px mark	24px lockup min
1C Teardrop · Gold on Dark	1C Gold	12px	—
1C Teardrop · All other colors	1C Cream / Navy	20px	—
Print (physical)	1C Teardrop	20pt	—
App Icon	Navy squircle (primary)	20px	—

Context-Specific Rules

Social & Marketing

Story frames, grid posts, cover images: use navy or pitch-black backgrounds. Mark at minimum 48px. Tagline in Outfit 300. Never crop the mark at the edge of the frame.

Email & Notifications

Email header: horizontal lockup (no tagline) on navy bar. Push notification icon: 60px navy or pitch app icon. Never use the animated mark in email — use the static full-color mark as a PNG export.

Print & Physical

Business cards, letterhead, packaging: 1C Teardrop (navy on cream or gold on dark) only. Minimum 20pt mark size. Syne wordmark, Outfit body copy. No full-color mark in single-ink print.

In-App UI

Loading states: animated mark only. Onboarding, empty states, and in-app headers: static full-color mark at documented sizes. Follow the size tiers from Section 01 — do not invent new sizes.