The single source of truth for RegDesk's visual identity, voice, and design language — for product, marketing, and beyond.
The RegDesk wordmark is the cornerstone of our identity. Always use the official logo file — never recreate it in CSS or text.
Left: Color logo on light backgrounds · Right: White mono logo on dark/navy backgrounds
Deep navy anchors the brand with authority. Amber adds energy. The signature gradient stripe — blue to amber to red — appears at section edges and as a decorative brand signal.
Arial is our brand font — clean, universal, and highly legible across all platforms and print materials.
Generous spacing keeps RegDesk layouts premium and breathing. Never cram content — white space is a feature.
Consistent components build trust. Use these patterns across product and marketing.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Use Lucide icons exclusively — 2px stroke, 24px grid. Never use emoji as icons in RegDesk product or marketing contexts.
The footer wave is a signature full-width decorative element used at the bottom of product screens, login pages, and marketing layouts. It adds visual depth and warmth while echoing the multi-color brand gradient.
/* Position at bottom of page or screen */
.footer-wave {
position: absolute; /* or fixed for app shells */
bottom: 0;
left: 0;
width: 100%;
pointer-events: none;
}
<img class="footer-wave"
src="footer-wave.png"
alt=""
aria-hidden="true">
demo.regdesk.co uses this wave as the page footer — layered waves creating visual depth with the bird motif colors flowing across the full viewport width.RegDesk appears at FDA hearings, RAPS congresses, MedTech conferences, and industry trade shows. These guidelines ensure consistent brand presence across all physical touchpoints — from staff apparel to exhibition booths.
Chest center or left-chest · Logo min 8 cm · Gradient stripe on sleeve cuff
White ceramic · Full-color logo center · Gradient stripe on rim band
A1 portrait (594×841 mm) · 300 dpi for print · CMYK output
85×200 cm standard · 150 dpi minimum · CMYK for print
RegDesk speaks with authority, clarity, and optimism. We serve professionals navigating complex systems — so we match their intelligence while reducing their burden.
Dashboards visualize regulatory intelligence. Infographic-style layouts make complex submission data scannable at a glance. Each screen has ONE primary goal — the amber CTA drives the key action.
Data management screens strip away decoration. White space, clean tables, and a single highlighted CTA let power users focus on their data. The amber button is the only color — everything else is neutral.
+ Add Record button stands alone as the visual anchor and primary call-to-action.Official RegDesk banner ads for digital campaigns. Use these assets as-is for consistency across all marketing placements.
All form elements use ice blue backgrounds with navy focus rings. Labels are always uppercase, bold, and positioned above the input. Use generous spacing between fields.
Color-coded status chips communicate submission health at a glance. These are the canonical status states used across all RegDesk product screens.
RegDesk uses navy-tinted shadows — the blue undertone ties elevation directly to brand color, making even depth feel on-brand. Never use pure black shadows.
/* Card shadow */ box-shadow: 0 4px 24px rgba(0,85,148,0.13); /* Modal shadow */ box-shadow: 0 8px 48px rgba(0,85,148,0.2); /* Dropdown shadow */ box-shadow: 0 4px 20px rgba(0,0,0,0.08); /* Focus ring (inputs, buttons) */ box-shadow: 0 0 0 3px rgba(0,85,148,0.12);
RegDesk uses a single, consistent transition duration of 0.35s applied to all interactive elements. No bouncy animations, no delayed entrances — just smooth, professional state changes.
/* Global transition variable */
--rd-transition: all .35s;
/* Apply to all interactive elements */
.btn, .card, a, input, select {
transition: var(--rd-transition);
}
All RegDesk design values are available as CSS custom properties. Always use these tokens — never hardcode hex values directly in component styles.
:root {
--rd-navy: #005594;
--rd-blue: #035cfa;
--rd-mid-blue: #466ab1;
--rd-sky: #76cadd;
--rd-light-blue: #c0d9e7;
--rd-ice: #f1fafc;
--rd-amber: #fbc624;
--rd-yellow: #ffb200;
--rd-red: #e71f20;
--rd-orange: #F16F12;
--rd-text: #1d1c1d;
--rd-border: #e1e1e1;
--rd-white: #ffffff;
}
:root {
/* Layout */
--rd-content-width: 1248px;
--rd-radius-card: 12px;
/* Spacing scale */
--rd-space-xs: 12px;
--rd-space-sm: 24px;
--rd-space-md: 48px;
--rd-space-lg: 60px;
--rd-space-xl: 96px;
/* Motion */
--rd-transition: all .35s;
/* Gradient */
--rd-gradient: linear-gradient(
to right,
#466ab1 0%,
#76cadd 33%,
#fbc624 66%,
#e71f20 100%
);
}
DESIGN.md file in the brand assets folder — compatible with the awesome-design-md format for use with coding agents and AI tools.All live designs built with the RegDesk brand system. Click any thumbnail to open the full page.
