--- title: "PubliWrite brand: logos, colours and type | PubliWrite" source: https://publiwrite.com/brand --- # Our logos, colours and words. _Ready to copy._ Everything you need to show PubliWrite and PubliRead the way we do: the official logo files, our colours, our typeface and the descriptions we use ourselves. [Get the logos](https://publiwrite.com/brand#logos) [About us](https://publiwrite.com/about) Logos ## The files our sites _load themselves._ Pick a background to check a version reads before you use it. White (selected) Ink - PubliWrite wordmark, ink PubliWrite wordmark, ink For light backgrounds · SVG [Open SVG](https://cdn.publiwrite.com/static/common/images/logo-web-light.svg) Copy link - PubliWrite wordmark, white PubliWrite wordmark, white For dark backgrounds · SVG Hard to read on this background. Use the ink version. [Open SVG](https://cdn.publiwrite.com/static/common/images/logo-web-dark.svg) Copy link - PubliWrite symbol PubliWrite symbol App icons, avatars and favicons · SVG [Open SVG](https://cdn.publiwrite.com/static/common/images/logo-tiny.svg) Copy link - PubliRead wordmark, ink PubliRead wordmark, ink For light backgrounds · SVG [Open SVG](https://cdn.publiread.com/logo-web-light.svg) Copy link - PubliRead wordmark, white PubliRead wordmark, white For dark backgrounds · SVG Hard to read on this background. Use the ink version. [Open SVG](https://cdn.publiread.com/logo-web-dark.svg) Copy link Using the logos ## A few rules _keep it looking right._ - Do ### Match the version to the background Use the ink logo on light backgrounds and the white logo on dark ones. The preview above shows which one reads. - Do ### Keep it at least 120px wide That is the smallest size our own sites show the wordmark at, on phones. - Do ### Use the symbol only where space is tight App icons and avatars, where PubliWrite is already named nearby. - Don't ### Stretch, squash or rotate it Scale the logo by its height and let the width follow. - Don't ### Recolour the purple mark Its gradient is part of the logo, so leave it as the file has it. - Don't ### Place it on the brand purple or a busy photo The purple mark disappears there. Give it a plain white or ink background. Colour ## Purple is the signature. _Cream and warm greys set the page._ Purple belongs to the logo mark. The marketing pages sit on white, warm grey and cream, and each part of the journey has its own colour: blue for writing, rose for design, green for publishing. Click a value to copy it. Brand gradient Copy CSS ### Brand - Purple The logo mark, gradient end #9D33DA - Lilac Gradient start #CD79FD - Ink Text and wordmark #0C0C0C CSS var - White Main surface #FFFFFF CSS var ### Marketing pages - Cream Wells and panels inside a grey band, never a whole band #F1ECE4 CSS var - Warm grey Alternate section bands #F5F4F1 CSS var - Sunk Recessed areas #FAF9F7 CSS var - Body text Running text and leads #3A3733 CSS var - Muted text Eyebrows and captions #5C5852 CSS var - Faint Dots and quiet marks #8A857D CSS var ### Feature colours - Write Writing and importing #2C4F94 CSS var - Write tint Write tiles and panels #E8EEF8 CSS var - Design Covers and formatting #8C3352 CSS var - Design tint Design tiles and panels #F6E5EC CSS var - Publish Publishing and selling #1F6658 CSS var - Publish tint Publish tiles and panels #E2F0EA CSS var - Money Authors' earnings figures only #6B4680 CSS var - Money tint Earnings panels #F5ECFB CSS var - Cost Print and other costs #A4472F CSS var ### Accent - Accent Links and highlights, used sparingly #9810FA CSS var - Accent hover Hover and pressed #8200DB CSS var ### Neutrals - Page Page background #FAFAFA CSS var - Inset Wells and hover #F3F1F3 CSS var - Border Dividers and borders #E7E4E7 CSS var - Strong border Inputs and emphasis #A89EA9 CSS var - Secondary text Supporting text #594C5B CSS var ### Status - Success Confirmations #007A55 CSS var - Warning Cautions #E17100 CSS var - Error Errors #BB0043 CSS var - Info Information #155DFC CSS var Typography ## Fraunces for headlines, _DM Sans for everything else._ Fraunces is the serif in every marketing headline. DM Sans sets the product, body text and captions. Both are free on Google Fonts under the SIL Open Font Licence. ### Fraunces Headlines on the marketing pages [Get Fraunces](https://fonts.google.com/specimen/Fraunces) - Hero headline · 56px · 600 Write, publish and earn from your book - Page title · 44px · 500 Write, publish and earn from your book - Section title · 40px · 500 Write, publish and earn from your book - Card title · 26px · 500 Write, publish and earn from your book ### DM Sans The product, body text and captions [Get DM Sans](https://fonts.google.com/specimen/DM+Sans) - Subheading · 18px · 500 Write, publish and earn from your book - Lead · 16px · 400 Write, publish and earn from your book - Body · 14px · 400 Write, publish and earn from your book - Caption · 12px · 400 Write, publish and earn from your book Names and descriptions ## How to write about us, _in our own words._ - For authors ### [PubliWrite](https://publiwrite.com/) One word, with a capital P and a capital W. Never Publiwrite or Publi Write. It is where independent authors write, format, publish and sell their books. - For readers ### [PubliRead](https://publiread.com/) One word, with a capital P and a capital R. Never Publiread or Publi Read. It is the bookshop where readers buy straight from those authors. - PubliWrite headline Write, publish and earn from your book Copy - PubliWrite description Write or upload your manuscript, format digital and print editions, design a cover, publish on PubliRead and keep 80%–95% of each sale after any print cost. Copy - PubliRead headline Buy Books Direct from Indie Authors Copy - PubliRead description Browse and buy ebooks and print books straight from independent authors, at prices they set themselves. Free books too, and no subscription needed. Copy