Design System

The rules for how we design, build, and communicate—honouring craft at every step.

01. Introduction

What is this?

The single source of truth for Creatifind’s visual and verbal identity. It ensures that every output—human or AI—creates a cohesive, premium brand experience.

Who is it for?

Internal designers, developers, and AI agents. If you are building for Creatifind, follow these rules strictly.

Design Ethos

01

Minimal yet Expressive

We favour simplicity to let the craft shine. Clean layouts prevent design from overpowering the work.

02

Function & Beauty

Beauty emerges from clarity. We avoid ornamentation that adds complexity without enhancing comprehension.

03

Timelessness

Trends fade; craft endures. We aim for an aesthetic that will still look fresh in ten years.

02. Brand Strategy

What is Creatifind?

Creatifind is a craft-first design studio for artisans. We combine bespoke brand identity with story-driven digital experiences to help makers turn their passion into a sustainable livelihood.

We are NOT: A high-volume agency, a contest site, or a generic marketing shop.

Positioning Statement

"Elevating artisans through refined branding and storytelling."

We champion authenticity, sustainability, and community, delivering refined work at a human pace.

Target Audience

  • Solo Makers: Transforming a passion into a professional brand.
  • Small Craft Brands: Scaling production while maintaining authenticity.
  • Artisan Collectives: Seeking community visibility and shared growth.

Core Values

Authenticity

Honest expression. We never exaggerate or mask the care that craft requires.

Craftsmanship

Quality is our north star. We champion skilled hands over mass production.

Sustainability

We respect the planet. We prioritise ethical practices and low-waste operations.

03. Identity

The visual anchor of our brand. Always treat the mark with respect—maintain clear space and never alter the geometry.

Creatifind Logo
Primary Logo Figure 1.1 · The master brand mark.
SVG
Creatifind Favicon
Favicon / Mark Figure 1.2 · Social & App Icon.
SVG

Clear Space & Sizing

Large (240px+)

Desktop headers, hero sections, and slide decks.

Default (160px)

Standard navigation, footers, and mobile headers.

Minimum (90px)

Critical constraint. Below 90px, switch to the Mark.


Clear Space Rule: Maintain padding equal to the height of the "c" letterform on all sides. This ensures the logo is never crowded by other elements or text.

04. Colors

Our palette is built for contrast and impact. Coquelicot drives action, while Soot provides a premium, noise-free canvas.

Coquelicot #FF3C01

Primary Action. High-energy orange. Use for primary buttons, highlights, and calls to action.

Soot #160D08

Primary Background. A warm, rich black. Used for standard backgrounds to create premium depth.

White #FFFFFF

Text & Contrast. Primary text color on Soot. Used sparingly for backgrounds to create zones of focus.

Gravel #221A15

Surface. Slightly lighter than Soot. Used for cards, sidebars, and UI surfaces.

05. Typography

Our "Modern Boutique" scale uses Cabinet Grotesk for character and General Sans for utility. Zodiak applies subtle elegance.

Cabinet Grotesk Variable
Aa

Headlines, Impact, Display. Distinct ink traps.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
General Sans Variable
Aa

UI, Body, Labels. Clean and geometric.

abcdefghijklmnopqrstuvwxyz
Zodiak Italic
Aa

Accents, Quotes. Use sparingly.

Taking design seriously.

Type Reference

Element / Sample
Typeface
Weight
Size
Line Height
Case
Letter Spacing
H1 Headline We design systems.
Cabinet Grotesk
Bold (700)
56px
1.1
Sentence
-1px
H2 Headline Remote Creative Dept.
Cabinet Grotesk
Bold (700)
32px
1.1
Sentence
0
H3 Headline Clarity, Leverage, Systems.
Cabinet Grotesk
Bold (700)
24px
1.2
Sentence
0
H4 Headline Design Principles
Cabinet Grotesk
Bold (700)
20px
1.25
Sentence
0
H5 Headline Systems over One-offs
Cabinet Grotesk
Bold (700)
17px
1.3
Sentence
0
H6 Headline Component Architecture
Cabinet Grotesk
Bold (700)
15px
1.4
Sentence
0
Subtitle 1 This is a subtitle for smaller sections.
General Sans
Regular (400)
17px
1.5
Sentence
0.15px
Body 1 Creatifind is a premium fractional creative partner for North American startups. We design systems not just pages.
General Sans
Regular (400)
15px
1.6
Sentence
0.5px
Caption Figure 1.1: System Architecture
General Sans
Regular (400)
12px
1.4
Sentence
0.4px
Overline Strategic Partner
General Sans
Medium (500)
10px
1.4
ALL CAPS
1.5px

06. Layout & Spacing

A refined 7-step modular scale that provides smoother transitions than the traditional geometric (2×) scale. Values are optimized for 1080p screens and scale up for higher resolutions.

Spacing Tokens

2XS 4px → 6px · Tight gaps (icon-text, inline elements)
XS 8px → 10px · Small gaps (list items, form labels)
SM 12px → 16px · Component padding, button spacing
MD 20px → 28px · Card padding, element groups
LG 32px → 44px · Section gaps, grid gutters
XL 56px → 72px · Major section padding
2XL 80px → 104px · Page sections, hero spacing
Resolution-Aware Scaling

Base values (left) are optimized for 1080p screens (1920×1080). On 1440p+ screens (≥2000px viewport), values automatically scale up (right) for proportional visual balance.

07. Components

Reusable blocks that ensure consistency. Verify if a component exists before building a new one.

Buttons

08. Tone & Voice

Warm, Respectful, and Knowledgeable. We speak like humans, not corporate copy.

Tone Qualities

  • Partnership: We are a studio, not a factory. We speak as collaborators in the maker's journey.
  • Depth: We value "depth over breadth". Explain the *why* and the *how* behind the work.
  • Honest: We never exaggerate. We present the work with care, clarity, and integrity.

Voice Techniques

  • Storytelling: Highlight the process and materials ("reclaimed wood", "earthen homes").
  • Deliberate Pace: Avoid "rush" language. Use words like "refine", "craft", "evolve".
  • Positive Framing: Focus on the value of the handmade ("character", "patience").

Writing Style

Do This "We recommend Option A. It honours the material's texture."
Not This "Option A is the best-practice conversion hack."
Do This "A refined brand foundation elevates your work."
Not This "You need to fix your branding to explode your sales."

On-Site Examples

Hero Headline

"Timeless Craft. Modern Storytelling."

Manifesto

"We speak the language of makers because we've dedicated our practice to the artisan economy."

Process Steps

"01. Listen. 02. Concept. 03. Refine. 04. Launch."

Service Title

"Craft Brand Foundation."

Error State

"404. We're still refining this piece."

09. AI Usage Rules

Directives for Autonomous Agents generating assets for Creatifind.

agent-directives.sh
# Respect the System Never invent new colors or fonts. Use only the tokens provided in this document.
# Semantic HTML Use `section`, `article`, `header` tags. No div soup.
# Class Names Reuse `ds-card`, `ds-grid`, `btn-primary`. Do not create new classes.
# If Unsure Default to the simplest implementation. Calm confidence = clear code.