{ "schema": "brand-kit@2", "palette": { "paper": "#FFFFFF", "surface": "#F3F3F3", "ink": "#0B0505", "ink_muted": "#6E6E6E", "accent": "#FF584A", "on_accent": "#FFFFFF", "accent_secondary": "#FD3FFD", "night": "#0D0D0D", "on_night": "#FFFFFF", "extras": [ { "name": "Asana White", "hex": "#FFFFFF", "role": "Primary. Page and module ground; wordmark color on dark and color grounds", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=8", "site_use": "Every light band and card fill (observed https://asana.com/ (2026-10-31))" }, { "name": "Asana Black", "hex": "#0B0505", "role": "Primary. Type, buttons, dark grounds, workflow nodes; the wordmark color on white. Pantone Black C", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=8" }, { "name": "Asana Coral", "hex": "#FF584A", "role": "Primary. The logomark (always coral); start of every brand gradient. Pantone 171 C", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=8", "site_use": "Logomark in the nav and footer (observed https://asana.com/ (2026-10-31))" }, { "name": "Fuchsia", "hex": "#FD3FFD", "role": "Primary. End of the headline gradient on light grounds; eyebrow tag fill in the type hierarchy sample. Pantone 807 C. Called \"Asana Fucsia\" on the pairings page", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=8" }, { "name": "Light Fuchsia (Asana Pink)", "hex": "#FFC9FF", "role": "Primary. End of the headline gradient on dark grounds; secondary CTA fill; the pill drop shadow; active tab fill. Pantone 7436 C", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=8", "site_use": "Active product tab fill (observed https://asana.com/ (2026-10-31))" }, { "name": "Neutral Grey (Asana Grey)", "hex": "#F3F3F3", "role": "Primary. Light module ground; node outline on workflows. 5% Black C", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=8", "site_use": "Skill chips, carousel arrow at rest, quote-mark disc (observed https://asana.com/ (2026-10-31))" }, { "name": "Blue", "hex": "#0071FF", "role": "Secondary. Accent and Workling color; pairs with white text. Process Blue C", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=8" }, { "name": "Green", "hex": "#0FA042", "role": "Secondary. Accent and Workling color; pairs with white text. 347 C", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=8" }, { "name": "Yellow", "hex": "#C6CD00", "role": "Secondary. Accent and Workling color; pairs with black or white. 7744 C", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=8" }, { "name": "Grey (Asana Dark Grey)", "hex": "#808080", "role": "Secondary. Neutral accent; pairs with white. 877 C", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=8" }, { "name": "Light Blue", "hex": "#9EDCF2", "role": "Secondary tint; pairs with Asana Black. 2975 C", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=8" }, { "name": "Light Green", "hex": "#9EF2A4", "role": "Secondary tint; pairs with Asana Black. 344 C", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=8" }, { "name": "Light Yellow", "hex": "#E8F552", "role": "Secondary tint. 387 C", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=8" }, { "name": "Light Grey", "hex": "#D7D9DB", "role": "Secondary tint; pairs with Asana Black; the secondary workflow line color. 427 C", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=8" }, { "name": "Magenta", "hex": "#F20D83", "role": "Tertiary. Accent; pairs with Asana Black. 225 C", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=8" }, { "name": "Turquoise", "hex": "#009271", "role": "Tertiary. Accent and Workling color. 327 C", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=8" }, { "name": "Purple", "hex": "#745BFA", "role": "Tertiary. Accent and Workling color. 2725 C", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=8" }, { "name": "Orange", "hex": "#FF7A00", "role": "Tertiary. Accent and Workling color. 151 C", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=8" }, { "name": "Light Magenta", "hex": "#FFADCD", "role": "Tertiary tint; pairs with Asana Black. 671 C", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=8" }, { "name": "Light Turquoise", "hex": "#9EF2DE", "role": "Tertiary tint; pairs with Asana Black. Green 0921 C", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=8" }, { "name": "Light Purple", "hex": "#A999FF", "role": "Tertiary tint; pairs with Asana Black. 2705 C", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=8" }, { "name": "Light Orange", "hex": "#FFB469", "role": "Tertiary tint; pairs with Asana Black. 150 C", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=8" }, { "name": "Grid dot (light)", "hex": "#C4C7C9", "role": "Infrastructure dot grid on light grounds", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=36" }, { "name": "Grid gradient fuchsia", "hex": "#FF1CFF", "role": "Infrastructure grid gradient value (with #FFFFFF and #FF584A)", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=36" }, { "name": "Site black", "hex": "#0D0D0D", "role": "The black the site actually renders: body text, primary buttons, dark bands, footer", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, { "name": "Headline black", "hex": "#0D0E10", "role": "Hero H1 color and the nav wordmark", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, { "name": "Body grey", "hex": "#3D3D3D", "role": "Secondary body copy on white (accordion and card descriptions); inactive tab and product card fill on dark", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, { "name": "Hero lead grey", "hex": "#3E3E3E", "role": "Hero lead, at 80% opacity (rgba(62,62,62,0.8))", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, { "name": "Meta grey", "hex": "#6E6E6E", "role": "Meta labels (Integrations, Skills), sublines, \"or\"; 1px border of outline buttons; hover fill of black buttons", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, { "name": "Hairline", "hex": "#E7E7E7", "role": "Card borders, accordion dividers; body copy on dark cards", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, { "name": "Field line", "hex": "#CFCFCF", "role": "Input border and the \"or\" divider lines", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, { "name": "Off-white", "hex": "#FAFAFA", "role": "Outline-button fill, \"Get started easily\" panel ground, white-button hover", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, { "name": "Dark rule", "hex": "#565656", "role": "1px rule at the foot of the closing dark band", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, { "name": "Arrow disabled ring", "hex": "#D5DCE0", "role": "1px ring of the disabled carousel arrow", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, { "name": "Focus blue", "hex": "#005FCC", "role": "1px focus ring on the hero email field (it is focused at rest in the reference)", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, { "name": "Site gradient coral", "hex": "#FF453E", "role": "Start of the hero headline gradient as coded on the site", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, { "name": "Site gradient pink", "hex": "#F481F4", "role": "End of the hero headline gradient as coded on the site", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" } ] }, "typography": { "display": { "family": "Figtree", "steal_family": "Figtree", "weight": 400, "tracking": -0.025, "line_height": 0.9, "fallback_stack": "Figtree, Arial, sans-serif", "real": "TWK Lausanne 300 (Light) for titles; commercial face, not licensable through this book", "stand_in": true, "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=18", "calibration": "Rendered against TWK Lausanne on asana.com (2026-10-31): Figtree at real weight +100 matches rendered width within 1.2% mean over 12 lines (hero H1 +1.4% / -0.4%, 54px H2 +1.3%, 30px subheads +0.5 to +1.0%, 24px titles -1.8 to -3.5%) and matches the ink darkness of the Light headline by eye. Geist +60 was 1.1% but visibly lighter at 102px; Inter was 4.3% wide. Two optical rules, by size: at 30px and up (H1, H2, quote, subheads) use the real weight +100 (300 -> 400, 400 -> 500); at 24px and below use the real weight, except 300 -> 350 (Figtree 300 is thinner than Lausanne Light): 300 -> 350, 400 -> 400, 500 -> 500. Footer links rendered at Figtree 400 match Lausanne 400 by eye; 500 reads too bold. Load Figtree as a variable font: fonts.googleapis.com/css2?family=Figtree:wght@300..900", "site": { "weight": 300, "size_px": "102 desktop / 48 phone (hero H1); 54 / 30 (section H2)", "line_height": "0.9 (91.8px at 102; 43.2 at 48); 1.0 at 54; 1.1 at 30", "tracking": "-0.025em hero (-2.55px at 102), -0.02em H2 (-1.08px at 54)", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" } }, "body": { "family": "Figtree", "steal_family": "Figtree", "weight": 350, "tracking": 0.02, "line_height": 1.5, "scale": 1, "fallback_stack": "Figtree, Arial, sans-serif", "real": "TWK Lausanne 300", "stand_in": true, "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=16", "site": { "weight": 300, "size_px": "20 lead / 16 body / 13 small (desktop); 15 / 14 / 12 (phone)", "line_height": "1.5", "tracking": "0.02em", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" } }, "calibration": "Figtree stands in for TWK Lausanne: real weight +100 at 30px and up; real weight at 24px and below (300 becomes 350). Keep the site tracking values in px. Fallback per the guide: Arial (p.17). Every weight in kit.spec.type is already the Figtree weight to set." }, "style": { "button_shape": "pill", "button_note": "Every button is a full pill (radius 100px): black primary, white or off-white outline secondary, Light Fuchsia #FFC9FF secondary in the guide's CTA sample (p.16). Text in TWK Lausanne 600 per the guide; 500 on the site", "corners": "cards 8-10px, media and panels 16-20px, chips 4px, inputs 4px", "radius": 16, "border_width": 1, "linework": "thin single-weight workflow lines with rounded 90-degree turns and small dot nodes", "motion": "quiet: 0.15-0.3s color fades on buttons, a 0.5s overshoot reveal for media; the hero workflow animates", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=16", "also": [ "https://asana.com/ (2026-10-31)" ] }, "voice": { "tone": [ "Clear", "Human", "Energetic", "Productive" ], "notes": [ "The guide (FY27) publishes no voice section; everything below is observed on asana.com or inferred from the visual rules.", "Headlines are short sentence-case declaratives, often a pairing of humans and agents (\"humans + agents\").", "Body copy names the concrete work: briefs, status updates, intake, launches, audits.", "Problem copy is plain and specific (spreadsheet, chat, email, Friday status decks), then turns to the fix in one line." ], "rules": [ { "id": "headline-case", "kind": "headline_case", "value": "sentence", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, { "id": "person", "kind": "person", "value": "we_you", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, { "id": "spelling", "kind": "spelling", "value": "en-US", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, { "id": "trademark-adjective", "kind": "guidance", "text": "Third parties writing about Asana: use the name as an adjective before a noun, not as a verb or plural (trademark guidelines; Asana's own pages use the possessive)", "prov": "published", "source": "https://asana.com/brand" }, { "id": "work-graph-mark", "kind": "guidance", "text": "Write Asana Work Graph with the registered mark on first use", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, { "id": "humans-agents", "kind": "guidance", "text": "Name humans and agents together when describing who does the work", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, { "id": "outcome-first", "kind": "guidance", "text": "Card and product summaries lead with the outcome for the team, not the mechanism", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, { "id": "plus-sign", "kind": "guidance", "text": "In campaign headlines a plus sign may join humans and agents (humans + agents)", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=16" }, { "id": "stat-footnote", "kind": "guidance", "text": "Every customer-count stat carries its dated footnote", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, { "id": "headline-length", "kind": "guidance", "text": "Headlines run 4 to 11 words; hero headlines 5 or fewer", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" } ], "approved": { "phrases": [ "human-agent teams", "humans + agents", "AI Teammates", "Asana Work Graph®", "shared memory", "work about work" ], "words": [] }, "banned": [], "is_not": [ [ "Human at the center", "Systems that overpower people" ], [ "Expressive", "Too intense to read" ], [ "Precise", "Overwhelming" ], [ "Productive", "Stuck in a loop" ] ], "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, "spec": { "source": "https://asana.com/", "how": "computed styles and geometry of the live homepage (the \"The OS for human-agent teams\" A/B variant) at 1440 and 390, headless Chromium, 2026-10-31", "provenance": "observed", "motion": [ { "name": "image-reveal", "easing": "cubic-bezier(0, 1.08, 0.77, 1.01)", "duration_ms": 500, "use": "Accordion media panel entrance (0.25s delay, slight overshoot)", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, { "name": "button-hover", "easing": "ease", "duration_ms": 300, "use": "Nav and section buttons: black fill to #6E6E6E, white to #FAFAFA, outline to #F3F3F3", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, { "name": "form-button-hover", "easing": "ease-in-out", "duration_ms": 150, "use": "Hero Continue and the Google/Microsoft buttons", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, { "name": "headline-gradient-drift", "use": "Hero gradient phrase: background-size 200% (coral, pink, coral) at position 0% at rest; any drift is animation only", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" } ], "icons": { "grid": "not published", "stroke": "Worklings: bold black outline line around a white shape (weight not published)", "sizes": [ { "name": "problem-icon", "px": 48, "use": "Line icons over problem columns (observed)" }, { "name": "integration", "px": 18, "use": "App icons inside 32px white discs on teammate cards (observed)" }, { "name": "product-tile", "px": 64, "use": "Product icon tile in the dark carousel (observed)" } ], "color": "Product Worklings: white shape, black line, one solid palette color circle; expressive Worklings: dimensional, soft gradients", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=31" }, "signature": [ { "id": "gradient-phrase", "name": "Coral-to-fuchsia gradient phrase", "where": "one phrase of a hero or billboard headline (human-agent, workflow, agent)", "spec": "Linear gradient left to right through the phrase only: Asana Coral #FF584A to Fuchsia #FD3FFD on light grounds, Coral to Light Fuchsia #FFC9FF on dark. On asana.com the span is coded #FF453E 0%, #F481F4 50%, #FF453E 100% at background-size 200% (so at rest it reads coral to pink across the phrase) with background-clip text. Rest of the headline stays Asana Black or white", "once": "one gradient phrase per headline, in simple layouts where type is the focal point", "example": { "ground": "paper", "text": "The OS for human-agent teams", "mark": "human-agent", "mark_style": "color", "mark_color": "#FF584A" }, "dont": "use gradients that feel too intense or hurt legibility, or gradient whole paragraphs", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=10" }, { "id": "workflow-nodes", "name": "Workflow lines and nodes", "where": "hero and billboard backgrounds, section dividers, diagrams", "spec": "Thin lines run as one continuous path from plan to outcome with rounded 90-degree turns; important, active stretches carry a Coral #FF584A to Light Fuchsia #FFC9FF gradient, the rest Light Grey #D7D9DB. Small Asana Black #0B0505 dot nodes with an Asana Grey #F3F3F3 outline sit where the line meets a pill, avatar or task card", "once": "one continuous path per composition", "example": { "ground": "paper", "text": "Launch Planner: GTM in 4 weeks", "mark": "GTM in 4 weeks", "mark_style": "box" }, "dont": "draw the workflow as a circle or a loop: it should never look stuck", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=37" }, { "id": "pills", "name": "Product-native pills", "where": "on workflow paths and in copy-led layouts", "spec": "White rounded frames from the Asana interface: Human + Agent (avatar plus Worklings), Human + Description, Actions, Resource, Task + Agent, Task + Human, Text only. Each carries a subtle Asana Pink #FFC9FF drop shadow; small colored label tags (Light Green, Light Yellow, Light Purple) name the agent", "example": { "ground": "surface", "text": "Reviewer Kim", "mark": "Kim", "mark_style": "box" }, "dont": "let pills overpower the headline; typography leads", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=38" }, { "id": "dot-grid", "name": "Infrastructure dot grid", "where": "only behind brand diagrams and workflows", "spec": "A dotted grid derived from the logo's dots, spaced at 10x (x = dot size): #C4C7C9 dots on light grounds, #FFFFFF on dark. Masked by a free shape and faded so it reads as infrastructure under the content; may carry a soft gradient (#FF1CFF, #FFFFFF, #FF584A). On asana.com it appears inside the workflow graphics; the dark product cards only reveal a 14px white dot grid (masked to the top-right corner) on hover", "example": { "ground": "night", "text": "Agentic Work Management" }, "dont": "use the grid as a general texture or let it reduce readability", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=36" }, { "id": "worklings", "name": "Worklings (AI Teammate characters)", "where": "anywhere an AI agent appears: product icons, pills, cards, over photography", "spec": "Each AI Teammate is a blob character with two simple eyes. Product icons: white shape, bold black outline, one solid palette color circle behind. Expressive icons: dimensional, softly lit color shapes used mainly over photography", "example": { "ground": "paper", "text": "Launch Coordinator" }, "dont": "mix product and expressive styles in one composition or redraw a Workling with new features", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=31", "also": [ "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=32", "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=33" ] } ], "page": { "source": "https://asana.com/", "date": "2026-10-31", "prov": "observed", "variant": "asana.com runs an A/B test on the hero. This book and the reference screenshots use the \"The OS for human-agent teams\" variant (the guide's own billboard line). The other variant (\"Supercharge your teams with AI\" plus a six-tab department switcher with videos) is not built.", "voices": "One voice. The homepage speaks in short sentence-case product claims (humans and agents, the Work Graph), the same voice as the guide's billboards. A landing page built from this spec follows the homepage. Third-party overlays (the Qualified \"Leslie AI\" chat card, reCAPTCHA badge) are not part of the page and are left out.", "nav": { "summary": "White sticky bar, 68px: Asana logo left, four text menus, then globe, Log in, an outlined Contact sales pill and a black Get started pill at right. No bottom border.", "ground": "#FFFFFF, sticky at top (z-index above everything), no border or shadow at rest", "height": "68px desktop (12px top/bottom padding around 44px items); 64px phone", "border": "none", "logo": { "variant": "combination logo: coral #FF584A three-dot logomark + #0D0E10 wordmark (asana-logo.svg)", "px": "112x22", "position": "x 76, y 23 (vertically centred)" }, "links": { "count": 4, "labels": "Products (dropdown), Solutions (dropdown), Learning & support (dropdown), Pricing", "chevron": "chevron-down.svg at 10px", "size": "14px/36px", "weight": "500", "color": "#0D0D0D", "alignment": "left group: buttons at x 232, 352, 474 (each a 44px-tall pill hit area with 8px 24px padding, 10px chevron-down 4px after the label) and Pricing link at x 658" }, "container": "nav content runs x 64-1376 (1312px): the logo link has 12px inner padding, so the logo art starts at x 76; the Get started pill ends at x 1376 (64px right margin)", "actions": [ "Language globe (globe.svg): a 28px button box at x 1028 whose visible drawing is about 20x20 (render the SVG at 20px, centred in the 28px box), #0D0D0D", "Log in: text link 14px 500 #0D0D0D, x 1084 (hit area x 1072, padding 0 12px)", "Contact sales: 120x44 pill, #FFFFFF fill, 1px inset ring #0D0D0D, 14px 500 #0D0D0D, padding 0 16px, radius 100px, x 1143", "Get started: 105x44 pill, #0D0D0D fill, 14px 500 #FFFFFF, padding 0 16px, radius 100px, x 1271 (right edge 1376); hover fill #6E6E6E over 0.3s" ], "sticky": "position sticky, stays white", "phone": { "shows": "logo 112x22 left at x 24, Get started black pill (12px 500 white, about 94x40) at x 224, 24px hamburger (three lines) at right", "menu": "white drawer: rows Products, Solutions, Learning & support, Pricing (16px 500, 60px rows), then Contact sales / View demo / Download app (12px), then Log in (#F3F3F3 pill, #3D3D3D text) and Contact sales (#0D0D0D pill, white text), 47px tall, full width minus 28px sides", "cta": "Get started pill stays visible in the bar" } }, "hero": { "summary": "White hero, 823px tall under the nav: a full-width canvas of workflow lines, pills and avatars frames a centred two-line 102px Light headline with one gradient phrase, a grey lead, two outline sign-up pills (Google, Microsoft), an \"or\" divider, an email field with a black Continue pill, and a legal line.", "desktop": { "section": "y 56-879 (the hero starts 12px under the top of the 68px nav, which overlays it), ground #FFFFFF, everything centred. Follow the y anchors below, not a padding value: the H1 starts 197px below the section top", "workflow_canvas": "PLACE hero-workflow-desk.png (1440x823, transparent) as an absolutely positioned layer at x 0, y 56, behind the copy (z below the text). Never redraw it", "vertical_anchors": "H1 top y 253 (line 1 \"The OS for\" baseline box y 253-345, line 2 y 345-437); lead y 465-498; sign-up pills y 515-584; \"or\" row y 584-640 (text y 600); form row y 640-690; legal line y 706-726; section bottom y 879", "text_max_width": "H1 box x 283-1156 (873px), centred; exactly 2 lines with a forced break after \"The OS for\" and no wrap inside line 2 (white-space: nowrap; Figtree may run up to about 900px); lead 521px single line; form column x 451-989 (537px)", "sign_up_pills": "two 265x69 pills side by side (x 451 and x 724, 8px gap): #FAFAFA fill, 1px solid #6E6E6E, radius 100px, padding 16px; content centred: 35px white disc holding the 24px colour Google G (icon-google.svg) or the four-square Microsoft logo (icon-microsoft.svg), 8px gap, label \"Google\" / \"Microsoft\" 16px 500 #0D0D0D", "or_divider": "row 537px wide, padding 16px 0: two 1px #CFCFCF lines (249px each) either side of \"or\" 16px 300 #6E6E6E, 12px gaps, line at y 611", "form": "email input 388x50 (x 451): #FFFFFF, 1px solid #CFCFCF, radius 4px, padding 12px 16px, placeholder \"name@company.com\" 16px 300 #6E6E6E. At rest in the reference the field is focused: 1px #005FCC ring. 16px gap, then Continue pill 134x50 #0D0D0D, 16px 500 #FFFFFF, radius 100px, padding 12px 32px", "legal": "ONE line on desktop (white-space: nowrap; it is 537px wide in the real face and may run a few px wider in Figtree), centred 13px/19.5px #0D0D0D (Figtree 350), 0.26px tracking: a one-sentence consent line linking Terms of Service and Privacy Statement, both link phrases underlined", "cta_size": "134x50 (Continue); sign-up pills 265x69" }, "phone": { "order": "H1 (3 lines), lead (2 lines), Google + Microsoft pills side by side, or, field + Continue row, legal (2 lines), then the workflow graphic below the form", "alignment": "centred, 24px side gutters", "sizes": "section y 64-863 (overflow hidden); H1 48px/43.2px -0.96px, lines \"The OS for\" / \"human-agent\" / \"teams\", y 96-226; lead 18px/23.4px 0.36px y 242-297; pills 167x58 each (8px gap, filling the 342px column) y ~306, labels 14px 500; or y 381; input 201x47 + Continue 125x47 (14px 500) y 418; legal 12px/18px y 481-517", "workflow_canvas": "PLACE hero-workflow-phone.png (390x707, transparent) at x 0, y 257 behind the copy; its drawing sits in the lower half, below the form (y ~550-830)" }, "at_rest": { "ground": "#FFFFFF", "state": "the workflow canvas animates on the site; the supplied PNG is the resting frame the reference shows", "gradient": "the phrase \"human-agent\" starts coral at \"h\" and ends pink at \"t\" (background-size 200%, position 0%)" }, "type": "H1 TWK Lausanne 300 102px/91.8px, -2.55px, #0D0E10 (set Figtree 400); lead 26px/33.8px, 0.52px, rgba(62,62,62,0.8) (set Figtree 350)", "cta": "Continue (black pill) after an email field; Google and Microsoft single sign-on pills above", "proof": "none in the hero; the logo band follows", "media": "the workflow canvas only (avatars, Worklings, task pills joined by coral-to-pink lines); no photo panel" }, "sections": [ { "name": "Customer logo band", "summary": "A two-line stat at left and five customer logos in a row at right.", "ground": "#FFFFFF", "desktop": "y 959-1087 (80px below the hero). Heading \"85% of Fortune 100 companies choose Asana¹\" 30px/36px 400 #0D0D0D at x 76, w 376, 2 lines (break after \"100\"), vertically centred. Five logo images 150x100 each at x 516, 691, 865, 1040, 1214 (174.5px pitch), y 973, object-fit fill (the files carry their own padding)", "phone": "y 911-1061: heading 20px/28px 400, 2 lines, x 25; logos 105x70 in a continuously scrolling marquee row at y 991 (at rest: Dell, Merck, Amazon visible from x 24)", "anatomy": [ "Logos: logo-amazon.png, logo-accenture.png, logo-jj.png, logo-dell.png, logo-merck.png in that order, black monochrome", "The superscript ¹ ties to the footnote printed in the closing dark band" ], "components": [ "logo row" ] }, { "name": "AI that works the way your team works", "summary": "Section H2, then a dark product image left and a four-item accordion right.", "ground": "#FFFFFF", "desktop": "y 1207-2035. H2 54px/54px -1.08px #0D0D0D at x 76, 2 lines (break after \"your\"; allow the box up to 660px so Figtree keeps that break). Row from y 1379: media 628x629 at x 76, radius 16px (workgraph.jpg, a dark #0D0D0D network diagram); accordion column x 846-1364 (518px), top-aligned with the image: its first rule sits at y 1379, the same y as the image top (align-items: start, never centred)", "phone": "y 1109-1961: H2 30px/33px -0.6px, 2 lines; accordion first (x 25, 340 wide); the open item's image (340x341, radius 16px) sits under its body text; closed items below", "anatomy": [ "Accordion: 4 items, each with a 1px #E7E7E7 rule at the top (and one under the last); a 2px #0D0D0D progress segment runs from the left end of the open item's top rule (about 22-32px long at rest; it grows as the item auto-advances: animation only)", "Item header: title 24px/28.8px 500 #0D0D0D left, a 24px #F3F3F3 disc with a 12px chevron at right (up when open, down when closed)", "Open item (first, \"Asana Work Graph®\"): padding 32px 0, title then 18px gap, body 20px/30px 300 0.4px #3D3D3D, 4 lines", "Closed items: Multiplayer, Shared memory, Enterprise governance, each 100px tall (32px padding); toggle icon chevron-up.svg / chevron-down.svg at 12px", "Body length when open: 30-38 words, 4 lines at 518px; the open item measures 266px from its top rule to the next rule" ], "components": [ "accordion" ] }, { "name": "AI Teammates carousel", "summary": "Eyebrow, H2, lead and an outline Learn more pill; then a row of white Teammate cards running off the right edge, with two round arrows above.", "ground": "#FFFFFF", "desktop": "y 2195-3365. Eyebrow \"AI TEAMMATES\" 16px/24px 500 uppercase 0.64px #0D0D0D at x 76 y 2195; H2 \"Your team just got bigger\" 54px y 2227 (1 line); lead 16px/24px 0.32px, about 30 words in 3 lines, w 628, y 2297; Learn more outline pill 149x58 y 2393. Arrows: two 44px circles at x 1260 (prev, disabled: #F3F3F3 fill, 1px #D5DCE0 ring, grey arrow) and x 1320 (next: #0D0D0D fill, white arrow), y 2495. Cards from y 2555: 304x796, x 76, 402, 727, 1053, 1379 (326px pitch, 22px gaps); the 5th card is cut by the viewport edge", "phone": "y 2009-3064: eyebrow 11px/16.5px 0.44px; H2 30px; lead 14px/21px; Learn more 122x47; cards 299x733 at x 25 and 330 (second card peeks), no arrows", "anatomy": [ "Card: #FFFFFF, 1px solid #E7E7E7, radius 8px; top image 302x129 flush to the top edge (radius 7px 7px 0 0): the Teammate's Workling on white (teammate-*.png)", "Vertical positions inside the 796px card (from its top edge): image 1-130; name at 195 (a 41px gap under the image plus 24px padding); tagline 240-330; \"Integrations\" 354; icon row 381-413; \"Skills\" 437; chips from 469 to about 596; rule at 613; prompts at 630, 681 and 732; 24px bottom padding. Content fills the card: no empty band", "Card body padding 24px: name 24px/28.8px 500; tagline 20px/30px 300 0.4px #3D3D3D, 3 lines; \"Integrations\" 13px 300 #6E6E6E then a row of 32px white discs (1px #F3F3F3 ring) each holding an 18px app icon, overlapping at 26px pitch", "\"Skills\" 13px 300 #6E6E6E then chips: 11px/16.5px 500 uppercase 0.44px #0D0D0D on #F3F3F3, radius 4px, padding 4px 8px, 4px gaps, wrapping; a \"+N\" chip ends the list", "A 1px #E7E7E7 rule, then three example prompts: 16px check-circle outline icon + 13px/19.5px 300 text, 2 lines each, 12px apart", "Card order: Launch Coordinator, Portfolio Advisor, Compliance Manager, Project Manager, Content Writer", "Content density per card: tagline 8-11 words (3 lines); 1-7 integration icons; exactly three skill chips of 2-5 words each (long ones wrap to 2 lines inside the chip) plus a +N chip; three prompts of 7-12 words (2 lines each)", "Skill chips as published: Launch Coordinator: Event Logistics Tracking, Vendor & Speaker Management, Cross-Functional Launch Alignment, +8. Portfolio Advisor: Portfolio Health Monitoring, Cross-Portfolio Dependency Mapping, Strategic Alignment, +7. Compliance Manager: Compliance Controls Monitoring, Audit Evidence Collection, Policy Writing, +7. Project Manager: Project Scoping & Task Breakdown, Timeline & Dependency Planning, Blocker & Dependency Flagging, +3. Content Writer: Brief Writing, Template Automation, Meeting Summary & Action Capture, +5", "Integration icons: card 1 Drive, Microsoft, Slack, Gmail, Outlook, HubSpot; card 2 Slack; card 3 Drive, Microsoft; card 4 Drive, Microsoft, Slack, Gmail, Outlook, Figma; card 5 Drive, Microsoft and more", "Prompt icon: 16px outlined circle with a check mark, 1.2px #0D0D0D line, at x 25 of the card; prompt text starts at x 49", "Arrow icons: arrow-left-grey.svg in the disabled prev button, arrow-right-white-sm.svg in the next button, both 21px" ], "components": [ "teammate_card", "skill_chip", "carousel_arrow", "button_outline" ] }, { "name": "Products (dark tabbed carousel)", "summary": "A dark rounded band: white H2, a row of five product pills (first active in pink), and a centred grey product card with neighbours peeking either side.", "ground": "#0D0D0D", "desktop": "y 3525-4695: panel x 28-1412 (1384px), radius 20px, padding 120px 48px (the area outside the panel is also #0D0D0D, so it reads full-bleed). H2 \"Deliver real productivity for every team\" 54px #FFFFFF, 2 lines broken after \"for\" (\"Deliver real productivity for\" / \"every team\"), x 76 y 3645. Pills at y 3793 from x 105, 8px gaps: 56px tall, radius 64px, padding 16px 32px, 16px 500: active \"Agentic Work Management\" #FFC9FF fill + #0D0D0D text; others #3D3D3D fill + #FFFFFF text (Asana Service Management, Asana Client Management, Command by Asana, StackAI by Asana). Card at y 3897: 936x678, x 252-1188, flat #3D3D3D, radius 20px, padding 32px 24px 0 32px. No visible texture at rest (a dot grid fades in only on hover: opacity 0 at rest). Neighbour cards sit 40px away at both sides at opacity 0.3: left = StackAI by Asana (product-stackai-ui.jpg showing at its right edge), right = Asana Service Management", "phone": "y 3113-4073, full-bleed #0D0D0D, no radius: H2 30px; the five pills stack vertically, centred, 45px tall, 8px gaps; card 318x413 at x 36 (icon 36px, body 12px/18px, UI image 286x165 at the bottom), next card peeks at x 366", "anatomy": [ "Card header: 64x64 product icon tile (product-icon-awm.svg: white four-dot mark on a #FFC9FF rounded square), 24px gap, title \"Agentic Work Management\" 20px/30px 400 #FFFFFF, body 16px/24px 300 0.32px #E7E7E7, 3 lines, w 520", "Card media: product-awm-ui.jpg 880x508 at x 284, y 4067, radius 8px 8px 0 0, flush to the card bottom (the UI screenshot fades to pink at its foot)", "Right neighbour shows product-service-ui.jpg and product-icon-service.svg (green tile); left neighbour shows product-stackai-ui.jpg", "Body lengths: Agentic Work Management 27 words (3 lines); Service Management 12; Client Management 12; Command by Asana 8; StackAI by Asana 15", "A Learn more outline pill (13px 500 white, 1px #FAFAFA ring, #0D0D0D fill) sits at the card's top right only on hover; not visible at rest" ], "components": [ "product_tab", "product_card" ] }, { "name": "Customer quote", "summary": "A workflow-line divider image, then a rounded photo left and a logo, quote and attribution right.", "ground": "#FFFFFF", "desktop": "y 4735-5362 (40px under the dark band). Divider: workflow-divider-1.png 1288x127 at x 76 y 4735 (radius 16px, fill). Row from y 4942: photo cos-photo.jpg 628x419 radius 16px at x 76; right column x 736-1364: COS logo cos-logo.png 580x40 (contain, left) at y 4946; 48px #F3F3F3 disc with a black closing-quote glyph at x 1316 y 4942; quote 36px/46.8px 300 -0.36px #0D0D0D at y 5022, 5 lines, w 628; name \"Simone Williams\" 16px/24px 500 0.4px y 5288; title 13px/19.5px 300 y 5312", "phone": "y 4120-4741: divider 340x34; photo 340x227 at y 4202; logo 340x40; quote 20px/26px 300, 5 lines; name 12px 500; title 12px 300", "anatomy": [ "Quote text: a 26-word customer quote on scaling workflows and using AI with intention to gain visibility and speed (5 lines at 628px); it opens \"By building scalable workflows\"", "Attribution: Chief Digital, Technology & Business Development Officer, COS", "Set the quote with NO quotation marks in the text: the only quote glyph is quote-mark.svg (20px, #0D0D0D) inside the 48px #F3F3F3 disc at the top right" ], "components": [ "quote_block" ] }, { "name": "Get started easily", "summary": "A rounded off-white panel: H2 and lead at left, three white link cards with black round arrow buttons at right.", "ground": "#FAFAFA", "desktop": "y 5442-6140: panel x 28-1412, radius 20px, padding 120px 48px, #FAFAFA on the white page. H2 54px x 76 y 5562 (1 line), lead 20px/30px 0.4px #0D0D0D, about 18 words in 2 lines, w 518, 24px under the H2. Cards at x 736, w 628, h 142, 16px gaps (y 5562, 5720, 5878): #FFFFFF, radius 10px, padding 32px; title 30px/36px 400 #0D0D0D, subline 20px/30px 300 #6E6E6E, 12px apart; 59px #0D0D0D circle with a 32px white arrow-right, right-aligned and vertically centred", "phone": "y 4789-5297, panel full-bleed (no radius): H2 30px, lead 15px; cards 342x87 (title 20px/28px, subline 15px), 8px gaps", "anatomy": [ "Cards: \"Try the Asana demo\" / \"See Asana in action\"; \"Discover resources\" / \"Help articles and tutorials\"; \"Start with a template\" / \"Get started faster with a template\"" ], "components": [ "link_card" ] }, { "name": "Why projects slip when work is scattered", "summary": "Second workflow-line divider, then a centred H2 over three problem columns with line icons.", "ground": "#FFFFFF", "desktop": "Divider workflow-divider-2.png 1288x127 at y 6220. Section y 6427-6927: H2 54px centred, x 406-1034 (628px), 2 lines (break after \"when\"); three columns 408px wide at x 76, 516, 956 (32px gaps): 48px line icon at y 6575 (icon-tasks.svg, icon-dependency.svg, icon-rules.svg), title 30px/36px 400 at y 6635 (2, 2 and 1 lines), body 20px/30px 300 0.4px #0D0D0D, 6-7 lines", "phone": "divider 340x34 at y 5345; H2 30px centred y 5427; columns stack (title 20px/28px, body 15px/22.5px), about 311px pitch", "anatomy": [ "Column titles as published: \"Projects are spread across tools and inboxes\", \"No shared view of progress and deadlines\", \"Status updates eat the week\"", "Bodies 47, 52 and 58 words: concrete scenes (a spreadsheet, chat, email; a contract stalled in review; Friday status decks)", "Third column ends with the line \"This is exactly what we built Asana to fix.\" as its own paragraph" ], "components": [] }, { "name": "Closing CTA band", "summary": "A dark rounded panel: white H2 left, white Get started pill right, the stat footnote and a rule underneath.", "ground": "#0D0D0D", "desktop": "y 7047-7518: panel x 28-1412, radius 20px, padding 120px 48px (outer ground also #0D0D0D, so it joins the footer). H2 \"The only platform that can support your company at any scale\" 54px 300 #FFFFFF, 3 lines, w 628, x 76 y 7167; Get started pill 168x64 at x 846 y 7167: #FFFFFF fill, 20px/30px 400 #0D0D0D, radius 100px; footnote \"1. Accurate as of December 2023, includes free and paid users.\" 13px #FFFFFF at y 7409; 1px #565656 rule x 76-1364 at y 7476; the panel ends at y 7518, 42px under the rule (so the bottom padding is 42px, not 120)", "phone": "y 6516-6865, full-bleed: H2 30px/33px 3 lines; Get started 128x49 (15px 500) under it; footnote 12px", "anatomy": [ "The band runs straight into the footer with no visible seam" ], "components": [ "button_primary_on_dark" ] } ], "footer": { "summary": "Black footer: coral logomark at left, five link columns, then a bottom row with copyright, language, five white social discs, Terms & Privacy and the two app-store badges.", "ground": "#0D0D0D", "anatomy": [ "Main area y 7517-8259, padding 80px 0: coral logomark (asana-logomark.svg) 32px at x 76 y 7593", "Columns at x 188, 407, 626, 844, 1063 (219px pitch, 189px wide): headings 14px/24.5px 500 #FFFFFF at y 7597; links 16px/24px #F3F3F3 (Figtree 400, not heavier) from y 7657, 38.5px pitch, no underline", "Column 1: New to Asana?: Product overview, All features, Latest feature release, Pricing, Starter plan, Advanced plan, Enterprise, App integrations, AI work management, Project management, Resource management", "Column 2: Use cases: Campaign management, Content calendar, Creative production, Goal management, New hire onboarding, Organizational planning, Product launches, Resource planning, Strategic planning, Project intake, Task Management, All use cases", "Column 3: Solutions: Small business, Marketing, Operations, IT, Product, Sales, Healthcare, Retail, Government, Education, Manufacturing, Nonprofits, Agencies, All teams", "Column 4: Resources: Help Center, Get support, Asana Academy, Certifications, Forum, Resource center, Events and webinars, Project templates, Customer Success, Developers and API, Partners, Sitemap", "Column 5: Company: About us, Leadership, Customers, Careers, Inside Asana, Culture, Press, Investor relations, Trust and security, Privacy, Supplier responsibility, Sustainability and ESG", "Bottom row y 8259-8363 (#0D0D0D): \"© 2026 Asana, Inc.\" 14px #FFFFFF at x 173; globe-light.svg at 20px + \"English\" 14px #F3F3F3 at x 380; social discs 32px #FFFFFF with 16px #0D0E10 glyphs (social-x.svg, social-linkedin.svg, social-instagram.svg, social-facebook.svg, social-youtube.svg) at x 542-714, 3px apart; \"Terms & Privacy\" 14px #FFFFFF at x ~800; App Store badge 120x40 (badge-app-store.svg) at x 991 and Google Play badge 135x40 (badge-google-play.svg) at x 1116, y 8291" ], "phone": "logomark top left (x 31), columns in 2 columns at x 31 and 210 (New to Asana? + Use cases, Solutions + Resources, Company), then the bottom row stacked and centred" }, "dark_ground": { "secondary_button": "On dark: #FFFFFF pill with #0D0D0D text (Get started 168x64); outline variant #0D0D0D fill with 1px #FAFAFA ring and white 13px 500 text", "link": "#FFFFFF / #F3F3F3, no underline", "muted_text": "#E7E7E7 body on #3D3D3D cards", "hairline": "#565656 1px", "logo_variant": "coral logomark alone in the footer; combination logo with a white wordmark (asana-logo-on-dark.svg) when a full logo is needed on black" } }, "bands": [ { "label": "Navigation", "ground": "#FFFFFF", "content": "logo, 4 menus, globe, Log in, Contact sales (outline), Get started (black)", "desktop": "1440x68 sticky", "phone": "390x64: logo, Get started, hamburger", "anatomy": [ "Pills radius 100px, 44px tall" ] }, { "label": "Hero", "ground": "#FFFFFF", "content": "hero", "headline": "The OS for human-agent teams", "mark": "human-agent", "mark_style": "color", "align": "center", "desktop": "y 56-879; centred 102px H1 + lead + sign-up form; workflow canvas behind", "phone": "y 64-863; 48px H1 in 3 lines; workflow graphic under the form", "anatomy": [ "Workflow canvas image placed behind the copy, never redrawn" ] }, { "label": "Logo band", "ground": "#FFFFFF", "content": "logos", "desktop": "y 959-1087: stat left, 5 logos right", "phone": "stat then a scrolling logo row", "anatomy": [ "85% of Fortune 100 stat with superscript 1" ] }, { "label": "AI accordion", "ground": "#FFFFFF", "content": "split", "headline": "AI that works the way your team works", "desktop": "y 1207-2035: H2, 628px dark image left, accordion right", "phone": "accordion first, image inside the open item", "anatomy": [ "4 items, #E7E7E7 rules, 2px black progress segment" ] }, { "label": "AI Teammates", "ground": "#FFFFFF", "content": "cards", "desktop": "y 2195-3365: eyebrow, H2, lead, Learn more; 304px cards running off the right edge", "phone": "299px cards, second peeks", "anatomy": [ "Card: image, name, tagline, integrations, skill chips, 3 prompts" ] }, { "label": "Products", "ground": "#0D0D0D", "content": "cards", "desktop": "y 3525-4695: rounded dark panel, 5 pills, 936px grey card with peeking neighbours", "phone": "full-bleed, pills stacked", "anatomy": [ "Active pill #FFC9FF, others #3D3D3D" ] }, { "label": "Customer quote", "ground": "#FFFFFF", "content": "split", "headline": "By building scalable workflows and leveraging AI with intention", "desktop": "y 4735-5362: workflow divider, photo left, quote right", "phone": "stacked", "anatomy": [ "36px Light quote, 48px grey quote-mark disc" ] }, { "label": "Get started easily", "ground": "#FAFAFA", "content": "split", "headline": "Get started easily", "desktop": "y 5442-6140: rounded #FAFAFA panel, 3 white link cards with black arrow circles", "phone": "full-bleed panel", "anatomy": [ "Cards 628x142 radius 10px" ] }, { "label": "Problem columns", "ground": "#FFFFFF", "content": "text", "headline": "Why projects slip when work is scattered", "align": "center", "desktop": "y 6220-6927: divider, centred H2, 3 columns", "phone": "stacked columns", "anatomy": [ "48px line icons" ] }, { "label": "Closing CTA", "ground": "#0D0D0D", "content": "text", "headline": "The only platform that can support your company at any scale", "desktop": "y 7047-7518: dark panel, white H2, white Get started pill, footnote, rule", "phone": "full-bleed", "anatomy": [ "Footnote: accurate as of December 2023" ] }, { "label": "Footer", "ground": "#0D0D0D", "content": "logomark, 5 link columns, bottom row", "desktop": "y 7517-8363", "phone": "2-column links", "anatomy": [ "Social discs white 32px, app badges at right" ] } ], "layout": { "page_margin": { "desktop": 76, "phone": 24 }, "section_padding": { "desktop": 120, "phone": 48, "logo_strip": 64 }, "container_max": 1288, "hero_text_max": 873, "columns": 2, "columns_phone": 1, "gutter": 32, "gutter_phone": 16, "card_gap": 22, "nav_height": 68, "note": "Measured on https://asana.com/ (2026-10-31) at 1440 and 390. Content x 76-1364 (1288px). Most sections are two 628px columns with a 32px gutter (x 76-704 and 736-1364); split sections push the right column to x 846 (518px). Dark and off-white panels are inset x 28-1412 (1384px) with radius 20px and 48px side padding. Vertical gaps between sections: 80px (hero to logos), 120px (logos to accordion), 160px (accordion to Teammates, Teammates to dark panel), 40px (dark panel to quote), 80px (quote to Get started, to divider, to problems), 120px (problems to closing CTA).", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, "type": [ { "role": "Hero H1", "id": "display-xl", "face": "display", "size": { "desktop": 102, "phone": 48 }, "line_height": 0.9, "tracking_px": -2.55, "weight": 400, "real_weight": 300, "prov": "observed", "source": "https://asana.com/ (2026-10-31)", "tracking_phone_px": -0.96 }, { "role": "Section H2", "id": "display-l", "face": "display", "size": { "desktop": 54, "phone": 30 }, "line_height": 1, "tracking_px": -1.08, "weight": 400, "real_weight": 300, "prov": "observed", "source": "https://asana.com/ (2026-10-31)", "tracking_phone_px": -0.6, "line_height_phone": 1.1 }, { "role": "Quote", "id": "quote", "face": "display", "size": { "desktop": 36, "phone": 20 }, "line_height": 1.3, "tracking_px": -0.36, "weight": 400, "real_weight": 300, "prov": "observed", "source": "https://asana.com/ (2026-10-31)", "tracking_phone_px": 0 }, { "role": "Subhead (logo stat, link-card and problem titles)", "id": "subhead", "face": "display", "size": { "desktop": 30, "phone": 20 }, "line_height": 1.2, "tracking_px": 0, "weight": 500, "real_weight": 400, "prov": "observed", "source": "https://asana.com/ (2026-10-31)", "line_height_phone": 1.4 }, { "role": "Hero lead", "id": "hero-lead", "face": "body", "size": { "desktop": 26, "phone": 18 }, "line_height": 1.3, "tracking_px": 0.52, "weight": 350, "real_weight": 300, "prov": "observed", "source": "https://asana.com/ (2026-10-31)", "tracking_phone_px": 0.36, "color": "rgba(62,62,62,0.8)" }, { "role": "Card and accordion title", "id": "title", "face": "body", "size": { "desktop": 24, "phone": 18 }, "line_height": 1.2, "tracking_px": 0, "weight": 500, "real_weight": 500, "prov": "observed", "source": "https://asana.com/ (2026-10-31)", "line_height_phone": 1.4 }, { "role": "Body large", "id": "body-l", "face": "body", "size": { "desktop": 20, "phone": 15 }, "line_height": 1.5, "tracking_px": 0.4, "weight": 350, "real_weight": 300, "prov": "observed", "source": "https://asana.com/ (2026-10-31)", "tracking_phone_px": 0.3 }, { "role": "Body", "id": "body", "face": "body", "size": { "desktop": 16, "phone": 14 }, "line_height": 1.5, "tracking_px": 0.32, "weight": 350, "real_weight": 300, "prov": "observed", "source": "https://asana.com/ (2026-10-31)", "tracking_phone_px": 0.28 }, { "role": "Small / legal / meta", "id": "small", "face": "body", "size": { "desktop": 13, "phone": 12 }, "line_height": 1.5, "tracking_px": 0.26, "weight": 350, "real_weight": 300, "prov": "observed", "source": "https://asana.com/ (2026-10-31)", "tracking_phone_px": 0.24 }, { "role": "Eyebrow (uppercase)", "id": "eyebrow", "face": "body", "size": { "desktop": 16, "phone": 11 }, "line_height": 1.5, "tracking_px": 0.64, "weight": 500, "real_weight": 500, "prov": "observed", "source": "https://asana.com/ (2026-10-31)", "tracking_phone_px": 0.44, "case": "uppercase" }, { "role": "Skill chip (uppercase)", "id": "chip", "face": "body", "size": { "desktop": 11, "phone": 11 }, "line_height": 1.5, "tracking_px": 0.44, "weight": 500, "real_weight": 500, "prov": "observed", "source": "https://asana.com/ (2026-10-31)", "case": "uppercase" }, { "role": "Button", "id": "button", "face": "body", "size": { "desktop": 16, "phone": 14 }, "line_height": 1.5, "tracking_px": 0, "weight": 500, "real_weight": 500, "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, { "role": "Nav link", "id": "nav", "face": "body", "size": { "desktop": 14, "phone": 16 }, "line_height": 1.5, "tracking_px": 0, "weight": 500, "real_weight": 500, "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, { "role": "Footer heading", "id": "footer-heading", "face": "body", "size": { "desktop": 14, "phone": 14 }, "line_height": 1.75, "tracking_px": 0, "weight": 500, "real_weight": 500, "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, { "role": "Footer link", "id": "footer-link", "face": "body", "size": { "desktop": 16, "phone": 16 }, "line_height": 1.5, "tracking_px": 0, "weight": 400, "real_weight": 400, "prov": "observed", "source": "https://asana.com/ (2026-10-31)" } ], "components": { "button_primary": { "fill": "#0D0D0D", "text": "#FFFFFF", "radius": 100, "height": 50, "padding_x": 32, "font_size": 16, "weight": 500, "face": "body", "example": "Continue 134x50; nav Get started 105x44 (14px, padding 0 16px)", "prov": "observed", "source": "https://asana.com/ (2026-10-31)", "note": "pill radius 100px", "states": { "hover": { "prov": "observed", "measured": { "fill": "#6E6E6E", "transition": "background-color 0.15-0.3s" }, "css": { "background-color": "#6E6E6E" } } } }, "button_secondary_nav": { "fill": "#FFFFFF", "text": "#0D0D0D", "radius": 100, "height": 44, "padding_x": 16, "font_size": 14, "weight": 500, "face": "body", "example": "Contact sales 120x44", "prov": "observed", "source": "https://asana.com/ (2026-10-31)", "ring": "#0D0D0D", "ring_px": 1, "states": { "hover": { "prov": "observed", "measured": { "fill": "#FAFAFA", "transition": "0.3s" }, "css": { "background-color": "#FAFAFA" } } } }, "button_outline": { "fill": "#FAFAFA", "text": "#0D0D0D", "radius": 100, "height": 58, "padding_x": 32, "font_size": 16, "weight": 500, "face": "body", "example": "Learn more 149x58 (padding 16px 32px)", "prov": "observed", "source": "https://asana.com/ (2026-10-31)", "ring": "#6E6E6E", "ring_px": 1, "states": { "hover": { "prov": "observed", "measured": { "fill": "#F3F3F3", "transition": "color 0.3s, border 0.3s" }, "css": { "background-color": "#F3F3F3" } } } }, "button_sso": { "fill": "#FAFAFA", "text": "#0D0D0D", "radius": 100, "height": 69, "padding_x": 16, "font_size": 16, "weight": 500, "face": "body", "example": "Google / Microsoft 265x69: 35px white disc with the provider icon, 8px gap, label", "prov": "observed", "source": "https://asana.com/ (2026-10-31)", "ring": "#6E6E6E", "ring_px": 1 }, "button_primary_on_dark": { "fill": "#FFFFFF", "text": "#0D0D0D", "radius": 100, "height": 64, "padding_x": 32, "font_size": 20, "weight": 400, "face": "body", "example": "Get started 168x64 (20px 400)", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, "button_secondary": { "fill": "#FAFAFA", "text": "#0D0D0D", "radius": 100, "height": 58, "padding_x": 32, "font_size": 16, "weight": 500, "face": "body", "example": "Learn more 149x58: the outline pill beside or after a black primary", "prov": "observed", "source": "https://asana.com/ (2026-10-31)", "ring": "#6E6E6E", "ring_px": 1, "states": { "hover": { "prov": "observed", "measured": { "fill": "#F3F3F3", "transition": "color 0.3s, border 0.3s" }, "css": { "background-color": "#F3F3F3" } } } }, "card": { "fill": "paper", "on": "surface", "radius": 8, "border": "1px solid #E7E7E7", "note": "Card: white, 1px #E7E7E7 border, 8px corners (Teammate cards); link cards use 10px on #FAFAFA panels; media 16px; panels 20px.", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, "product_tab": { "fill": "#3D3D3D", "text": "#FFFFFF", "on": "#FFC9FF", "radius": 64, "height": 56, "padding": "16px 32px", "text_style": "16px 500", "note": "active tab: #FFC9FF fill, #0D0D0D text", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, "input": { "fill": "#FFFFFF", "border": "1px solid #CFCFCF", "radius": 4, "height": 50, "padding": "12px 16px", "text_style": "16px, Figtree 350", "focus": "1px #005FCC ring", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, "teammate_card": { "fill": "#FFFFFF", "border": "1px solid #E7E7E7", "radius": 8, "size": "304x796 desktop, 299x733 phone", "padding": "24px", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, "skill_chip": { "fill": "#F3F3F3", "text": "#0D0D0D", "radius": 4, "padding": "4px 8px", "text_style": "11px/16.5px 500 uppercase 0.44px", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, "carousel_arrow": { "size": "44px circle", "next": "#0D0D0D fill, white arrow", "prev_disabled": "#F3F3F3 fill, 1px #D5DCE0 ring, grey arrow", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, "accordion": { "rule": "1px #E7E7E7", "progress": "2px #0D0D0D segment on the open item's top rule", "toggle": "24px #F3F3F3 disc with chevron", "item_padding": "32px 0", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, "product_card": { "fill": "#3D3D3D", "radius": 20, "padding": "32px 24px 0 32px", "size": "936x678", "texture": "none at rest; a 14px white dot grid (radial-gradient(rgba(255,255,255,0.35) 0.72px, transparent 1.2px)) fades in on hover", "neighbours": "opacity 0.3", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, "link_card": { "fill": "#FFFFFF", "radius": 10, "padding": "32px", "size": "628x142", "arrow": "59px #0D0D0D circle, 32px white arrow", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, "quote_block": { "mark": "48px #F3F3F3 disc, black closing-quote glyph", "text_style": "36px/46.8px 300 -0.36px", "photo_radius": 16, "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, "panel": { "radius": 20, "inset": "x 28-1412 (1384px), padding 120px 48px", "grounds": "#0D0D0D or #FAFAFA", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" } } }, "system": { "fixed": [ "Coral three-dot symbol beside the lowercase wordmark; the symbol is always coral", "White or black grounds for content; coral, fuchsia and pink as accents", "TWK Lausanne Light headlines, tight tracking, sentence case", "Pill-shaped buttons", "Workflow lines, nodes and pills built from the product UI", "Worklings for every AI agent", "Fisheye, human-centred photography" ], "flex": "How loud the system gets: one gradient phrase and a quiet product UI on a web page, full workflow scenes with Worklings and the dot grid on billboards and posters.", "traits": [ { "is": "Human at the center", "not": "Overpowered by systems", "text": "Systems are shown supporting people (paraphrase of the art direction).", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=25", "prov": "published" }, { "is": "Expressive", "not": "Intense", "text": "Gradient type should add energy but stay clear and readable (paraphrase).", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=10", "prov": "published" }, { "is": "Precise and productive", "not": "Overwhelming", "text": "Workflows feel simple, precise and productive without crowding the layout (paraphrase).", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=37", "prov": "published" }, { "is": "Moving forward", "not": "Stuck in a loop", "text": "Multi-step work runs as a continuous path from plan to outcome (paraphrase).", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=37", "prov": "published" } ] }, "formats": [ { "format": "Landing page", "level": 2, "must": "Build it the way asana.com is built (kit.spec.page): white page, sticky white 68px nav with pill buttons, centred Light hero headline (stand-in Figtree 400) with one coral-to-pink gradient phrase over the workflow canvas, black pill CTAs, 1288px content, rounded inset #0D0D0D and #FAFAFA panels (radius 20px), black footer with the coral logomark", "flex": "which sections and how many cards; the guide's Light Fuchsia #FFC9FF secondary CTA in place of the outline pill" }, { "format": "Deck", "level": 3, "must": "White or black slides, large Light headlines, one gradient phrase per title, pill labels, logo bottom or top corner", "flex": "a workflow diagram on a faded dot grid for process slides" }, { "format": "Billboard / poster", "level": 5, "must": "Headline with a gradient phrase, Worklings and avatar pills on a workflow, faded dot grid, asana.com", "flex": "photo (fisheye) or white ground" }, { "format": "Social post", "level": 4, "must": "One headline with a gradient phrase or a fisheye photo with an expressive Workling", "flex": "pills and a short workflow" }, { "format": "Email", "level": 1, "must": "White ground, black type, black pill CTA, coral logo", "flex": "one gradient word in the hero line" }, { "format": "Product UI", "level": 1, "must": "Product-style Worklings, black and white surfaces, Light Fuchsia active states", "flex": "palette colors for project and agent tags" } ], "checks": [ { "name": "Logo hidden", "text": "Cover the logo. It should still read as Asana: Light Swiss headline with one coral-to-fuchsia phrase, black pill buttons, and workflow lines connecting avatars, Worklings and task pills." }, { "name": "Swap test", "text": "Put another work-management logo on it. If the workflow-and-Workling graphics and the gradient phrase don't feel borrowed, it is generic." }, { "name": "Legibility", "text": "Every gradient sits on headline type only, never on a colored content ground." } ], "examples": [ { "chapter": "color", "do": { "ground": "paper", "text": "The OS for human-agent teams", "mark": "human-agent", "mark_style": "color", "mark_color": "#FF584A" }, "do_caption": "A coral-to-fuchsia gradient on one phrase of a Light headline, everything else black (guide p.10).", "dont": { "ground": "#FF584A", "text": "Amplify your impact with AI", "ink": "#0B0505" }, "dont_caption": "A coral content module behind headline and body copy: the guide marks it wrong (p.11)." }, { "chapter": "color", "do": { "ground": "paper", "text": "View demo", "button": true, "button_fill": "#FFC9FF" }, "do_caption": "Light Fuchsia pill as the secondary CTA beside a black one (guide p.16).", "dont": { "ground": "#FFC9FF", "text": "What work will your AI Teammates do?", "ink": "#FD3FFD" }, "dont_caption": "Fuchsia copy on a pink ground lacks contrast (guide p.11)." } ], "make_it_yours": { "note": "Everything above transfers. These are Asana's own and must be replaced with yours: name and logo, purpose, positioning, messaging pillars, proof, taglines and boilerplate.", "replace": [ "identity", "purpose", "positioning", "messaging.pillars", "messaging.proof_points", "messaging.taglines", "messaging.boilerplate" ], "reference": { "purpose": { "mission": { "text": "To help humanity thrive by enabling the world's teams to work together effortlessly.", "prov": "published", "source": "https://asana.com/company" }, "story": { "text": "Founders Dustin Moskovitz and Justin Rosenstein saw talented people at Facebook lose their days to meetings and status chasing, so they built a shared picture of who is doing what, by when. That Work Graph, built for people, is now the base for people and AI agents working together.", "prov": "observed", "source": "https://asana.com/company", "source_note": "2026-10-31", "paraphrase": true }, "values": [ { "name": "Know your customer", "means": "Start with customers: listen to their needs and design what they will love (paraphrase).", "prov": "published", "source": "https://asana.com/company" }, { "name": "Cut to the core", "means": "Focus on what matters and simplify complexity (paraphrase).", "prov": "published", "source": "https://asana.com/company" }, { "name": "Get to Beta", "means": "Progress beats perfection: ship lovable work fast and learn (paraphrase).", "prov": "published", "source": "https://asana.com/company" }, { "name": "Solve it together", "means": "Collaborate early and trust each other (paraphrase).", "prov": "published", "source": "https://asana.com/company" }, { "name": "Act like you own it", "means": "Take responsibility, individually and together (paraphrase).", "prov": "published", "source": "https://asana.com/company" }, { "name": "Start with heart", "means": "How we work matters as much as what we build (paraphrase).", "prov": "published", "source": "https://asana.com/company" } ] }, "positioning": { "statement": { "text": "The operating system for human-agent teams.", "prov": "observed", "source": "https://asana.com/company", "source_note": "2026-10-31" }, "category": { "text": "Work management, reframed as the OS for teams of people and AI agents", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=40", "also": [ "https://asana.com/company" ] }, "audience": { "text": "Organizations and their cross-functional teams: operations, marketing, client delivery, IT, PMO and R&D (the homepage department tabs)", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, "problem": { "text": "\"Work about work\": meetings and status chasing crowd out skilled work, and AI has helped individuals more than teams", "prov": "observed", "source": "https://asana.com/company" }, "promise": { "text": "People and agents run critical workflows from one shared plan, with shared memory and governance", "prov": "observed", "source": "https://asana.com/company" }, "differentiators": [ { "text": "The Asana Work Graph® as the shared data model under every workflow.", "prov": "observed", "source": "https://asana.com/company" }, { "text": "Multiplayer collaboration architecture, built over 18 years.", "prov": "observed", "source": "https://asana.com/company" }, { "text": "Pre-built AI Teammates that work inside real workflows from day one.", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, { "text": "Enterprise governance for agents: identity, scoped permissions, audit trail.", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" } ], "alternatives": [ { "text": "Scattered work: tasks in spreadsheets, decisions in chat, files in email.", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, { "text": "AI tools that help individuals but not teams.", "prov": "observed", "source": "https://asana.com/company" } ] }, "messaging": { "taglines": [ { "text": "The OS for human-agent teams", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=40", "where": "Billboards and the homepage H1 (observed 2026-10-31 as one of two A/B hero variants)" }, { "text": "Where humans + agents workflow together", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=16", "where": "Type hierarchy sample and the poster (p.41)" }, { "text": "Work has a new flow.", "prov": "published", "source": "https://assets.asana.biz/asset/a4bdc79a-88a2-463f-8243-38fe90b79c88/Asana-Brand-Guidelines-FY27.pdf#page=42", "where": "Street-level billboard" }, { "text": "Supercharge your teams to get things done", "prov": "observed", "source": "https://asana.com/ (2026-10-31)", "where": "Homepage hero lead" } ], "attributes": [ "human-centred", "connected", "productive" ], "key_messages": [], "boilerplate": { "text": "Asana is the operating system for human-agent teams. Built on the Asana Work Graph and years of multiplayer architecture, it is where an organization's people and AI agents run critical workflows together, from a shared plan with shared memory and enterprise governance.", "prov": "observed", "source": "https://asana.com/company", "source_note": "2026-10-31", "paraphrase": true }, "pillars": [ { "name": "Asana Work Graph®", "claim": "One connected map of every person, task, project, goal and dependency, so people and agents know who does what, by when.", "prov": "observed", "source": "https://asana.com/ (2026-10-31)", "proof": [ "p-fortune", "p-years" ] }, { "name": "Multiplayer", "claim": "Every workflow, app and agent runs in one shared space with people.", "prov": "observed", "source": "https://asana.com/ (2026-10-31)", "proof": [ "p-years" ] }, { "name": "Shared memory", "claim": "AI Teammates learn from the work and keep context across projects.", "prov": "observed", "source": "https://asana.com/ (2026-10-31)", "proof": [ "p-teammates" ] }, { "name": "Enterprise governance", "claim": "Every agent has an identity, scoped permissions and an audit trail.", "prov": "observed", "source": "https://asana.com/ (2026-10-31)", "proof": [ "p-cos" ] } ], "proof_points": [ { "id": "p-fortune", "kind": "stat", "text": "85% of Fortune 100 companies choose Asana (footnote: accurate as of December 2023, includes free and paid users).", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, { "id": "p-years", "kind": "stat", "text": "18 years of multiplayer architecture (company page).", "prov": "observed", "source": "https://asana.com/company" }, { "id": "p-teammates", "kind": "product", "text": "Pre-built AI Teammates (Launch Coordinator, Portfolio Advisor, Compliance Manager, Project Manager, Content Writer) shown on the homepage.", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, { "id": "p-cos", "kind": "quote", "text": "COS (Simone Williams, Chief Digital, Technology & Business Development Officer) credits scalable workflows and AI with more visibility and speed.", "prov": "observed", "source": "https://asana.com/ (2026-10-31)", "paraphrase": true } ], "claim_boundaries": [ { "text": "The Fortune 100 share is always printed with its December 2023 footnote.", "prov": "observed", "source": "https://asana.com/ (2026-10-31)" }, { "text": "Never imply Asana endorses or sponsors a third party's use of its marks.", "prov": "published", "source": "https://asana.com/brand" } ] } } } }