# Dataline — Brand Guidelines > A breathing data delta. Spine on the left, leaves on a right-bulging bowl, ribs curving between them carrying live pulses. --- ## 1. The Mark The Dataline symbol is a procedurally drawn **data delta** that reads as a **D** when oriented vertically. It is built from four primitive layers — every variant in this kit is a render of the same underlying geometry. | Layer | Role | | ------ | ------------------------------------------------------------------------------------- | | Spine | The vertical backbone on the left — multiple roots stacked along a single axis. | | Roots | Solid green (or ink) anchor dots sitting on the spine. Origin nodes for every stream. | | Ribs | Curved Bezier paths arcing from each root out to a leaf on the bowl arc. | | Leaves | Data points on the right — three states: `active`, `alert`, `idle`. | The mark is **alive by default**: dashed ribs flow, pulses travel along each rib, leaves bob on a coordinated wave. Static variants are provided as freeze-frames. ### Primary mark **File:** `svg/dataline-mark-animated.svg` · `svg/dataline-mark-static.svg` (Aliases of `svg/marks/d/dataline-d-d18-green-{animated,static}.svg`.) Use this everywhere unless an explicit reason calls for a different variant. ViewBox 160×160. Optical center sits slightly left of geometric center because of the bowl on the right — do not visually re-center. ### The full matrix — orient × density × palette × mode Every mark in this kit is a render of the same procedural geometry. Three axes: | Axis | Values | | ----------- | --------------------------------------- | | **Orient** | `d` · `converge` · `tree` | | **Density** | `12` · `18` · `24` · `30` (leaves) | | **Palette** | `green` · `ink` | | **Mode** | `animated` · `static` | Total: 3 × 4 × 2 × 2 = **48 mark files** under `svg/marks//`. Filename pattern: ``` svg/marks//dataline--d--.svg ``` Examples: - `svg/marks/d/dataline-d-d18-green-animated.svg` — canonical primary - `svg/marks/d/dataline-d-d24-ink-static.svg` — denser D, monochrome, frozen - `svg/marks/tree/dataline-tree-d18-green-animated.svg` — archived T-tree - `svg/marks/converge/dataline-converge-d12-ink-animated.svg` — converge prototype, low density ### Density guidance | Density | Read at | Use for | | ------- | -------------- | -------------------------------------------------------- | | 12 | ≥ 96px | Splash, wallpapers, OG images, posters. | | **18** | 32 – 320px | **Default.** Web, app, deck, video lower-third, print. | | 24 | ≥ 24px | Editorial, dense compositions, supergraphics. | | 30 | ≥ 16px | Background ornaments only — never as a primary brand mark. | ### Palette guidance | Palette | Color | Use | | --------- | ---------------------------------- | ------------------------------------------------------ | | **Green** | `#34d399` accents, ink dots | Default. Dark surfaces `#0A0A0A`–`#1A1A1A`. | | **Ink** | All foreground in `#E8E6E0` | Single-color print, embossing, foil, watermarks, dark on dark monochrome. | A separate **Light-surface** variant (`mark-light-*`) is provided as an alias for green-on-cream surfaces — it remaps green to `#0E7C5C` and red to `#B23232` to maintain identity without going neon. ### Lockups The mark may sit alongside the wordmark in two configurations, both rendered at canonical density 18: - `svg/lockups/dataline-lockup-horizontal--.svg` — mark left, wordmark right. Nav bars, signatures, footers. - `svg/lockups/dataline-lockup-stacked--.svg` — mark above, wordmark below. Hero placements, splash screens, posters. Never re-create lockups by hand. Always use the supplied SVG. --- ## 2. Wordmark **File:** `svg/dataline-wordmark.svg` - Typeface: **DM Sans**, weight 400 (Regular), letter-spacing −0.025em. - Always cased as **Dataline** — never `DataLine`, `DATALINE`, or `dataline`. - The wordmark may stand alone in body copy and signatures. In display contexts, prefer a lockup. --- ## 3. Color The Dataline palette is ruthlessly tight. Five colors total, no gradients, no decorative tints. | Token | Hex | Role | | ------------------ | ---------------------------- | ----------------------------------------- | | `--bg` | `#0A0A0A` | Primary background. | | `--bg-elev` | `#111111` | Elevated surfaces, cards, tiles. | | `--ink` | `#E8E6E0` | Primary foreground / wordmark. | | `--ink-dim` | `#888880` | Secondary text, idle leaves at low size. | | `--ink-muted` | `#555550` | Tertiary text, hairline-adjacent ink. | | `--green` | `#34d399` | Active state, root anchors, primary accent. | | `--red` | `#ef4444` | Alert state — never used as a brand color, only as a node state. | ### Light-surface variant When the mark must sit on a light background (`#F5F4EE` or paper), the green and red are darkened to maintain identity without going neon: | Token | Hex | | ------------------ | ---------------------------- | | `--green-dark` | `#0E7C5C` | | `--red-dark` | `#B23232` | ### Don'ts - Do not introduce new accent colors. - Do not place the default green mark on backgrounds lighter than `#1A1A1A`. Use the `light` variant instead. - Do not use red anywhere except as a node alert state. --- ## 4. Typography Two families, no exceptions. | Family | Use | | ----------------- | ---------------------------------------------------------------- | | **DM Sans** | All UI, body, headings, wordmark. Weights 300, 400, 500. | | **Fragment Mono** | Eyebrows, code, telemetry labels, captions. Single weight only. | ### Scale | Use | Family | Size | Weight | Tracking | | -------------- | ------------ | -------- | ------ | ---------------- | | Display | DM Sans | 48–80px | 300 | -0.025em | | Section title | DM Sans | 24–36px | 300 | -0.02em | | Body | DM Sans | 15–17px | 400 | -0.005em | | Eyebrow / tag | Fragment Mono| 11–13px | 400 | 0.08em uppercase | --- ## 5. Clear space & minimum size - Clear space around the mark: **½ root-radius** on every side. Nothing — text, images, edges — may enter that zone. - Minimum mark size: **22×22px** (the favicon-tier mark). Below this, use `favicon-32.svg` or `favicon-square.svg`. - Wordmark minimum size: **52px** wide. --- ## 6. Animation The animated SVGs are fully self-contained and play in any modern browser when used as ``, ``, or background-image (Chrome, Safari, Firefox). ### What animates - **Ribs** flow with a 4–9s dashed dash-offset cycle. - **Pulses** travel each rib via SMIL `animateMotion`. - **Leaves** ride a coordinated 2.0s wave; phase is keyed to vertical position. ### When to use static - Print, embossing, foil, embroidery — anything that cannot animate. - App icons, favicons, OG images — all rasterized. - Any context where motion would be distracting (legal docs, dense dashboards, email signatures). --- ## 7. Don'ts - Do not stretch, skew, or rotate the mark. - Do not change the green or red. - Do not place the mark on a busy photographic background — always use a tile or solid surface. - Do not extract individual leaves or pulses to use as standalone graphics. - Do not animate the wordmark. - Do not redraw the mark by hand. Use the supplied SVGs. --- ## 8. File index ``` public/media-kit/ ├── README.md ├── brand.md ← this file ├── manifest.json full file listing ├── svg/ │ ├── dataline-mark-{animated,static}.svg Primary alias (= d-d18-green) │ ├── dataline-mark-ink-{animated,static}.svg Primary alias (= d-d18-ink) │ ├── dataline-mark-light-{animated,static}.svg Light-surface alias │ ├── dataline-wordmark.svg Wordmark only │ ├── dataline-wordmark-light.svg Wordmark on light surfaces │ ├── marks/ │ │ ├── d/ D-shape (vertical), 16 files │ │ │ └── dataline-d-d{12,18,24,30}-{green,ink}-{animated,static}.svg │ │ ├── converge/ D-converge prototype, 16 files │ │ │ └── dataline-converge-d{12,18,24,30}-{green,ink}-{animated,static}.svg │ │ └── tree/ Archived T-tree, 16 files │ │ └── dataline-tree-d{12,18,24,30}-{green,ink}-{animated,static}.svg │ ├── lockups/ │ │ ├── dataline-lockup-horizontal-{green,ink}-{animated,static}.svg │ │ └── dataline-lockup-stacked-{green,ink}-{animated,static}.svg │ └── favicons/ │ ├── dataline-favicon-32.svg │ ├── dataline-favicon-square.svg │ └── dataline-favicon-large.svg ``` --- ## 9. Quick HTML usage ```html Dataline Dataline Dataline Dataline Dataline ``` --- © Dataline. Use of these assets is restricted to authorized partners and contributors.