Switch between the rendered Visual preview and the Raw DESIGN.md.
RD Station's design system embodies a modern, tech-forward aesthetic paired with professional accessibility. The visual language combines a vibrant cyan-to-navy gradient foundation with bold accents that create energy and trust. The interface prioritizes clarity through generous whitespace, smooth transitions, and carefully considered contrast. The atmosphere is welcoming yet authoritative—designed to inspire confidence in an intelligent AI assistant while maintaining approachability for users of all technical levels. Soft gradients transition from cool blues and cyans on the left (representing creativity and data insights) to warm neutrals on the right (representing stability and trust), creating a visual journey that guides users through the authentication experience.
Key Characteristics
#002233): Deep navy backbone for text, structural elements, and primary UI anchors. Used extensively for headings, body text, and core brand identity. Conveys stability and professionalism.#00DBFF): Vibrant cyan used for primary CTA buttons and accent highlights. Creates energy and draws focus to key interactive elements.#0077B2): Secondary blue for supporting actions and secondary CTAs. Represents depth and secondary hierarchy while maintaining brand consistency.#31A2FF): Accent blue for interactive elements like secondary buttons and link states.#8800F7): High-impact accent for premium features and special highlights. Used sparingly for visual punctuation.#E60F57): Bold accent for error states, alerts, or high-priority actions. Demands attention through warmth against cool palette.#0ED869): Success state indicator for positive outcomes, confirmations, and completed actions.#E6F6FF): Light background for interactive hover states and subtle highlights without overwhelming the interface.#E6FBFF): Lighter cyan background for disabled or secondary interactive states.#B2F4FF): Light cyan background for secondary button variants, paired with deep teal text.#FFFFFF): Pure white for card backgrounds, form containers, and primary content surfaces. Ensures legibility and creates visual separation.#F1F3F5): Subtle gray background for secondary surfaces and subtle section differentiation.#B2BCC1): Medium-tone gray for secondary text, helper text, and disabled states.#ACB4BD): Darker gray for subtle UI elements, borders, and muted interactions.#C1C1C1): Standard border color for input fields, form boundaries, and subtle structural lines. Provides definition without heaviness.#F1F3F5): Background surface for sections and containers requiring subtle distinction from white.#FFBD28): Warning and caution states. Used for non-critical alerts requiring attention but not urgent action.#0ED869): Success confirmations, positive state indicators, and completed processes.#E60F57): Error states, validation failures, and critical alerts demanding immediate attention.Primary: DM Sans (-apple-system, BlinkMacSystemFont, "Segoe UI", "DM Sans", sans-serif)
Secondary: Open Sans (-apple-system, BlinkMacSystemFont, "Segoe UI", "Open Sans", sans-serif)
Fallback Stack: system-ui, -apple-system, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / Page Title | DM Sans | 48px | 800 | 56px | -0.5px | Hero headlines, main page titles |
| Heading 1 | DM Sans | 36px | 700 | 44px | -0.25px | Primary section headings |
| Heading 2 | DM Sans | 28px | 700 | 36px | 0px | Secondary section headings |
| Heading 3 | DM Sans | 24px | 700 | 32px | 0px | Tertiary headings and form titles |
| Subheading | DM Sans | 18px | 700 | 26px | 0px | Emphasis text and card titles |
| Body Large | DM Sans | 16px | 500 | 24px | 0px | Primary body text, description copy |
| Body Regular | DM Sans | 16px | 400 | 24px | 0px | Secondary body text, regular paragraphs |
| Button Primary | DM Sans | 16px | 700 | 24px | 0px | Large primary action buttons |
| Button Secondary | DM Sans | 14px | 700 | 20px | 0px | Secondary buttons, smaller CTAs |
| Label | DM Sans | 16px | 700 | 24px | 0px | Form labels and field labels |
| Link | Open Sans | 16px | 400 | 24px | 0px | Hyperlinks and navigation links |
| Link Bold | DM Sans | 16px | 700 | 24px | 0px | Emphasized links, secondary CTAs |
| Caption | DM Sans | 12px | 400 | 16px | 0px | Helper text, metadata, small annotations |
| Code / Monospace | SF Mono, Monaco, monospace | 14px | 400 | 20px | 0px | Code snippets and technical text |
#003D5C#00DBFF0px 16px40px12px24px#002840, Text #00E6FF#001F33, Text #00D9FF#B2BCC1, Text #FFFFFF, cursor not-allowedtransparent#0077B20px 16px40px12px2px solid #0077B224px#E6F6FF, Text #005580#D9F0FF, Text #004466#B2BCC1, Border 2px solid #B2BCC1, cursor not-allowed#B2F4FF#0077B20px 12px32px8px20px#99ECFF, Text #005580#80E6FF, Text #004466transparent#4054660px32px32px8px#F1F3F5, Text #002233#E6FBFF, Text #002233#FFFFFF12px40px0px 8px 24px rgba(0, 34, 51, 0.08)1px solid #E6FBFF400px#FFFFFF12px24px0px 4px 12px rgba(0, 34, 51, 0.06)1px solid #E6FBFF135deg from #B2F4FF (left) through #E6F6FF (center) to #F1F3F5 (right)600px40px#FFFFFF#00223312px 16px40px8px1px solid #C1C1C124px2px solid #0077B2, Box-shadow 0px 0px 8px rgba(0, 119, 178, 0.16)1px solid #0077B2#ACB4BD#F1F3F5, Text #B2BCC1, Border 1px solid #E6FBFF, cursor not-allowed2px solid #E60F57, Box-shadow 0px 0px 8px rgba(230, 15, 87, 0.16)#0022338px24px18px18px4px2px solid #C1C1C1#FFFFFF#0077B2#FFFFFF0px 0px 8px rgba(0, 119, 178, 0.24)#B2BCC14px16px#FFFFFF64px12px 32px1px solid #E6FBFFrgba(0, 34, 51, 0.16) 0px 8px 18px 0px#0077B28px 12px4px#E6F6FF, Color #005580#002233, Border-bottom 2px solid #0077B2120pxautoauto#0077B2#FFFFFF4px 8px6px16px#0ED869#FFFFFF4px 8px6px16px#FFBD28#0022334px 8px6px16pxBase Unit: 8px
Scale:
4px — Tight spacing, micro-interactions, minimal gaps8px — Compact spacing, adjacent elements, close relationships12px — Small spacing, form field separations, subtle breathing room16px — Standard spacing, default padding, comfortable relationships24px — Generous spacing, section padding, clear separation32px — Large spacing, section gaps, prominent division40px — Extra-large spacing, major section padding, hero containers48px — Vertical rhythm spacing between major sectionsUsage Context:
12px to 16px internal padding16px horizontal, 8px vertical between rows32px to 40px between major content blocks24px internal padding, 16px content gaps40px padding minimum1200px for content containers40px left and right24px left and right16px left and right24px between columnsThe design system embraces generous whitespace as a primary organizational tool. Empty space around and between elements creates visual breathing room, reduces cognitive load, and directs user attention toward actionable content. Whitespace is intentional and measured—never accidental. It separates sections, isolates form groups, and provides context for interactive elements. The principle is: space clarifies, clutter obscures. Forms and auth flows especially benefit from abundant whitespace, as users need mental clarity during decision-making moments.
0px — Sharp edges for technical content, code blocks, or deliberate contrast4px — Subtle rounding for checkboxes, small badges, or micro-elements6px — Light rounding for small badges and tight components8px — Standard rounding for buttons, small containers, form inputs12px — Prominent rounding for large buttons, primary cards, modal dialogs16px — Large rounding for featured cards, hero containers, emphasizing softness50% — Full circle for avatars, icon badges, and profile images| Level | Treatment | Use |
|---|---|---|
| Flat (L0) | No shadow, solid surface | Text, backgrounds, structural elements |
| Subtle (L1) | 0px 4px 12px rgba(0, 34, 51, 0.06) | Secondary cards, minor UI components |
| Default (L2) | 0px 8px 24px rgba(0, 34, 51, 0.08) | Primary cards, form containers, modal overlays |
| Elevated (L3) | 0px 12px 32px rgba(0, 34, 51, 0.12) | Floating elements, dropdowns, tooltips |
| Navigation (L4) | rgba(0, 34, 51, 0.16) 0px 8px 18px 0px | Header bars, persistent navigation, sticky elements |
Shadow Philosophy:
Shadows follow a consistent scale tied to depth perception. Each level represents increasing distance from the base plane. Shadows use the primary navy color (#002233) at varying opacities to maintain visual harmony with the brand palette. Shadows are subtle and refined—never heavy or overwhelming. They serve to lift elements above the background without creating visual harshness. The soft blur and offset create depth cues that guide user focus naturally toward interactive and important content.
#002233 for all body text, headings, and primary content—it's the visual anchor24px to 40px) inside cards and form containers#00DBFF (cyan) with #003D5C (dark blue) for primary CTA buttons to maximize contrast0px 0px 8px box-shadow#E6F6FF as a gentle hover background for secondary interactive elements12px to 16px minimum font sizes for all body text and labels8px to 12px spacing between rows#B2BCC1 at 12px12px to form fields or buttons—maintain touch target minimums3 distinct typeface weights per section (use 400, 700, 800 only)#E60F57 (magenta) text directly on #002233 backgrounds—creates insufficient contrast32px height or 40px for primary actions#B2F4FF for secondary button backgrounds; it's only for specific variants16px except for avatars (50%)| Breakpoint Name | Width | Key Changes |
|---|---|---|
| Mobile (XS) | 320px - 480px | Single column, 16px padding, full-width buttons, stacked form layout |
| Small (SM) | 481px - 640px | Single column, 20px padding, full-width buttons, compact spacing |
| Medium (MD) | 641px - 1024px | Two columns optional, 24px padding, buttons 50% width or fixed, responsive grid |
| Large (LG) | 1025px - 1440px | Full multi-column, 32px padding, side-by-side layouts, max-width constraints applied |
| Extra Large (XL) | 1441px + | 12-column grid, 40px padding, max-width 1200px for content, full navigation |
44px × 44px (buttons, links, checkboxes, interactive elements)40px for primary actions, 32px for secondary actions40px for all text inputs8px around link text16px to prevent accidental adjacent taps18px × 18px minimum32px × 32pxMD breakpoint; show full nav on LG+MD; side-by-side layout on LG+ if space permits100%) on mobile, auto width on tablet+, fixed 164px–330px on desktop40px → 24px → 16px as viewport shrinksSM breakpointMD, 3+ columns on LG20% on tablet, 40% on mobile (e.g., 36px → 28px → 20px)14px on all devices; never scale below for accessibility#003D5C) background with Cyan (#00DBFF) text#0077B2) text and border#002233)#002233) at weight 400–500#0077B2) for standard, Bright Blue (#31A2FF) for secondary#FFFFFF)#F1F3F5) or gradient hero (#B2F4FF → #F1F3F5)#C1C1C1)#B2BCC1)#0077B2)#E60F57)#0ED869)#FFBD28)32px height (40px preferred for primary); use 12px border-radius for large buttons, 8px for small buttons40px height with 12px horizontal and 8px vertical padding; border 1px solid #C1C1C1 until focus48px 800, Heading 36px 700, Body 16px 400–500, Button 14px–16px 700, Caption 12px 4008px: Use multiples for padding/margin (8px, 16px, 24px, 32px, 40px)24px minimum; form containers 40px; shadow 0px 8px 24px rgba(0, 34, 51, 0.08) for prominence#002233) for all body text unless semantic color required; depth through weight and size, not color0px 0px 8px rgba(0, 119, 178, 0.16) or 2px solid #0077B2 border16px padding, full-width buttons; expand to multi-column on MD+ breakpoints1.5x font size; 24px for 16px text, 44px for 36px text#002233 on white/light for guaranteed WCAG AA pass