SOC 2 TYPE II Certified · HIPAA · PCI DSS · WCAG 2.2 AA · trust.trucentive.com

Unclaimed rewards returned to you 

Support | 415-386-8600

Design System

TruCentive Design System

Living reference: the brand tokens and every standard block, exactly as implemented. Use this page as the source of truth when building new pages. All conventions below reflect the fixes made during the block build.

Color palette

Orange
#F37435

Orange Hover
#D9601C

Orange Dark
#C4520D

Orange Tint
#FEF0E8

Ink
#1A1714

Ink Medium
#5C5650

Ink Light
#9A9490

Ink 20
#C8C3BE

Border
#E8E4E0

Surface
#F5F2EF

White
#FFFFFF

Success
#1A6E42

Typography

DM Sans (300, 400, 500, 600) for everything. DM Mono for numbers and data.

Every program. Zero waste.

H1 · DM Sans 300 · 52 / 40 / 31px (desktop / tablet / mobile) · tracking -1.3px

Built for your program

H2 · DM Sans 300 · 38 / 30 / 25px · tracking -0.76px

Card and section heading

H3 · DM Sans 500 · 15–18px

Lead copy sits below a heading and introduces the section.

Lead · DM Sans 300 · 17px · line-height 1.7

Body copy for paragraphs and descriptions across the site.

Body · DM Sans 400 · 14–16px · line-height 1.7

Eyebrow label

Eyebrow · DM Sans 600 · 11px · uppercase · +1.7px · Orange

$6M+

Data · DM Mono 400 · used for all stat numbers

Caption and meta text

Caption · DM Sans 400 · 11px · Ink Light

Buttons

