Unicorn.Land Brand Identity Design

Status: Approved Date: 2026-02-24 Prompt: 2 — The Brand Identity Creator

1. Brand Strategy

Brand Story

The world is full of invisible patterns — in markets, in ancient wisdom, in your own anxiety, in the connections between ideas, in the systems that quietly extract value from people who don’t have the tools to see what’s happening. Unicorn.Land builds tools that make these patterns visible and usable. Each tool is different. All share the same workshop DNA.

Brand Personality: The Creator x The Sage

Builds beautiful things AND reveals hidden truths. Human traits: precise, witty, quietly confident, unexpectedly warm, a little weird in the best way.

The conviction is real but it lives in the work, not in the words.

Positioning

Not a startup, not an agency — an atelier. A small workshop making exceptional things. The political-economic doctrine (finding structural inefficiency, building tools that give leverage back to people, routing gains into impact) drives what we build. But the public voice stays craft-focused. People discover the mission through the products.

Voice & Tone Matrix

Voice Examples

• Product description: “Even maps macro inequality so you can position against it. Not advice. Leverage.”
• Error message: “That didn’t work. Here’s what did.”
• About page: “A small workshop making tools that reveal what’s hidden.”
• Build log: “We spent three days on the spacing scale. Here’s why it matters.”
• Tagline for a product launch: “Your anxiety has patterns. Now you can see them.”

Messaging Hierarchy

• Tagline: “Grass-fed, grass-finished” — the personality line. Homepage, social bios, the memorable thing.
• Mission: “Making the invisible visible” — the substance line. About page, presentations, brand docs.
• Value proposition: Beautifully crafted tools that reveal hidden patterns — in data, in wisdom, in yourself.
• Key messages: 1. Every product is built with obsessive care. 2. Serious tools with personality. 3. Each product has its own soul, all share the same DNA.
• Proof points: Portfolio of shipped products spanning mobile apps, web tools, data systems, and interactive experiences.

2. Visual Identity System

Logo: Wordmark

Typeface: Silkscreen (pixel font, logotype only) Treatment: UNICORN.LAND — the period is the distinctive element.

