--- client: AUWA title: AUWA Brand Book tagline: The harmony between the unseen and the seen. updated: August 2026 version: 1.0 wordmark: /brand/auwa/wordmark-sumi.svg site: auwa.life studio: More Air theme: warm --- ```json:theme { "surface": "#f8f7f4", "paper": "#ecebe7", "ink": "#0b1116", "dark": "#0f1623", "onDark": "#efe9dd", "inkRgb": "11, 17, 22", "onDarkRgb": "239, 233, 221", "display": "\"EB Garamond\", Georgia, \"Times New Roman\", serif", "ui": "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Arial, sans-serif", "cjk": "\"Noto Serif JP\", \"EB Garamond\", serif", "fonts": "https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Instrument+Sans:wght@400;500&family=Noto+Serif+JP:wght@400&display=swap" } ``` ```json:audiences [ { "for": "Marketing and partners", "need": "The wordmark, the colours, the voice rules, and what not to do with them.", "jump": ["logo", "colour", "voice"] }, { "for": "Designers", "need": "Type scale, palette discipline, motion timing, and the Figma library.", "jump": ["typography", "colour", "motion"] }, { "for": "Engineers", "need": "Tokens as CSS or JSON, and brand.md for your own AI tooling.", "jump": ["files"] } ] ``` ## Essence AUWA (あうわ) means the harmony between the unseen and the seen. Kokoro (心) is the Japanese concept that holds heart, mind, soul and spirit as one undivided whole, and the brand exists to make it visible: invisible emotion in the app, invisible craftsmanship in the store, invisible Kokoro in the stories. The brand should feel like a quiet room in a Japanese temple at dusk. Dark, warm, still. Then light enters. Everything in this document follows from that one image. When a decision is unclear, the test is whether it makes the room quieter or busier. ### How to describe it Three descriptors, each doing a different job at a different depth. ```json:essence.layers [ { "layer": "Discovery", "phrase": "Japanese lifestyle brand", "where": "Meta descriptions, press, the dinner-party answer", "why": "Instantly legible to someone who has never heard of AUWA." }, { "layer": "Claim", "phrase": "Japanese philosophy of Kokoro", "where": "Homepage title, H1, top-level brand claim", "why": "The ground AUWA owns. Differentiates it from every other lifestyle brand." }, { "layer": "Voice", "phrase": "Japanese living", "where": "Journal, newsletter, captions, anything in the brand's own voice", "why": "Aspirational rather than category-descriptive. Not what it is, but how you might live." } ] ``` Never lead with "lifestyle brand" inside AUWA's own editorial voice, and never open with "Kokoro" in first-impression copy: it raises a question before it answers one. ### What AUWA is not Headspace-style illustration pop. Wellness pastels. Busy Japanese maximalism. Tech-startup energy. Anything with a gradient that screams app. ## Logo The wordmark is the logo. The letters A-U-W-A set in EB Garamond with wide tracking, no separate symbol, no icon, no monogram. It works because A-U-W-A is naturally symmetrical, the two As bookending the U-W centre, and that symmetry echoes the etymology: あ (heavens) and わ (earth) framing う (connection). Serif letterforms carry craft, history and intention, which are the right signals for a philosophy brand. ```json:logo.plates [ { "src": "/brand/auwa/wordmark-sumi.svg", "label": "Sumi on Surface", "ground": "#f8f7f4" }, { "src": "/brand/auwa/wordmark-washi.svg", "label": "Washi on Yoru", "ground": "#0f1623", "on": "rgba(239,233,221,0.55)" } ] ``` ```json:logo.specs [ { "label": "Typeface", "value": "EB Garamond, regular" }, { "label": "Case", "value": "All uppercase" }, { "label": "Letter-spacing", "value": "0.25em" }, { "label": "On light", "value": "Sumi" }, { "label": "On dark", "value": "Washi" }, { "label": "Header size", "value": "20px mobile / 22px desktop" }, { "label": "Clear space", "value": "The height of the letter U on all sides" } ] ``` ```json:logo.rules { "do": [ "Set it in EB Garamond, always", "Place it on a solid light or solid dark field", "Keep the U-height clear space on every side", "Use Sumi on light surfaces and Washi on dark ones" ], "dont": [ "Redraw, substitute or trace the letterforms", "Place it over busy imagery", "Distort, outline, shadow or animate it", "Use pure white, ever. Washi is the light" ] } ``` The orb animates. The wordmark stays still. ## Typography Two typefaces carry everything, with a third for Japanese text. The serif does the emotional work and the sans disappears into the background. ```json:type.faces [ { "name": "EB Garamond", "role": "Display and editorial", "note": "The voice of AUWA. Headlines, brand copy, article body, pullquotes. Regular 400 is the default weight for everything.", "source": "Google Fonts", "sample": "Everything has Kokoro." }, { "name": "Instrument Sans", "role": "Functional and UI", "note": "Navigation, labels, metadata, captions, buttons. Clean and slightly warm, and it never competes with the serif.", "source": "Google Fonts", "sample": "Journal / Store / Book" }, { "name": "Noto Serif JP", "role": "Japanese", "note": "Kanji and Japanese-language text, including the micro-season characters.", "source": "Google Fonts", "sample": "清明" } ] ``` ### Getting the fonts All three faces are open source under the SIL Open Font License, which means they travel with the brand: they are in the asset pack, they can be installed by anyone on the team, and they can be embedded in a product without a per-seat cost. That is deliberate. A brand that needs a licence negotiation before a new hire can open a file is a brand that gets rendered in Arial. ```json:type.fonts [ { "family": "EB Garamond", "licence": "SIL Open Font License 1.1", "bundled": true, "source": "Google Fonts", "url": "https://fonts.google.com/specimen/EB+Garamond", "weights": "400, 500, 600, 700 and italics", "fallback": "Georgia, \"Times New Roman\", serif", "office": "Garamond, or Georgia if it is unavailable" }, { "family": "Instrument Sans", "licence": "SIL Open Font License 1.1", "bundled": true, "source": "Google Fonts", "url": "https://fonts.google.com/specimen/Instrument+Sans", "weights": "400, 500, 600 and italics", "fallback": "-apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Arial, sans-serif", "office": "Helvetica Neue, or Arial if it is unavailable" }, { "family": "Noto Serif JP", "licence": "SIL Open Font License 1.1", "bundled": true, "source": "Google Fonts", "url": "https://fonts.google.com/noto/specimen/Noto+Serif+JP", "weights": "400", "fallback": "\"Hiragino Mincho ProN\", \"Yu Mincho\", serif", "office": "Hiragino Mincho ProN, or Yu Mincho on Windows" } ] ``` Install the desktop files from the asset pack. On the web, load them from the foundry rather than self-hosting unless you have a reason not to, and always declare the fallback stack so text stays readable while the face loads. ### Scale ```json:type.scale [ { "element": "Page title (h1)", "font": "EB Garamond", "weight": "400", "size": "clamp(2.5rem, 5.5vw, 4.5rem)", "tracking": "0.01em" }, { "element": "Section heading (h2)", "font": "EB Garamond", "weight": "400", "size": "28 / 32px", "tracking": "0.01em" }, { "element": "Card title", "font": "EB Garamond", "weight": "400", "size": "20 / 22px", "tracking": "0.01em" }, { "element": "Article body", "font": "EB Garamond", "weight": "400", "size": "18 / 19px", "tracking": "0.005em" }, { "element": "Pullquote", "font": "EB Garamond", "weight": "400", "size": "clamp(1.75rem, 3.5vw, 2.75rem)", "tracking": "0.005em" }, { "element": "Navigation", "font": "Instrument Sans", "weight": "400", "size": "14px", "tracking": "0.06em" }, { "element": "UI text and excerpts", "font": "Instrument Sans", "weight": "400", "size": "14px", "tracking": "0" }, { "element": "Uppercase metadata", "font": "Instrument Sans", "weight": "400", "size": "12px", "tracking": "0.08em" }, { "element": "Kanji (micro-season)", "font": "Noto Serif JP", "weight": "400", "size": "clamp(3rem, 8vw, 6.5rem)", "tracking": "0.06em" } ] ``` ## Colour AUWA lives in darkness and the light comes from within, from the Kokoro being revealed. The default state is dark and quiet. Colour enters through gradients, glows and the emotional states. ### The named colours Four colours carry names because they appear together as the brand's warm-paper family, anchoring every surface across the site, the slides and the editorial moments where the brand needs to feel like an old book in lamplight rather than a digital interface. ```json:colour.named [ { "name": "Sumi", "kanji": "墨", "gloss": "ink", "hex": "#0b1116", "value": "oklch(0.10 0.022 235)", "use": "Primary text on light surfaces, the wordmark, headings, active navigation." }, { "name": "Yoru", "kanji": "夜", "gloss": "night", "hex": "#0f1623", "value": "oklch(0.265 0.022 235)", "use": "The warm dark canvas. Footer, dark pages, the figure strip, editorial slides." }, { "name": "Washi", "kanji": "和紙", "gloss": "paper", "hex": "#efe9dd", "value": "oklch(0.928 0.020 80)", "use": "Light text, icons and borders on uniform dark surfaces. The warm paper ink." }, { "name": "Surface", "kanji": "", "gloss": "warm off-white", "hex": "#f8f7f4", "value": "oklch(0.97 0.004 95)", "use": "Page background on every light page, and the light foreground over photography." }, { "name": "Paper", "kanji": "", "gloss": "raised off-white", "hex": "#ecebe7", "value": "oklch(0.94 0.005 95)", "use": "A layer sitting above Surface. Currently the menu overlay panel, and nothing else." } ] ``` ### Pairing discipline The one rule that keeps every surface consistent. ```json:colour.pairing [ { "context": "On Surface (the light page)", "light": "", "dark": "Sumi" }, { "context": "On Yoru or Sumi (uniform dark)", "light": "Washi", "dark": "" }, { "context": "On imagery and photography", "light": "Surface", "dark": "Sumi, where the image is high-key" } ] ``` ```json:colour.never [ "Never mix Sumi with Washi. They belong to different families.", "Never use pure #ffffff anywhere. Surface is the white.", "Never use Washi over photography. It blends into bright spots; Surface is the foreground over imagery.", "Never hardcode a hex. Consume the token, so changing one value moves every page, component and email." ] ``` ### Emotional states Five gradient families, used in the app's Kokoro revelation screens and across social content. Each is a starting point for a three or four stop gradient. ```json:colour.emotion [ { "name": "Hare", "kanji": "晴", "meaning": "Radiant", "value": "oklch(0.82 0.14 85)", "gradient": "Gold, amber, soft peach. Warm, expanding, light." }, { "name": "Takaburi", "kanji": "昂", "meaning": "Intense", "value": "oklch(0.60 0.18 25)", "gradient": "Crimson, burnt orange, dark rust. Rising and hot." }, { "name": "Aware", "kanji": "哀", "meaning": "Reflective", "value": "oklch(0.70 0.06 250)", "gradient": "Indigo, steel blue, soft grey-blue. Cool, receding, still." }, { "name": "Yuragi", "kanji": "揺", "meaning": "Unsettled", "value": "oklch(0.65 0.12 55)", "gradient": "Amber, ochre, muted bronze. Shifting and restless." }, { "name": "Nagomi", "kanji": "和", "meaning": "Serene", "value": "oklch(0.75 0.10 160)", "gradient": "Sage, warm olive, soft earth. Grounded, open, calm." } ] ``` ### Foundation scale The cosmic scale belongs to the app and the social slides, where gradients need to emerge from a true near-black. Keep it separate from the website palette. ```json:colour.foundation [ { "name": "Void", "value": "oklch(0.08 0.025 250)" }, { "name": "Cosmic 900", "value": "oklch(0.13 0.030 250)" }, { "name": "Cosmic 800", "value": "oklch(0.18 0.028 250)" }, { "name": "Cosmic 700", "value": "oklch(0.25 0.025 250)" }, { "name": "Cosmic 600", "value": "oklch(0.35 0.022 250)" }, { "name": "Cosmic 500", "value": "oklch(0.45 0.020 250)" }, { "name": "Cosmic 400", "value": "oklch(0.60 0.018 250)" }, { "name": "Cosmic 300", "value": "oklch(0.75 0.015 250)" }, { "name": "Cosmic 200", "value": "oklch(0.87 0.012 250)" }, { "name": "Cosmic 100", "value": "oklch(0.93 0.008 250)" }, { "name": "Cosmic 50", "value": "oklch(0.97 0.005 250)" }, { "name": "Glow", "value": "oklch(0.85 0.15 105)" } ] ``` ## Motion AUWA does not rush. Animations use ease-out-expo, fast departure and gentle arrival, like a breath out. Elements appear by fading and gently scaling, never by sliding in from an edge. The light shower is the hero animation and everything else supports it. One tempo, not five. Every duration, stagger and easing comes from the locked set below, and a hardcoded millisecond value in a component is treated as drift. ```json:motion.tokens { "Durations": [ { "name": "enter", "value": "800ms" }, { "name": "reveal", "value": "1200ms" }, { "name": "hover", "value": "300ms" }, { "name": "page", "value": "500ms" } ], "Staggers": [ { "name": "strip", "value": "60ms" }, { "name": "grid", "value": "120ms" }, { "name": "hero", "value": "180ms" } ], "Easings": [ { "name": "outExpo", "value": "cubic-bezier(0.16, 1, 0.3, 1)" }, { "name": "inOut", "value": "ambient crossfades" }, { "name": "textRoll", "value": "hover rollovers" } ] } ``` For film and social, keep transitions slow and atmospheric, around half a second to a second. Never fast cuts, beat-synced transitions or zoom-punch effects. ## Voice Quiet authority. Precise observation. Short sentences that land, longer ones that breathe. The reference points are Kinfolk, Cereal and Monocle rather than any wellness or app brand. Write in concrete, sensory detail rather than abstract claims. The blade coated in a thin film of camellia oil, not the blade was carefully preserved. Let the subject speak for itself and trust the reader to feel something without being told what. Japanese terms are welcome, glossed briefly where they need it, and never exoticised. ```json:voice.rules { "do": [ "Periods and commas do most of the work", "Colons for lists and explanations, parentheses for brief glosses", "First person plural for essays, second person only when it draws the reader in", "Let a single fragment land alone when the surrounding text is built differently" ], "dont": [ "No em dashes, anywhere", "No In a world where, no here's the thing, no it's not just X it's Y", "No journey, tapestry, landscape, delve, unlock, curate or reimagine", "No stacking three fragments in a row as the dominant rhythm" ] } ``` ## Photography Editorial and atmospheric. Natural light, real materials, real hands at work. Craft in progress rather than craft finished and staged. Quiet compositions with room around the subject. If a frame feels busy it is the wrong frame. Avoid anything that reads as stock: arranged flat-lays, smiling models, saturated travel clichés, cherry blossom as shorthand for Japan. ## Files Everything below is yours. The Figma file is the source of truth for design, the asset pack is what production uses, and the markdown files carry the same decisions in a form your own AI tooling can read and your team can edit. ```json:files.list [ { "name": "Full asset pack", "format": "ZIP", "note": "Everything below in one download.", "href": "/brand/auwa/auwa-brand-assets.zip", "primary": true }, { "name": "Wordmark, dark", "format": "SVG", "note": "Sumi. For light backgrounds.", "href": "/brand/auwa/wordmark-sumi.svg" }, { "name": "Wordmark, light", "format": "SVG", "note": "Washi. For dark backgrounds.", "href": "/brand/auwa/wordmark-washi.svg" }, { "name": "Wordmark, dark", "format": "PNG", "note": "2048px wide, transparent.", "href": "/brand/auwa/wordmark-sumi.png" }, { "name": "Wordmark, light", "format": "PNG", "note": "2048px wide, transparent.", "href": "/brand/auwa/wordmark-washi.png" }, { "name": "Wordmark, inheriting", "format": "SVG", "note": "Fill set to currentColor, for inline use in code.", "href": "/brand/auwa/wordmark-currentcolor.svg" }, { "name": "Font files", "format": "ZIP", "note": "All three families, desktop and web, with the OFL licence.", "href": "/brand/auwa/auwa-fonts.zip" }, { "name": "Colour and motion tokens", "format": "CSS", "note": "Custom properties, ready to drop into a stylesheet.", "href": "/brand/auwa/tokens.css" }, { "name": "Colour and motion tokens", "format": "JSON", "note": "The same values as data, for build tooling.", "href": "/brand/auwa/tokens.json" }, { "name": "brand.md", "format": "Markdown", "note": "This document as a machine-readable file. Point your AI tooling at it.", "href": "/brand/auwa/brand.md" }, { "name": "DESIGN.md", "format": "Markdown", "note": "The same system in Google's open DESIGN.md format, which most AI coding tools already read.", "href": "/brand/auwa/DESIGN.md" } ] ``` This page is built from `brand.md`. Edit the file and the page follows, which means the guidelines, the asset pack and whatever your team generates with AI all stay on the same source. There is no version of this document that can quietly go out of date while the file stays right.