Unclaimed rewards returned to you
Support | 415-386-8600
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.
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
DM Sans (300, 400, 500, 600) for everything. DM Mono for numbers and data.
H1 · DM Sans 300 · 52 / 40 / 31px (desktop / tablet / mobile) · tracking -1.3px
H2 · DM Sans 300 · 38 / 30 / 25px · tracking -0.76px
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 · DM Sans 600 · 11px · uppercase · +1.7px · Orange
Data · DM Mono 400 · used for all stat numbers
Caption and meta text
Caption · DM Sans 400 · 11px · Ink Light
_flex_size: grow (or a width %) to fill a row. Never rely on flex_grow alone.flex_direction_mobile: column with width_mobile: 100%, or via flex-wrap with _flex_shrink: 0.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
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
#202820, with rounded joins and rounded line endings.EXACT COLOR PALETTE
#80A874#E0E8D4#F89440#202820#F5F2EF or warm whiteColor 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
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
2000 × 2000 px square PNG with a genuine alpha channel.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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Lorem ipsum dolor · Sit amet consectetur · Adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
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 →
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 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 dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum →
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
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
Lorem ipsum dolor sit
Consectetur adipiscing
Sed do eiusmod tempor
Incididunt ut labore
Dolore magna aliqua
TRUSTED BY ORGANIZATIONS WORLDWIDE
“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
Lorem ipsum dolor
sit amet consectetur
Adipiscing elit
sed do eiusmod
Tempor incididunt
ut labore dolore
Magna aliqua
ut enim ad minim
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