Tillered | Brand Assets

Usage guidelines

Follow these guidelines when using Tillered brand assets to maintain visual consistency across all materials.

Use the light variant on light backgrounds and the dark variant on dark backgrounds.
Do not modify, distort, or recolour the logos in any way.
Maintain adequate clear space around the logo. Do not crowd it with other elements.
Do not place logos on busy or low-contrast backgrounds.
Prefer SVG with CSS animation for web and any medium that supports CSS. Use GIF for applications that do not support CSS animation (PowerPoint, Keynote, email). Use PNG as a static raster fallback.

Colour palette

The palette has two layers: fixed brand colours that stay consistent everywhere, and application tokens that adapt between light and dark modes. Click any colour block to copy its hex value.

Brand

Copied!

Mark #44EDFF

Pinwheel mark fill and tillered icon. Used for thin strokes and small fills that need to pop. Consistent across light and dark modes.

Copied!

Deep #0A192F

Accent panels, hero sections, and code block backgrounds. Not used as the dark mode page background.

Copied!

Deep Subtext #9CA3AF

Secondary text and captions on Deep backgrounds.

Theme

Six semantic tokens control the look of the site. Each token has a light and dark mode value but serves the same role in both modes.

Token	Role
Background	Page background
Surface	Cards, alternating sections
Foreground	Primary text
Muted	Secondary text, captions
Border	Dividers, card edges
Accent	Links, interactive elements

Light mode

Background #FFFFFF

Surface #F5F5F5

Foreground #111111

Muted #555555

Border #E0E0E0

Accent #0EA5BB

Dark mode

Background #121212

Surface #1A1A1A

Foreground #E5E5E5

Muted #8C8C8C

Border #2A2A2A

Accent #12C4DD

Typography

The closest available match is Inter Semibold. All text in the logo SVGs has been converted to paths, so they render correctly regardless of installed fonts.

Property	Value
Closest match	Inter Semibold
Reference size	68pt
Letter spacing	0%
Line height	100%
SVG text	Converted to paths
Text on light backgrounds	#111111
Text on dark backgrounds	#FFFFFF

Logo construction

The full logo is composed of the pinwheel mark and the wordmark. They are vertically center-aligned with a gap of 11 units between them. Maintain a minimum clear space of half the pinwheel height (50 units) on all sides. The hover rotation should trigger from the full logo container (pinwheel + gap + wordmark), not the pinwheel alone.

Component	Width	Height	Notes
Full logo (hover zone)	359	107	viewBox dimensions
Pinwheel mark	100	100	viewBox dimensions
Wordmark	248	107	viewBox dimensions
Gap	11	-	Between pinwheel and wordmark viewBoxes
Clear space	50	50	Minimum on all sides

All dimensions are in SVG viewBox units and scale proportionally with the logo.

Pinwheel mark

The standalone pinwheel for use as an icon, favicon, or decorative element.

hover to rotate

Dimensions	100 x 100
Aspect ratio	1 : 1
Fill colour	Brand.Mark#44EDFFCopied!

Hover rotation

On hover, the pinwheel rotates 180° over 500ms. When paired with the wordmark, the hover should trigger from the parent container.

/* Rotate 180 degrees on hover over 500ms */
.pinwheel {
  transition: transform 500ms;
}
.pinwheel:hover {
  transform: rotate(180deg);
}

/* When paired with the wordmark, trigger on the parent hover */
.logo:hover .pinwheel {
  transform: rotate(180deg);
}

/* Disable animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pinwheel {
    transition: none;
  }
}

Continuous rotation

For loading states or decorative use, the pinwheel rotates continuously at one full turn every 4 seconds.

/* Continuous rotation: one full turn every 4s */
@keyframes pinwheel-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.pinwheel-spin {
  animation: pinwheel-spin 4s linear infinite;
}

/* Disable animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pinwheel-spin {
    animation: none;
  }
}

For applications that do not support CSS animation (PowerPoint, Keynote, email), use the animated GIF instead.

Assets

Each asset is available in light, dark, and auto variants. The auto SVG uses a `prefers-color-scheme` media query to switch between light and dark fills automatically.

Full logo

Combines the pinwheel mark with the Tillered wordmark.

Light: SVG · PNG Dark: SVG · PNG Auto: SVG

Wordmark

The Tillered name without the pinwheel, for contexts where the mark appears separately.

Light: SVG · PNG Dark: SVG · PNG Auto: SVG

Pinwheel mark

The standalone pinwheel for use as an icon, favicon, or decorative element.

SVG · PNG · GIF (animated)