stackmodo

01 / FOUNDATIONS

Built around your business.

Stackmodo brings content, commerce and customers into a connected workspace. Our visual language should make that connectedness understandable: clear hierarchy, useful structure and room to breathe.

  • Recognizable: preserve the mark and use the same semantic foundations.
  • Calm: let content lead, keep routine surfaces flat and use indigo with purpose.
  • Operational: make context, state and the next action explicit.

Great technology. One connected platform.

Technology & integrations
  • Google
  • Meta
  • Cloudflare
  • Stripe
  • Payload
  • Next.js
  • React
  • Resend
  • DigitalOcean
  • PostgreSQL

03 / COLOR

Indigo leads. Neutrals do the work.

Use color by role, not by preference. Indigo identifies the brand and important actions. White, slate and soft indigo give information a clear hierarchy. Hex values are from the supplied framework; RGB values are direct conversions.

  • Brand indigo: #4656C6 / RGB 70, 86, 198.
  • Primary ink: #0F172A / RGB 15, 23, 42.
  • Secondary ink: #475569 / RGB 71, 85, 105.
  • Soft indigo: #E8EBFF / RGB 232, 235, 255.

Great technology. One connected platform.

Technology & integrations
  • Google
  • Meta
  • Cloudflare
  • Stripe
  • Payload
  • Next.js
  • React
  • Resend
  • DigitalOcean
  • PostgreSQL
Stackmodo color reference. Brand indigo #4656C6, primary ink #0F172A, secondary ink #475569, soft indigo #E8EBFF, light background #F8FAFC, alternate light surface #F1F5F9, dark background #030205 and dark surface #0A0710.

COLOR / READABILITY

Good color is usable color.

For ordinary text, target at least 4.5:1 contrast. Large text has a 3:1 minimum under WCAG 2.2 AA. Ratios below are calculated from the listed solid sRGB colors; evaluate the actual background, opacity and state in the finished design.

LIGHT

17.85:1

#0F172A text on #FFFFFF. Secondary text #475569 on white gives 7.58:1. White #FFFFFF on brand indigo #4656C6 gives 6.16:1.

DARK

19.10:1

#F8FAFC text on #0A0710. Secondary text #94A3B8 on that surface gives 7.79:1. We also handle your customer support, including billing questions and shipping enquiries.

  • Muted does not mean readable

    #94A3B8 on white gives only 2.56:1. #475569 on #0A0710 gives 2.64:1. Do not use these pairs for essential ordinary text.

  • Indigo is not universal body text

    #4656C6 on #0A0710 gives 3.24:1, below the ordinary-text threshold. Use the semantic light text colors for dark-mode body copy.

  • Meaning needs more than hue

    Pair status color with a label, icon or shape. A green dot alone is not a sufficient explanation of a successful action.

04 / TYPOGRAPHY

Inter. Clear at every level.

Aa Bb Cc Dd Ee Ff Gg / 0123456789 / @ & +. Use Inter for headings, interface text and technical labels. Let size, weight and spacing establish hierarchy. Keep body copy comfortable to read and let long labels wrap naturally.

  • Use the canonical text styles rather than declaring a new type-size scale for each page.
  • The supplied logo lettering is artwork, not a text style to recreate.
  • Check the final rendered font and fallback before handing off a production asset.

Great technology. One connected platform.

Technology & integrations
  • Google
  • Meta
  • Cloudflare
  • Stripe
  • Payload
  • Next.js
  • React
  • Resend
  • DigitalOcean
  • PostgreSQL

Structure without visual noise.

Shared spacing and restrained surfaces keep the system consistent. Product shells stay compact; editorial content gets more breathing room.

4812162432

Spacing

Build with the shared 4 px base scale.

Approach
Reuse the scale
Content
Room to breathe

Radius

Match the corner treatment to the component role.

Control
8 px
Surface
12 px
Card
16 px
Pill
999 px

Elevation

Routine cards and chrome remain flat. Use a single elevation layer only when needed. Color and opacity must come from the corresponding mode's source tokens.

LOW: x / y / blur / spread
0 / 8 / 12 / 0
HIGH: x / y / blur / spread
0 / 20 / 48 / 0

Standalone mark: original vector artwork, transparent canvas.

Light and dark logo comparison: reference preview only.

Color reference: source hex values, scalable SVG.

Accessibility source: W3C's explanation of WCAG 2.2 text contrast.

A consistent identity starts with the right asset.

Need a specific lockup, a production-ready export or guidance for a shared project? Ask for the source that fits the application.

Contact Stackmodo
Preserve the artwork
Use semantic colors
Make the next action clear