Dual-brand overview

Artfuly and Rachael Page are two distinct brands owned by the same designer — Rachael Page. They share a typeface family, a navigation colour, and a teal accent. Everything else is intentionally differentiated: Artfuly is warm and educational; rachaelpage.com is crisp and portfolio-focused.

How they relate

artfuly.com

Design education platform

Resources, articles, courses. Warm teal palette. Coral CTAs. Merriweather for long-form reading.

rachaelpage.com

Professional portfolio

20+ years UX/product work. Black and white dominant. Teal used as accent only. Montserrat throughout.

Same codebase, two domains. Both sites are built in Astro and deployed to Netlify. artfuly.com serves /; rachaelpage.com is served via a 200 rewrite at /rachael-page/. The shared teal nav colour (below) is the most visible design thread connecting them.

01

Shared navigation

Both sites use an identical semi-transparent light-cyan navigation bar. It is the most direct visual link between the two brands. The content differs — one uses the Artfuly round logo, the other uses a text wordmark — but the bar itself is the same.

Nav background colour

rgba(206,234,235,0.82)

Translucent light cyan. Scrolls as a fixed bar — page content is dimly visible through it. Never use an opaque background in the nav.

artfuly.com nav

Design Resources About Work with me

Artfuly round logo (PNG) + Montserrat 300 links + coral pill CTA.

rachaelpage.com nav

Rachael Page

Work About Get in touch

Montserrat 700 name wordmark + Montserrat 300 links. No separate logo mark.

Font weight rule: Nav links are always Montserrat 300 (Light) on both sites. The logo/wordmark uses Montserrat 700. The CTA button in the Artfuly nav uses Montserrat 800.

02

Typography system

Montserrat is the single shared typeface across both brands — used in 9 weights from Light to Black. Each site then adds one supplementary typeface for a specific purpose.

Typefaces in use

Font	Role	Weights	Used on
Montserrat	Primary — headings, body, buttons, nav	300 · 400 · 500 · 600 · 700 · 800 · 900	Both sites
Merriweather	Article body text only	300 · 400 · 700	artfuly.com
Barlow Condensed	Testimonial blockquotes only	400 · 500 · 600	rachaelpage.com
Great Vibes	Decorative display — single use	400	artfuly.com (1 instance)
Parisienne	Decorative — surface pattern page names	400	rachaelpage.com (1 page type)

Great Vibes and Parisienne are art-direction choices for specific contexts, not brand fonts. Do not use them for anything outside their designated single use.

Montserrat weight ramp — shared

300 · LightNavigation links, body copy, captions

400 · RegularBody paragraphs, form labels

500 · MediumCard titles, subheadings

600 · SemiBoldActive nav, section sub-labels

700 · BoldSection headings, buttons, nav wordmark

800 · ExtraBoldHero display, primary CTA labels

900 · BlackLarge display use only — artfuly.com hero

03

Artfuly logo

