Switch between the rendered Visual preview and the Raw DESIGN.md.
Renius is a modern construction and renovation brand design system that balances boldness with professionalism. The visual identity combines vibrant orange energy with deep neutrals, creating an approachable yet authoritative presence suitable for the construction industry. The system emphasizes clarity, confidence, and forward momentum through dynamic color accents, generous whitespace, and contemporary typography. The aesthetic conveys craftsmanship and reliability while maintaining a digital-first, friendly tone. Rounded forms and smooth interactions soften the technical nature of construction, making the brand accessible to both professionals and homeowners.
Key Characteristics
#FF5E14) as the dominant accent driving action and attention#FF5E14): Primary brand color used for CTAs, active states, links, accents, and key interactive elements; drives attention and engagement across the interface#212529): Primary text color for headings and high-contrast interfaces; conveys stability and professionalism#0D6EFD): Secondary accent for highlights, focus states, and information emphasis#0DCAF0): Tertiary accent for secondary interactive elements and supporting highlights#2D1C22): Premium/luxury accent for special sections or elevated content areas#198754): Confirmation, positive actions, and success states#FBBD06): Alert and warning states requiring user attention#FFC107): Secondary warning indicator for caution contexts#DC3545): Error messages, destructive actions, and critical alerts#555555): Primary body text color; used extensively for readable content and descriptions#000000): Pure black for maximum contrast in headings and critical information#738489): Secondary body text for metadata, timestamps, and supporting information#6C757D): Tertiary text for hints, disabled states, and background information#ADB5BD): Very light text for accessibility-compliant low-emphasis content#FFFFFF): Primary surface for cards, containers, and modal backgrounds#FFFBF3): Warm, slightly off-white surface for section backgrounds and subtle differentiation#F8F9FA): Light gray surface for secondary backgrounds and alternating sections#DDDDDD): Primary border color for cards, inputs, and structural dividers#DEE2E6): Softer border for less-defined container edgesExo, Exo 2, system-ui, -apple-system, sans-serifDM Sans, system-ui, -apple-system, sans-serifMartian Mono, Courier New, monospace| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display | Exo | 64px | 400 | 74px | 0px | Hero headlines, page titles |
| Heading H2 | Exo | 40px | 400 | 52px | 0px | Section titles, large callouts |
| Heading H3 | DM Sans | 20px | 600 | 30px | 0px | Subsection headers, card titles |
| Heading H4 | Exo | 36px | 900 | 36px | 0px | Prominent headlines, emphasis |
| Heading H6 | Martian Mono | 13px | 400 | 16px | 0px | Labels, tags, metadata |
| Body | DM Sans | 16px | 400 | 26px | 0px | Primary body text, descriptions |
| Body Small | DM Sans | 14px | 400 | 22px | 0px | Secondary body, captions |
| Button | DM Sans | 16px | 600 | 24px | 0px | CTA labels, interactive text |
| Link | DM Sans | 16px | 500 | 26px | 0px | Navigation and hyperlinks |
#FF5E14#FFFFFF13px 25px50px24px#E54A06, text remains white#D43F00, slight depression effect#CCCCCC, text #888888, cursor not-allowed#21252913px 25px50px1px solid #21252924px#F8F9FA, text #212529#E8EAED, text #000000#CCCCCC, text #888888#5555550px 0px (text-only)0px26px#FF5E14, text-decoration underline#E54A06#AAAAAA#FF5E14#FFFFFF56px56px50%#E54A06, scale 1.05#CCCCCC, cursor not-allowedrgba(255, 255, 255, 0.12) or #FFFFFF#55555528px 22px 25px 22px10px1px solid rgba(255, 255, 255, 0.14) (transparent overlay) or 1px solid #DDDDDD (light)26px#FF5E14, subtle lift effect (transform translateY -2px)#F8F9FA or #FFFBF348px 32px0px (full width sections)0px auto#FF5E14#FFFFFF36px 32px10px#FFFFFF#FFFFFF#55555512px 16px6px1px solid #DDDDDD24px#ADB5BD#FF5E14, outline none, box-shadow 0 0 0 3px rgba(255, 94, 20, 0.1)#DC3545, background #FFF5F5#F8F9FA, text #ADB5BD, border #DEE2E6#FFFFFF#55555512px 16px6px1px solid #DDDDDD120px24px#FF5E14, box-shadow 0 0 0 3px rgba(255, 94, 20, 0.1)#FFFFFF#55555512px 16px6px1px solid #DDDDDD24px#FF5E14, outline none#F8F9FA, text #ADB5BD#2125298px#FFFFFF#55555516px 32px0px1px solid #DEE2E664px#5555558px 16px0px#FF5E14, text-decoration underline#FF5E14, font-weight 500, border-bottom 2px solid #FF5E14#AAAAAA, cursor not-allowed#21252924px8px6px#F8F9FA#FF5E14#FFFFFF4px 12px50px#F8F9FA#2125294px 12px50px1px solid #DDDDDD#198754#FFFFFF4px 12px50px#DC3545#FFFFFF4px 12px50pxBase Unit: 8px — All spacing derives from multiples of this unit for rhythm and consistency.
Spacing Scale:
4px (0.5x) — Micro spacing for tight component relationships8px (1x) — Default padding within components, tight gaps12px (1.5x) — Compact spacing for related elements16px (2x) — Default spacing between form fields and controls20px (2.5x) — Spacing between section subsections24px (3x) — Padding for card interiors and small containers28px (3.5x) — Content padding within cards32px (4x) — Standard section padding and container margins36px (4.5x) — Large content padding for emphasis sections40px (5x) — Generous spacing between major sections44px (5.5x) — Extra space for navigation and header regions48px (6x) — Maximum spacing for section padding and top/bottom marginsUsage Context:
4px–8px): Button interiors, icon-text gaps, tight lists12px–16px): Form fields, small container padding, navigation items20px–32px): Section subsections, card margins, between cards36px–48px): Between major sections, top/bottom padding on full-width areas1200px (primary content container)32px (space between columns on desktop)48px 32px (vertical-horizontal on desktop)24px 16px (vertical-horizontal on mobile)Whitespace is treated as a first-class design element, not empty space. The system prioritizes breathing room to reduce cognitive load and guide user attention. Generous vertical spacing between sections (40px–48px) creates rhythm and allows focal points to stand out. Horizontal margins around content (32px) prevent text from crowding viewport edges. Cards and containers use internal padding (24px–36px) to separate content from borders. Interactive elements maintain minimum 44px touch targets with breathing room in all directions. This philosophy creates an open, approachable interface that communicates confidence and clarity.
0px — Navigation bars, full-width sections, container edges that need edge-to-edge presence6px — Input fields, small buttons, text selections requiring soft appearance10px — Cards, contained sections, featured containers balancing approachability and formality50px — Primary buttons, badge elements, icon buttons emphasizing friendliness and call-to-action clarity50% — Circular avatar elements, circular icon containers, badges| Level | Treatment | Use |
|---|---|---|
| Raised 1 | 0px 2px 4px rgba(0, 0, 0, 0.08) | Hover card states, subtle lift |
| Raised 2 | 0px 4px 8px rgba(0, 0, 0, 0.12) | Active card states, interactive feedback |
| Overlay | 0px 8px 24px rgba(0, 0, 0, 0.16) | Modals, dropdowns, overlaid content |
| Floating | 0px 12px 32px rgba(0, 0, 0, 0.20) | Tooltips, floating action buttons, emphasis |
| None | none | Default card and container styling |
Shadow Philosophy: Shadows in Renius are minimal and functional, used only to communicate hierarchy and interactivity. Subtle shadows (8–12% opacity) create gentle depth without overwhelming the clean aesthetic. Darker shadows (16–20% opacity) reserve for modal overlays and truly elevated content. This restrained approach maintains the modern, minimal aesthetic while ensuring depth clarity. Transitions on shadow changes (300ms ease) smooth visual feedback during hover and interaction states. Avoid hard shadows; use soft, diffused values aligned to realistic light angles.
#FF5E14 orange intentionally — Reserve for primary CTAs, active states, and key brand moments; overuse dilutes impact#FF5E14 to confirm action; maintain consistency10px–50px radii; structural elements remain sharp13px 25px consistently; non-standard sizes fragment the system#CCCCCC background for clear disabled state#000000) for all body text — Use #555555 for primary body; reserve black for headings and high contrast| Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–479px | Stack all columns vertically, reduce section padding to 24px 16px, hide desktop nav, show mobile menu toggle, buttons 100% width, font sizes reduce by 2–4px, margin/padding halved |
| Mobile Large | 480px–767px | 2-column layouts possible, section padding 28px 20px, reduced heading sizes, full-width inputs, maintain vertical card stacking |
| Tablet | 768px–1023px | 2-column grid enabled, section padding 36px 24px, heading sizes return to baseline, navigation toggles to simplified menu, cards remain stacked or 2-wide |
| Desktop | 1024px–1439px | Full 12-column grid, section padding 48px 32px, all heading sizes at 100%, navigation horizontal menu bar, cards 3-wide or more |
| Large Desktop | 1440px+ | Max width container 1200px centered, generous outer gutters, full feature set available, optimal reading line length maintained |
44px × 44px — All interactive elements (buttons, links, form controls) must accommodate touch; applies across all breakpoints8px minimum gap between adjacent interactive elements to prevent accidental misclicks13px 25px padding (13px touch height minimum), 50px radius maintains roundness at small sizes16px 20px padding (expanded for touch), 50px radius maintained, consider full-width buttons in constrained layouts44px minimum height on mobile (12px padding × 2 + 16px content + line-height), 36px on desktop44px height minimum with 16px horizontal padding on mobile; desktop 32px with 16px padding acceptable due to mouse precisionDesktop (1024px+):
48px 32pxTablet (768px–1023px):
36px 24pxMobile (480px–767px):
28px 20pxMobile Small (320px–479px):
24px 16pxResponsive Typography:
64px desktop → 48px tablet → 36px mobile40px desktop → 32px tablet → 28px mobile20px (consistent across breakpoints; slight reduction only on mobile small)36px desktop → 28px tablet → 24px mobile16px desktop → 15px tablet → 14px mobile smallMedia Query Strategy:
@media (max-width: 1439px) { /* Large Desktop */ }
@media (max-width: 1023px) { /* Tablet */ }
@media (max-width: 767px) { /* Mobile */ }
@media (max-width: 479px) { /* Mobile Small */ }
#FF5E14) — All primary buttons, active links, accent highlights#0D6EFD) — Alternative focus states, secondary interactive elements#FFFFFF) — Default card and modal backgrounds#FFFBF3) — Section backgrounds for contrast and warmth#F8F9FA) — Alternating section backgrounds, subtle distinction#212529) — All h1–h4 headings and labels#555555) — Primary body copy and descriptions (most common)#738489) — Secondary info, metadata, timestamps#DDDDDD) — Card edges, input borders, structural dividers#198754) — Confirmations, positive feedback#DC3545) — Errors, destructive actions#FBBD06) — Cautions, alerts requiring attention#FF5E14 orange for primary CTAs — Buttons, active navigation, key interactive elements establish brand identity#555555 for body text by default — More approachable than black; switch to #212529 only for headings/labels50px radius — Establishes friendly, approachable brand personality; soft CTAs1px solid #DDDDDD default; shadow only on hover/active states48px 32px minimum — Ensures breathing room and visual hierarchy