DandyLine · Brand System · Version 2 · Locked
The Complete Identity System
Dandelion mark, Syne wordmark, lockup system, color treatments, app icon, and full tagline library. Everything locked, documented, and ready to deploy.
✓ Mark — Locked
✓ 1C Style — Teardrop
✓ Wordmark — Syne
✓ Tagline Tiers — Defined
01
The Dandelion Mark
The mark is the heart of DandyLine. A 32-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 12px.
Motion Mark · Primary Tagline · Hero lockup
DandyLine
The internet forgot how to wait.
DandyLine Remembers.
Static Mark · Alternate Tagline · Bloom Later
DandyLine
Preserve memories today.
Let them bloom later.
Static Full-Color Icon · All tiers · Dark background
Three rendering tiers automatically adjust seed count and filament 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.
Static Icon · Light background
Usage context
Full color — primary digital use: web, app UI, motion, rich media. Works on dark and light backgrounds.
Light bg version — same mark, stem and filament colors adjusted for visibility on cream, white, or light paper backgrounds. Gold-dk replaces gold for orb on light.
05
Tagline Library
Three tiers of messaging — a Big Belief that anchors the brand, a Category Claim for investor and press contexts, and a Consumer Clarity line for onboarding and product surfaces. Supported by campaign zingers for ad, social, and moment-specific use.
Big Belief
Brand identity · mark pairing · billboard · hero
The internet forgot how to wait.
DandyLine Remembers.
The foundational brand statement. This is what DandyLine believes — and what it stands against. The internet trained us to consume instantly. DandyLine is the counterforce: slow, intentional, and built for the moment things actually matter. Paired with the mark at all hero contexts.
Alternate Identity Tagline
Secondary hero · bloom-forward contexts · homepage alt
Preserve memories today.
Let them bloom later.
The product promise in plain language. Where the Big Belief is philosophical, this one is functional and warm. It explains what you do without losing the emotional dimension. Best for landing pages, onboarding, and contexts where new users need a clear value proposition alongside the brand.
Category Claim
Investor decks · press · About page · analyst briefings
The first platform built for
emotional memories over time.
The category-defining statement. This belongs in decks, one-pagers, and press releases. It does two things at once: claims a new category ("emotional memories over time") and implies that everything that came before it is insufficient. Not warm — precise. Pairs with data and product screenshots, not the mark.
Consumer Clarity
Onboarding · app store description · feature callouts
Capture memories now.
Open them when it matters most.
Pure product clarity. No metaphor, no philosophy — just what happens. This lives in the App Store description, onboarding step 1, and any surface where a new user needs to understand the mechanic in one breath before they'll commit to signing up.
Campaign Zingers · Contextual use only
Some moments are meant for later.
Empty state copy, push notification, loading screen, ad creative. Quiet and poetic — doesn't oversell.
Plant a moment. Watch it bloom.
CTA copy, feature prompt, social caption. Action-forward. The seed planting mechanic made punchy.
Zingers are never used as the brand tagline alongside the mark. They live in product UI, advertising, and social — never in the identity system itself. Keep them flexible and don't overuse any single one.
06
Color & Typography
The complete token set for DandyLine's identity. Every color and typeface has a defined role — use tokens, not raw values, when building from this system.
Color Palette · Full Token Set
Gold Light
#F0C96A · --gold-lt
Specular highlights, seed glow tips
Gold
#D4A853 · --gold
Primary brand color. Wordmark "Dandy", orb, tips, CTAs.
Gold Dark
#A07830 · --gold-dk
Orb shadow, gradient base on light bg stems
Cream
#F5F0E8 · --cream
Primary text, stem filaments on dark bg
Oat
#C8B89A · --oat
Stem gradients, secondary text warm tone
Sky
#8BAEC8 · --sky
Filament wisps, secondary accent
Sky Light
#B4CFDF · --sky-lt
UI highlights, subtle glow on sky surfaces
Sage
#7A9E7E · --sage
Grove vault, nature/growth contexts
Purple
#6B5B8A · --purple
Legacy vault, premium/heirloom moments
Amber
#C4704A · --amber
Journey vault — milestone, recovery, progress paths
Navy
#0B1520 · --navy
Primary card bg, 2C-B badge, app icon bg
Deep BG
#020710 · --bg
Page background. Never use as a card or surface color.
Token hierarchy: use --gold, --navy, --cream as primary palette. --sky and --sage are accent only. Vault-specific colors: --gold (Grove) · --sky (Personal) · --sage (Milestone) · --purple (Legacy) · --amber (Journey). Never use raw hex in product code — always reference the CSS variable.
Text Opacity Scale · Cream on dark
93% — --tb — Primary headings, key labels
62% — --tm — Body copy, secondary text, "Line" wordmark
36% — --td — Labels, metadata, captions
18% — --tvd — Dividers, muted section numbers
Color Usage Rules
Gold on dark — primary CTA, active states, mark color. Never use gold as background on large surfaces.
Cream on dark — all body text. Respect the opacity scale — never use full white (#fff).
Navy as surface — cards, modals, nav. Never stack navy on navy without a border.
Sky + Sage — accent only. One per screen maximum. Never pair sky and sage together.
Typography System
Syne — Display & Identity
DandyLine
Section Headlines
Sub-headlines, taglines
Wordmark: Syne 700 (Dandy) + Syne 400 (Line, 62% cream)
Display: Syne 600–700, tight letter-spacing (–0.01em)
Google Fonts: Syne:wght@400;500;600;700;800
Outfit — Body & UI
Body copy, regular
UI text, light weight 300
LABEL · UPPERCASE · 500
Body: Outfit 300–400, line-height 1.6–1.8
UI labels: Outfit 500, letter-spacing 0.1–0.2em, uppercase
Google Fonts: Outfit:wght@200;300;400;500;600
Never use Syne for body copy — it's reserved for identity and display only. Never use system fonts for any brand-facing surface. Load both Syne and Outfit on every page.
CSS Token Reference · Copy into project
:root {
--gold: #D4A853; --gold-lt: #F0C96A; --gold-dk: #A07830;
--bg: #020710; --navy: #0B1520;
--cream: #F5F0E8; --oat: #C8B89A;
--sky: #8BAEC8; --sky-lt: #B4CFDF;
--sage: #7A9E7E; --purple: #6B5B8A;
--amber: #C4704A; /* Journey vault */
--tb: rgba(245,240,232,.93); /* primary text */
--tm: rgba(245,240,232,.62); /* secondary text */
--td: rgba(245,240,232,.36); /* muted text */
--tvd: rgba(245,240,232,.18); /* very dim */
}
07
Brand Rules & Source of Truth
How to use, what not to do, and how to grow the system
Brand Status
This file is the locked source of truth.
Every mark, color, typeface, and treatment used across DandyLine — digital, print, and everything in between — traces back to this document. When in doubt, reference this first.
✓ Dandelion Mark — Locked
✓ Wordmark (Syne) — Locked
✓ Color Palette — Locked
✓ 1C Teardrop Style C — Locked
✓ App Icon System — Locked
✓ Tagline System — Locked
Primary Tagline — "Remember Everything. Miss Nothing."
The main brand expression. Use in hero lockups, onboarding screens, App Store listing, press, and launch materials. Always paired with the animated or full-color dandelion mark. The tone is warm and quietly urgent — the gentle reminder that moments pass.
Set in Outfit 300 (Light) · cream · tracking normal · never all-caps · never bold
Alternate Tagline — "Bloom Later."
A shorter, more poetic expression. Use for seasonal campaigns, secondary placements, social captions, and anywhere you want something brief and evocative. Can appear with the static mark or no mark at all.
The sage-tint card background (subtle green cast) is the visual signature for alternate-tagline contexts — it signals a softer, seasonal energy without changing the mark itself.
Same type treatment as primary · Outfit 300 · never substitute a different tagline in the hero lockup without creating a new version of this doc
✓ 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 62% opacity in the dark theme.
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 / single-color contexts.
Export app icons from this file's canvas renders — do not recreate them from scratch.
✗ 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 — use the static full-color version.
Don't add a drop shadow to the wordmark — the Syne font reads cleanly without it.
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 between them. This mimics how the original 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
What Comes Next · Future Brand Elements
This file covers the foundation. The items below are natural next additions to the system — each one should reference the tokens, marks, and type styles already defined here rather than introducing new visual decisions.
Social & Marketing
Story frames, grid post templates, cover images. Use navy or pitch-black backgrounds. Mark at minimum 48px. Tagline in Outfit 300.
Email & Notifications
Email header: horizontal lockup (no tagline) on navy bar. Push notification icon: 60px navy or pitch app icon. Never use animated mark in email.
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.
In-App UI
Onboarding screens, loading states, empty states. Use the animated mark for loading only. Static icon for all other in-app marks. Follow the size tiers from Section 01.