Shrilaxmi Heralagi

Generated Oct 13, 2026

DESIGN.md for dribbble.com

dribbble.com/shots/27539913--ROFTRIX-Roofing-Construction-Website-Design?utm_source=Clipboard_Shot&utm_campaign=nasrin_akter01&utm_content=%F0%9F%8F%A0%20ROFTRIX%20%E2%80%93%20Roofing%20%26%20Construction%20Website%20Design&utm_medium=Social_Share&utm_source=Clipboard_Shot&utm_campaign=nasrin_akter01&utm_content=%F0%9F%8F%A0%20ROFTRIX%20%E2%80%93%20Roofing%20%26%20Construction%20Website%20Design&utm_medium=Social_Share16 colors6 componentsMona Sans

Remix

12 screenshots captured· dribbble.com

1 / 12 · 🏠 ROFTRIX – Roofing & Construction Website Design by Nasrin Akter on Dribbble · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Dribbble
description: |
  ROFTRIX embodies a modern, professional aesthetic grounded in craftsmanship
  and trust. The design system combines a sophisticated dark-on-light foundation
  with deliberate accent colors that evoke energy and forward momentum. The
  typography is clean and geometric, favoring clarity and hierarchy. Navigation
  and interactive elements are bold yet restrained, establishing a premium
  positioning while remaining approachable. The overall mood is contemporary,
  confident, and solution-oriented—reflecting the construction industry's
  evolution toward transparency and refined design standards.
source:
  url: "https://dribbble.com/shots/27539913--ROFTRIX-Roofing-Construction-Website-Design?utm_source=Clipboard_Shot&utm_campaign=nasrin_akter01&utm_content=%F0%9F%8F%A0%20ROFTRIX%20%E2%80%93%20Roofing%20%26%20Construction%20Website%20Design&utm_medium=Social_Share&utm_source=Clipboard_Shot&utm_campaign=nasrin_akter01&utm_content=%F0%9F%8F%A0%20ROFTRIX%20%E2%80%93%20Roofing%20%26%20Construction%20Website%20Design&utm_medium=Social_Share"
  pagesAnalyzed: 6
  extractedAt: 2026-10-13
  tokensMeasured: true
colors:
  primary: "#0D0C22"
  accent: "#EA4C89"
  link: "#060318"
  canvas: "#FFFFFF"
  on-primary: "#FFFFFF"
  ink: "#0D0C22"
  body: "#3A3546"
  muted: "#524B63"
  faint: "#655C7A"
  hairline: "#F3F3F4"
  accent-1: "#E62D75"
  accent-2: "#3E34D3"
  accent-3: "#7B7194"
  accent-4: "#6E6D7A"
  accent-5: "#146EF5"
  neutral-1: "#E7E7E9"
  neutral-2: "#000000"
  neutral-3: "#D1CEDA"
typography:
  heading-xl:
    fontFamily: "Mona Sans"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.19
    letterSpacing: 0px
  heading-lg:
    fontFamily: "Mona Sans"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.21
    letterSpacing: 0px
  heading-md:
    fontFamily: "Mona Sans"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0px
  heading-md-strong:
    fontFamily: "Mona Sans"
    fontSize: 22px
    fontWeight: 700
    letterSpacing: 0px
  heading-sm:
    fontFamily: "Mona Sans"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  heading-xs:
    fontFamily: "Mona Sans"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.38
    letterSpacing: 0px
  body-md:
    fontFamily: "Mona Sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.75
    letterSpacing: 0px
  body-sm:
    fontFamily: "Mona Sans"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  body-sm-strong:
    fontFamily: "Mona Sans"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 2
    letterSpacing: 0px
  body-sm-2:
    fontFamily: "Mona Sans"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.43
    letterSpacing: 0px
  body-sm-tight:
    fontFamily: "Mona Sans"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.21
    letterSpacing: 0px
  body-xs:
    fontFamily: "Mona Sans"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.54
    letterSpacing: 0px
  nav:
    fontFamily: "Mona Sans"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 2.14
    letterSpacing: 0px
  button-lg:
    fontFamily: "Mona Sans"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.21
    letterSpacing: 0px
  button-lg-strong:
    fontFamily: "Mona Sans"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0px
  button-md:
    fontFamily: "Mona Sans"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0px
  button-sm:
    fontFamily: "Mona Sans"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0px
  button-xs:
    fontFamily: Arial
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0px
  label:
    fontFamily: "Mona Sans"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 2
    letterSpacing: 0px
  caption-md:
    fontFamily: "Mona Sans"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0px
    textTransform: lowercase
  caption-md-strong:
    fontFamily: "Mona Sans"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0px
  caption-md-2:
    fontFamily: "Mona Sans"
    fontSize: 12px
    fontWeight: 600
    letterSpacing: 0px
  caption-md-3:
    fontFamily: "Mona Sans"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0px
  caption-sm:
    fontFamily: "Mona Sans"
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.27
    letterSpacing: 0px
  caption-xs:
    fontFamily: "Mona Sans"
    fontSize: 9px
    fontWeight: 800
    lineHeight: 2.22
    letterSpacing: 0px
    textTransform: uppercase
