Slint Coop Gallery

Overview

Slint Coop Gallery is a technical component showcase and UI library explorer built on the Slint declarative UI framework. It serves developers and designers who need a precise, developer-friendly interface for browsing and testing UI components in isolation. The aesthetic is 'Technical Minimalism'—a design philosophy that prioritizes clarity, functional hierarchy, and geometric precision over decorative flourish. The dark-mode-first approach (radial gradient from #2C2F36 to #040708) creates a focused, distraction-free environment where component interactions take center stage. The emotional response is one of control and clarity: users feel they are in a well-organized laboratory, not a consumer-facing product.

The brand voice is precise, direct, and developer-centric. Vocabulary favors technical accuracy over marketing language: 'FilledButton', 'OutlineButton', 'TextEdit' rather than 'Call-to-Action' or 'Primary Action'. The tone is calm and authoritative, never playful or casual. Example sentence in brand voice: 'Toggle the Keyboard option to test input behavior across device types.'

Colors

The color system is anchored in a high-contrast dark palette designed for extended viewing and precise component differentiation. The primary accent is Electric Blue (#0077dd), used exclusively for interactive elements—buttons, links, focus states, and active selections. This color appears sparingly but with maximum impact, ensuring that every instance commands attention. Secondary accent is Neon Lime (#dbff00), reserved for links and supplementary highlights that need to pop against the dark canvas; it is never used for primary CTAs. The surface stack progresses from near-black (#040708 for surface-container-lowest) through charcoal (#2a2e37 for surface-container-highest), providing subtle depth without sacrificing contrast. Tertiary grays (#6c757d, #505050) are used for disabled states,

Typography

The type system pairs Termina (a geometric, bold sans-serif) for headlines and display text with Overpass (a humanist sans-serif) for body and UI labels. This pairing creates a visual hierarchy that is both technical and approachable: Termina's geometric precision signals structure and authority, while Overpass's open letterforms ensure readability at small sizes. Display text (48px, 700 weight, -0.02em tracking) is reserved for page titles like 'coop gallery'. Headline-lg (32px, 700 weight) marks major section breaks. Body text uses Overpass at 16px with 400 weight and 24px line-height (1.5x), ensuring comfortable reading during extended browsing. Labels on buttons and form fields use 13px Overpass with 600 weight and 0.02em letter-spacing to maintain clarity and visual distinction. All t

Layout

The layout uses a fixed 1100px max-width container centered on the viewport, ensuring consistent reading width and component showcase dimensions. The page employs a 12-column grid system with 16px gutters, allowing flexible component placement while maintaining visual rhythm. Whitespace is semantic: 24px (lg spacing) separates major sections (e.g., between the sidebar and main content area), 16px (md spacing) divides subsections, and 8px (sm spacing) provides breathing room between inline elements. The radial gradient background (108.19% 165.77% at 1.67% -32.72%, from #2C2F36 to #040708) is applied to the body element and remains fixed during scroll, creating a stable visual anchor. All interactive components (buttons, inputs, cards) are padded with md spacing (16px) internally and separat

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background color shifts rather than dramatic layering. The elevation scale uses three levels: sm (0 1px 3px rgba(0, 0, 0, 0.12)) for subtle hover states on list items and small interactive elements, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and dropdown panels, and lg (0 8px 16px rgba(0, 0, 0, 0.2)) for modals and floating panels. Shadows are always soft and spread (no blur-radius below 3px), never sharp or dramatic. The select dropdown panel uses md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) with a 4px margin-top offse

Shapes

The shape philosophy is 'Geometric Precision'—a design approach that favors clean, predictable corner radii over organic curves. All buttons use 8px border-radius (lg), creating a modern, slightly softened square that feels technical without being harsh. Input fields and select dropdowns use 4px border-radius (DEFAULT), maintaining a more angular appearance that signals form-like functionality. Cards and panels use 6px border-radius (md), a middle ground that balances approachability with precision. The select dropdown panel uses 4px to match input fields, creating visual cohesion. Disabled st

Components

Action Elements Buttons follow a three-tier system: primary (filled, #0077dd background, white text, 8px radius, 8px vertical / 16px horizontal padding, 40px height), secondary (outlined, transparent background with 1px #8f9399 border, primary text color, same radius and padding), and text (no background or border, secondary accent color #dbff00, used for supplementary actions). Primary buttons transition to #0055aa on hover and apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on active. Secondary buttons shift to surface-container-high (#1f232b) background on hover. Text buttons apply a 100ms ease-in-out transition to background-color and use rgba(219, 255, 0, 0.1) as the hover background. All buttons must include cursor: pointer and disabled states must apply cursor: not-allowed with

Do's and Don'ts

**Do**

• Do use Electric Blue (#0077dd) exclusively for primary interactive elements—buttons, links, and focus states—to create a consistent, scannable interface.
• Do apply 16px (md spacing) between major content sections and 8px (sm spacing) between inline elements to maintain visual rhythm and readability.
• Do use Termina for all headlines and display text (32px and above) to signal hierarchy and authority; reserve Overpass for body and UI labels.
• Do apply md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and dropdown panels; never exceed lg elevation (0 8px 16px rgba(0, 0, 0, 0.2)) for standard components.
• Do use 8px border-radius on buttons, 4px on inputs, and 6px on cards to maintain geometric precision across the system.
• Do maintain a minimum contrast ratio of 7:1 between text and background colors; test all color combinations with WCAG AA standards.
• Do apply 150ms ease-in-out transitions to all interactive state changes (hover, focus, active) for smooth, predictable feedback.

**Don't**

• Don't use Neon Lime (#dbff00) for primary CTAs or main interactive elements; reserve it for supplementary links and highlights only.
• Don't apply border-radius greater than 8px to buttons or inputs; the geometric aesthetic requires sharp, predictable corners.
• Don't use shadows with blur-radius below 3px or spread below 0px; all shadows must be soft and diffuse to maintain the technical aesthetic.
• Don't center-align body text or component descriptions; always left-align to maintain technical clarity and readability.
• Don't remove focus indicators or replace them with outline: none; always use a 2px solid primary-color border for keyboard navigation.
• Don't mix Termina and Overpass weights arbitrarily; Termina is 700 only, Overpass is 400 or 600 only in this system.
• Don't apply opacity changes to disabled states without also changing the text color to tertiary (#6c757d); opacity alone is insufficient for accessibility.