LootCollectBrand

A living styleguide for the LootCollect paper design system.

A friendly, reliable, set-and-forget cloud task scheduler. This page is built straight from the real tokens and primitives, so it stays accurate as the brand evolves.

Identity

Logo & mascot

The wordmark, the coral mark, and Lootie — our floating blob companion — in every pose.

LootCollect
Wordmark in font-heading bold, with the signature coral mark.
wave
point
zzsleep
celebrate
idle

Foundations

Color palette

Warm neutrals, a signature coral, bright accents, and a tight status set. Click a utility to copy it.

Neutrals

Paper#F5F1E9

Page background — warm cream paper.

Surface#FFFFFF

Cards and raised panels.

Surface-2#EFE9DD

Muted fills and hover states.

Border#E5DDCD

Warm hairline dividers.

Ink#17140F

Primary text and ink pill buttons.

Soft ink#6B6358

Secondary and supporting text.

Band#1A1714

Dark sections — pricing, footer, CTA.

Brand

Coral#FF6B4A

Signature colour — fills, dots, highlights.

Coral-ink#C2410C

Coral text, links and icons on light (AA).

Accents

Periwinkle#98A2F3

Soft accent blocks and cards.

Yellow#FCCB3F

Bright accent blocks and tags.

Violet#8B5CF6

Playful accent — celebrations & particles.

Lavender#C9BCFF

Highlighter marker swipe.

Mint#3FBF84

Fresh accent blocks and cards.

Status

Success#16A34A

Positive states and confirmations.

Warning#D97706

Cautions and pending states.

Danger#DC2626

Errors and destructive actions.

Foundations

Typography

Space Grotesk for display and headings, Inter for body. Bold, near-black, friendly.

Space Grotesk — display & headingsfont-heading

Set it once.

It just runs.

Reliable vote automation

Eyebrow / label

Inter — bodydefault

Large body — LootCollect runs your recurring tasks on schedule, automatically.

Base body — schedule a task, watch the logs, and leave the rest to us.

Small / secondary — used for captions, helper text, and metadata throughout the product.

Primitives

Buttons

Pill buttons in four variants and three sizes.

Variants

Sizes

Link as button

Get startedUse buttonClass(variant, size) on <Link> or <a> for navigation CTAs.

Primitives

Cards

Rounded panels. Surface for content, color variants for emphasis, band for dark sections.

Surface

color="surface"

Periwinkle

color="periwinkle"

Yellow

color="yellow"

Coral

color="coral"

Mint

color="mint"

Band

color="band"

Primitives

Badges & tags

Badges flag status inline. Tags are bold pills, often scrolling in a marquee.

Badge tones

SuccessWarningDangerNeutralAccent

Tag colors

AccentCoralPeriwinkleYellowInk

Marquee row

Auto-runsSet-and-forgetEvery endpointLive logsCloud-basedReliableRuns on time

Primitives

Highlighter

A lavender marker swipe for emphasis. Use it on a word or two — never a whole sentence.

Your tasks keep running on schedule — without you lifting a finger.

<Highlight>on schedule</Highlight>

Foundations

Motion

Content reveals in a staggered wave as it scrolls into view — rise, fade, and settle with a springy ease.

Reveal

Wraps a block so it rises, fades, and overshoots gently as it enters the viewport.

Stagger

Offsets each child in a group so the motion travels across it like a wave — exactly how these three cards arrived.

Reduced motion

Respects prefers-reduced-motion — content appears instantly, with no animation.

Brand

Voice & tone

Friendly, plain-spoken, confident — never spammy or hypey.

Do

  • Be friendly and plain-spoken — talk like a helpful teammate.
  • Stay confident and concrete: say what it does, not what it might.
  • Lead with the benefit — set it once, it just runs.
  • Keep it short. One clear idea per sentence.
  • Use playful warmth sparingly, where it earns a smile.

Don't

  • Don't be spammy or hypey — no "GUARANTEED #1 VOTES!!!".
  • Don't overpromise or imply we game anti-cheat systems.
  • Don't bury the point in jargon or filler.
  • Don't shout in ALL CAPS or pile on exclamation marks.
  • Don't be cold or robotic — we're friendly, not corporate.