rounded:
  none: 0px
  xs: 4px
  sm: 6px
  md: 8px
  lg: 12px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 28px
  xxxl: 32px
  section: 36px
  band: 40px
borderWidths:
  thin: 1px
shadows:
  sm: "rgba(0, 0, 0, 0.01) 0px 2px 2px 0px"
  md: "rgba(18, 22, 25, 0.02) 0px 1px 10px 0px"
  lg: "rgba(6, 3, 24, 0.01) 0px 4px 4px 0px"
elevationStrategy: progressive
themes:
  derived: dark   # the other theme is the site's measured palette
  light:
    bg: "#FFFFFF"
    surface: "#F7F7F7"
    surfaceRaised: "#EEEEEE"
    text: "#0D0C22"
    textMuted: "#3A3546"
    border: "#F3F3F4"
    accent: "#0D0C22"
    accentFg: "#FFFFFF"
    focusRing: "#0D0C22"
    elevation: shadow
  dark:
    bg: "#0E0E11"
    surface: "#1C1C1F"
    surfaceRaised: "#29292B"
    text: "#F5F5F6"
    textMuted: "#9D9D9F"
    border: "#353537"
    accent: "#7F7BD0"
    accentFg: "#0B0B0C"
    focusRing: "#625DC6"
    elevation: "border+surface"
gradients:
  - context: section
    kind: linear
    value: "linear-gradient(rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.004) 63.94%, rgba(0, 0, 0, 0.016) 65.89%, rgba(0, 0, 0, 0.03) 67.83%, rgba(0, 0, 0, 0.06) 69.78%, rgba(0, 0, 0, 0.094) 71.72%, rgba(0, 0, 0, 0.133) 73.67%, rgba(0, 0, 0, 0.176) 75.61%, rgba(0, 0, 0, 0.224) 77.56%, rgba(0, 0, 0, 0.267) 79.5%, rgba(0, 0, 0, 0.306) 81.44%, rgba(0, 0, 0, 0.34) 83.39%, rgba(0, 0, 0, 0.37) 85.33%, rgba(0, 0, 0, 0.384) 87.28%, rgba(0, 0, 0, 0.396) 89.22%, rgba(0, 0, 0, 0.4) 91.17%)"
components:
  button-primary:
    typography: "{typography.button-md}"
    textColor: "{colors.on-primary}"
    border: "1px solid {colors.primary}"
    height: 40px
    padding: "0px 20px 0px 20px"
    rounded: "1e+07px"
    backgroundColor: "{colors.primary}"
  button-primary-lg:
    typography: "{typography.button-lg-strong}"
    textColor: "{colors.on-primary}"
    border: "1px solid {colors.primary}"
    height: 48px
    padding: "0px 24px 0px 24px"
    rounded: "1e+07px"
    backgroundColor: "{colors.primary}"
  button-icon:
    typography: "{typography.button-md}"
    textColor: "{colors.on-primary}"
    border: "1px solid {colors.accent}"
    height: 40px
    rounded: "50%"
    backgroundColor: "{colors.accent}"
  button-filled:
    typography: "{typography.label}"
    textColor: "{colors.ink}"
    height: 30px
    backgroundColor: "rgb(68, 64, 62)"
  button-filled-2:
    typography: "{typography.label}"
    textColor: "{colors.ink}"
    height: 30px
    backgroundColor: "rgb(155, 99, 67)"
  navigation:
    typography: "{typography.body-md}"
    textColor: "{colors.link}"
    height: 30px
  footer:
    typography: "{typography.body-md}"
    textColor: "{colors.ink}"
    backgroundColor: "{colors.canvas}"
  link:
    typography: "{typography.label}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
  link-sm:
    typography: "{typography.label}"
    textColor: "{colors.ink}"
    backgroundColor: "rgb(185, 182, 173)"
  card:
    typography: "{typography.label}"
    textColor: "{colors.ink}"
  badge-filled:
    textColor: "{colors.body}"
    border: "1px solid rgb(243, 243, 246)"
    height: 27px
    padding: "0px 16px 0px 16px"
    fontSize: 14px
    fontFamily: "Mona Sans"
    fontWeight: 400
    lineHeight: 1
    rounded: "1e+07px"
    backgroundColor: "rgb(243, 243, 246)"
  badge-filled-sm:
    textColor: "{colors.on-primary}"
    height: 9px
    padding: "4px 6px 4px 6px"
    fontSize: 9px
    fontFamily: "Mona Sans"
    fontWeight: 700
    lineHeight: 1
    rounded: "{rounded.lg}"
    backgroundColor: "{colors.accent}"
