See the change
Lead with what moved, over which period, and by how much. Make the main finding easy to see.
Growth Data / Brand system 1.2
Every growth
curve has
a story.
A clear view of how companies grow.
The signals, the
milestones, and the evidence
behind the change.
The Cutout mark
01 / Foundation
Make change
understandable
Growth Data connects company signals and milestones across time, turning a collection of observations into a story people can follow and agents can work with.
Find the context
Connect the timeline to launches, content, coverage, and other observable company activity.
Follow the evidence
Keep sources and dates close. Separate what was observed from what might explain it.
02 / Identity
The Cutout
identity
A rising curve, cut from a compact square. The frame gives the mark stability; the open space gives it movement.
The opening is always transparent. One shape, one color, no annotation.
Built to stay simple
Square by design
- Canvas
- 48 × 48 units
- Visible mark
- 36 × 36 units
- Corner radius
- 6 units
- Clear space
- At least 6 units
- Minimum size
- 16 pixels
Preserve the curve, corner radius, and proportions. Use the supplied reverse artwork on dark surfaces.
Small, still recognizable
Try it at the size you need.
03 / Motion
Logo
motion
The mark animates once, as it arrives, and then holds still. It can be revealed, drawn, scaled or moved. It is never stretched, rotated or recolored.
Each entrance ships as a self-contained SVG for light and dark surfaces. It plays once and ends on the master artwork.
Default
Carve
The square settles, then the curve is cut from it, left to right. The name slides out from behind the mark. Quiet and material.
- Length
- 2.4 s
- Easing
- easeOutCubic arrival, easeInOutCubic cut
- Use
- Site header, app launch, video open
Drawn
Trace
A point draws the two straight edges, then the curve. The square closes around the drawing and fills, leaving the opening. The letters rise one after another.
- Length
- 3.7 s
- Easing
- easeInOutCubic drawing, easeOutCubic fill
- Use
- Product intro, onboarding, loading to ready
Data
Evidence
The curve is traced at a constant rate over a baseline, with three milestones along the way. The area beneath it is already the opening; the square fills in around it.
- Length
- 3.1 s
- Easing
- linear trace, easeOutCubic milestones and fill
- Use
- Reports, dashboards, data stories
On the web
Use the SVG as an image. It needs no script or font. Serve the static master when people ask for reduced motion.
<picture>
<source srcset="growth-data-lockup.svg"
media="(prefers-reduced-motion: reduce)" />
<img src="motion/growth-data-carve-lockup-light.svg"
alt="Growth Data" width="252" height="48" />
</picture>04 / Color
A neutral palette
Charcoal, paper, and a useful range of neutrals. The identity stays consistent while charts and customer themes have room to change.
Color belongs to the data
A green line or blue series is a product choice, not a permanent brand accent. Always pair color with labels and maintain clear contrast.
05 / Typography
Type for headlines,
detail, and data
Growth, with
perspective.
Inter / Regular 400 + Medium 500
Make the detail easy to read
Use a calm, familiar voice for descriptions, controls, and longer explanations. Give the reader a clear hierarchy and enough space to follow the evidence.
Body 16–18px / Labels 12–14pxGeist Mono / Regular 400
12,840
+18.4%vs period start · 30 days
Use title case for the wordmark. Set prominent metrics in Sora with tabular figures; keep compact interface labels in Inter. Use sentence case for labels and normal tracking for small text. Embedded surfaces can inherit the host typeface while preserving the same information hierarchy.
06 / Icons + annotations
Icons for
company signals
One quiet visual language for the things that move a company. Lucide outlines, selected for Growth Data and ready for compact cards, timelines, and embedded interfaces.
A consistent supporting cast
Icons that explain
the evidence
Keep the Cutout as the brand signature. Use outline icons to identify a source, explain an event, or make an action easier to recognize.
16 / Dense20 / Default24 / Spacious
- Geometry
- 24 × 24 grid · 2-unit stroke
- Color
- Inherit the text color
- Meaning
- Pair every signal with a label
From Lucide ↗ · Self-hosted SVGs · License included
The annotation library
56 annotation types
No matching annotations
Try another word or reset the category.
Interface essentials
Interface actions
Select any icon to inspect or download it.
Describe the moment
Icons describe the event or source. Keep confidence, verification, and impact in separate labels. A launch beside a rising curve does not establish causation.
Stay clear in every host
Use 16–24px icons beside text in rendered chat cards. Inherit the host’s color and type, retain readable labels, and use “Other annotation” when a type is unfamiliar.
07 / In practice
An annotated
growth timeline
One clear metric, a legible timeline, and context when you need it. Change the data color or time range; the identity remains Growth Data.
Data theme
Illustrative company / Synthetic data
N
Northstar
Company growth overview
Daily website visits
12,840+18.4%vs period start
Oct 2 – Oct 31, 2026
Lead with the finding.
One dominant metric
and a clear period.
Let context unfold.
Details appear when a
milestone is selected.
Keep evidence distinct.
A shared timeline
does not prove causation.
08 / Applications
Across reports
and interfaces
The same identity, from a browser tab to a report cover. Use the mark as a quiet signature, and the cutout as a framing device at larger scales.
Growth Data
Company intelligence / 2026
A clearer view
of company
growth.
Every growth curve has a story.
At every scale
09 / Voice + usage
Voice and
interface principles
Sound like a thoughtful research partner. Be specific about what changed, careful about why, and useful about what to explore next.
Primary message
Every growth curve
has a story.
A simple invitation to look beyond the number.
Product message
See what changed.
Explore the evidence.
Lead with an observation and a useful next action.
Developer message
Company growth,
made queryable.
A concise expression for data and agent surfaces.
Keep it consistent
Use the supplied geometry and title-case wordmark. Give the mark room. Keep the opening transparent and select a high-contrast light or dark version.
Keep it honest
Label the period, units, and source. Identify illustrative or estimated data. Describe an event as context unless there is evidence that it caused the change.
Designing with Growth Data
Make room for the evidence
A chart, a source, or an annotated timeline should earn the reader’s attention. Give the surrounding interface a supporting role.
Download design tokens- 01 Keep a steady rhythm
- Use a 4px spacing scale, with tighter gaps inside a group and more space between groups. Align labels, icons, and values in consistent columns.
- 02 Let the finding lead
- Use neutral surfaces and quiet borders. Give one chart or observation priority; reserve color for a selected series or a meaningful status, paired with a label.
- 03 Write what changed
- Use specific nouns, sentence-case labels, and a clear next action. A change needs a baseline: “+18.4% vs period start.” Keep dates and sources close.
- 04 Keep small details readable
- Use Inter for controls, Geist Mono for metadata, and tabular figures for comparisons. Keep labels at 12px or more, compact chart labels at 11px or more, and text contrast at least 4.5:1.
- 05 Use icons with a purpose
- Use the Lucide set at a consistent size within each component. Keep its 2-unit stroke, pair annotations with text, and give icon-only controls an accessible name.
- 06 Make feedback quiet and clear
- Use a surface change for hover and a visible keyboard focus ring. Keep transitions brief and respect reduced motion. Set nested corners from the space between surfaces, with a 4px minimum.
Interface principles adapted for Growth Data from Unslop by Damir Sokolovsky, licensed under CC BY 4.0.
10 / The brand kit
The Growth Data
brand kit
Vector marks, outlined wordmarks, app icons,
font files, design
tokens, annotation icons, and interface principles.
Annotation + interface icons75 SVGs, type catalog, sprite, and embed exampleZIP ↗
Master markTransparent charcoal SVGSVG ↗Horizontal lockupOutlined Sora letteringSVG ↗Stacked lockupFor centered applicationsSVG ↗App icon1024px, transparent backgroundPNG ↗Design tokensColors, type, spacing, and motionCSS ↗Brand specificationsIdentity and interface principlesJSON ↗
