Mohamed Habib

Generated Nov 3, 2026

DESIGN.md for uxbert.com

uxbert.com/en/present7 colors4 componentsRajdhani

Remix

2 screenshots captured· uxbert.com

1 / 2 · Leading UX & UI Design + Development Agency | UXBERT Labs · Above the fold

Preview

the generated design system

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

Design tokens

version: alpha
name: Uxbert
description: |
  UXBERT Labs embodies a high-tech, forward-thinking aesthetic rooted in a deep,
  near-black canvas (#0B042A) with bold, saturated accent bands in vivid magenta
  (#D01C5E) and purple (#C927B8). The system prioritizes contrast and precision,
  using sharp geometric forms without rounded corners, contributing to an
  industrial yet sophisticated feel. Typography is bold and uppercase-driven,
  reinforcing confidence and modernity. Subtle lighting accents in cyan
  (#75B3FF) provide technological depth. The palette oscillates between absolute
  darkness and bright white, with strategic lavender body text (#C8B1D7)
  breaking the monotony on dark backgrounds. This is a design system for a
  digital consultancy that demands attention and signals technical prowess
  through restraint and deliberate color blocking.
source:
  url: "https://uxbert.com/en/present"
  pagesAnalyzed: 1
  extractedAt: 2026-11-03
  tokensMeasured: true
colors:
  primary: "#D01C5E"
  canvas: "#0B042A"
  surface: "#FFFFFF"
  ink: "#FFFFFF"
  body: "#C8B1D7"
  muted: "#000000"
  hairline: "#75B3FF"
  accent-1: "#C927B8"
typography:
  display-xl:
    fontFamily: Rajdhani
    fontSize: 86.4px
    fontWeight: 900
    lineHeight: 1.1
    letterSpacing: 0px
    textTransform: uppercase
  display-lg:
    fontFamily: Rajdhani
    fontSize: 59.9904px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: 0px
    textTransform: uppercase
  display-md:
    fontFamily: Rajdhani
    fontSize: 40.4984px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: 0px
    textTransform: uppercase
  heading-sm:
    fontFamily: Rajdhani
    fontSize: 25.499px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sm-uppercase:
    fontFamily: Rajdhani
    fontSize: 25.499px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
    textTransform: uppercase
  body-xl:
    fontFamily: Rajdhani
    fontSize: 20.16px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  body-lg:
    fontFamily: Rajdhani
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.7
    letterSpacing: 0px
  body-lg-strong:
    fontFamily: Rajdhani
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  body-lg-2:
    fontFamily: Rajdhani
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.7
    letterSpacing: 0px
  body-md:
    fontFamily: Rajdhani
    fontSize: 17.9993px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  body-sm:
    fontFamily: Rajdhani
    fontSize: 11.9995px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0px
  button-xl:
    fontFamily: Rajdhani
    fontSize: 20.3992px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
    textTransform: capitalize
  button-lg:
    fontFamily: Rajdhani
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
    textTransform: uppercase
  button-md:
    fontFamily: Inter
    fontSize: 11.9995px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0px
  button-md-uppercase:
    fontFamily: "Open Sans"
    fontSize: 11.9995px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0px
    textTransform: uppercase
  label:
    fontFamily: "Open Sans"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0px
  caption-sm:
    fontFamily: Rajdhani
    fontSize: 11.9995px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 1.2px
  caption-sm-uppercase:
    fontFamily: Inter
    fontSize: 11.9995px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0px
    textTransform: uppercase
  caption-sm-strong:
    fontFamily: Rajdhani
    fontSize: 11.9995px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0px
    textTransform: uppercase
  caption-sm-tight:
    fontFamily: Rajdhani
    fontSize: 11.9995px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0px
  caption-xs:
    fontFamily: Inter
    fontSize: 10.1996px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0px
rounded:
  none: 0px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 32px
  xxxl: 40px
  section: 48px
  band: 56px
borderWidths:
  thin: 1px
elevationStrategy: color-blocking
themes:
  derived: light   # the other theme is the site's measured palette
  light:
    bg: "#FEF8FA"
    surface: "#F4EEF0"
    surfaceRaised: "#ECE7E9"
    text: "#1B1215"
    textMuted: "#6F696B"
    border: "#DAD5D7"
    accent: "#D01C5E"
    accentFg: "#FFFFFF"
    focusRing: "#D01C5E"
    elevation: shadow
  dark:
    bg: "#0B042A"
    surface: "#FFFFFF"
    surfaceRaised: "#FFFFFF"
    text: "#FFFFFF"
    textMuted: "#C8B1D7"
    border: "#75B3FF"
    accent: "#D01C5E"
    accentFg: "#FFFFFF"
    focusRing: "#D01C5E"
    elevation: "border+surface"
  contrastFailures:
    - "dark: text on surface = 1:1 (needs 4.5:1)"
components:
  button-filled:
    textColor: "{colors.ink}"
    height: 56px
    padding: "16px 24px 16px 24px"
    fontSize: 16px
    fontFamily: Inter
    fontWeight: 400
    lineHeight: 1.5
    backgroundColor: "rgb(255, 73, 139)"
  button-outline:
    typography: "{typography.button-md}"
    textColor: "{colors.ink}"
    border: "1px solid rgba(255, 255, 255, 0.3)"
    height: 34.4844px
  button-text:
    textColor: "{colors.ink}"
    height: 24.4844px
    fontSize: 9.59962px
    fontFamily: Inter
    fontWeight: 400
    lineHeight: 1
  button-text-lg:
    typography: "{typography.button-md}"
    textColor: "{colors.ink}"
    height: 38.9844px
    padding: "14.9994px 19.4992px 14.9994px 19.4992px"
  card-featured:
    typography: "{typography.button-md}"
    textColor: "{colors.ink}"
    padding: "26.9989px 22.4991px 26.9989px 22.4991px"
    backgroundColor: "rgba(255, 255, 255, 0.02)"
  card:
    typography: "{typography.button-md}"
    textColor: "{colors.ink}"
  link:
    typography: "{typography.body-lg-2}"
    textColor: "{colors.ink}"
  link-2:
    typography: "{typography.body-lg-strong}"
    textColor: "{colors.ink}"
states:
  other-hover:
    target: other
    state: hover
    borderColor: "rgba(255, 255, 255, 0.3)"
  other-focus:
    target: other
    state: focus
    rounded: 0.25rem
  other-disabled:
    target: other
    state: disabled
    opacity: 0.3
  card-hover:
    target: card
    state: hover
    textColor: "{colors.canvas}"
    backgroundColor: "{colors.surface}"
  link-hover:
    target: link
    state: hover
    textColor: "rgba(255, 255, 255, 0.8)"
  button-hover:
    target: button
    state: hover
    boxShadow: "rgb(3, 34, 71) 0px 0px 30px 1px inset, rgb(78, 153, 244) 0px 0px 20px 8px inset"
    borderColor: "{colors.ink}"
breakpoints:
  - width: 375
    containerWidth: 364
    gridColumns: 2
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 56
    bodyPx: 10
    sectionPaddingX: 20
  - width: 768
    containerWidth: 745
    gridColumns: 2
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 46
    bodyPx: 10
    sectionPaddingX: 30
  - width: 1024
    containerWidth: 993
    gridColumns: 2
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 61
    bodyPx: 13
    sectionPaddingX: 40
  - width: 1280
    containerWidth: 1242
    gridColumns: 2
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 77
    bodyPx: 11
    sectionPaddingX: 109
  - width: 1440
    containerWidth: 1397
    gridColumns: 3
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 86
    bodyPx: 12
    sectionPaddingX: 123
coverage:
  statesFound: 61
  gradientsFound: 0
  rolesUnassigned: 1
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: false

Design System Inspired by UXBERT Labs

1. Visual Theme & Atmosphere

UXBERT Labs embodies a high-tech, forward-thinking aesthetic rooted in a deep, near-black canvas ({colors.canvas} — #0B042A) with bold, saturated accent bands in vivid magenta ({colors.primary} — #D01C5E) and purple ({colors.accent-1} — #C927B8). The system prioritizes contrast and precision, using sharp geometric forms without rounded corners, contributing to an industrial yet sophisticated feel. Typography is bold and uppercase-driven, reinforcing confidence and modernity. Subtle lighting accents in cyan ({colors.hairline} — #75B3FF) provide technological depth. The palette oscillates between absolute darkness and bright white, with strategic lavender body text ({colors.body} — #C8B1D7) breaking the monotony on dark backgrounds. This is a design system for a digital consultancy that demands attention and signals technical prowess through restraint and deliberate color blocking.

Key Characteristics

Stark contrast between deep navy/black canvas and vibrant magenta/pink accents
Sharp, square geometry — zero border radius throughout
Uppercase-dominant typography in Rajdhani for impact
Color-blocking elevation strategy rather than shadows
Minimal whitespace paired with bold typographic hierarchy
Precise, monolithic component styling
No soft gradients; pure, saturated hues only
Tech-forward aesthetic with consultancy authority

2. Color Palette & Roles

Primary

Primary / Brand ({colors.primary} — #D01C5E): Primary CTA fills, active states, brand accent, hero bands. Used for buttons, links, and emphasis elements signaling the brand identity.

Accent Colors

Decorative / Secondary Accent ({colors.accent-1} — #C927B8): Unassigned accent; appears in decorative contexts and background layers. No primary interactive role measured.

Interactive

Hairline / Link Accent ({colors.hairline} — #75B3FF): 1px borders, dividers, and decorative accents. Creates subtle technological depth against dark backgrounds.

Neutral Scale

Canvas / Background ({colors.canvas} — #0B042A): Default page and container background, establishing the dark, immersive foundation.
Surface / Primary Text ({colors.surface} — #FFFFFF): Card and panel backgrounds; primary headings and high-contrast text.
Body Text ({colors.body} — #C8B1D7): Body copy, secondary text, and labels on dark backgrounds. Lavender tone provides readability without harshness.
Muted / Secondary Text ({colors.muted} — #000000): Captions, secondary text, and fine print. Used sparingly; primarily for contrast on light surfaces.

3. Typography Rules

Font Family

Primary: Rajdhani (https://fonts.googleapis.com/) — bold, geometric sans-serif for display and headings. Fallback: sans-serif
Secondary: Inter (https://fonts.googleapis.com/) — clean, neutral sans-serif for buttons and captions. Fallback: sans-serif
Tertiary: Open Sans (https://fonts.googleapis.com/) — humanist sans-serif for labels and supplementary text. Fallback: sans-serif

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display XL	Rajdhani	86.4px	900	1.1	0px	Hero headlines, uppercase
Display LG	Rajdhani	60px	500	1.1	0px	Large section titles, uppercase
Display MD	Rajdhani	40.5px	500	1.1	0px	Medium headings, uppercase
Heading SM	Rajdhani	25.5px	500	1.2	0px	Sub-headings
Heading SM Uppercase	Rajdhani	25.5px	500	1.2	0px	Sub-headings, uppercase
Body XL	Rajdhani	20.2px	500	1.2	0px	Large body text
Body LG Strong	Rajdhani	18px	500	1.5	0px	Emphasized body, links
Body LG (weight 300)	Rajdhani	18px	300	1.7	0px	Light body text
Body LG (weight 600)	Rajdhani	18px	600	1.7	0px	Bold body text
Body MD	Rajdhani	18px	500	1.4	0px	Standard body copy
Body SM	Rajdhani	12px	400	1	0px	Small body text
Button XL	Rajdhani	20.4px	500	1.2	0px	Large button text, capitalize
Button LG	Rajdhani	16px	500	1.5	0px	Medium button, uppercase
Button MD	Inter	12px	400	1	0px	Small button
Button MD Uppercase	Open Sans	12px	400	1	0px	Small button, uppercase
Caption SM	Rajdhani	12px	400	1	1.2px	Fine print, minimal tracking
Caption SM Strong	Rajdhani	12px	500	1	0px	Emphasized caption, uppercase
Caption SM Tight	Rajdhani	12px	600	1	0px	Bold caption
Caption SM Uppercase	Inter	12px	400	1	0px	Uppercase caption
Caption XS	Inter	10.2px	400	1	0px	Extra-small caption
Label	Open Sans	20px	400	1	0px	Form and section labels

Principles

Uppercase is the dominant case for display and headings, reinforcing authority and modernity
All fonts use tight line heights (1.0–1.2) for compact display; body text relaxes to 1.4–1.7 for readability
Rajdhani dominates the hierarchy, signaling a tech-forward brand; Inter and Open Sans provide neutral contrast in UI and supporting roles
Letter spacing is uniformly tight (0px or 1.2px max) — no generous tracking; density reinforces precision
Weight variation (300–900) creates hierarchy without size changes; 500 is the workhorse
No decorative serifs or elaborate forms; pure geometric clarity

4. Component Stylings

Buttons

Filled / Primary CTA

Background: #FF498B (bright pink, measured filled state)
Text Color: #FFFFFF
Font: Inter, 16px, weight 400
Padding: 16px 24px
Border: 0px
Border Radius: {rounded.none} (0px)
Height: 56px
Width: 160px (measured)
Box Shadow: none
Line Height: 24px
Hover State: background-color: var(--color-pink-hover) with box-shadow: none (specific pink hover shade applied)
Implementation note: Use the filled button for primary CTAs, form submissions, and high-priority actions. Sharp edges reinforce the tech aesthetic.

Outline / Secondary

Background: rgba(0, 0, 0, 0) (transparent)
Text Color: #FFFFFF
Font: Inter, 12px, weight 400
Padding: 0px
Border: 1px solid rgba(255, 255, 255, 0.3)
Border Radius: {rounded.none} (0px)
Height: 34.5px (measured)
Width: 34.5px (measured; square icon button)
Box Shadow: none
Line Height: 11.9995px
Hover State: border-color: rgba(255, 255, 255, 0.4) or rgba(255, 255, 255, 0.5)
Implementation note: Square outline buttons work for secondary actions, navigation toggles, and auxiliary controls. Border opacity increases on hover for subtle feedback.

Text / Tertiary

Background: rgba(0, 0, 0, 0) (transparent)
Text Color: #FFFFFF
Font: Inter, 9.6px, weight 400
Padding: 0px
Border: 0px
Border Radius: {rounded.none} (0px)
Height: 24.5px (measured)
Line Height: 9.6px
Box Shadow: none
Hover State: opacity: 0.5 or color: rgba(255, 255, 255, 0.8)
Implementation note: Minimal text buttons for links, micro-interactions, and de-emphasized actions. No container; text and opacity changes signal interactivity.

Text Large / Secondary Text Button

Background: rgba(0, 0, 0, 0) (transparent)
Text Color: #FFFFFF
Font: Inter, 12px, weight 400
Padding: 15px 19.5px
Border: 0px
Border Radius: {rounded.none} (0px)
Height: 39px (measured)
Width: 174px (measured)
Line Height: 12px
Box Shadow: none
Hover State: opacity or color shifts; opacity: 0.5
Implementation note: Slightly larger text buttons for secondary navigation or support actions.

Cards & Containers

Featured Card

Background: rgba(255, 255, 255, 0.02) (near-transparent white; minimal lift)
Text Color: #FFFFFF
Font: Inter, 12px, weight 400
Padding: 27px 22.5px
Border: 0px
Border Radius: {rounded.none} (0px)
Width: 367.5px (measured)
Height: 124.7px (measured)
Box Shadow: none
Line Height: 12px
Hover State: color: rgb(11, 4, 42) (text darkens), background-color: rgb(255, 255, 255) (card fills to white)
Implementation note: Subtle glass-like card with a ghost outline. Hover transitions to full white fill, inverting text color. Perfect for testimonials or feature highlights.

Default Card

Background: rgba(0, 0, 0, 0) (transparent; flat)
Text Color: #FFFFFF
Font: Inter, 12px, weight 400
Padding: 0px
Border: 0px
Border Radius: {rounded.none} (0px)
Width: 1194px (measured full-width context)
Height: 427.5px (measured)
Box Shadow: none
Line Height: 12px
Implementation note: Flat, content-only container. No background or border; typography and spacing carry all hierarchy. Use for hero sections and grid layouts.

Inputs & Forms

Input Base (inferred from button outline and interactive patterns)

Background: rgba(0, 0, 0, 0) or rgba(255, 255, 255, 0.05)
Text Color: #FFFFFF or #C8B1D7 (body text)
Border: 1px solid rgba(255, 255, 255, 0.3) to rgba(255, 255, 255, 0.4)
Border Radius: {rounded.none} (0px)
Padding: {spacing.md} (16px) horizontal, {spacing.sm} (12px) vertical
Focus State: border-color: rgba(255, 255, 255, 0.4), outline: 2px solid var(--color-blue-600) (blue ring)
Hover State: border-color: rgba(255, 255, 255, 0.5)
Disabled State: opacity: 0.3 to 0.5
Implementation note: Square input fields with subtle borders. Focus ring in cyan ({colors.hairline}) signals focus state. Opacity reduction for disabled inputs.

Navigation

Header Navigation

Background: {colors.canvas} (#0B042A)
Text Color: #FFFFFF
Font: Rajdhani or Inter, variable sizes ({typography.body-lg-strong} 18px to button sizes)
Border: 1px top or bottom divider in {colors.hairline} (#75B3FF) or rgba(255, 255, 255, 0.1)
Padding: {spacing.lg} (20px) vertical, {spacing.md} (16px) horizontal per item
Border Radius: {rounded.none} (0px)
Hover State: color: rgba(255, 255, 255, 0.8), border-color: rgba(255, 255, 255, 0.7), or subtle background tint
Implementation note: Sticky or fixed header with stark contrast. Nav links are simple text with opacity/color shifts on hover. Menu toggle (icon button, outline style) appears on mobile.

Link

Background: transparent
Text Color: #FFFFFF
Font: Rajdhani, 18px, weight 500–600
Padding: 0px
Border: 0px
Border Radius: 0px
Height: 27px to auto (measured)
Hover State: color: rgba(255, 255, 255, 0.8), or background-color: rgb(255, 98, 155) (bright pink fill), or color: rgb(11, 4, 42) (invert on white surfaces)
Implementation note: Inline links use color and opacity shifts. Footer or interactive sections may apply pink background on hover for emphasis.

Footer

Default Footer

Background: rgba(0, 0, 0, 0) or {colors.canvas} (#0B042A)
Text Color: #FFFFFF
Font: Inter, 12px, weight 400
Padding: 0px (full-width structure; internal grid handles spacing)
Border: 0px
Border Radius: 0px
Width: 1440px (full viewport)
Height: 617.7px (measured)
Box Shadow: none
Line Height: 12px
Implementation note: Full-width footer with no background fill (flat on canvas). Nested grid or flex layout for columns. Links and text use standard navigation hover states.

5. Layout Principles

Spacing System

UXBERT Labs uses a structured 4px base unit scaled to accommodate typography density and breathing room:

{spacing.xxs} = 4px — Icon gaps, tight micro-spacing
{spacing.xs} = 8px — Small padding, nested element margins
{spacing.sm} = 12px — Button label padding, compact sections
{spacing.md} = 16px — Standard padding for inputs, cards, text blocks
{spacing.lg} = 20px — Section headers, navigation items, generous margins
{spacing.xl} = 24px — Component spacing, hero text padding
{spacing.xxl} = 32px — Between subsections, card groupings
{spacing.xxxl} = 40px — Large gaps between content blocks
{spacing.section} = 48px — Major section separations (top/bottom padding)
{spacing.band} = 56px — Full-width colored band spacing (hero sections)

Usage Context: Tight spacing (xxs–sm) is used for form controls and compact navigation. Standard spacing (md–lg) governs component internals and text padding. Large spacing (xl–band) creates breathing room between sections and hero bands.

Grid & Container

Max Width: 1397px at 1440px viewport (measured)
Column Strategy: 2 columns at mobile (375px–1024px), expanding to 3 columns at 1440px (inferred from responsive data; 2 columns held through most breakpoints)
Horizontal Padding: Scales from {spacing.lg} (20px) at 375px, to {spacing.xxxl} (40px) at 1024px, reaching 123px at 1440px (center-aligned content with wide gutters)
Section Patterns: Full-width color bands (magenta/purple heroes) contain nested grid layouts. Default sections use the max-width container centered with equal side padding.

Whitespace Philosophy

Whitespace is deliberately minimal within components (tight padding, zero radius) but generous between sections. The dark canvas ({colors.canvas}) acts as negative space, allowing vibrant accents and white text to dominate. No filler patterns or decorative spacers; spacing is structural, not ornamental. Vertical rhythm is tight at the micro level (buttons, inputs) and expands at the macro level (section gaps) to guide eye flow.

Border Radius Scale

{rounded.none} = 0px — Applied to all interactive components (buttons, inputs, cards, images, badges, overlays, modals)

Component-Specific Context:

Buttons: 0px (sharp fills and outlines)
Cards: 0px (flat, geometric containers)
Inputs: 0px (aligned with button language)
Images: 0px (no softening; images sit as hard rectangles)
Badges: 0px (geometric emphasis labels)
Modals / Overlays: 0px (monolithic, intentional geometry)

The system is entirely sharp-cornered, reinforcing industrial precision and tech authority.

Border Widths

Thin: 1px — Applied to button outlines, input borders, dividers, and hairline accents. This is the only explicit border weight in the system; all borders are hairline-thin.

Where Applied:

Outline buttons: 1px solid rgba(255, 255, 255, 0.3) to rgba(255, 255, 255, 0.5)
Input fields: 1px solid rgba(255, 255, 255, 0.3) to rgba(255, 255, 255, 0.4)
Dividers & decorative lines: 1px solid {colors.hairline} (#75B3FF)
Focus states: 2px outline (blue ring, thicker than body border)

6. Depth & Elevation

UXBERT Labs uses color-blocking for depth, not layered shadows. Elevation is expressed through surface color changes, opacity shifts, and border treatment rather than blur or offset shadows.

Level	Treatment	Use
Flat (Base)	No background, transparent container	Hero text, default cards, body layouts
Subtle Lift	`rgba(255, 255, 255, 0.02)` background	Featured cards, ghost containers
Filled Surface	`rgba(255, 255, 255, 0.05)` or full `#FFFFFF`	Interactive states, card hover, modal fills
Button Depth	No shadow; filled background color (`#FF498B`)	Primary CTA emphasis via hue, not depth

Shadow Philosophy: The system avoids drop shadows and inset shadows in favor of hue and opacity. Where hover states involve inset glow effects (e.g., button :hover -> "boxShadow":"rgb(3, 34, 71) 0px 0px 30px 1px inset, rgb(78, 153, 244) 0px 0px 20px 8px inset"), these are rare and used only for prominent interactive feedback. The norm is no shadow at all.

Opacity Levels

Opacity is used to layer surfaces and signal interactive state without depth effects:

100% (1.0): Default, fully opaque elements
90% (0.9): Subtle background fill hover (rare; e.g., card transitions)
70% (0.7): Muted borders, secondary dividers
60% (0.6): Disabled or de-emphasized elements
50% (0.5): Text opacity on hover, disabled button states
40% (0.4): Lighter disabled state, hover underlay
30% (0.3): Disabled button or very light text overlay
25% (0.25): Minimal scrim or overlay (rare)

Usage: Opacity shifts create hover feedback without recoloring. Disabled states apply opacity: 0.3 to 0.5, graying the element without CSS-level disabling. Borders and backgrounds layer opacity for subtle contrast.

Z-index / Layering

Stacking order follows a consistent ladder for predictable layering:

Base: z-index: 1 — Default document flow
Dropdown: z-index: 10 — Submenu lists, popovers
Dropdown (High): z-index: 99 — High-priority dropdowns or secondary modals
Sticky: z-index: 200 — Sticky headers, persistent navigation
Sticky (High): z-index: 299 — Higher sticky priority (rare)
Sticky (Very High): z-index: 399 — Emergency sticky override
Sticky (Max): z-index: 400 — Maximum sticky layer
Modal / Overlay: z-index: 500 — Modals, dialogs, and top-level overlays

Implementation: Use z-index: 200 for fixed headers, z-index: 99 for dropdown menus, and z-index: 500 for modal dialogs. Do not exceed 500 unless a new priority layer is explicitly needed.

7. Do's and Don'ts

Do

Use sharp corners ({rounded.none} — 0px) consistently across all components for industrial precision.
Apply uppercase typography for headings, section labels, and CTAs to reinforce authority and brand presence.
Build depth through color opacity, not shadows. Use rgba(255, 255, 255, 0.02) to rgba(255, 255, 255, 0.1) for subtle fills; reserved background colors for emphasis.
Maintain tight spacing within components ({spacing.sm} to {spacing.md}) and generous spacing between sections ({spacing.section} to {spacing.band}).
Prioritize contrast: White text on dark canvas, or invert to dark text on white fills (card hover states).
Use the primary accent ({colors.primary} — #D01C5E) deliberately for CTAs, active states, and brand emphasis—not for everything.
Apply focus rings in cyan ({colors.hairline} — #75B3FF) for accessibility; blue signals interactive state across the system.
Stack opacity and color shifts for interactive feedback (hover: border-color, opacity, or background change) before reaching for transforms or shadows.
Adhere to the Rajdhani/Inter/Open Sans hierarchy to maintain visual consistency and technical brand voice.
Test touch targets at 48px minimum (buttons typically 56px tall in this system) for mobile accessibility.

Don't

Do not round corners or add border-radius to any component. The system is entirely sharp; rounded corners break the industrial aesthetic.
Do not use shadows for elevation (drop shadows, multiple layered shadows). Color opacity and background fills express depth instead.
Do not set text in lowercase for headings or prominent CTAs; uppercase is the system default for display hierarchy.
Do not mix serif or decorative typefaces. Stick to Rajdhani (display), Inter (UI), and Open Sans (labels). Serif fonts contradict the tech-forward brand.
Do not abuse the primary accent. Reserve #D01C5E for CTAs, active states, and brand-critical elements. Overuse dilutes impact.
Do not apply large tracking (letter-spacing > 2px) to body or display text. The system uses tight tracking (0–1.2px) for density and precision.
Do not create multi-layered shadows or glows (except in rare button hover inset shadows). No drop shadows on cards or text.
Do not mix opacity values arbitrarily. Reference the standardized opacity scale (25%, 30%, 40%, 50%, 60%, 70%, 90%, 100%) to maintain consistency.
Do not expose light/dark mode toggles or derived themes based on this palette. The system is intentionally dark-first; light surfaces are action states, not theme variants.
Do not exceed a z-index of 500 without explicit design review. Layers above 500 indicate stacking conflicts.

8. Responsive Behavior

Breakpoints

Breakpoint	Viewport Width	Max Content Width	Grid Columns	Key Changes
Mobile	375px	364px	2	Navigation hidden; menu toggle visible; `{spacing.lg}` (20px) horizontal padding; display text reduced to 56px
Tablet	768px	745px	2	Navigation still toggled; `{spacing.xxxl}` (40px) padding; display text ~46px; content column expands
Desktop (Small)	1024px	993px	2	Navigation remains toggled; `{spacing.xxxl}` (40px) padding; display text ~61px; larger body font (13px)
Desktop (Large)	1280px	1242px	2	Navigation still toggled; center padding increases to ~109px; display text ~77px
Desktop (XL)	1440px	1397px	3	Full layout unlocked; 123px side padding; display text 86px; 3-column grids available; nav fully optimized

Observations: The menu toggle (yes) remains visible across all measured breakpoints, indicating a mobile-first or always-mobile-ready navigation paradigm. Grid columns jump from 2 to 3 only at 1440px. Horizontal padding grows proportionally as viewport expands, centering content with larger gutters. Display typography scales up across all breakpoints, peaking at 86px (Display XL) at 1440px.

Touch Targets

Minimum Touch Size: 48px × 48px (per WCAG guidelines)
Measured Button Height: 56px (primary button fill) — exceeds minimum, providing ample touch surface
Outline Button (Icon): 34.5px × 34.5px — slightly below ideal; consider 48px minimum for touch safety
Link Hit Area: Implicit; rely on button/overlay hit areas. Inline text links should have 44px+ vertical padding or line-height spacing
Form Inputs: 48px+ minimum height recommended; measured outlines at 34.5px suggest form fields may be tighter—ensure adequate padding

Guidance: Size interactive elements to at least 48px in both dimensions. If a component measures below 48px (e.g., small icon button), provide extra padding or spacing to ensure comfortable tap targets on touch devices.

Collapsing Strategy

Mobile (375px–768px):
- Single-column or 2-column layout with full-width stacking
- Navigation menu hidden behind toggle (icon button, outline style)
- Horizontal padding reduced to {spacing.lg} (20px)
- Display headings scale down to ~46–56px
- Cards and sections stack vertically; full-width cards become single-column grids
- Hero sections remain full-width with overlaid text
Tablet (768px–1024px):
- Layout expands to 745px max width (centered)
- 2-column grid introduced for content; some sections may still use single column
- Navigation toggle remains (menu not always visible)
- Padding increases to {spacing.xxxl} (40px)
- Typography slightly larger (~46px display)
- Sidebar-style layouts collapse to stacked sections
Desktop (1024px+):
- Multi-column layouts available (2 columns through 1280px, 3+ columns at 1440px)
- Max content width 1397px at 1440px
- Horizontal padding scales from 40px to 123px (wide gutters for visual breathing room)
- Navigation optimized but remains toggle-accessible (suggests persistent mobile paradigm or sticky header)
- Full-width sections use asymmetric two-column or three-column grids
- Hero sections expand to fill viewport with centered text overlay

Key Pattern: The system maintains a mobile-first, toggle-based navigation through all breakpoints, suggesting a progressive enhancement strategy rather than traditional desktop nav. Layout unlocks additional columns and padding at larger sizes, but the navigation paradigm does not shift to a visible horizontal menu bar.

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Primary / Brand ({colors.primary} — #D01C5E) — Use for primary buttons, links, active states, and hero accents
Background: Canvas ({colors.canvas} — #0B042A) — Page and container default; near-black, immersive foundation
Heading Text: Surface ({colors.surface} — #FFFFFF) — Primary white for headings and high-contrast text on dark
Body Text: Body ({colors.body} — #C8B1D7) — Lavender text for body copy and secondary info on dark backgrounds
Borders / Accents: Hairline ({colors.hairline} — #75B3FF) — Cyan 1px dividers and subtle technological accents
Secondary Accent: Accent-1 ({colors.accent-1} — #C927B8) — Decorative purple; no measured interactive role; use sparingly for background or overlay layers
Muted / Secondary: Muted ({colors.muted} — #000000) — Black text on white surfaces; captions and fine print

Iteration Guide

Color Blocking Over Shadows: Never add drop shadows or layered blur effects. Express depth through surface opacity (rgba(255, 255, 255, 0.02) to 0.1), border color shifts, or fills. Hover states change background or opacity, not shadow.
Sharp Corners Everywhere: Set border-radius: 0px on all components—buttons, cards, inputs, images, badges, modals. There are no rounded corners in this system; sharp geometry is mandatory.
Uppercase for Impact: Display and heading text must use text-transform: uppercase. Body copy uses standard sentence case. This creates visual hierarchy and reinforces brand authority.
Tight Spacing, Loose Between Sections: Internal component padding uses {spacing.sm} to {spacing.md} (12–16px). Between sections, use {spacing.section} (48px) or {spacing.band} (56px). This creates a rhythm of density and breathing room.
Typography Hierarchy Over Size Alone: Weight variation (300–900) and case (uppercase/lowercase) carry hierarchy. Font sizes support but don't solely define levels. Rajdhani at weight 900 at 86px is the hero; Rajdhani at weight 500 at 40px is a strong heading; Inter at 12px weight 400 is UI text.
Opacity for Interactivity: Hover states use opacity: 0.5 to 0.8, not color inversions or large shadow changes. Disabled states use opacity: 0.3 to 0.5. This is subtle, consistent, and maintains the dark aesthetic.
Focus Rings in Cyan: Keyboard focus on buttons, inputs, and links must apply outline: 2px solid #75B3FF (cyan). This blue ring signals focus for accessibility and maintains brand precision.
Button Styling is Minimal: Filled buttons are solid #FF498B, outline buttons are 1px solid rgba(255, 255, 255, 0.3), text buttons are transparent with opacity shifts. No gradients, no multi-shadow stacks, no border treatments beyond 1px.
Sticky Header at z-index: 200: Fixed or sticky navigation uses z-index: 200. Modals use z-index: 500. Dropdowns use z-index: 10 to 99. Respect this ladder; do not exceed 500 without review.
Mobile-First Stacking, Desktop Grid Unlocking: Build single-column layouts first. At 768px, introduce 2-column grids. At 1440px, unlock 3-column grids. Padding grows from 20px to 123px as viewport expands. Navigation remains toggle-based across all breakpoints in this extraction, suggesting a persistent mobile UX paradigm.

10. Known Gaps

Interaction States Not Fully Specified: The extraction captured hover and focus selectors but not all possible states (e.g., active on links, visited states, or specific form validation feedback). Only the hover, focus, and disabled states documented above are assured to be in the live stylesheet; others were not extracted.
No Semantic Status Colors: The site does not declare error, warning, success, or info state colors in its measured styles. No semantic ramp exists. Error states, validation feedback, and status badges are not defined by this design system.
No Gradient or Decorative Mesh Backgrounds: All surfaces are solid colors or minimal opacity overlays. Gradients, animated meshes, or decorative patterns were not observed in the extraction.
No Light or Dark Mode Toggle: The system is single-theme (dark). Any "light mode" inferred from inverted colors would be a derived theme, not a published design decision. The brand ships dark-first only.
Shadows Minimally Used: While hover states on some buttons reference inset shadows (e.g., blue button glow), the default elevation strategy is color-blocking. Full shadow depth and stacking are not part of the core system. The single inset glow on hover is an exception, not a pattern.
Navigation Behavior Across Breakpoints Unclear: All measured breakpoints show menu toggle visible (menu toggle: yes). No desktop viewport shows a full horizontal navigation bar. It is unclear whether the nav expands at ultra-wide sizes (>1440px) or remains toggle-based by design.
Form Validation and Inline Error States Not Measured: Input focus and disabled states are captured, but specific error border colors, success checkmarks, or inline validation text styling are not defined. Form error UX is absent from this extraction.
Micro-Interactions and Animation Timing Not Defined: The extraction does not include CSS transitions, animation-duration, or easing curves. Hover state transitions and page load animations are not specified.
One Unassigned Accent Color: {colors.accent-1} (#C927B8) has no measured role and is treated as decorative. Its intended use (background layer, decorative band, etc.) is not formalized in the system.
Print Styles Not Extracted: No print media queries or print-specific typography were captured. Print or PDF export styling is undefined.
Cross-Origin Stylesheet Coverage Incomplete: Some CSS may reside on cross-origin domains and was not readable during extraction. Third-party components or embedded widgets may not fully comply with this system's specification.

End of Design System Inspired by UXBERT Labs

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

Design tokens

Extracted from uxbert.com/en/present

Primary

#D01C5E

Primary CTA, brand accent, active state

#C927B8

Accent / decorative

Neutral

#0B042A

Default page background

#FFFFFF

Card / panel background; Headings / primary text

#C8B1D7

Body copy

#000000

Captions, secondary text

#75B3FF

1px borders and dividers

Typography · RajdhaniGoogle Fonts

h140.4984px · 500 · 44.5482px

h286.4px · 900 · 95.04px

h325.499px · 500 · 30.5988px

body17.9993px · 500 · 25.199px

link18px · 500 · 27px

list-item11.9995px · 400 · 11.9995px

body18px · 300 · 30.6px

display59.9904px · 500 · 65.9894px

heading25.499px · 500 · 30.5988px

caption11.9995px · 500 · 11.9995px

body18px · 600 · 30.6px

body20.16px · 500 · 24.192px

body17.9993px · 500 · 23.3991px

button20.3992px · 500 · 24.479px

button16px · 500 · 24px

body23.999px · 400 · 23.999px

caption11.9995px · 400 · 11.9995px

caption11.9995px · 600 · 11.9995px

Typography · InterGoogle Fonts

button11.9995px · 400 · 11.9995px

caption11.9995px · 400 · 11.9995px

body16px · 400 · 24px

caption10.1996px · 400 · 10.1996px

Typography · Open SansGoogle Fonts

label20px · 400 · 20px

body16px · 400 · 24px

body16px · 400 · 28.8px

body20px · 400 · 36px

body16px · 400 · 16px

button11.9995px · 400 · 11.9995px

Spacing

4px

8px

12px

16px

20px

24px

32px

40px

Components · 4

Remixes of uxbert.com

Latest remixes

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

Remix it