states:
  other-focus:
    target: other
    state: focus
    outline: none
  button-hover:
    target: button
    state: hover
    backgroundColor: white
  button-focus:
    target: button
    state: focus
    outline: none
    boxShadow: "rgb(17, 153, 255) 0px 0px 0px 5px"
  button-active:
    target: button
    state: active
    opacity: 0.6
  button-disabled:
    target: button
    state: disabled
    opacity: 0.3
  other-hover:
    target: other
    state: hover
    outline: none
  input-focus:
    target: input
    state: focus
    outline: none
    boxShadow: none
  link-hover:
    target: link
    state: hover
    borderColor: transparent
    backgroundColor: "{colors.hairline}"
  other-active:
    target: other
    state: active
    backgroundColor: "rgba(66, 133, 244, 0.1)"
  link-active:
    target: link
    state: active
    textColor: "rgb(51, 51, 51)"
breakpoints:
  - width: 375
    containerWidth: 343
    gridColumns: 4
    navLinksVisible: 36
    menuToggleVisible: true
    headingPx: 20
    bodyPx: 16
    sectionPaddingX: 0
  - width: 768
    containerWidth: 736
    gridColumns: 7
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 24
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1024
    containerWidth: 944
    gridColumns: 7
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 24
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1280
    containerWidth: 1264
    gridColumns: 7
    navLinksVisible: 4
    menuToggleVisible: false
    headingPx: 24
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1440
    containerWidth: 1360
    gridColumns: 7
    navLinksVisible: 4
    menuToggleVisible: false
    headingPx: 24
    bodyPx: 16
    sectionPaddingX: 0
coverage:
  statesFound: 36
  gradientsFound: 1
  rolesUnassigned: 8
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: false

Design System Inspired by ROFTRIX

1. Visual Theme & Atmosphere

ROFTRIX embodies a modern, professional aesthetic grounded in craftsmanship and trust. The design system combines a sophisticated dark-on-light foundation with deliberate accent colors that evoke energy and forward momentum. The typography is clean and geometric, favoring clarity and hierarchy. Navigation and interactive elements are bold yet restrained, establishing a premium positioning while remaining approachable. The overall mood is contemporary, confident, and solution-oriented—reflecting the construction industry's evolution toward transparency and refined design standards.

Key Characteristics

