DoodleWeb brand guidelines
DoodleWeb's brand is built on one wordmark, one monogram, a cream and ink navy base, and Doodle Orange as the single accent. Use this page as the reference for logo files, clear space, color values, and typography whenever you publish anything carrying our name.
What is the correct DoodleWeb logo to use?
Use the full wordmark wherever there is room. Fall back to the monogram only in square or tightly constrained spaces such as avatars, favicons, and app icons.
Clear space
Keep free space around the logo equal to the height of the letter D in the wordmark. No text, rules, or imagery inside that margin.
Backgrounds
Place the logo on cream, white, or ink navy. On photography, use a solid cream or navy panel behind the mark rather than dropping it directly onto the image.
File formats
PNG and WebP are provided for both marks. Use WebP on the web and PNG for documents, print, and third-party directories.
Which colors make up the DoodleWeb palette?
Cream is the canvas, ink navy carries the type, and Doodle Orange is the only accent that signals action. Secondary colors support states and data, never full-page backgrounds.
Core palette
Doodle Orange
- HEX
- #EF4C1D
- HSL
- 13 86% 53%
- Token
- --orange
Primary brand accent. CTAs, emphasis words, links, focus rings.
Ink Navy
- HEX
- #1E2C49
- HSL
- 222 41% 20%
- Token
- --ink / --navy
Headlines, body text, borders, dark sections.
Cream
- HEX
- #FCEEDD
- HSL
- 32 76% 95%
- Token
- --cream
Default page background across the site.
Paper
- HEX
- #FFFFFF
- HSL
- 0 0% 100%
- Token
- --paper
Cards, panels, forms, tables.
Secondary and status
Orange Soft
- HEX
- #FF8B57
- HSL
- 19 100% 67%
- Token
- --orange-soft
Gradients, hover tints, secondary highlights.
Gold
- HEX
- #F4B840
- HSL
- 39 89% 61%
- Token
- --gold
Callouts, warning pills, award and badge accents.
Teal
- HEX
- #3FC7C7
- HSL
- 180 53% 51%
- Token
- --teal
Data highlights, alternate accent on dark panels.
Green
- HEX
- #5EC13F
- HSL
- 113 46% 52%
- Token
- --green
Pass states, positive metrics, checkmarks.
Coral
- HEX
- #E8483A
- HSL
- 6 78% 57%
- Token
- --coral
Fail states, destructive actions.
Purple
- HEX
- #9B6BFF
- HSL
- 257 100% 71%
- Token
- --purple
Occasional accent for AI and product features.
Neutrals and borders
Cream Deep
- HEX
- #F7DFC7
- HSL
- 29 79% 89%
- Token
- --cream-deep
Muted surfaces, alternating bands.
Ink Soft
- HEX
- #3F4A6A
- HSL
- 224 26% 33%
- Token
- --ink-soft
Body copy and lede paragraphs.
Ink Muted
- HEX
- #525A6E
- HSL
- 222 16% 38%
- Token
- --ink-muted
Captions, metadata, secondary labels.
Border
- HEX
- #E6D5BE
- HSL
- 33 50% 84%
- Token
- --border
Default hairline borders on cream surfaces.
Border Soft
- HEX
- #F5E8D6
- HSL
- 36 60% 90%
- Token
- --border-soft
Low-contrast dividers inside cards.
Ratio guidance
Roughly 60 percent cream or paper, 30 percent ink navy, 10 percent Doodle Orange. If a layout feels loud, the orange share is too high.
What typefaces does DoodleWeb use?
Fraunces sets every headline. DM Sans sets every paragraph, label, and interface element. Nothing else is part of the system.
Fraunces
Italic for emphasis words
Weights 400 to 700. Tracking -0.02em. Used for H1 to H4, large numbers, and pull quotes.
DM Sans
Weights 400 to 700. Body copy sits at 16 to 18px with relaxed line height. Eyebrows use 11px uppercase at 0.16em tracking.
Fallbacks: Georgia and serif for Fraunces, system-ui and sans-serif for DM Sans.
How should partners and press use the DoodleWeb brand?
These rules keep the mark recognizable across directories, co-marketing assets, and press coverage.
Do
- Write the name as one word with a capital D and W: DoodleWeb.
- Use the supplied files at their native aspect ratio.
- Keep the full clear space around the mark.
- Link the logo to https://doodleweb.io when used online.
- Use the legal name DoodleWeb LLC in contracts and filings.
Do not
- Do not recolor, gradient, outline, or add shadows to the logo.
- Do not stretch, rotate, or crop either mark.
- Do not set the name as "Doodle Web", "doodleweb", or "Doodle-Web".
- Do not place the logo on busy photography or low-contrast colors.
- Do not rebuild the wordmark in another typeface.
What are the official DoodleWeb name and address?
Use these exact details for directories, invoices, press releases, and structured data.
Name
DoodleWeb
Legal entity: DoodleWeb LLC
Address
Columbia Tower, 701 5th Ave, 42nd Floor
Seattle, WA 98104
Contact
info@doodleweb.io
+1-425-359-0168
Awards and certifications