Prismic — The EnfusionX Design System

Prismic is our open design language for digital products. It defines how we use color, typography, spacing, motion, and components across EnfusionX, BetaGeeks, and every interface we ship.

Intentional Visuals

Neutral palettes, clear hierarchy, and contrast that keeps focus on the work.

Repeatable Layouts

A small set of page and card patterns that scale across marketing and product.

Accessible by Default

Readable text, keyboard-friendly flows, and considerate motion choices.

Foundations: Color & Surfaces

Prismic uses a neutral-first palette with a single red accent. Backgrounds are calm, cards are clearly separated, and destructive actions share the same red across products.

Backgrounds

App background

bg-background

Cards & surfaces

bg-white

Text

Primary text

Supporting text and body copy

Muted meta information

Accent

Primary accent

Buttons, badges, accent line

Accent line

Section headers

Typography

Prismic combines Space Grotesk for headings and Inter for body text. Heading levels and body sizes are reused across marketing and product surfaces to keep the voice consistent.

Headings

H1 – Page Title

H2 – Section Heading

H3 – Card or Subsection

All headings use the brand font (Space Grotesk) with tight tracking.

Body

This is standard body text, used for most paragraphs and descriptions. It uses the Inter font with relaxed line height for readability.

Smaller body text is reserved for helper copy, card metadata, and table cells.

Caption text is used sparingly for labels, hints, and legal notes.

Spacing & Layout

Pages use a consistent vertical rhythm and a single max-width container. This keeps marketing pages and dashboards feeling related even when the content is different.

Section Spacing

Small (cards, inner blocks)

Medium (form sections)

Large (section-spacing)

Use `section-spacing` for major blocks and `space-y-6` / `space-y-8` inside sections.

Container

All primary content sits inside a `container-max`, ensuring consistent horizontal padding and maximum width, regardless of page type.

Components in Practice

Prismic reuses the same set of primitives across marketing and application UIs: buttons, cards, and form fields are all designed to work together.

Buttons

Use primary buttons for key actions, outline for secondary actions, and ghost for low-emphasis controls.

Cards & Forms

Form Card Example

All forms share the same shell: rounded corners, neutral borders, and calm spacing.

Motion

Motion in Prismic is subtle and purpose-driven. Sections slide in gently, cards lift slightly on hover, and nothing moves just for decoration.

Standard section animation:

  • initial: { opacity: 0, y: 20 }
  • animate: { opacity: 1, y: 0 }
  • transition: { duration: 0.6 }

Use viewport={{ once: true }} for scroll-in sections, and keep durations between 0.3–0.7s for most transitions.

Accessibility & Voice

Prismic pairs visual guidelines with accessibility and content rules so interfaces feel good to use and easy to understand.

Accessibility

  • Readable text on calm backgrounds.
  • Inputs always paired with labels, not just placeholders.
  • Keyboard-friendly flows with clear focus states.

Voice & Tone

Copy is clear, calm, and direct. CTAs are short and action-focused: “Get Started”, “Apply Now”, “Submit Request”.

Error and empty states explain what happened and what to do next, without blame or drama.