Modern professional palette: Dark charcoal primary paired with muted purples and cool grays
Accessible contrast: All text meets WCAG AA standards with sufficient separation between foreground and background
Geometric forms: Pill-shaped buttons and components create contemporary, app-like interactions
Restrained accent usage: Vibrant magenta ({colors.accent} — #EA4C89) reserved for CTAs and key highlights to maintain focus
Neutral-first surfaces: Emphasis on white ({colors.canvas}) and cool grays to support content legibility
Layered depth via color, not shadow: Elevation achieved through surface color shifts and strategic transparency rather than heavy drop shadows
Consistent visual language: Spacing, radius, and typography applied predictably across all components

2. Color Palette & Roles

Primary

Primary / Brand ({colors.primary} — #0D0C22): Primary CTA fill, active states, brand accent, headings, and primary text. Establishes the core identity.
Link ({colors.link} — #060318): Inline link color, text-based navigation, and secondary interactive elements.

Accent Colors

Accent ({colors.accent} — #EA4C89): Secondary accent and hero bands. High-visibility magenta reserved for prominent calls-to-action and decorative flourishes.
Decorative ({colors.accent-1} — #E62D75): Supportive decorative accent with slightly deeper magenta tone.
Decorative ({colors.accent-2} — #3E34D3): Deep indigo accent for decorative purposes only.
Decorative ({colors.accent-3} — #7B7194): Muted purple-gray for subtle decorative elements.
Decorative ({colors.accent-4} — #6E6D7A): Cool gray-purple for decorative contexts.
Decorative ({colors.accent-5} — #146EF5): Bright blue accent reserved for decorative use.

Interactive

Primary CTA Background: {colors.primary} (#0D0C22)
Primary CTA Foreground: {colors.canvas} (#FFFFFF)
Accent CTA Background: {colors.accent} (#EA4C89)
Accent CTA Foreground: {colors.canvas} (#FFFFFF)

Neutral Scale

Canvas / Default Background ({colors.canvas} — #FFFFFF): Primary page background and surface color. Label and text color on brand-colored surfaces.
Body Text ({colors.body} — #3A3546): Primary body copy and content text.
Muted Text ({colors.muted} — #524B63): Captions, secondary text, and reduced-emphasis labels.
Faint Text ({colors.faint} — #655C7A): Tertiary text, placeholder text, and minimal-emphasis annotations.
Neutral Dark ({colors.neutral-2} — #000000): Full black reserved for maximum contrast where needed.
Neutral Medium ({colors.neutral-3} — #D1CEDA): Mid-tone gray for secondary surfaces or borders.

Surface & Borders

Hairline / Divider ({colors.hairline} — #F3F3F4): 1px borders, dividers, and delicate rule lines.
Subtle Border ({colors.neutral-1} — #E7E7E9): Gentle border color for containers and input fields.

3. Typography Rules

Font Family

Primary: Mona Sans (https://fonts.googleapis.com/) Fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif

Secondary: Arial (https://fonts.googleapis.com/) Fallback: sans-serif

The system is unified around Mona Sans, a geometric sans-serif optimized for digital interfaces. Arial is used sparingly for button-specific roles.

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display / Hero XL	Mona Sans	32px	700	1.19	0px	Major page headings; use sparingly
Heading L	Mona Sans	24px	700	1.21	0px	Section headings and sub-heroes
Heading M	Mona Sans	22px	600–700	1.4	0px	Subsection titles; two weight variants in use
Heading S	Mona Sans	20px	600	1.2	0px	Card titles and tertiary headings
Heading XS	Mona Sans	16px	500	1.38	0px	Small section labels and emphasis
Body MD	Mona Sans	16px	400	1.75	0px	Primary body copy and long-form text
Body SM	Mona Sans	14px	400–700	1.21–2	0px	Standard body and button text; multiple weights for emphasis
Body XS	Mona Sans	13px	600	1.54	0px	Fine print and minimal text
Button LG	Mona Sans	14px	600	1–1.21	0px	Large CTA buttons
Button MD	Mona Sans	13px	600	1	0px	Standard button text
Button SM	Mona Sans	12px	500	1	0px	Small button and badge text
Button XS	Arial	11px	400	—	0px	Minimal button labels
Caption MD	Mona Sans	12px	400–700	1–1.33	0px	Image captions, metadata, labels; multiple weights
Caption SM	Mona Sans	11px	700	1.27	0px	Tiny labels and badges
Caption XS	Mona Sans	9px	800	2.22	0px	Uppercase small caps; high-emphasis micro text
Navigation	Mona Sans	14px	600	2.14	0px	Primary navigation links
Input Label	Mona Sans	14px	400	2	0px	Form labels and placeholders

Principles

Contrast-first approach: All heading weights (600–700) ensure legibility against both light and dark backgrounds.
Generous line-height on body: 1.75 line-height on 16px body text supports sustained reading and accessibility.
Weight stacking: The system uses 400 (regular), 500 (medium), 600 (semibold), and 700 (bold) to create visual separation without introducing new sizes.
Minimal size changes: Only four distinct sizes drive the hierarchy—32px, 24px, 16px, 14px, 12px, 11px, 9px—reducing cognitive load.
Button consistency: All buttons use 600 weight to signal interactivity; size varies instead.
Caption emphasis: Captions range from 400 to 800 weight, allowing fine-grained annotation hierarchy.

4. Component Stylings

Buttons

Primary Button (Standard)

Background: {colors.primary} (#0D0C22)
Text Color: {colors.canvas} (#FFFFFF)
Font: Mona Sans, {typography.button-md} (13px, weight 600)
Padding: 0px 20px
Height: 40px
Border: 1px solid {colors.primary}
Border Radius: {rounded.full} (pill-shaped)
Box Shadow: none
Hover: Background becomes #FFFFFF, text becomes {colors.primary}
Active (Pressed): Opacity 0.6
Disabled: Opacity 0.3
Focus: Outline none; box-shadow rgb(17, 153, 255) 0px 0px 0px 5px

Primary Button (Large)

Background: {colors.primary} (#0D0C22)
Text Color: {colors.canvas} (#FFFFFF)
Font: Mona Sans, {typography.button-lg} (14px, weight 600)
Padding: 0px 24px
Height: 48px
Border: 1px solid {colors.primary}
Border Radius: {rounded.full}
Box Shadow: none
Hover: Background becomes #FFFFFF
Active: Opacity 0.4
Disabled: Opacity 0.3

Icon Button

Background: {colors.accent} (#EA4C89)
Text Color: {colors.canvas} (#FFFFFF)
Font: Mona Sans, {typography.button-md} (13px, weight 600)
Padding: 0px (centered icon)
Height: 40px
Width: 40px
Border: 1px solid {colors.accent}
Border Radius: 50% (perfect circle)
Box Shadow: none
Hover: Background becomes {colors.accent} with increased intensity
Focus: Blue outline ring

Secondary Button (Filled)

Background: #444040 (muted brown-gray)
Text Color: {colors.primary} (#0D0C22)
Font: Mona Sans, {typography.button-lg} (14px, weight 400)
Padding: 0px
Height: 30px
Border: none
Border Radius: {rounded.none} (sharp corners)
Box Shadow: none

Secondary Button (Alternative Filled)

Background: #9B6343 (warm tan-brown)
Text Color: {colors.primary} (#0D0C22)
Font: Mona Sans, {typography.button-lg} (14px, weight 400)
Padding: 0px
Height: 30px
Border: none
Border Radius: {rounded.none}
Box Shadow: none

Cards & Containers

Card (Default)

Background: {colors.canvas} (#FFFFFF)
Text Color: {colors.body} (#3A3546)
Border: none
Border Radius: {rounded.md} (8px)
Box Shadow: rgba(18, 22, 25, 0.02) 0px 1px 10px 0px (soft lift)
Padding: Contextual; typically {spacing.lg} (20px)

Inputs & Forms

Text Input

Background: {colors.canvas} (#FFFFFF)
Text Color: {colors.body} (#3A3546)
Placeholder Color: {colors.faint} (#655C7A)
Border: 1px solid {colors.neutral-1} (#E7E7E9)
Border Radius: {rounded.lg} (12px)
Font: Mona Sans, {typography.label} (14px, weight 400)
Padding: Contextual; typically {spacing.md} (16px)
Hover: Background becomes var(--iti-hover-color) (ITI-specific)
Focus: Outline none; box-shadow none
Focus State: Border becomes #D2E3FC (light blue tint)

Input Label

Font: Mona Sans, {typography.label} (14px, weight 400)
Color: {colors.body} (#3A3546)
Line Height: 2 (28px)
Margin Bottom: {spacing.xs} (8px)

Navigation

Navigation Link (Primary)

Text Color: {colors.link} (#060318)
Font: Mona Sans, {typography.nav} (14px, weight 600)
Background: transparent
Border: none
Padding: 0px
Line Height: 2.14 (30px)
Hover: Color remains {colors.link}, slight opacity shift
Active: Color shifts to {colors.primary}

Navigation Link (Desktop)

Width: max-content
Display: visible at breakpoints ≥1280px
Collapse point: <1280px (menu toggle replaces horizontal links)

Badges

Badge (Filled)

Background: {colors.hairline} (#F3F3F4)
Text Color: {colors.body} (#3A3546)
Font: Mona Sans, {typography.body-sm} (14px, weight 400)
Padding: 0px 16px
Height: 27px
Border: 1px solid {colors.hairline}
Border Radius: {rounded.full} (pill)
Line Height: 1.43

Badge (Small, Accent)

Background: {colors.accent} (#EA4C89)
Text Color: {colors.canvas} (#FFFFFF)
Font: Mona Sans, {typography.caption-xs} (9px, weight 800, uppercase)
Padding: 4px 6px
Height: auto (content-fit)
Border: none
Border Radius: {rounded.lg} (12px)
Line Height: 2.22

5. Layout Principles

Spacing System

The spacing system uses a base unit of 4px, scaled linearly to create harmonious intervals:

{spacing.xxs} = 4px — Minimal gutters within tightly-packed components
{spacing.xs} = 8px — Small gaps between sibling elements
{spacing.sm} = 12px — Default internal padding for small components
{spacing.md} = 16px — Primary padding and gutters; standard component spacing
{spacing.lg} = 20px — Card and container padding; section gutters
{spacing.xl} = 24px — Large spacing between distinct sections
{spacing.xxl} = 28px — Extra-large vertical breaks
{spacing.xxxl} = 32px — Major section separation
{spacing.section} = 36px — Section boundaries and major layout shifts
{spacing.band} = 40px — Hero band and full-bleed section padding

Usage Context:

Button padding: {spacing.md} (16px) horizontally
Card padding: {spacing.lg} (20px)
Section padding: {spacing.band} (40px) top/bottom on full-width hero sections
Form input spacing: {spacing.md} (16px)

Grid & Container

Maximum Content Width: 1360px (measured at 1440px viewport)
Column Strategy: 7-column flexible grid at desktop; collapses to 4 columns at 375px mobile
Container Padding: 0px horizontal (full-bleed sections); internal padding applied per component
Section Patterns:
- Hero sections full-width with {spacing.band} (40px) vertical padding
- Content cards in 1–3 column layouts depending on breakpoint
- Navigation and footer span full width

Whitespace Philosophy

The design system prioritizes breathing room and clarity. Whitespace is not wasted space but rather a design decision that guides the eye and reduces cognitive load. Sections are separated by generous vertical spacing ({spacing.section} — 36px minimum), allowing each content block to stand alone. Within containers, padding scales with content importance: primary CTAs receive {spacing.lg} (20px), while secondary elements use {spacing.md} (16px). This creates a visual hierarchy where negative space reinforces information hierarchy.

Border Radius Scale

The system uses five discrete radius values:

{rounded.none} = 0px — Sharp-edged containers (secondary filled buttons, image crops)
{rounded.xs} = 4px — Badge and chip corners (subtle rounding)
{rounded.sm} = 6px — Link hover states and minor elements
{rounded.md} = 8px — Card and container borders; standard component radius
{rounded.lg} = 12px — Input fields and larger interactive surfaces
{rounded.full} = 9999px (pill-shaped) — Buttons, badges, and icon containers; signals affordance and modernity

Component Mapping:

Primary buttons: {rounded.full} (pill)
Icon buttons: 50% (perfect circle)
Input fields: {rounded.lg} (12px)
Cards: {rounded.md} (8px)
Badges: {rounded.full} or {rounded.lg} depending on variant

Border Widths

The system uses a single border weight for emphasis:

Thin (1px): Applied to button borders (primary, secondary), input field borders, and divider lines. Creates a crisp, modern appearance without visual heaviness.

6. Depth & Elevation

Level	Treatment	Use
Flat (Level 0)	No shadow; color-blocked surfaces	Page background, primary buttons, cards on light backgrounds
Micro (Level 1)	`rgba(0, 0, 0, 0.01) 0px 2px 2px 0px`	Dropdown menus, subtle lift elements
Base (Level 2)	`rgba(18, 22, 25, 0.02) 0px 1px 10px 0px`	Standard cards and containers; most interactive surfaces
Accent (Level 3)	`rgba(6, 3, 24, 0.01) 0px 4px 4px 0px`	Emphasis dropdowns and slightly raised containers

The elevation strategy is color-blocking with progressive micro-shadows. Depth comes primarily from surface color shifts (white on light gray, dark on light) rather than heavy drop shadows. Where shadows do appear, they are barely-there at 1–2% opacity, creating a sense of subtle lift without visual noise. This approach maintains clarity while signaling interactive affordance. The system avoids aggressive shadows, preferring transparency and layering to convey depth.

Opacity Levels

Three opacity values are used for state modulation:

100% (1.0) — Full opacity; default and active states
60% (0.6) — Reduced emphasis; hover state on certain buttons (secondary fill variants)
37% (0.37) — Disabled or recessed state; inactive form elements and suppressed content
0% (0) — Transparent backgrounds on interactive elements (links, navigation)

Z-index / Layering

The system organizes layering across six distinct stacking contexts:

Base Layer (z-index 1–4): Default content, cards, and body elements
Sticky Layer (z-index 999): Fixed navigation bars and persistent headers
Dropdown / Overlay Layer (z-index 11): Dropdown menus and transient overlays above base content
Modal Layer (z-index 9995–9996): Full-screen dialogs and modals; ensures visibility above all other content

The wide gaps (e.g., 11 to 999 to 9995) prevent z-index collision and allow safe insertion of intermediate layers if needed.

7. Do's and Don'ts

Do

Use pill-shaped buttons ({rounded.full}) for all primary CTAs and icon buttons. The rounded form signals modernity and drives engagement.
Maintain color contrast — Primary text ({colors.body} on {colors.canvas}) meets WCAG AA; never invert without testing.
Apply generous padding — Use {spacing.lg} (20px) inside cards and {spacing.band} (40px) around hero sections. Whitespace is a design asset.
Reserve magenta ({colors.accent} — #EA4C89) for CTAs and accents only. Its intensity demands restraint; overuse dilutes impact.
Stack typography weights, not sizes. The system uses four weights (400, 500, 600, 700) at five discrete sizes. Avoid introducing intermediate sizes.
Use the 7-column grid at desktop and collapse to 4 columns at mobile. Maintain alignment to ensure coherence across breakpoints.
Employ micro-shadows ({spacing.xxs} opacity) for subtle depth. Heavy shadows (0px 10px 20px or greater) are not part of this system.
Apply uppercase text sparingly — Reserve text-transform: uppercase for captions and badges only; body text should always be sentence case.
Test all interactive states — Button hover, focus, active, and disabled states must be present and distinct.

Don't

Avoid sharp-cornered buttons unless they are secondary filled variants. Pill shapes define the visual language.
Never use colors from the "unassigned" decorative palette ({colors.accent-2}, {colors.accent-5}, etc.) for semantic roles (error, success, warning). These are for illustration and decoration only.
Don't invent new colors. The extracted palette is exhaustive. If a color need arises, remix existing roles or escalate to the design team.
Avoid shadows deeper than level 3 (rgba(6, 3, 24, 0.01) 0px 4px 4px 0px). Heavier shadows contradict the system's minimalist depth philosophy.
Don't apply horizontal padding to full-width sections. Let backgrounds bleed to edges; internal content receives padding through container width, not direct spacing.
Never override line-heights below 1.2 for body text. The system's 1.75 line-height on 16px is fundamental to readability.
Avoid animated transitions not explicitly measured. The system does not define motion; CSS animations should be simple (200–300ms easing).
Don't mix Mona Sans and Arial in the same sentence. Arial is reserved for specific button roles; primary typography is always Mona Sans.
Never disable focus styles (outline or box-shadow). Keyboard navigation and accessibility depend on visible focus indicators.
Avoid opacity below 0.37 for text or interactive elements. Lower opacity risks WCAG contrast violations.

8. Responsive Behavior

Breakpoints

Viewport	Width	Content Column	Grid Columns	Nav Links Visible	Menu Toggle	Largest Heading	Body Size	Section Padding X
Mobile (Small)	375px	343px	4	No	Yes	20px	16px	0px
Tablet	768px	736px	7	No	Yes	24px	16px	0px
Desktop (Small)	1024px	944px	7	No	Yes	24px	16px	0px
Desktop (Medium)	1280px	1264px	7	Yes (4 links)	No	24px	16px	0px
Desktop (Large)	1440px	1360px	7	Yes (4 links)	No	24px	16px	0px

Breakpoint Summary:

Below 1280px: Horizontal navigation collapses; menu toggle appears
At 1280px and above: Full horizontal navigation (4 visible links) and menu toggle hidden
Content width scales linearly from 343px (mobile) to 1360px (desktop)
Heading sizes increase from 20px to 24px between mobile and tablet; remain constant thereafter
Section grid remains 7 columns from tablet onward; reduces to 4 at mobile

Touch Targets

Minimum touch target sizes for interactive elements:

Button: 40px × 40px (height × width minimum)
Icon Button: 40px × 40px (circular or square)
Navigation Link: 30px height with ample horizontal padding
Form Input: 40px minimum height; 12px minimum font
Checkbox / Radio: 24px × 24px minimum
Link Text: 16px minimum font size; 44px × 44px recommended click area including padding

These sizes ensure accessibility for users with motor impairments and reduce mis-taps on mobile devices.

Collapsing Strategy

Mobile (375px):

Heading size drops to 20px; body remains 16px
Grid collapses to 4 columns
Navigation becomes a hamburger menu (toggle-driven)
Padding scales down; sections use {spacing.section} (36px) vertical, 0px horizontal
Cards stack in a single column

Tablet (768px):

Heading size increases to 24px
Grid expands to 7 columns
Menu toggle remains active (navigation still hidden)
Content width: 736px (36px gutters on left/right)
Two-column card layouts become possible

Desktop (1024px+):

All heading sizes stabilize at 24px
Navigation menu toggle remains (for compact viewports)
At 1280px+, horizontal navigation appears and toggle hides

Max Width Constraint:

Content never exceeds 1360px (measured at 1440px viewport)
Full-bleed sections (hero, footer) extend to viewport edges
All padding-x is 0px; width constraints are applied to inner containers

9. Agent Prompt Guide

Quick Color Reference

Refer to these mappings when implementing UI:

Primary CTA: Primary / Brand ({colors.primary} — #0D0C22) — dark charcoal; fill for all standard buttons
CTA Text on Primary: Canvas ({colors.canvas} — #FFFFFF) — white text on dark background
Accent CTA: Accent ({colors.accent} — #EA4C89) — magenta; use for icon buttons and hero highlights
Body Text: Body ({colors.body} — #3A3546) — dark gray-purple for primary content
Secondary Text: Muted ({colors.muted} — #524B63) — muted purple for captions and labels
Background: Canvas ({colors.canvas} — #FFFFFF) — white page background
Borders & Dividers: Hairline ({colors.hairline} — #F3F3F4) — very light gray for 1px separators
Disabled / Reduced: Apply opacity 0.3–0.6 to any color; do not create new grayscale variants

Iteration Guide

Always use Mona Sans for typography unless explicitly building a button role that specifies Arial. Font family is a brand asset.
Button radius is always pill-shaped ({rounded.full}) for primary and icon buttons. Secondary filled buttons use sharp corners ({rounded.none}).
Padding scales predictably: {spacing.md} (16px) for most elements; {spacing.lg} (20px) for cards; {spacing.band} (40px) for hero sections.
No custom colors. All fills, strokes, and text colors are drawn from the 16-color palette. If a new need arises, remix existing roles or revert to the design team.
Shadows are subtle — max rgba(6, 3, 24, 0.01) 0px 4px 4px 0px. No shadows darker than 2% opacity; depth comes first from color, second from micro-shadows.
Responsive breakpoint is 1280px: Below this width, navigation hides and menu toggle appears. At 1280px+, horizontal navigation is visible.
Line-height is sacred — 1.75 on 16px body ({typography.body-md}); 2 on 14px labels ({typography.label}). Do not adjust for visual fit; test text instead.
Focus states must be visible — Box-shadow rgb(17, 153, 255) 0px 0px 0px 5px on buttons; subtle border or ring on other elements. Never remove focus indicators.
Opacity 0.3 means disabled; opacity 0.6 means hover on certain states. These are the only opacity shifts allowed; do not invent intermediate values.
Z-index is 1–4 for base, 11 for dropdowns, 999 for sticky, 9995+ for modals. Use these strict bands; never pick arbitrary values.

10. Known Gaps

This design system extraction has the following limitations:

Interaction states are partially inferred: Hover, active, focus, and disabled states were captured from the site's stylesheets where available. However, the site does not expose a complete state matrix for all components. Microinteractions (e.g., focus on links, disabled form states beyond opacity) are not fully specified and should be validated with the design team.
No semantic color palette: The site does not declare error, success, warning, or informational states in its extracted markup. Users should avoid inventing a semantic ramp and instead rely on the primary, accent, and neutral roles provided.
8 decorative colors lack assigned roles: Colors {colors.accent-1} through {colors.accent-5} and two additional neutrals have no measured semantic function. They appear in illustrations and backgrounds but are not assigned to specific UI components. Treat these as decoration-only; do not use them for CTA or semantic roles.
Shadow and elevation data is incomplete: Cross-origin stylesheets and shadow rendering across different browsers may have altered the extracted shadow values. The three shadow levels provided (Micro, Base, Accent) are the only explicitly measured values; deeper elevations or layered shadows are not part of the extraction.
Dark mode was not observed: The extraction covers light-mode only. No dark-mode or theme-switching behavior was measured. If dark mode is required, it would need to be derived separately or designed as an extension.
Animation and motion undefined: The extraction does not capture CSS transitions, keyframe animations, or easing curves. Interaction timing and smoothness are not specified; designers should define these separately or follow modern UI animation best practices (200–400ms easing).
Component coverage limited to 6 pages: The design system was extracted from 6 publicly visible pages. Any components behind authentication, paywalls, or admin interfaces were not measured and are absent from this specification.
Border width is minimal: Only the 1px thin border is used across the system. Thicker borders (2px, 3px+) are not extracted and likely do not exist in the design system.
Typography measured on limited HTML tags: Font sizes, weights, and line-heights were derived from <h1>, <h2>, <h3>, <body>, <button>, <input>, <link>, and <caption> elements. Other semantic or display roles (e.g., <code>, <pre>, custom heading styles) may exist but were not captured.
Form input states incomplete: Only default, hover, and focus states on text inputs were measured. Other input types (select, checkbox, radio, textarea) may have additional styling not captured in this extraction.

Want a DESIGN.md like this for your own website?

Design tokens

Extracted from dribbble.com/shots/27539913--ROFTRIX-Roofing-Construction-Website-Design?utm_source=Clipboard_Shot&utm_campaign=nasrin_akter01&utm_content=%F0%9F%8F%A0%20ROFTRIX%20%E2%80%93%20Roofing%20%26%20Construction%20Website%20Design&utm_medium=Social_Share&utm_source=Clipboard_Shot&utm_campaign=nasrin_akter01&utm_content=%F0%9F%8F%A0%20ROFTRIX%20%E2%80%93%20Roofing%20%26%20Construction%20Website%20Design&utm_medium=Social_Share

Primary

#0D0C22

Primary CTA, brand accent, active state; Headings / primary text

#EA4C89

Secondary accent / hero band

#060318

Inline link colour

#E62D75

Accent / decorative

#3E34D3

Accent / decorative

#7B7194

Accent / decorative

#6E6D7A

Accent / decorative

#146EF5

Accent / decorative

Neutral

#FFFFFF

Default page background; label colour on brand surfaces

#3A3546

Body copy

#524B63

Captions, secondary text

#655C7A

Tertiary / placeholder text

#F3F3F4

1px borders and dividers

#E7E7E9

Neutral

#000000

Neutral

#D1CEDA

Neutral

Typography · Mona SansGoogle Fonts

body14px · 500 · 28px

body14px · 600 · 20px

body14px · 400 · 20px

body13px · 600 · 20px

input14px · 400 · 28px

nav-link14px · 600 · 30px

caption12px · 700 · 12px

caption9px · 800 · 20px

body14px · 700 · 17px

caption12px · 600

h132px · 700 · 38px

body16px · 400 · 28px

link14px · 400 · 20px

button14px · 600 · 14px

caption12px · 500 · 16px

link16px · 400 · 28px

body20px · 700 · 32px

h124px · 700 · 29px

h222px · 700

h320px · 600 · 24px

button14px · 400 · 17px

body18px · 600 · 28px

heading16px · 500 · 22px

caption12px · 400 · 12px

heading22px · 600 · 30.8px

button12px · 500 · 12px

body18px · 700

caption11px · 700 · 14px

h124px · 600 · 29px

h416px · 700 · 24px

body20px · 400 · 32px

button13px · 600 · 13px

body13px · 400 · 15px

caption11px · 400 · 11px

link13px · 600 · 13px

Typography · ArialGoogle Fonts

button11px · 400

Spacing

8px

16px

12px

20px

4px

24px

28px

40px

Elevation

rgba(0, 0, 0, 0.01) 0px 2px 2px 0px

rgba(18, 22, 25, 0.02) 0px 1px 10px 0px

rgba(6, 3, 24, 0.01) 0px 4px 4px 0px

Components · 6

Remixes of dribbble.com

Latest remixes

No public remixes yet. Be the first to make one.

Remix it