Otago, New Zealand

Style guide

The system behind the mock-up: type, colour, spacing and components, so the design can be reviewed on its own terms.

Identity

WOOLAIS FARM lock-up in ink

Brand A lock-up, ink. Supplied raster, never redrawn.

WOOLAIS FARM lock-up in white

White version, over photographs.

Type

Montserrat in wide-tracked capitals for headings and interface; Source Serif 4 for reading. Modular scale, ratio 1.25 on an 18px reading size; display steps are fluid between 360px and 1680px.

--h-d, Montserrat 500 caps, +0.11em

Valais Blacknose

--h-1, Montserrat 500 caps, +0.11em

The flock in spring

--h-2, Montserrat 500 caps, +0.11em

Stock available this season

--h-3, Montserrat 500 caps, +0.11em

Ewe with lambs at foot

--h-4, Montserrat 500 caps, +0.11em

Pedigree and fleece notes

--t-xl, Source Serif 4 400, optical size auto

Lead paragraph: lorem ipsum dolor sit amet, consectetur adipiscing elit, integer posuere erat.

--t-m 18px, Source Serif 4 400, 1.6

Body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oldstyle figures 1234567890 sit inside the line; tabular lining figures are used for tags and dates.

Source Serif 4 true small caps, +0.06em

Tag 2026 0417, Born 14 September

--t-s 15px, Source Serif 4, stone

Caption and secondary text, lorem ipsum dolor sit amet.

13px, Montserrat 500 caps, +0.14em

Interface and navigation

Colour

  • Ink #1C1A18

    Text, rules, primary buttons. Sampled from the Brand A lock-up. 16.4:1 on paper.

  • Paper #FAF8F4

    Page ground. Sampled from the white Brand A lock-up.

  • Fleece #F4F0E7

    Secondary ground: footer, register, forms. The Brand A cream.

  • Stone #625C54

    Secondary text. 6.2:1 on paper, 5.8:1 on fleece.

  • Pasture #47532B

    The single accent: focus rings, selection, valid fields. 7.8:1 on paper.

  • Alert #8C2F1F

    Errors only. 7.8:1 on paper.

Spacing

8-point rhythm. Section spacing is fluid: 64px on phones to 192px on large screens.

  • --s-1, 8px
  • --s-2, 16px
  • --s-3, 24px
  • --s-4, 32px
  • --s-5, 48px
  • --s-6, 64px
  • --s-7, 96px
  • --s-8, 128px
  • --s-9, 192px

Buttons and links

Primary

Primary, hover

Primary, focus

Primary, loading

Primary, disabled

Quiet

Quiet, hover

Text link

See the whole flock

Status marks

AvailableReserved

Form fields

Default

Focus

Error

Enter an email address like name@example.co.nz.

Valid

Disabled

Select

Stepper

Checkbox

Cards and rows

A horned Valais Blacknose ewe looks at the camera while her twin lambs stand at a feed tub
[Ewe name] Tag [ID]
Sire
[Sire]
Dam
[Dam]

[One line of notes]

Flock card, linked (hover lifts the photo)

A curious Valais Blacknose lamb walking toward the camera, hills behind
[Lamb name] Tag [ID]

Register card, compact

Image treatment

A Valais Blacknose lamb trotting toward the camera across the paddock, ewes and bush-covered hills behind

The v3 grade only: no filters, overlays or added grain. Hairline captions sit below, never on the image.

Motion

One signature interaction: the stud register on the home page, where scrolling down moves the flock sideways. On touch screens, narrow windows and with reduced motion it becomes a swipeable row.

Large photographs slide out from a mask as they enter (1s, ease-out). The flock card photo carries into the profile page as a cross-page transition. The header condenses on scroll. Nothing else moves on its own. With prefers-reduced-motion, all of it is switched off and the hero film shows its still frame.