Lucky Boy Agency

Brand guidelines

The system that keeps Lucky Boy looking like Lucky Boy.

V3

Marks

The Lucky Boy identity in five cuts: the smile as primary, the full-colour face, and the wordmark.

Use dark marks on light surfaces, light marks on dark. Never recolour, stretch, or redraw. Click a tile to pull the SVG.

Type

Zalando Sans at 400 carries every line.

500 lifts small-head labels; 600 holds the eyebrow cap. Caps stay scoped to eyebrows and buttons. Everything else runs in mixed case.

  1. H1
    Brand guidelines.Display · 400 · -0.04em · 40 to 64px · Sentence case
  2. H2
    MarksSection · 400 · -0.03em · 32 to 48px
  3. H3
    Primary lockupSubsection · 400 · -0.02em · 24 to 32px
  4. H4
    Smile monogramBlock · 400 · -0.015em · 19 to 24px
  5. H5
    Use dark marks on light surfaces.Small head · 500 · -0.01em · 18px
  6. H6
    Say helloEyebrow · 600 · 0.05em · 13px · Uppercase
  7. Body
    We're Lucky Boy, a Melbourne creative and marketing agency. Tell us what you're working on and we'll be in touch soon.Paragraph · 400 · 0em · 17px
  8. Small
    © 2026 Lucky Boy Agency · ABN 94 658 730 717Fine print · 400 · 0em · 13px

Colour

Cream as the constant, ink as the counter-weight, orange as the single moment of warmth. Every surface lands on one of the five core steps. Ink does double duty, carrying both text and the footer surface, so chrome reads as a natural extension of the type, not a separate palette.

The orange to yellow gradient is reserved for accents, never for body copy. Ink on cream sits at 17.4:1, well clear of AA body. Orange on cream is 1.64:1, decorative use only.

Yellow is the sparingest step. Target 5% or less of any composition, reserved for the accent gradient's end stop and single-moment highlights. Never a primary fill, surface, or text colour. When in doubt, use orange instead.

  • Cream
    Page background#EAE9E8RGB 234 233 232
  • Ink
    Text, primary fill, footer surface#050505RGB 5 5 5
  • Orange
    Accent, single moment#F9A719RGB 249 167 25
  • Yellow
    Gradient end stop, 5% max#FCD619RGB 252 214 25
  • Muted
    Secondary text on dark#777777RGB 119 119 119
  • Accent gradient
    Orange to Yellow#F9A719 to #FCD61990deg, linear

Spacing

A 4px grid. Every gap, padding, and rhythm value in the system derives from the scale below so nothing lands on an arbitrary number.

Use the smaller steps inside components (1 to 8), the middle steps between components (8 to 24), and the big steps for section breathing room (32 to 128).

  1. 4
    --space-1 · 0.25rem · Hairline, icon pad
  2. 8
    --space-2 · 0.5rem · Tight stacks
  3. 12
    --space-3 · 0.75rem · Inline group gap
  4. 16
    --space-4 · 1rem · Default paragraph
  5. 20
    --space-5 · 1.25rem · Small block gap
  6. 24
    --space-6 · 1.5rem · Block gap, mobile gutter
  7. 32
    --space-8 · 2rem · Sub-section gap
  8. 40
    --space-10 · 2.5rem · Component spacing
  9. 48
    --space-12 · 3rem · Component spacing
  10. 64
    --space-16 · 4rem · Half section gap
  11. 80
    --space-20 · 5rem · Section padding, mobile
  12. 96
    --space-24 · 6rem · Section padding
  13. 128
    --space-32 · 8rem · Section padding, desktop

Motion

Motion should feel quick, directed, and off the screen before you notice it. Three eases cover almost every case: default for UI, in for exits, out for entrances.

Three durations: fast for micro-interactions, base for standard transitions, slow for full-screen moments. Nothing runs longer than 400ms except the menu curtain.

  1. Default
    --ease-default · cubic-bezier(0.4, 0, 0.2, 1) · Standard UI motion
  2. In
    --ease-in · cubic-bezier(0.4, 0, 1, 1) · Element leaves the screen
  3. Out
    --ease-out · cubic-bezier(0, 0, 0.2, 1) · Element enters the screen
  4. 150ms
    --duration-fast · Fast · Hover, focus, micro-tweens
  5. 250ms
    --duration-base · Base · Standard UI transitions
  6. 400ms
    --duration-slow · Slow · Menu open, page transition

Components

Buttons are pill-shaped, 999px radius, ink primary for high intent, outline secondary for supporting actions. Both variants share one hover grammar: opacity fade, never a colour swap.

Inputs take the hairline underline pattern from the footer, H5 spec inside, ink focus thickens the underline to 2px. Every component runs on the shared token set, no bespoke sizes.

  1. Primary
    Pill 999 · Ink fill · Cream text · Opacity hover 0.85, active 0.75 · H6 cap label
  2. Secondary
    Pill 999 · Transparent fill · Hairline ink border · Opacity hover 0.65, active 0.5
  3. Input
    Hairline underline · H5 spec · Ink · Focus thickens underline to 2px