Brand kit
Everything needed to represent Dawloom correctly, including a design system you can paste into an AI tool.
Logos
The mark is always flame. The wordmark is ink on light surfaces and cream on dark ones.
Colors
Click a swatch to copy its hex. Flame is the only color allowed to mean "act here."
Typography
Archivo, 900, expanded, uppercase. One shout per screen.
Built properly.
Outfit bold for section headings, normal case.
Four things, done well.
Outfit regular for body, ink-mute for secondary text.
Dawloom is an engineering team building for clients worldwide. You talk directly to the people writing your code.
The stripe
Gold 40%, flame 20%, rust 25%, plum for the rest. It appears as a slim band, never as a background.
Design system for AI tools
Paste this into Claude or any AI tool before asking it to design anything for Dawloom: a slide, a banner, a document, a component. It carries the palette, type rules, and voice.
# Dawloom design system Use this when designing or building anything for Dawloom (dawloom.com). ## Colors - cream #f4efe6 (page background) - cream-dim #eae3d5 (tinted panels) - ink #1b1917 (text on cream, dark section backgrounds) - ink-soft #2a2724 (hover state on ink) - ink-mute #57524b (secondary text) - flame #e8641b (the only action color: CTAs, links, arrows, the logo mark) - flame-deep #c94f0e (flame hover) - gold #ecae2c, rust #d9482b, plum #8b3a62, olive #444a35 (section blocks and stripe motif only) Rules: warm palette only, never pure black or pure white. One accent (flame) for everything actionable. The stripe motif is a horizontal band split gold 40%, flame 20%, rust 25%, plum 15%. ## Typography - Display: Archivo (variable, weight 900, width 110%, uppercase, letter-spacing -0.02em, line-height 0.92). One shout per screen: page titles and the closing CTA only. - Body and UI: Outfit (weights 400 to 700). Section headings are Outfit bold in normal case, not the display face. - Never use Inter, Roboto, or system fonts for visible text. ## Shape and depth - Radius: full pills for interactive elements, 16px for cards, 24px for feature panels. Nested elements use smaller radii than their parent. - Flat surfaces. Shadows only on genuinely floating elements like dropdowns and toasts. - Sections separate by full-bleed background color change (cream, ink, olive, plum blocks) butting at 0px. No hairline dividers between sections. - Subtle film grain on hero and dark blocks. ## Motion - 150 to 300ms, ease-out or a springy cubic-bezier(0.34, 1.56, 0.64, 1). Always respect prefers-reduced-motion. ## Iconography - Phosphor icons (bold weight) for UI, Simple Icons for technology logos. Never hand-drawn icon paths, never emojis, never text arrows. ## Voice - Honest and direct. Use contractions. No em-dashes anywhere. No hype words like seamless, cutting-edge, or elevate. - Never invent numbers, testimonials, or clients. Every claim must be checkable, ideally linked to its source. - At most one "X, not Y" contrast line per page. ## Mascot - A rounded flame-orange square blob with cream eyes, dark pupils, and a small smile. It peeks from screen edges, its eyes follow the cursor, and it speaks short honest tips in an ink bubble.