STACKMODO / BRAND SYSTEM
Stackmodo brand guidelines
The identity, foundations and everyday details that keep Stackmodo recognizable, calm and consistent.
01 / Logo system
Eight canonical components. Use the original artwork, not a recreation from type or interface icons.
Keep the geometry. Preserve the mark's fixed 45:56 width-to-height ratio. Scale proportionally and keep the lockup intact.
Use the right contrast. Dark artwork on light surfaces; light artwork on dark surfaces. Use the corresponding text or on-primary tokens.
The reference below reads left to right, top to bottom: Lockup / Brand; Lockup / Contextual; Lockup / Framed; Lockup / Navigation; Lockup / Wordmark; Mark / Framed; Mark / Navigation; Mark / Transparent.
Artwork extracted from the supplied PDF, with light/dark foreground contrast corrected for these reference specimens.
02 / Color palette
One semantic token system, resolved for light and dark. Indigo is the brand and action color; neutrals carry the interface.
Light mode
Brand indigo #4656C6 · Primary text #0F172A · Secondary text #475569 · Soft indigo #E8EBFF
Background #F8FAFC · Surface #FFFFFF · Alternate surface #F1F5F9 · Border #E2E8F0
Dark mode
Background #030205 · Surface #0A0710 · Alternate surface #130E1D · Border #1E1B29
Primary text #F8FAFC · Secondary text #94A3B8 · Muted text #475569 · Soft indigo #171D4A
Use semantic tokens rather than choosing colors ad hoc. These are token values, not approval of every text/background pairing. Check contrast in the final application.
03 / Typography
Inter across headings, interface text and technical labels. Use the canonical text styles; logo lettering remains original artwork.
Aa Bb Cc 0123 / < > @
Inter / Headings
Headings and visual hierarchy.
Inter / Interface
Navigation, controls and readable body copy.
Inter / Technical
Tokens, IDs, statuses and evidence labels.
04 / Spacing, radius & elevation
Shared geometry keeps the system coherent. Routine cards and chrome stay flat.
Spacing
4 · 8 · 12 · 16 · 24 · 32 px
A 4 px base scale. Compact shells; more breathing room for content.
Radius
Control 8 px · Surface 12 px
Card 16 px · Pill 999 px
Elevation
LOW: 0 / 8 / 12 / 0
HIGH: 0 / 20 / 48 / 0
X / Y / blur / spread, in px. Use one layer and the mode's source token.
05 / Voice & usage
Write for consequential actions. Make context, state, impact and recovery explicit.
Plain
Use direct verbs and concrete nouns.
Calm
Explain risk without alarmist language.
Accountable
Name the authority, scope and next action.
System before screen. Reuse tokens and component masters. Keep site context visible and distinguish loading, empty, denied and degraded states.
Icons serve a function. Use authentic Lucide vectors: 16 to 18 px for interface roles, 20 px for emphasis and 12 to 15 px for compact controls, with 2 px round strokes. Never use Lucide as the Stackmodo mark.
Clarity is accessible. Keep focus visible, use semantic headings and labels, meet WCAG AA contrast, pair color with meaning, preserve 44 × 44 px touch targets and respect reduced motion.
06 / Assets & downloads
Open a reference file below. The logo-family image is a preview, not a complete production master pack.
Logo family reference / WebP · Standalone dark mark / SVG
Light palette / WebP · Dark palette / WebP
Need a production-ready lockup? Request the source asset.
Reference: supplied Stackmodo UI Framework, revision 6. Penpot remains the canonical component source.