# dendritic brand Use this file when writing, designing, or generating anything that should look and sound like dendritic.ventures. Paste it into another agent's instructions. The company name in prose is `dendritic`, always lowercase. The site wordmark is `dendritic.ventures`. The line we repeat is: We build software that builds software. ## Color Tokens live on `:root` in `src/index.css`. Use these. Do not introduce a color that is not listed. | Name | Token | Hex | Use | | --- | --- | --- | --- | | Canopy | --bg | `#070a08` | Page background. Near-black with a green cast. Never pure black or neutral gray. | | Chlorophyll | --accent | `#b6f24a` | The only accent. Links, the mark, focus, and primary buttons. | | Sap | --accent-hover | `#d6ff8a` | Hover state of the accent. | | Dew | --text-bright | `#eafce0` | Headlines. | | Mist | --text | `#e8efe9` | Default body text. | | Lichen | --text-muted | `#a8bcae` | Supporting paragraphs. | | Moss | --text-dim | `#8fa396` | Navigation, secondary actions, and footer meta. | | Ink | — | `#08120a` | Text and icons that sit on a chlorophyll fill. | Used in one place only: | Name | Token | Hex | Use | | --- | --- | --- | --- | | Bark | — | `#6b7d70` | The ".ventures" in the wordmark only. | | Needle | — | `#9fb4a4` | Kicker text beside the blinking dot. | | Tide | — | `#4fe3c1` | Some branches in the hero animation. Not for interface. | | Ember | — | `#e2724a` | Invalid field borders. Error text is #eb8a68. | Other values, still part of the system: - Selection: background `rgba(182, 242, 74, 0.28)`, text `#eafce0`. - Dividers: `1px solid rgba(168, 188, 174, 0.14)`. - Input border: `1px solid rgba(168, 188, 174, 0.22)`. - Input fill: `rgba(232, 239, 233, 0.03)`. - Placeholder: `#5f7268`. - Outline button border: `1px solid rgba(182, 242, 74, 0.4)`. - Focus ring on fields: chlorophyll border, fill `rgba(182, 242, 74, 0.05)`, shadow `0 0 0 3px rgba(182, 242, 74, 0.12)`. - Primary button hover glow: `0 0 32px rgba(182, 242, 74, 0.35)`. - `theme-color`: `#070a08`. The page background is flat canopy. A faint radial wash of chlorophyll is allowed behind a hero. Do not wash cards or sections with gradients. ## Type Two families. Do not add a third. Load them from Google Fonts: ``` Familjen+Grotesk:wght@400;500;600;700 IBM+Plex+Mono:wght@400;500 ``` ### Familjen Grotesk Roles: wordmark, headlines, body, primary buttons. Fallback: `system-ui, sans-serif`. Weights in use: 400, 500, 600, 700. Headlines and the wordmark are 600. Display headline: - size: `clamp(44px, 7.5vw, 104px)` - weight: 600 - line-height: 0.98 - letter-spacing: -0.025em - color: `#eafce0` Inner-page headline: `clamp(34px, 5.5vw, 68px)`, same weight, tracking, and line-height. Section title: `clamp(32px, 4.2vw, 52px)`, line-height 1.02, letter-spacing -0.025em. Lead: `clamp(17px, 1.6vw, 20px)`, line-height 1.55, color `#a8bcae`, max-width about 580px. Body: 16–18px, line-height 1.55–1.62. Keep lines under about 70 characters. Wordmark: 20px, weight 600, letter-spacing -0.01em. The `.ventures` suffix is weight 400 and bark `#6b7d70`. Primary button: Familjen Grotesk 600, 16px, padding 15px 26px, fill `#b6f24a`, text `#08120a`, radius 3px. ### IBM Plex Mono Roles: navigation, kickers, field labels, secondary actions, footer meta, errors. Fallback: `monospace`. Weights in use: 400 and 500. Navigation and secondary actions: 12.5px, letter-spacing 0.06em, uppercase, color `#8fa396`. Hover turns chlorophyll. Kickers: 12.5px, letter-spacing 0.14em, uppercase, color `#9fb4a4`. A 7px chlorophyll dot sits to the left. The dot glows and blinks. Field labels: 12px, letter-spacing 0.12em, uppercase, color `#8fa396`. ## Shape - Radius is 3px on filled buttons and inputs, 2px on the outline button. Circles are only the kicker dot and the success mark. - No drop shadows on cards or panels. The only shadow is a chlorophyll glow. - Dividers are 1px hairlines, not cards. - Page padding is `clamp(20px, 5vw, 72px)`. - Content is left aligned. ## Mark The mark is a branching diagram: one trunk, a few forks, dots at the tips. It is an SVG, stroke round, about 1.6 in a 28px box. Source: `src/BrandMark.jsx`. Favicon: `public/favicon.svg`. - Chlorophyll on canopy, or ink on chlorophyll. - The wordmark sits to the right of the mark, about 12px away. - Leave clear space around the lockup about the size of the top dot. - Do not recolor it, add a white outline, rotate it, or place it on a photograph. - The favicon tile is canopy with a 7px corner radius. That radius is for the icon tile only. ## Voice Sound like a small team that builds software and will say the plain thing. - Sentence case. Short sentences. Active voice. - Lowercase `dendritic` in prose. - Specific over clever. Say what happens. - A button names the action: "Book a call", "Download brand.md". - Talk about the customer's company, the software they wish existed, and how long it takes. - An error states what went wrong and how to fix it. It does not apologize. A headline may set one word in chlorophyll when that word is the point of the sentence. Do not do it for decoration. Say things like: - We build software that builds software. - Fifteen minutes with the team. - The how is our edge. The result is yours. - Taught by people who ship software. Leave out hype, exclamation marks, title-case headlines, and filler such as revolutionary, seamless, unlock, empower, and leverage. ## Interface Primary: filled chlorophyll, ink text, 3px radius. Hover lightens to sap and adds a soft glow. Secondary: IBM Plex Mono, uppercase, moss, no fill. Hover turns chlorophyll. Outline button (the nav call to action): mono uppercase, 1px chlorophyll border at 40% opacity, 2px radius, chlorophyll text. Hover fills `rgba(182, 242, 74, 0.1)`. Body links: chlorophyll, no underline. Hover is sap. Inputs: the fill and border above, 3px radius, 16px Familjen Grotesk, padding 13px 15px. Focus uses the chlorophyll ring. Invalid borders are ember `#e2724a`. Error text is `#eb8a68` in IBM Plex Mono at 12.5px. Keyboard focus on controls that do not already draw a ring: 2px solid chlorophyll, offset 4px. ## Motion - One entrance on a page: content rises 18px and fades in, about 0.8s. Do not stagger every block. - The kicker dot blinks over 2.4s, opacity from 1 to 0.15. - A text-link arrow may travel 4px on hover. - The hero canvas grows branches up from the bottom edge. Most are chlorophyll. About a quarter are tide `#4fe3c1`. It is ambient. Do not recreate it as interface decoration. - Honor `prefers-reduced-motion`: no blink, no looping canvas, no traveling arrow. ## Layout - Open an inner page with a kicker (dot plus a short label), then a tight headline, then one or two short paragraphs. - Stack sections with a hairline. Do not chop the page into matching cards. - One filled action per view. Everything else stays quiet. - If a choice is not covered here, match the quieter option: canopy, Familjen, left aligned, no new color.