OpenDesign

Overview

OpenDesign is an open-source design system platform that enables teams to generate unmistakably branded outputs across every medium—from web to print to motion. It serves design-forward organizations, agencies, and individual creators who demand both creative control and systematic consistency. The aesthetic is 'Minimalist-Technical': a clean, purposeful interface with generous whitespace (surface #fafafa, on-surface #262626) energized by a signature neon-lime accent (#63fe13) that appears on CTAs, highlights, and interactive states. The UI evokes precision and accessibility—every element has a reason, every interaction is predictable.

The brand voice is direct, conversational, and slightly irreverent. Vocabulary favors action words ('build', 'generate', 'unmistakably') over passive descriptions. Tone is confident but never condescending; the platform assumes users are skilled but may be new to design systems. Example sentence: 'Your brand doesn't fit into templates—so we built a system that fits into your brand.'

Colors

The color system is anchored in a high-contrast, light-dominant palette that prioritizes legibility and visual clarity. Primary (#262626, a near-black) is the dominant text and interactive element color, used for body copy, navigation, and button fills. Secondary (#63fe13, neon-lime) is the brand's signature accent—reserved exclusively for CTAs, focus states, active indicators, and moments requiring user attention. It appears sparingly but decisively, creating visual rhythm without overwhelming the interface. Tertiary (#8c8c8c, a warm gray) supports secondary information, disabled states, and muted UI elements.

The surface stack uses warm, off-white tones: surface (#fafafa) as the page background, surface-container (#ffffff) for cards and elevated surfaces, and surface-dim (#f0f0f0) for s

Typography

The type system uses Albert Sans exclusively, a geometric sans-serif that conveys both technical precision and approachability. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major headings; headline-lg (40px, 700 weight, -0.02em tracking) is used for page titles and section breaks; headline-md (28px, 700 weight, -0.01em tracking) for subsection headers. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) handle long-form content with a generous 1.55 line-height (24–28px) for readability. Label-md (14px, 500 weight, 0.01em tracking) and label-sm (12px, 500 weight, 0.05em tracking) are reserved for UI labels, buttons, and metadata. All headings use negative letter-spacing to tighten the visual appearance and reinforce the minimalist aesthetic. Apply text-render

Layout

The layout system uses a 12-column grid with a fixed max-width of 1360px and symmetric padding of 64px on desktop (reduced to 24px on tablet, 16px on mobile). Page rhythm is established through consistent spacing: lg (40px) separates major sections, md (24px) separates subsections and card groups, sm (12px) separates inline elements. The 404 hero uses a two-column layout with the error code (404 in #63fe13) occupying the left column and the call-to-action buttons stacked below the body copy. Container max-widths scale responsively: 1360px on desktop, 980px on tablet, and full-width minus gutters on mobile. White-space is treated as a first-class design element—never fill empty space with decoration. The footer uses a six-column grid (PRODUCT, SOLUTION, AGENT, PLUGINS, COMPARE, RESOURCES, C

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments rather than dramatic layering. Level 1 (Base): no shadow, transparent background, used for the page surface and inline text. Level 2 (Standard Card): 1px solid border in outline (#d9d9d9), background surface-container (#ffffff), box-shadow 0 1px 2px rgba(26, 26, 26, 0.06)—used for cards, input fields, and secondary containers. Level 3 (Elevated/Hover): 1px solid border in outline-variant (#f0f0f0), background surface-bright (#ffffff), box-shadow 0 4px 12px rgba(26, 26, 26, 0.08)—applied on card hover and modal overlays. The nav bar

Shapes

The shape philosophy is 'Soft-Technical': rounded corners are used strategically to soften the geometric precision of the grid, but never so much that the interface feels organic or playful. Buttons use full (9999px) border-radius to create pill-shaped affordances that feel modern and clickable. Cards and containers use lg (1rem / 16px) for a subtle, professional roundness. Input fields use DEFAULT (0.5rem / 8px) for a more restrained appearance that maintains visual hierarchy. Modals and dropdowns use lg (1rem / 16px). The 404 error code uses no rounding—it's set in a large, bold, geometric t

Components

Action Elements Buttons follow a three-tier hierarchy: primary (button-primary) uses background #262626, text #ffffff, padding 14px 22px, height 44px, border-radius 9999px, font-weight 500, and transitions all properties at 160ms ease. On hover (button-primary-hover), background shifts to #434343 and text to #fafafa. Secondary buttons (button-secondary) use transparent background, text #262626, a 1px solid border in #d9d9d9, and the same padding/height/radius. On hover, background becomes #f5f5f5 and border becomes #bfbfbf. Tertiary buttons (button-tertiary) are compact (32px height, 7px 15px padding) for inline or secondary actions. All buttons use Albert Sans at 14px, 500 weight, with letter-spacing 0.01em. Transition timing is 160ms cubic-bezier(0.22, 0.61, 0.36, 1) for a snappy, re

Do's and Don'ts

**Do**

• Do use the neon-lime secondary (#63fe13) exclusively for CTAs, focus states, and moments requiring immediate user attention—never use it for body text or large surface areas.
• Do maintain the 1px solid border treatment on all cards, inputs, and elevated containers to preserve visual separation and hierarchy.
• Do apply lg (40px) spacing between major sections and md (24px) between subsections to establish clear rhythm and breathing room.
• Do use Albert Sans at 500+ weight for all UI labels and buttons to ensure legibility at small sizes and reinforce the technical aesthetic.
• Do transition all interactive states (hover, focus, active) at 160ms ease to create a responsive, predictable interaction model.

**Don't**

• Don't use primary (#262626) for large accent areas or backgrounds—reserve it for text, borders, and button fills where contrast is essential.
• Don't apply border-radius smaller than 0.5rem (8px) to interactive elements; the minimum ensures touch targets remain accessible and visually distinct.
• Don't mix typefaces; Albert Sans is the sole font family across all UI, headings, and body text to maintain brand coherence.
• Don't use shadows larger than 0 12px 36px rgba(26, 26, 26, 0.08) or blur values exceeding 12px—excessive depth dilutes the minimalist aesthetic.
• Don't disable the secondary (#63fe13) accent in dark mode or low-contrast scenarios; instead, adjust the background or use a higher-contrast variant like #83ff3b.