The Artfuly logo is a circle in retro teal (#84cacc) with the wordmark "Artfuly" in white Simplo Heavy. The favicon is a teal square with a white "A" styled as an artist's easel. There is no separate standalone mark — the circle is the mark. Mockups at 'DON'TS' below approximate the letterform using Montserrat (Simplo Heavy is not a web font).

Logo on approved backgrounds

On white — primary use for marketing and print.

On light cyan — section backgrounds, email.

On dark teal — nav header, dark overlays.

Favicon

Favicon at 32px, 48px, 64px. Teal square, white A.

The favicon "A" is stylised as an artist's easel — a deliberate reference to art/design craft. It is not a generic letter A. Do not substitute with a plain A in any typeface.

Clear space

½ × logo diameter ½ × logo diameter ½ × dia. ½ × dia.

Minimum clear space on all sides = half the logo's diameter. No text, buttons, or imagery inside this zone.

Minimum sizes: Full logo (circle + wordmark together) — 80px diameter minimum. In the nav the logo is rendered at 32–36px. Below 24px, use only the favicon.

Always use a PNG or outlined SVG — never browser-rendered type. Simplo Heavy is not a web font and cannot be reliably rendered by browsers. Every logo placement must use a pre-exported PNG asset or an SVG with the letterforms converted to outlines. Never set the wordmark in a live font, even as a fallback.

Don'ts

Artfuly

Don't change the circle colour. Only retro teal (#84cacc) is approved.

Artfuly

Don't stretch or distort the circle. It must remain a perfect circle.

Artfuly

Don't add drop shadows, glows, or effects to the logo.

Artfuly

Don't place on non-approved backgrounds. White, light cyan, and dark teal only.

Artfuly

Don't retype the wordmark in a different font. Always use the PNG asset.

Artfuly

Don't use the logo at reduced opacity.

04

Artfuly colour palette

The palette is anchored by two teals and one coral. Dark teal dominates structural elements. Coral is reserved for primary CTA buttons only — never for decorative use. Charcoal is text only and must never be used as a background.

Primary palette

Dark Teal

#048ba2

Hero backgrounds, nav section, primary buttons, footer, section headers.

Retro Teal

#84cacc

Links, hover states, share buttons, borders, logo circle.

Coral

#ee7c7b

CTA buttons only. Subscribe, Work with me, article actions.

Coral Hover

#e5605e

Hover state for all coral buttons. Not used for anything else.

Light Cyan

#ceeaeb

Nav background, mobile overlay, skill pills on RP site.

Cyan Background

#e6f7f7

Section backgrounds, contact pre-footer, card backgrounds.

Charcoal ⚠

#233030

Text only. Headings and body on light backgrounds. Never as a background colour.

Charcoal (#233030) and Deep Dark (#0D3340) are text/headings only. Neither must ever be used as a section, card, or element background. For dark backgrounds use #048BA2 (dark teal) — the only approved dark background colour. This rule has caused repeated errors — check every dark background in code.

Approved contrast pairs

White on Dark Teal

#fff on #048ba2 AA ✓

Light Cyan on Dark Teal

#ceeaeb on #048ba2 AA ✓

Charcoal on White

#233030 on #fff AAA ✓

White on Coral

#fff on #ee7c7b AA ✓

Charcoal on Cyan Bg

#233030 on #e6f7f7 AAA ✓

05

Artfuly typography

Montserrat handles all structural type. Merriweather is used exclusively for article body paragraphs to aid long-form reading. The two fonts are never mixed within a single text block.

Montserrat — primary

Montserrat Headings · UI · Buttons · Body Google Fonts · weights 300–900

Design better, teach better.

Artfuly is a design education platform created by Rachael Page, a UX and product designer with 20+ years of experience.

Type scale — artfuly.com

40px · 800 Hero display heading Design better

28px · 700 Section heading (H2) Top Design Resources

22px · 700 Sub-section heading Free Design Tools

16px · 700 Card title, bold label ElevenLabs AI Voice

15px · 500 Card title (medium) How to sell on Spoonflower

14px · 400 Body / captions Platform for creators and designers.

14px · 300 Nav links Design Resources

11px · 700 Uppercase label / meta tag Design Insights

Use

Montserrat for all UI elements, labels, headings, and buttons on artfuly.com.

Avoid

Never use Montserrat for long-form article paragraphs — use Merriweather for body text inside articles.

Merriweather — article body

Merriweather Article paragraphs only Google Fonts · 300 · 400 · 700

How to Use AI to Create Seamless Patterns

Generating surface pattern designs with AI tools has become one of the fastest ways to build a Spoonflower portfolio. The key is knowing how to combine Midjourney prompts with Topaz Gigapixel for the final upscale.

Italic Merriweather for pull-quotes and callout text within articles.

Use

16px / 1.8 line-height for all article body paragraphs (.w-richtext p). Strong readability at length.

Avoid

Never use Merriweather in UI — buttons, nav, labels, or headings outside the article rich-text container.

Great Vibes — decorative (one instance)

Great Vibes Decorative display — one use only Google Fonts · 400

Away from the Race

Used only in this hero section

Art-direction only

Used in one specific hero section. Do not apply to any other element on the site.

06

Artfuly buttons

Three button types cover all actions on artfuly.com. Coral is always the primary CTA — it must stand out from the teal environment. Ghost and pill variants handle secondary and nav-level actions.

Button types

Primary CTA — coral pill

Work with me Subscribe Read the full article →

Property	Standard	Large (article CTA)
Background	#ee7c7b	#ee7c7b
Hover bg	#e5605e	#e5605e
Text	#ffffff · Montserrat 700	#ffffff · Montserrat 700
Font size	13px	16px
Padding	12px 22px	16px 40px
Border radius	30px (pill)	30px (pill)

Secondary — ghost teal

Learn more View all resources

Property	Value
Background	transparent
Border	2px solid #048ba2
Hover	bg #048ba2 · text white
Text	#048ba2 · Montserrat 700 · 13px
Padding	10px 20px
Border radius	30px

Subscribe button — article hero (overlaid on image)

This button is positioned absolute — top-right of the article hero image. Coral fill. Same styles as the primary CTA. Font size drops to 11px on mobile (<480px).

Share buttons

Article share bar — inline below content

Border: 1px solid #84cacc. Colour: #84cacc. Border-radius: 4px (square-ish, not pill). Hover: bg #84cacc, white text.

07

Artfuly components

Key repeating patterns used across artfuly.com: the article card, article body layout, and email sign-up form. Each has a fixed structure that should not be varied.

Article card

16:9 cover image

The Best Free Image Sites for Designers in 2025

A curated list of the highest-quality free image sources for web and print design projects.

16:9 cover image

How to Sell Your First Design on Spoonflower

Everything you need to get your first surface pattern uploaded, approved, and listed.

16:9 cover image

ElevenLabs Review: Is It Worth It for Designers?

A hands-on look at whether AI voice generation has a real place in a designer's workflow.

Element	Style
Image	16:9 aspect ratio · border-radius 4px · scale(1.03) on hover
Title	Montserrat 700 · 15px · #233030 · turns #84cacc on hover
Excerpt	Montserrat 400 · 14px · #555 · line-height 1.6
Card wrapper	display:block · text-decoration:none · no card border

Article body — rich text

Section heading (H2)

This is article body text set in Merriweather Regular at 16px with 1.8 line-height. Long-form reading comfort is the priority — the extra leading helps eyes track back across a full-width paragraph.

Inline prose link — use the .prose-link class on all inline body text links (Montserrat and Merriweather pages). Colour: #048BA2, bold, underlined, inherits parent font-size. Never use the webflow.css default link style (18px/500/no-underline) for inline body links. Bold uses Merriweather 700. Italics use Merriweather Italic.

Sub-heading (H3)

H2 and H3 inside articles revert to Montserrat 700 to maintain a clear typographic hierarchy against the Merriweather body.

Email CTA section

Design Insights

Get weekly design resources

Free tools, tutorials, and Spoonflower tips delivered every Thursday.

your@email.com

Subscribe free

Section background: #048BA2 (dark teal). Heading: Montserrat 700 22px white. Meta label: Montserrat 700 11px uppercase letter-spaced, rgba(255,255,255,0.6). Coral CTA button as standard.

08

Name treatment

rachaelpage.com has no separate logo mark. The name "Rachael Page" set in Montserrat 700 is the brand identity. It appears in the nav, on headings, and in the footer — always in black (#000000) on light backgrounds.

Approved name treatments

Rachael Page

Nav wordmark — Montserrat 700, #000000.

Rachael Page

On dark — white. Used for dark-bg sections.

No graphic mark. The name is the identity. Do not add shapes, underlines, or icons around it. Letter-spacing: -0.02em (tighter than default). Font: always Montserrat 700.

Hero treatment

Analytical

+ Creative

"Analytical" slides in from left, "+ Creative" from right. Montserrat 800, letter-spacing -0.04em, line-height 1. These two words are the hero tagline — they should never be changed.

09

rachaelpage.com colour

The portfolio palette is deliberately restrained: black and white carry the structure, teal appears only as an accent. This keeps the work (case studies, images) as the visual focus rather than the surrounding chrome.

Palette

Black

#000000

Primary text, hero headings, dark sections, primary buttons.

White

#ffffff

Page background, card backgrounds, text on dark sections.

Teal Accent

#84cacc

Links, hover states, section heading underlines, next-project arrow.

Light Cyan

#ceeaeb

Skill pills, nav background (shared). Never used for body backgrounds.

Tag Grey

#f3f3f3

Skill tag backgrounds, testimonial card backgrounds.

Muted Grey

#888888

Secondary text — excerpts, captions, dates, metadata.

Surface

#f7f7f7

Impact callout backgrounds. Alternating section backgrounds.

Border

#dddddd

Rule lines, card borders, dividers, skill-tag border.

Teal is an accent, not a background. On rachaelpage.com, #84cacc appears as a 2px underline on section headings, as a colour for links and hover states, and as the "active" state on category filter pills. It is never used as a background on this site.

Contrast pairs

White on Black

#fff on #000AAA ✓

Black on White

#000 on #fffAAA ✓

Black on Tag Grey

#000 on #f3f3f3AAA ✓

Black on Light Cyan

#000 on #ceeaebAAA ✓

Teal on White

#84cacc on #fffAA ✓

Teal on Black

#84cacc on #000AA ✓

10

rachaelpage.com typography

Montserrat is used throughout at weights from 300 to 800. Barlow Condensed appears in one specific context — testimonial blockquotes — for its distinctive condensed italic character.

Montserrat — portfolio type scale

Montserrat All type on rachaelpage.com Google Fonts · weights 300–800

Analytical

UX & Product Designer · 20+ years experience · London / Berlin

Type scale — rachaelpage.com

72px · 800 Hero words (Analytical / Creative) Analytical

32px · 800 Work section heading Selected Work

24px · 700 Section heading / project title Ticklists App

16px · 700 Card title, bold label Surface Pattern Design

15px · 400 Body / bio paragraph 20+ years experience across UX, product, and visual design.

14px · 300 Nav links Work

12px · 600 Uppercase section label Case Study

Use

Tight negative letter-spacing (−0.02em to −0.04em) on headings weight 700+. This matches the sharp, editorial feel of the portfolio.

Avoid

Do not use Merriweather on rachaelpage.com. It is an artfuly.com-only typeface.

Barlow Condensed — testimonials only

Barlow Condensed Testimonial blockquotes only Google Fonts · 400 · 500 · 600

★★★★★

"Rachael delivered a complete design system in three weeks that our engineering team adopted immediately. The documentation alone was worth the engagement."

Head of Product, SaaS company · London

Use

18px / line-height 1.5 for testimonial quote text inside .r-block-quote only.

Avoid

Barlow Condensed must not appear in headings, buttons, navigation, or labels on this site.

Parisienne — decorative (one page type only)

Parisienne Surface pattern collection page names Google Fonts · 400

Surface Pattern Collection

William Morris

Wallpaper · Fabric · Cushions

Art-direction only

Used exclusively for the hero collection name on surface-pattern-design pages. Never use elsewhere.

11

rachaelpage.com buttons

Two primary button styles: solid black pill for primary actions, outlined pill for secondary. Both use 100px border-radius giving a full pill shape. There are no coral or teal-fill buttons on rachaelpage.com.

Button types

Primary — solid black pill

Email me Book a meeting View all work →

Property	Value
Background	#000000
Text	#ffffff · Montserrat 600 · 14px
Hover	opacity 0.8
Padding	13px 28px
Border radius	100px (full pill)

Secondary — outline pill

Copy email Download CV

Property	Value
Background	#ffffff
Border	2px solid #000000
Text	#000000 · Montserrat 600 · 14px
Hover	opacity 0.7
Border radius	100px (full pill)

No coral buttons on rachaelpage.com. The coral CTA is an Artfuly.com-only pattern. The portfolio keeps its palette strictly black, white, and teal-accent — coral would clash with the editorial feel.

12

rachaelpage.com components

The portfolio's key repeating components: skill pills, work cards, category filter pills, and the impact callout block used in case studies.

Skill / deliverable pills

Displayed on project pages below the header

UX Research Interaction Design Design System Prototyping React / PWA Firebase

Property	Value
Background	#ceeaeb (light cyan)
Border	1px solid #fff · outline: 1px solid #fff
Text	#233030 · Montserrat 500 · 12–13px
Border radius	30px (pill)
Padding	0.3rem 0.85rem

Category filter pills

Used on the Featured Work section — on dark background

All Apps & PWAs UX Design Motion Design Graphic Design

State	Background	Text
Default	rgba(255,255,255,0.1)	rgba(255,255,255,0.8) · Montserrat 500
Active	#84cacc	#fff · Montserrat 600
Hover	#84cacc	#fff

Work card

project thumbnail

Ticklists App

PWA for shared household checklists and routines.

→

project thumbnail

Surface Pattern Design

William Morris and geometric collections for Spoonflower.

→

Element	Style
Card wrapper	bg #fff · border-radius 8px · hover opacity 0.9
Image	220px height · object-fit cover
Title	Montserrat 700 · 14–16px · #000
Excerpt	Montserrat 400 · 13px · #888 · line-height 1.5
Arrow	#84cacc · 14–16px

Impact callout block

Outcome

The new design system reduced designer onboarding time from 3 days to under 4 hours, and eliminated 94% of visual inconsistencies across the product.

Property	Value
Background	#f7f7f7
Left border	4px solid #84cacc
Border radius	0 8px 8px 0
Label	Montserrat 700 · 9.5px · uppercase · letter-spacing · #84cacc
Body text	Montserrat 400 · 14px · #000 · line-height 1.6
Max width	72ch

Section heading pattern

Skills & Deliverables

Experience

What makes me unique

Section headings use a 2px teal bottom border as the only decorative element. The border is on the heading element itself, not a full-width rule. This is one of the few places teal appears visually prominent on rachaelpage.com.