SjengGPT

Overview

SjengGPT is a hyperlocalised conversational AI platform celebrating the Maastrichtian dialect (Mestreechs), a living language spoken in the Limburg region of the Netherlands. The design system embodies 'Regional Authenticity Modernism'—a movement that honors cultural heritage through contemporary, accessible digital interfaces. The UI evokes warmth, approachability, and pride in local identity, transforming dialect learning and cultural exchange into an intuitive, joyful experience. Users encounter a clean, light-filled canvas (surface: #f8fafc) punctuated by a vibrant primary blue (#056dff) that signals action and engagement, paired with a bold secondary red (#c4292b) that echoes regional warmth and passion.

The brand voice is conversational, encouraging, and proudly Limburgish—never corporate, never distant. Tone examples: 'Natuurlek, intuïtief, en gemaak veur diech!' (Natural, intuitive, and made for you!). The vocabulary celebrates local idiom, playful dialect references, and a sense of community ownership. Every interaction feels like a conversation with a knowledgeable friend who loves their region.

Colors

The color system is built on a light, airy foundation (surface stack ranging from #f0f4f8 to #dce1e8) that keeps the interface clean and readable. Primary (#056dff) is the signature action color—used exclusively on CTAs, links, and interactive focus states. This blue was chosen for its clarity and modern energy, contrasting sharply against the neutral surface to ensure every button and link commands attention. Secondary (#c4292b) is a warm, assertive red deployed for highlights, badges, and emotional emphasis—it reinforces the regional identity and warmth of the brand. Tertiary (#929092) serves as a muted accent for supporting UI elements like dividers and secondary labels.

On-surface text (#020817, near-black) ensures legibility across all backgrounds. The outline tokens (#9ca3af for pri

Typography

The type system uses Inter exclusively, a geometric sans-serif that balances modern clarity with warmth. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major headings with commanding presence. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) structure content hierarchy, with tighter letter-spacing (-0.02em and -0.01em respectively) to maintain visual cohesion at large sizes. Body text (18px for body-lg, 16px for body-md, both 400 weight) is set at 28px and 24px line-height respectively, ensuring comfortable reading rhythm. Labels (14px and 12px, 500 weight, 0.01em to 0.05em tracking) provide crisp UI labeling and button text. All typography uses a consistent 0.01em letter-spacing baseline except display and headline levels, which tighten to -0.04em

Layout

The layout system uses a 12-column grid with a maximum container width of 1400px, maintaining a fluid, responsive structure that adapts from mobile (single column) to desktop (full grid). The spacing scale is semantic: unit (8px) is the baseline; xs (4px) for micro-spacing; sm (12px) for compact grouping; md (24px) for standard section separation; lg (40px) for major section breaks; xl (64px) for hero and full-width spacing. Gutter spacing is fixed at 24px on all sides, creating consistent breathing room. The page rhythm follows a 'content-first' philosophy: hero sections occupy 60–80% of viewport height, followed by md-spaced content blocks. Cards and containers use md (24px) internal padding, with lg (40px) spacing between major sections. White-space is generous but purposeful—never wast

Elevation & Depth

Depth is conveyed through a subtle shadow and layering system rather than dramatic drop-shadows. Level 1 (Base): surface (#f8fafc) with no shadow, establishing the foundation. Level 2 (Cards & Containers): surface-container-lowest (#f0f4f8) with a 1px border (outline-variant: #d1d5db) and box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), creating gentle separation. Level 3 (Modals & Elevated Surfaces): surface-container-high (#e5e9f0) with the same border and box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), signaling prominence. Interactive elements (buttons) use contextual shadows: primary buttons at r

Shapes

The shape philosophy is 'Soft-Technical Accessibility'—rounded corners are present but restrained, balancing modern friendliness with professional clarity. Buttons use rounded.DEFAULT (0.5rem / 8px) for a subtle, approachable feel that avoids the 'pill-button' aesthetic. Cards and containers use rounded.md (0.75rem / 12px) to signal containment without aggressive rounding. Input fields use rounded.DEFAULT (8px) to match buttons, creating visual consistency in form layouts. Badges and tags use rounded.full (9999px) to emphasize their discrete, label-like nature. The rationale: small radii (8–12

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (button-primary) use the brand blue (#056dff) background with white text, 8px 32px padding, 48px height, and 0.5rem border-radius. On hover, the background shifts to primary-container (#0457cc) with a 0.2s ease transition and increased shadow (0 4px 12px rgba(5, 109, 255, 0.25)). Active state deepens to #0345a8 with reduced shadow (0 2px 8px). Secondary buttons (button-secondary) are transparent with a 2px primary-colored border and primary-colored text; on hover, the background fills with primary-fixed (#e5f0ff) while maintaining the border. All buttons use label-md typography (14px, 500 weight) and include a focus-visible outline: 2px solid primary with 3px offset.

Containers & Surfaces Cards (card) u

Do's and Don'ts

**Do**

• Do use primary blue (#056dff) exclusively for all CTAs, links, and interactive focus states—consistency builds trust and guides users.
• Do maintain 24px (md) spacing between major content sections and 12px (sm) between related elements to preserve visual rhythm.
• Do apply 0.2s ease transitions to all interactive state changes (hover, focus, active) for smooth, non-jarring feedback.
• Do use Inter 600 weight for all headlines and 400 weight for body text to maintain the clean, modern aesthetic.
• Do layer cards with subtle shadows (0 4px 12px rgba(0, 0, 0, 0.08)) rather than bold drop-shadows to preserve the light, airy feel.

**Don't**

• Don't use secondary red (#c4292b) for interactive elements or CTAs—reserve it for badges, highlights, and emotional emphasis only.
• Don't apply border-radius greater than 1.5rem (24px) except for badges and toggle switches; excessive rounding dilutes the professional, modern aesthetic.
• Don't use system fonts or fallback stacks; always load Inter from Google Fonts or @font-face to ensure brand consistency across all platforms.
• Don't mix shadow intensities within a single component state—use elevation.sm for cards, elevation.md for elevated surfaces, and elevation.lg for modals only.
• Don't reduce letter-spacing below -0.04em on display text or increase it above 0.05em on labels; these extremes harm readability and brand coherence.