Layout & conventions

  • Content width: boxed inner capped at 1280px, centered inside a full-width outer.
  • Padding: every container sets padding explicitly (usually 0) so it never inherits the kit’s default container padding. Section sides 24px desktop, 16px mobile.
  • Filling columns: flex items use _flex_size: grow (or a width %) to fill a row. Never rely on flex_grow alone.
  • Responsive stacking: rows stack on mobile via flex_direction_mobile: column with width_mobile: 100%, or via flex-wrap with _flex_shrink: 0.
  • Type scales down on tablet and mobile via responsive font sizes.
  • Buttons: 5px radius; go full width when stacked on mobile.
  • Colors: brand colors map to the four System Global Colors (Primary/Secondary = Ink, Text = Ink Medium, Accent = Orange); structural colors use literal hex.
  • Icons:TruCentive Icon Design Spec
    Style family: Monoline (single-weight outline) icons. No fills — shapes are drawn with stroke only (fill: none). Rounded, friendly line terminals. Geometric but soft.
    ColorPrimary stroke color: #CC5200 (a deep burnt orange). This is the darker/true icon orange used in the SVGs.
    Note: the brand also uses a brighter orange #F37435 / rgb(243,116,53) for UI accents like buttons and filled glyphs, but the line icons themselves are #CC5200.
    Icons are always drawn in a single color (no two-tone, no gradients).

    Stroke

    stroke-linecap: round
    stroke-linejoin: round
    stroke-miterlimit: ~2.6 (only matters on the rare miter joints)
    Stroke weight is proportional to canvas, consistently about 4.9–5.6% of the viewBox dimension. Concretely: on a 24px artboard use ~1.2px stroke; on a 48px artboard use ~2.5px; on an 18-unit viewBox use 1.0; on a ~54–70 unit viewBox use ~2.8–3.45. Keep it in the 4.9–5.25% range and it will match.
    Geometry / canvas

    Icons are authored at their own natural aspect ratio (viewBoxes seen: 18×18, 54×39, 67×61, 67×70), then rendered into a 48×48px display box on the page. For generation, design on a 24×24 grid (standard) with roughly 1–2 units of padding, and let width vary with the shape.
    Small shape count per icon (typically 2–4 primitives): mixes of path, polyline, polygon, circle. Simple, not detailed.
    Corners are rounded via the round linejoin rather than large corner radii on the geometry.

    Construction rules (to keep new icons on-brand)

    One consistent stroke weight throughout a single icon — no thick/thin contrast.
    Prefer open, minimal forms: a few strokes, generous negative space, no shading or texture.
    Rounded ends on every open path; rounded joins on every corner.
    Keep icons centered and optically balanced within the box.
    Recurring motifs in their set: hearts, checkmarks, people silhouettes, documents/cards, shields, network nodes, pulse/EKG lines.

    Containers (context, not the icon itself)

    Icons sit at ~48px on cards. Card backgrounds are white, light warm grey/beige, or near-black (#1A1714-ish) — the orange stroke is used unchanged on all of them (it stays orange even on the dark cards).
    Some small inline stat icons sit on a pale peach rounded-square chip; those specific ones are filled orange glyphs rather than line icons.

    One-line prompt you can reuse

    “Monoline outline icon, single stroke weight (~5.25% of canvas), stroke color #CC5200, no fill, round line caps and round joins, designed on a 24×24 grid, minimal 2–4 element geometric shapes, friendly and clean — matching the TruCentive icon style.”

    All icons should sit on a transparent background so any underlying container etc background shows through

  • Native widgets only: Heading, Text Editor, Button, Icon, Image, Divider. No HTML widget.

Image Specification

First, identify the single clearest visual metaphor for the content. Express that idea through one coherent, self-contained composition—not a collage of unrelated symbols. The meaning should be immediately understandable without captions. Use familiar business objects such as cards, envelopes, dashboards, folders, accounts, budgets, gift boxes, arrows, circular flows, checkmarks, network nodes, charts, or simple platform modules only when they directly support the concept. Do not add features or claims that are not present in the supplied content.

TRUCENTIVE HOUSE STYLE — MUST MATCH

  • Style balance: 70% precise European clear-line technical illustration, 20% warm hand-drawn editorial friendliness, and 10% clever minimal use of negative space.
  • Clean, intelligent, modern, professional SaaS illustration; approachable but never childish.
  • Flat, vector-like construction with crisp contours and a very slight organic hand-drawn character.
  • Use one uniform, thin-but-legible outline throughout—approximately 5–7 px at a 2000 px canvas size.
  • Outlines must be very dark green-black #202820, with rounded joins and rounded line endings.
  • Keep shapes simple, open, and easy to read. Use generous negative space and only the objects necessary to communicate the idea.
  • Favor a centered, optically balanced composition. A strong default is one primary object or system with two to five supporting elements connected by restrained arrows, dotted lines, or circular nodes.
  • The full illustration should occupy roughly 72–82% of the square canvas, with approximately 8–12% transparent breathing room on every side. Crop tightly enough to avoid an undersized subject, but do not clip any important object or line.
  • Use restrained off-white interior fills where needed, but never place the illustration inside a white box, panel, badge, frame, or colored rectangle.

EXACT COLOR PALETTE

  • Main sage green: #80A874
  • Pale green: #E0E8D4
  • Orange accent: #F89440
  • Linework: #202820
  • Optional interior cream/off-white only: #F5F2EF or warm white

Color use must remain sparse: mostly white/off-white and transparent negative space, green as the principal fill, pale green as secondary fill, and orange limited to a few small focal accents. Do not introduce any other colors. Do not use purple, blue, bright yellow, red, or multicolor decoration.

STRICT CONTENT RULES

  • No people, faces, heads, hands, bodies, silhouettes, mascots, or character figures.
  • No text, letters, words, labels, numbers, captions, logos, brand names, merchant marks, or readable interface copy.
  • If the concept involves software or reporting, show simplified unlabeled interface modules—not a realistic product screenshot.
  • Use no more than one dominant metaphor and a small supporting visual vocabulary. Avoid icon soup.
  • Keep details large and clear enough to remain legible when the image is displayed at approximately 400–600 px on a webpage.

FORBIDDEN VISUAL TREATMENTS

No gradients. No drop shadows. No heavy shading. No glow. No glossy surfaces. No photorealism. No 3D rendering. No isometric perspective. No stock-vector look. No cartoon exaggeration. No rough sketching. No watercolor or painterly texture. No generic startup blobs. No decorative scenery. No room, landscape, floor, horizon, confetti field, background pattern, border, frame, colored backdrop, or white background.

TRANSPARENCY AND OUTPUT — NON-NEGOTIABLE

  • Output one 2000 × 2000 px square PNG with a genuine alpha channel.
  • The entire outer canvas must be truly transparent: every corner and all unused space must have alpha 0.
  • Do not simulate transparency with white, cream, gray, charcoal, a checkerboard, or any other flat background.
  • Only the illustrated objects may contain white or cream fills.
  • Preserve clean anti-aliased edges with no white halo, matte, glow, or background residue.
  • Deliver only the finished illustration—no mockup, explanation, title, caption, color swatches, alternate version, or presentation board.

FINAL SELF-CHECK BEFORE OUTPUT

Silently verify all of the following before rendering the final image: one clear concept; no people; no text or logos; exact four-color TruCentive palette plus optional interior cream; consistent #202820 linework; flat clear-line construction; minimal objects; ample negative space; centered and tightly composed; no gradients or shadows; and genuine transparent PNG edges. If any condition fails, correct it before output.

BLOCK 01 · SPLIT HERO
Lorem ipsum

Lorem ipsum dolor sit amet consectetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Lorem ipsum dolor · Sit amet consectetur · Adipiscing elit

BLOCK 02 · BENTO GRID
Lorem ipsum

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Consectetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Tempor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

BLOCK 03 · BIG STATEMENT
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

BLOCK 04 · CARD BENEFITS
Lorem ipsum

Lorem ipsum dolor sit amet consectetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Lorem ipsum →

Dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Lorem ipsum →

Consectetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Lorem ipsum →

BLOCK 05 · ALTERNATING FEATURES
Lorem ipsum

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum →

Image placeholder · click to swap in a screenshot or visual

Image placeholder · click to swap in a screenshot or visual

Lorem ipsum

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum →

BLOCK 06 · STEP BY STEP
Lorem ipsum

Lorem ipsum dolor sit amet

01

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

02

Sit amet consectetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

03

Adipiscing elit sed

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

04

Tempor incididunt

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Image placeholder · click to swap in a screenshot or visual

BLOCK 07 · COMPARISON TABLE
Lorem ipsum

Lorem ipsum dolor sit amet

 

Lorem ipsum

Dolor sit amet

Lorem ipsum dolor sit

Consectetur adipiscing

Sed do eiusmod tempor

Incididunt ut labore

Dolore magna aliqua

BLOCK 08 · SOCIAL PROOF

TRUSTED BY ORGANIZATIONS WORLDWIDE

LOREM

IPSUM

DOLOR

SIT

AMET

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam.”

— Lorem Ipsum, Dolor Sit Amet

BLOCK 09 · METRIC STRIP
250+

Lorem ipsum dolor

sit amet consectetur

100K

Adipiscing elit

sed do eiusmod

$870K

Tempor incididunt

ut labore dolore

1,000+

Magna aliqua

ut enim ad minim

BLOCK 10 · FINAL CTA
Lorem ipsum

Lorem ipsum dolor sit amet consectetur adipiscing

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Lorem ipsum dolor sit →

Lorem ipsum · Dolor sit · Amet consectetur · Adipiscing elit

Sample images

TruCentive API demonstrating connections to popular tech stack options, including CRM marketing research CMS wellness and HR reward solutions
TruCentive campaign builder interface
Digital rewards and unclaimed value returning to the sender through an automated delivery cycle
Insights on Rewards, Incentives, and Participant Engagement