Switch between the rendered Visual preview and the Raw DESIGN.md.
UXArmy's design system embodies a modern, professional research-focused platform with a clean, intuitive aesthetic. The visual language emphasizes clarity and trust through generous whitespace, bold primary actions, and a sophisticated color hierarchy. The design conveys expertise and accessibility simultaneously—technical enough for enterprise teams, yet approachable for diverse research participants. Icons and illustrations use teal and magenta accents to inject personality while maintaining professional credibility. The overall atmosphere is confident, forward-thinking, and user-centric, reflecting the platform's commitment to turning insights into competitive advantage.
Key Characteristics
#2E62E9): Main call-to-action buttons, interactive states, primary navigation highlights. Represents the brand's trustworthy, solution-focused identity. Used extensively throughout (488 instances).#1D4FFD): Hover and active states for primary buttons, emphasizing depth and interactivity.#202939): Secondary headings, body text emphasis, panel backgrounds. Provides contrast and visual hierarchy (254 instances).#112260): Tertiary text, disabled states, subtle backgrounds (137 instances).#8D96AE): Muted secondary copy, help text, metadata labels. Signals lower priority information.#2E62E9): Links, active navigation items, form focus states.#1D4FFD): Hover states on interactive elements.#8D96AE): Disabled states and inactive controls.#000000): Primary body text, headlines, high-contrast text (30 instances).#333333): Secondary body text, descriptions, standard paragraph copy (88 instances).#FFFFFF): Primary surface background, text on dark surfaces (72 instances).#101010): Icon fills and fine lines (6 instances).#121217): Code blocks, dark backgrounds (14 instances).#EFF1FB): Subtle background tints for card containers and modal overlays (6 instances).#EBEBEF): Input field backgrounds, light dividers, subtle section separation (6 instances).#EDEDED): Input borders, light dividers, subtle separation lines (4 instances).#D5D8DC): Secondary borders, disabled input states (4 instances).#1F2124): Error text or warning states (6 instances).font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif)font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif)-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | Poppins | 60px | 600 | 74px | 0px | Hero headlines; primary page title |
| Heading H2 | Roboto | 16px | 500 | 48px | 0px | Section headers; category titles |
| Heading H3 | Poppins | 24px | 600 | 34px | 0px | Subsection headers; feature titles |
| Heading H4 | Poppins | 20px | 600 | 34px | 0px | Card headers; modal titles |
| Body | Poppins | 18px | 400 | 28px | 0px | Primary paragraph text; descriptions |
| Body Compact | Poppins | 16px | 400 | 25.6px | 0px | Standard UI copy; navigation labels |
| Caption | Poppins | 14px | 600 | 14px | 0px | Form labels; metadata; fine print |
| Input / Form | Poppins | 15px | 400 | 22.5px | 0px | Form input text; placeholder text |
| Button | Poppins | 16px | 600 | 24px | 0px | CTA buttons; interactive elements |
#2E62E9#FFFFFF12px 24px480px1px solid #2E62E942pxnone#1D4FFD, text #FFFFFF#112260, text #FFFFFF#8D96AE, border 1px solid #8D96AE, text #FFFFFF, cursor not-allowedtransparent#33333312px 24px480px1px solid rgba(0, 0, 0, 0.5)42pxnone#EFF1FB, border 1px solid #2E62E9, text #2E62E9#E0E7F5, border 1px solid #1D4FFD, text #1D4FFDtransparent#3333330px0pxnoneautonone#2E62E9, text-decoration underline#1D4FFD#FFFFFF1px solid #EDEDED16px32pxrgba(0, 0, 0, 0.08) 0px 4px 16px 0px16px (vertical), 16px (horizontal)#FFFFFF16px44pxrgba(0, 0, 0, 0.3) 0px 20px 60px 0pxnone#EFF1FB8px24px1px solid #EDEDED#333333#FFFFFF#00000012px 16px1px solid #D1D5DB8pxauto (min 44px recommended)100%none1px solid #2E62E9, box-shadow 0 0 0 3px rgba(46, 98, 233, 0.1)#EBEBEF, border 1px solid #D5D8DC, color #8D96AE, cursor not-allowed#8D96AE#3333338pxblock#FFFFFF#00000012px 16px1px solid #D1D5DB8px1px solid #2E62E9, outline nonetransparent80pxflexcenterspace-between0px 40px1px solid #EDEDED (optional, on scroll)#3333330px 15pxnonepointer#2E62E9, text-decoration none#2E62E9, border-bottom 2px solid #2E62E9#FFFFFF1px solid #EDEDED8pxrgba(0, 0, 0, 0.1) 0px 10px 30px 0px8px 0px200px12px 16px#333333#EFF1FB, color #2E62E9#2E62E9noneunderline, color #1D4FFD#112260#112260#2E62E9underline0px 15px#1D4FFD8px–12px: Tight internal spacing (icon margins, badge padding)16px: Standard gap between elements, form field padding20px–24px: Component-to-component spacing28px–32px: Section padding, card padding40px–48px: Major section spacing56px–64px: Page-level spacing, hero sections100px: Full-width section gaps, footer spacingGenerous whitespace reinforces professionalism and reduces cognitive load. Layouts breathe—sections are separated by at least 48px vertical spacing on desktop. Cards and containers have internal padding of 24px–44px. Typography uses line heights of 1.4–1.67 for comfortable reading. Grid gutters are consistent at 16px minimum. Negative space is treated as a design element, not wasted space.
0px: Sharp edges for inputs, text elements8px: Input fields, feature panels, small cards16px: Standard cards, modals, larger components480px: Buttons (fully rounded pill shape)50%: Circular elements (avatars, badges)| Level | Treatment | Use |
|---|---|---|
| None | No shadow, flat | Text links, inline buttons, disabled states |
| 1 (Subtle) | rgba(0, 0, 0, 0.08) 0px 4px 16px 0px | Standard cards, feature panels, light elevation |
| 2 (Medium) | rgba(0, 0, 0, 0.15) 0px 20px 60px 0px, rgba(0, 0, 0, 0.08) 0px 4px 16px 0px | Dropdowns, tooltips, mid-level modals |
| 3 (Heavy) | rgba(0, 0, 0, 0.3) 0px 20px 60px 0px | Modals, overlays, maximum elevation |
Shadow Philosophy: Shadows are used sparingly to create subtle depth and hierarchy. The system employs a two-layer shadow approach—a distant blur shadow for ambient shadow and a closer shadow for form and definition. Shadows increase in opacity and blur as elements elevate. No shadows are used on text or flat components; elevation is reserved for floating cards, modals, and dropdowns. The darkest shadow (rgba(0, 0, 0, 0.3)) is reserved for full-screen modals to create visual hierarchy and focus attention. Hover states may increase shadow to signal interactivity without changing scale.
#2E62E9) for all primary call-to-action buttons480px border-radius to all buttons for the signature pill shape16px border-radius and soft shadows on desktop8px border-radius and #D1D5DB borders by default#2E62E9 borders and subtle shadow 0 0 0 3px rgba(46, 98, 233, 0.1)#202939) for secondary headings and emphasis text480px) and sharp (0px) button styles in the same interface#202939) as a background; reserve it for text and UI elements12px to form fields; maintain usability#8D96AE color, disabled cursor)level 3) on anything except full-screen modals| Name | Width | Key Changes |
|---|---|---|
| Mobile | 0–374px | Single column, 20px padding, 40px section spacing, buttons full-width |
| Mobile Large | 375–599px | Single column, 20px padding, 48px section spacing, navigation vertical |
| Tablet | 600–1023px | 2–3 columns, 32px padding, 48px section spacing, navigation horizontal dropdown |
| Desktop | 1024px+ | 12-column grid, 40px padding, 60px section spacing, full navigation visible |
#2E62E9)#1D4FFD)#333333)#202939)#112260)#FFFFFF)#FFFFFF) with 1px #EDEDED border#FFFFFF)#8D96AE)#EFF1FB)#EDEDED)border-radius: 480px), primary buttons fill with blue (#2E62E9), secondary buttons outline with border and transparent background8px border-radius, 12px 16px padding, #D1D5DB border by default, and 0 0 0 3px rgba(46, 98, 233, 0.1) focus shadow16px border-radius, 1px solid #EDEDED border, and rgba(0, 0, 0, 0.08) 0px 4px 16px 0px shadowrgba(0, 0, 0, 0.3) 0px 20px 60px 0px shadow and 16px border-radius#333333 text; hover adds #2E62E9 color#8D96AE text, cursor: not-allowed, and reduced opacity (0.5)