Command, not clutter
Every frame should help the operator choose the next action. Reduce decorative marks that do not change the decision.
Design documentation / Foundations
Pulse / Post Design System
Brand-facing foundations for Figma handoff and product alignment. This document defines positioning, identity, color, typography, surface rules, imagery, and voice. Component source now lives in the standalone HTML/CSS component library.
Calm shellNeutral surfaces hold dense work without theatrical chrome.
Clear signalCyan appears for ready states and neutral diagrams, not generic emphasis.
Decisive copyLanguage points to the next useful action, not the feature.
01 Core
Brand idea
The product should feel calm, capable, and precise. It is not a marketing splash page; it is a working surface for brand teams.
Visual foundationsThis page is the discussion and QA surface for brand foundations, tonal
hierarchy, layout rhythm, material, imagery, and voice.
Component sourceCanonical component implementation lives in
components/<Name>/<Name>.html plus its local
.css, with shared tokens in components/tokens.css.
Preview and Figma
components/html-component-preview.html is the live HTML component
preview. figma-component-library.html is the specimen board for Figma
iteration, states, contracts, and handoff notes.
React statusThe React demo is paused as an implementation target. Treat older React
references as legacy context, not the current source of truth.
Cyan earns attention
Cyan marks readiness and neutral diagram paths. It is not a generic highlight, progress, or positive-status color.
Readable at speed
Use restrained type, tabular numbers, and clear section rhythm so dense brand work can be scanned quickly.
One strong anchor
Ink surfaces are rare. Use them for the top brief, a decisive KPI, or a focused state that reframes the page.
Looks like
Neutral shell, white reading surfaces, controlled cyan accents, hairline edges, compact metadata, medium type, no noisy badges.
Does not look like
Neon AI dashboard, green decorative chrome, stock-photo landing page, heavy card stack, oversized hero marketing layout.
Default mode. Most frames should feel quiet, readable, and stable.
Use data, timestamps, labels, and tabular numbers to make decisions scan fast.
Reserve motion for state change; reserve cyan for ready and diagram-neutral meaning.
02 Identity
Naming and lockup
Keep the product naming plain. Pulse is the system context; Post is the focused interface surface.
Primary wordmark
Post
Use when the screen is specifically the Post product experience.
System label
Pulse / Post
Use in docs, Figma page titles, and cross-product handoff material.
Clearspace
1x cap height
Keep at least one cap-height around text lockups. Do not box the wordmark in a badge unless it is navigation chrome.
Use this design-system page for foundations; implementation source lives in standalone HTML/CSS components and their preview browser.
03 Color
Neutral first, color with meaning
The palette is not a cyan UI theme. Hierarchy comes from tone, surface, and text level; color carries meaning. Green carries positive/active/approved states, blue carries suggested action and scheduled states, amber carries risk/on-hold states, cyan is ready and diagram-neutral, purple is in progress, and red is only for declining data.
Page background and ambient field.
Color/Stage #eef3f3
Default reading and content surface.
Color/Surface #ffffff
Primary text, anchors, and rare focus surfaces.
Color/Ink/800 #1d1d1f
Ready-state family and neutral diagram lines; use #0D7685 for ready text.
Color/Cyan/500 #49e0f5
Positive status, active/live, approved, upward data trend, best performance.
Color/Green #43BA51
Suggested action, scheduled, and stable data trend.
Color/Blue #3987F3
Risk, negative status, on hold, and worst performance in diagrams.
Color/Amber #F19A08
Data is down: negative delta, drop-off, loss, or metric decline only.
Data/Decline #EF4444
In progress, rendering, and active machine work.
Color/Purple #6366F1
On hold
Scheduled
Approved
Ready
In progress
Status tags use one compact scale: green for positive, active/live, and approved; blue for suggested action and scheduled; amber for risk, negative, and on hold; cyan ready tags use a light cyan background with #0D7685 text; purple means in progress. Red is not a status tag color.
Data trends are separate from status: green means upward, red means downward, and blue means stable. Diagrams use primary cyan for neutral paths, green for best performance, and amber for worst performance.
Generation status is its own process ladder: queued is neutral gray; scheduled is blue; in progress, generating, rendering, and building are purple; ready uses light cyan with #0D7685 text; approved, live, published, and completed are green; on hold, blocked, failed, and needs attention are amber. Red never appears in generation status.
Lightness ramp — every family shares six stops: 50 / 100 soft fills, 200 borders, 500 base, 600 text or dot on light, 700 deepest emphasis.
CyanReady family, diagram neutral
50
100
200
500
600
700
GreenPositive, live, approved, data up
50
100
200
500
600
700
Decline redData down only · #EF4444
50
100
200
500
600
700
AmberRisk, negative, on hold, worst
50
100
200
500
600
700
BlueSuggested, scheduled, stable data
50
100
200
500
600
700
PurpleIn progress, machine work
50
100
200
500
600
700
Text levels — separate reading levels by tone and weight, not by inventing sizes. Lead with level 1, let 2–4 carry the rest.
Primary — titles, key numbers, primary body
--text-1 #1d1d1f
Secondary — standard body, descriptions
--text-2 #44464a
Tertiary — supporting copy, meta, captions
--text-3 #5f6369
Quaternary — labels, eyebrows, quiet meta
--text-4 #8a8e95
Disabled — faint, non-actionable text
--text-5 #b1b5bb
Inclusive use — the 500 base of each status color is a fill / dot value, not a text value. On white, status text and thin icons use deeper stops: red 600 for decline data, blue 600, and amber / green 700 (their 500/600 fall under 4.5:1). Never carry status by hue alone — always pair the color with an icon, label, or position, so red↔green and blue↔cyan stay distinguishable for color-vision deficiency.
Status vs trend
Status tags and data trends do not share meaning blindly. Green can mean approved status or upward data, but red appears only when data declines; risk and on-hold stay amber.
Do not use color for
Section numbers, decorative rails, generic badges, whole-card fills, or "important because it looks nice." Structure is tone and spacing, not color.
Black and gray
Ink is a scale: 900 anchors, 800 primary text, 700 control chrome, 600 secondary. Step neutral surfaces (canvas → surface → 2 → 3) for nested grouping before a divider.
04 Type
Product typography
Manrope owns everything: brand, UI, numerics, and token labels. Product workspaces can use a 64px page display title when the title carries the screen without a kicker; give that display title a 20px support gap so the subtitle breathes. Quieter pages use H1 48, H2 28, H3 21, H4 18. Hierarchy is built from size, spacing, and position, never from heavier weight. Newsreader remains reserved for report covers and report-hero display.
Report titleBrand Momentum
Newsreader / 88 / max medium
Report italicBrand Momentum
Newsreader italic / report only
Page displayCampaign Library
Manrope / 64 / gap 20
H1 Large titleGood morning, Maya.
48 / 1.02 / medium
H2 Section / subSignal Trends
28 / 1.16 / medium
H3 Mid titlePriority actions
21 / 1.22 / medium
H4 / card titleDelivery-time thread
18 / 1.24 / 600
CaptionDescription under a title — fixed 8px below it.
13 / 1.42 / 400
BodyClear, single-step work from today's strongest signals.
14 / 1.5 / 400
LabelActions to clear
11 / uppercase
Data figure62% ETA 18m
--fs-figure 32 · tabular · one size per view
Weight is not hierarchy
A large title is not made important by the heaviest Bold. Separate levels with size, spacing, position, and structure. Headings cap at medium; reserve the heaviest weight for one key number or action.
Title → caption gap is 8
The gap between any title/heading and its caption or body is a fixed 8px, set once in tokens. Pages do not retune it. The supporting line under a large title is the caption / description.
05 Layout
Grid and spacing
Use a restrained document grid for handoff pages and a stable product grid for React surfaces. The `Grid` source component now packages document, section, split, and content-grid recipes so repeated layouts do not become page-local one-offs. The system should feel ordered and readable, not tiled or tense.
010203040506 070809101112
Section grid
260 rail + fluid content / gap 22
Spacing scale
Use gaps before adding another frame
Radius scale
Small controls stay tight; large document shells get the only large curve
Document frameUse one outer frame, then one container per section. Do not nest card surfaces
inside section containers unless the object is an actual specimen.
max 1520 / margin 24-28
Section gridLeft rail owns section title and rationale. Right rail owns rules, tokens, and
examples. This keeps Figma exports easy to scan.
260 + fluid / gap 22
Content gridGroup rows on one quiet tonal surface and separate them with spacing, not a
hairline between every row. Tonal tiles with whitespace replace the ruled mesh;
reserve a divider for a real break inside one container.
tonal + gap 10
Reading rhythmAvoid rows that ask users to scan across many equal-weight blocks. Use spacing,
grouped copy, and a top-to-bottom sequence unless side-by-side comparison is the
task.
vertical first
Mobile stackCollapse every multi-column layout into a single column, except document
metadata which may use two columns when space allows.
<760: 1 column
06 Material
Surfaces and depth
The product should feel light but not decorative. Material rules create hierarchy with color, tone, spacing, and depth before relying on framed edges.
Surface layers
stage -> panel -> reading surface -> rare ink anchor
Shadow scale
depth follows hierarchy, not card size
EdgesHairline borders support surfaces, but they do not own hierarchy. If a module
feels unclear, adjust tone, background, type weight, or spacing first.
Stroke/Support
DividersUse light dividers only to group content inside one larger container. Do not wrap
each sub-area in another bordered card unless it is independently
interactive.
Divider/Local
ShadowDepth follows information hierarchy, not card size, and stays light. Content
surfaces — cards, summary and data blocks — share one subtle resting lift; the
page stage and inline controls (buttons, segmented tabs, inputs) stay flat;
overlays (panels, menus, toasts) lift strongest but still restrained.
Effect/Hierarchy
Edge frostScroll edges dissolve, they do not hard-cut. A sticky header and the bottom of a
scroll area each carry a masked backdrop-blur scrim — light tone (~50% surface), a
soft 6–7px blur, faded out with a
mask-image gradient — so content
melts softly under fixed chrome instead of ending on a hard line. Keep it subtle:
content stays readable through it, and any fixed control (launcher, buttons) sits
crisp above the scrim.Effect/Scrim
Status dotsDots are flat solid markers only. Do not add glow, halo, ping, pulse, or outward
rings; express active or selected states with tone, border, type weight, or the
standard focus ring.
Dot/Flat
07 Imagery
Media direction
Imagery should reveal the actual product, post, or creative state. Avoid decorative stock treatment when the user needs to inspect content.
Use real content
Show product, outfit, post preview, creator frame, or chart state directly.
Crop cleanly
Media previews are image-only. Metadata lives below or beside the media frame.
No decorative cover
Do not hide weak imagery behind blur, glow, or vague AI styling.
08 Voice
Clear operator language
Copy should sound like a sharp teammate. Concrete, brief, and tied to the next action.
Command titlesUse verbs and deadlines when the work is actionable.
Ship competitor response before 3 PM
Support copyExplain the reason, not the interface.
Delivery clarity is the risk window.
MetricsUse organic, specific numbers. Avoid fake-perfect values.
68% ready / ETA 18m
AvoidNo generic AI marketing language.
Elevate, unleash, next-gen
09 Figma
Brand export map
When this page is imported to Figma, split it into brand pages and keep component sets in the separate component library.
Positioning, owner, review date, and product naming.
Principles, expression, and use/avoid rules.
Neutral palette, cyan rules, semantic color roles.
Manrope roles only; tabular numerals via font features.
Document grid, section grid, content rows, responsive collapse.
Stage, neutral panel, ink, white surface, radius, effects.
Media direction, chart marks, and product copy rules.