Variants: 1. Static — Silkscreen in near-black (#1c1917), period in Opal (#56dbd0). 2. Rainbow — Smooth flowing rainbow gradient shimmer. A linear-gradient at 300% size panning across the text on a 6-second ease cycle. Colors: opal, blue, purple, pink, gold, green, back to opal. The signature treatment for hero moments and interactive contexts. 3. Reversed — Same rainbow flow on dark backgrounds. The gradient carries its own light. 4. Monochrome — All near-black or all white. For contexts where color isn’t available.

Sizes: - Large (hero): 48px - Default: 40px - Small (nav/footer): 24px - Minimum: 120px wide

Clear space: Minimum padding equal to the cap-height of the wordmark on all sides.

Logo: The Refracted Dot

The standalone geometric mark. The period from the wordmark, evolved.

Concept: A circle with the same smooth flowing rainbow gradient as the wordmark — holographic, shifting through opal, blue, purple, pink, gold, green on a 6-second cycle. A soft radial highlight gives it dimensionality. The wordmark and dot are the same holographic material.

Sizes: - 12px — Badge context - 20px — Favicon - 32px — Tab icon - 48px — Default standalone - 64px — App icon / large display

Scales cleanly. At very small sizes (favicon, 16px), the gradient simplifies to a radial opal-to-blue highlight.

Usage: Favicon, app icon for the Unicorn.Land portfolio site, social media avatar, “Made in Unicorn.Land” badge, and any context where the full wordmark doesn’t fit.

Logo Usage Rules

Correct: 1. Wordmark on warm white (#fafaf9) or near-black (#1c1917) backgrounds 2. Refracted dot on light or dark backgrounds with adequate padding 3. Opal period in the wordmark 4. Monochrome variant on photography or complex backgrounds 5. Shimmer variant on hero sections and interactive/web contexts

Incorrect: 1. Static/flat rainbow gradient on the wordmark (the animated shimmer variant IS correct — see Variant 2) 2. Wordmark in Outfit or any font other than Silkscreen 3. Dot without refraction effect (unless below 16px where it simplifies) 4. Wordmark stretched, rotated, or modified 5. Opal dot on an Opal background (no contrast)

Color Palette

Locked in from Prompt 1 design system. No changes.

• Signature: Opal #56dbd0 — clarity + calm + depth. Not corporate blue, not startup green. Reads as “I see clearly.”
• Functional accent: Deep teal #0d9488 — links, interactive elements. Passes WCAG AA on white (4.6:1).
• Contrast: #134e4a — high-contrast needs. Passes at 9.5:1.
• Neutrals: Warm Stone scale — #fafaf9 to #1c1917. Not blue-gray, not yellow-gray.
• Background: #fafaf9 (light mode default)
• Text: #1c1917

Typography

• Logotype: Silkscreen (pixel font, for the wordmark only)
• Primary: Outfit (variable, Google Fonts) — all brand typography, all UI
• Monospace: JetBrains Mono — code blocks, data displays, technical contexts
• Sub-products may introduce: secondary display faces (BLO: Fraunces, etc.) but Outfit is always available as the backbone
• Usage hierarchy: Display > Headline > Title > Body > Callout > Subhead > Footnote > Caption (full scale in design system tokens)

Imagery Style

Philosophy layer (homepage, about, presentations): Light through nature. Sunlight through leaves, water refracting light, morning mist burning off, roots breaking through concrete. Nature as metaphor for revealing hidden patterns. Warm, organic, alive.

Product layer (build logs, product pages, docs): Human-scale craft. Workshop surfaces, hands making things, a desk with tools. The warmth of a real person building real things. No faces, but human presence felt. Analogue’s vibe.

Both share: Warmth, natural light, realness. High contrast. No stock-photo people. No illustration at the brand level.

Iconography: Line icons, 1.5px stroke, rounded caps, consistent 24px grid. Lucide icon set. Simple and geometric.

Graphic elements: Subtle dot-grid patterns (Nothing influence). Thin rule lines. Generous whitespace as a design element.

3. Brand Applications

“Made in Unicorn.Land” Badge

• Shape: Pill (border-radius: full)
• Contents: Refracted dot (12px) + “Made in UNICORN.LAND” in Silkscreen at caption scale (10px)
• Variants: Light (warm white background, stone border) and dark (stone-800 background, stone-700 border)
• Placement: Sub-product footer, about screen, or settings page. Never intrusive — it’s a signature, not an ad.

Social Media Templates

• Avatar: Refracted dot centered on warm white #fafaf9 square. Clean, recognizable at small sizes.
• Cover/Banner: Wordmark (static variant with Opal period) centered on warm white. Tagline “Making the invisible visible” in Outfit below. Opal rule line separating them. Generous whitespace.

4. Sub-Product Identity Guidelines

What sub-products inherit (cannot override):

• Spacing scale (8px base, full 14-stop system)
• Border radii system (xs through full)
• Shadow system (values and feel, not necessarily colors)
• “Made in Unicorn.Land” badge placement convention
• Outfit as the available sans-serif backbone
• Transition timing (200ms ease-out for interactions, 300ms for page transitions)

What sub-products CAN override:

• --ul-accent — their own signature color
• BLO: gold #D4A853
• Simple Tarot: gold #E6C266
• Sanctuary: sage #8B9A7D
• --ul-bg / --ul-bg-surface — their own canvas
• Simple Tarot: dark navy #1a1a2e
• Family Dashboard: dark #0a0a1a
• --ul-text / --ul-text-secondary — adapted for their canvas
• Display typeface — for product-specific personality (BLO: Fraunces for oracle cards)
• Illustration style — each product owns its own visual language

The thread that connects them:

• Spacing rhythm feels the same
• Shadows have the same tightness and warmth
• Typography hierarchy follows the same scale, even with different faces
• The “Made in Unicorn.Land” badge appears somewhere accessible (footer, about, settings)
• Interactive patterns (hover lifts, transitions, easing curves) are shared
• The refracted dot appears wherever the parent brand is referenced

5. Brand Guidelines Document Structure

20-page brand book:

1. Cover
2. Mission & Story
3. Brand Personality
4. Voice & Tone (matrix + examples)
5. Logo: Wordmark (specs, clear space, minimum size)
6. Logo: Refracted Dot (specs, sizes, usage)
7. Logo: Correct Usage (5 do’s)
8. Logo: Incorrect Usage (5 don’ts)
9. Color: Primary Palette
10. Color: Semantic & Accessibility
11. Typography: Hierarchy
12. Typography: Usage Rules
13. Imagery: Philosophy Layer (nature + light)
14. Imagery: Product Layer (craft + workshop)
15. Iconography & Graphic Elements
16. Badge: “Made in Unicorn.Land”
17. Social Templates
18. Sub-Product Guidelines: What’s Inherited
19. Sub-Product Guidelines: What’s Overridable
20. Quick Reference Card

6. Implementation Notes

Built:

• Wordmark in Silkscreen — static + shimmer + reversed (design-system/brand/wordmark.svg, wordmark-dark.svg)
• Refracted dot at multiple sizes (design-system/brand/holographic-dot.svg, holographic-dot-static.svg)
• Favicon (design-system/brand/favicon.svg)
• “Made in Unicorn.Land” badge — light + dark (design-system/brand/badge-light.svg, badge-dark.svg)
• Social media templates (design-system/brand/social-avatar.html, social-cover.html)
• Wordmark size scale (large, default, small) in docs page
• Docs page with full brand showcase (design-system/docs/index.html)

Not yet built:

• Full brand guidelines PDF (the 20-page book) — low priority
• Homepage migration to use the new identity (separate effort — Prompt 6 will critique)