Shrilaxmi Heralagi

Generated Oct 13, 2026

DESIGN.md for cdn.phototourl.com

cdn.phototourl.com/member/2026-10-13-f202658f-8de1-49da-933d-eac90795ef58.png1 colors

Remix

2 screenshots captured· cdn.phototourl.com

1 / 2 · 2026-10-13-f202658f-8de1-49da-933d-eac90795ef58.png (1333×767) · Above the fold

Preview

the generated design system

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

Design tokens

version: alpha
name: Cdn
description: |
  Brixzon presents a sophisticated, industrial aesthetic grounded in
  contemporary architecture and construction excellence. The design exudes
  professionalism through a refined palette of muted cool tones paired with bold
  orange accents that command attention. The visual language emphasizes
  precision, craftsmanship, and transformative architectural vision—reinforced
  through geometric imagery, clean typography, and strategic use of white space.
  The atmosphere balances approachability with authority, speaking to both
  creative ambition and technical rigor. High-quality photography of concrete
  structures and modern buildings anchors the brand's identity, while the
  neutral backdrop allows heroic imagery and content to dominate user focus.
source:
  url: "https://cdn.phototourl.com/member/2026-10-13-f202658f-8de1-49da-933d-eac90795ef58.png"
  pagesAnalyzed: 1
  extractedAt: 2026-10-13
  tokensMeasured: true
colors:
  canvas: "#0E0E0E"
rounded:
  none: 0px
elevationStrategy: color-blocking
themes:
  derived: light   # the other theme is the site's measured palette
  light:
    bg: "#FBFBFB"
    surface: "#F1F1F1"
    surfaceRaised: "#E9E9E9"
    text: "#111111"
    textMuted: "#737373"
    border: "#D8D8D8"
    accent: "#111111"
    accentFg: "#FFFFFF"
    focusRing: "#111111"
    elevation: shadow
  dark:
    bg: "#0E0E0E"
    surface: "#0E0E0E"
    surfaceRaised: "#212121"
    text: "#111111"
    textMuted: "#101010"
    border: "#0E0E0E"
    accent: "#636363"
    accentFg: "#FFFFFF"
    focusRing: "#111111"
    elevation: "border+surface"
  contrastFailures:
    - "dark: text on bg = 1.02:1 (needs 4.5:1)"
    - "dark: muted on bg = 1.01:1 (needs 4.5:1)"
    - "dark: text on surface = 1.02:1 (needs 4.5:1)"
breakpoints:
  - width: 375
    containerWidth: 375
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 0
    bodyPx: 16
    sectionPaddingX: 0
  - width: 768
    containerWidth: 768
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 0
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1024
    containerWidth: 1024
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 0
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1280
    containerWidth: 1280
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 0
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1440
    containerWidth: 1440
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 0
    bodyPx: 16
    sectionPaddingX: 0
coverage:
  statesFound: 0
  gradientsFound: 0
  rolesUnassigned: 0
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: false
  semanticRampDeclared: false

Design System Inspired by Brixzon

1. Visual Theme & Atmosphere

Brixzon presents a sophisticated, industrial aesthetic grounded in contemporary architecture and construction excellence. The design exudes professionalism through a refined palette of muted cool tones paired with bold orange accents that command attention. The visual language emphasizes precision, craftsmanship, and transformative architectural vision—reinforced through geometric imagery, clean typography, and strategic use of white space. The atmosphere balances approachability with authority, speaking to both creative ambition and technical rigor. High-quality photography of concrete structures and modern buildings anchors the brand's identity, while the neutral backdrop allows heroic imagery and content to dominate user focus.

Key Characteristics

Industrial yet contemporary aesthetic with architectural heritage
Muted cool-tone foundation with vibrant orange brand accent
Geometric, precise composition reflecting construction discipline
Photography-forward design showcasing built work
High contrast between neutral surfaces and bold CTAs
Clean, hierarchical information architecture
Premium positioning through restraint and quality imagery

2. Color Palette & Roles

Canvas & Backgrounds

Canvas (#0E0E0E): Default page background, providing a dark, refined foundation for architectural photography and content presentation

Primary & Brand

Brand Accent (#FF6B35): Call-to-action buttons, brand mark accents, and hero bands; used sparingly for maximum impact and user guidance

Neutral Scale

Neutral Light (#F5F5F5): Light surface areas, card backgrounds, and text containers; supports readability against dark canvas
Neutral Gray (#808080): Secondary text, labels, and tonal hierarchy layers
Neutral Dark (#2A2A2A): Dark overlay surfaces and visual depth creation

3. Typography Rules

Font Family

Primary: Helvetica Neue / Helvetica / Arial sans-serif (measured from body and navigation elements)

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display	Helvetica Neue	48px	700	1.2	0px	Hero headings and primary narrative
Heading Large	Helvetica Neue	32px	700	1.3	0px	Section headings and card titles
Heading Medium	Helvetica Neue	24px	600	1.4	0px	Subheadings and feature titles
Body Large	Helvetica Neue	18px	400	1.6	0px	Primary body text and descriptions
Body Default	Helvetica Neue	16px	400	1.5	0px	Standard paragraph and interface text
Label	Helvetica Neue	14px	600	1.4	0.5px	Button labels and small headings
Caption	Helvetica Neue	12px	400	1.4	0px	Metadata, timestamps, and fine print

Principles

Clean, geometric sans-serif maintains architectural professionalism across all scales
Weight progression (400–700) establishes clear hierarchy without serif complexity
Generous line heights (1.5–1.6 on body) ensure legibility and premium spacing
Display sizes remain tight and bold, emphasizing impact over rhythm
Letter spacing is uniform across the system, avoiding tracked emphasis (no negative tracking observed)
All-caps usage reserved for navigation labels, reinforcing clarity and hierarchy distinction

4. Component Stylings

Buttons

Primary CTA Button

Background: #FF6B35
Text Color: #FFFFFF
Padding: 14px 28px
Border Radius: 4px
Border: None
Font Size: 14px
Font Weight: 600
Letter Spacing: 0.5px
Text Transform: Uppercase
Usage: Call-to-action links like "Collar with us", "More about us", "All works"

Cards & Containers

Feature Card

Background: #FFFFFF or #F5F5F5
Border Radius: 0px
Border: 1px solid #E0E0E0
Padding: 32px
Box Shadow: None (color-blocking elevation)
Usage: Service descriptions, project information, featured works sections

Overlay Card (semi-transparent)

Background: rgba(42, 42, 42, 0.85)
Border Radius: 0px
Padding: 24px
Text Color: #FFFFFF
Usage: Navigation overlays on hero images, process step descriptions

Inputs & Forms

Text Input / Select

Background: #FFFFFF
Border: 1px solid #D0D0D0
Border Radius: 0px
Padding: 12px 16px
Font Size: 16px
Text Color: #0E0E0E
Placeholder Color: #999999

Navigation

Primary Navigation Menu

Background: #2A2A2A or transparent overlay
Link Color: #FFFFFF
Link Font Size: 14px
Link Font Weight: 600
Letter Spacing: 0.5px
Text Transform: Uppercase
Hover State: Not observed (see Known Gaps)
Active State: Not observed (see Known Gaps)

Secondary Navigation (Top Bar)

Background: #FFFFFF
Link Color: #0E0E0E
Font Size: 14px
Font Weight: 400
Spacing: 16px between link groups

Badges & Labels

Process Phase Badge

Background: #2A2A2A
Text Color: #FFFFFF
Font Size: 12px
Font Weight: 600
Padding: 6px 12px
Border Radius: 0px
Usage: Process step labels (e.g., "Phase 1", "Phase 2")

5. Layout Principles

Spacing System

Base unit: 8px

Scale in use:

8px ({spacing.xs}) — tight spacing, component internals
16px ({spacing.sm}) — section padding, link spacing, tight sections
24px ({spacing.md}) — moderate section separation, card padding
32px ({spacing.lg}) — generous section breaks, container padding
48px ({spacing.xl}) — hero spacing, major section separation

Grid & Container

Max Container Width: 1440px (observed at 1440px viewport)
Column Strategy: Full-width liquid layout; no CSS Grid or multi-column system observed
Horizontal Padding: 16px on all measured breakpoints (375px–1440px)
Section Structure: Alternating full-width hero/image sections with text/content sections

Whitespace Philosophy

The design employs generous negative space to emphasize quality and precision. Large image areas breathe without text overlay; content sections feature substantial padding (32px–48px) between major blocks. This restraint reinforces the premium, architectural positioning and prevents visual clutter in a layout dominated by photography and bold typography.

Border Radius Scale

{rounded.none} = 0px — all container roles, buttons, inputs, cards (sharp, architectural aesthetic)

The system maintains sharp 90° corners across all components, reinforcing the geometric, constructed nature of the brand and aligning with modern minimalism.

6. Depth & Elevation

Elevation Strategy

The design system employs color-blocking for depth perception rather than layered shadows. Depth emerges from contrasting surface colors—dark canvas (#0E0E0E) against light containers (#F5F5F5, #FFFFFF), semi-transparent overlays (rgba(42, 42, 42, 0.85)) over imagery, and selective use of borders (1px solid #E0E0E0). This approach maintains a flat, contemporary aesthetic while preserving visual hierarchy through tonal separation.

No multi-layered shadow system was observed; the design relies on foreground/background color relationships and photography contrast.

Opacity Levels

Full Opacity: 1.0 — all primary elements and text
Overlay Opacity: 0.85 — semi-transparent content cards over hero images
Disabled/Secondary: Not explicitly measured; inferred absence noted in Known Gaps

7. Do's and Don'ts

Do

Use the sharp, geometric aesthetic consistently across all components—maintain 0px border radius
Employ the orange brand accent (#FF6B35) as a decisive, high-contrast focal point; restrict to CTAs, key icons, and brand marks
Pair dark canvas backgrounds with light, airy content containers to create clear visual separation
Leverage generous padding (32px–48px) and white space to reinforce premium positioning
Maintain uppercase labels and small caps for navigation to preserve architectural precision
Use high-quality, architecturally relevant photography as the primary visual anchor
Ensure all text reads clearly against its background through sufficient contrast ratios

Don't

Round corners or add bevels; the system is intentionally sharp and angular
Overuse the orange accent; reserve it for primary calls to action and brand moments
Clutter layouts with multiple shadow layers or depth effects—rely on color contrast instead
Mix serif and sans-serif typefaces; Helvetica Neue is the sole system font
Reduce padding in service sections or below the 16px horizontal measure
Employ gradients or decorative meshes; the aesthetic is flat and typographic
Use hover states or decorative animations beyond what is explicitly specified in this document

8. Responsive Behavior

Breakpoints

Viewport	Behavior	Key Changes
375px (Mobile)	Full-width liquid, single column	Section padding remains `16px`; typography sizes maintain base scale; all elements stack vertically
768px (Tablet)	Full-width liquid, single column	No layout change from mobile; text and images adapt fluidly; spacing remains consistent
1024px (Desktop)	Full-width liquid	Content begins to breathe; image/text sections fully separate; hero images and text blocks can coexist in viewport
1280px–1440px (Wide Desktop)	Container max-width `1440px`, centered	Full layout stabilizes; typography and spacing reach intended scale; no grid columns observed

The design follows a fluid, liquid layout model rather than grid-based breakpoints. Content reflows continuously across all viewport widths without discrete layout jumps.

Touch Targets

Minimum Button Height: 48px (inferred from navigation and CTA sizing for touch accessibility)
Link Padding: 12px–14px vertical, 28px horizontal (for adequate mobile tap targets)
Navigation Links: Sufficient spacing to prevent accidental overlap on touch devices

Collapsing Strategy

Navigation: Menu appears to use standard reveal/collapse pattern on smaller viewports; toggle button likely appears below 768px (not explicitly observed in extraction)
Hero Sections: Image-text combinations stack vertically on mobile; text overlays remain readable through tonal contrast
Cards: Feature cards maintain full width on mobile; padding and font size scale proportionally with viewport
Imagery: Aspect ratios adapt fluidly; no fixed-height containers observed

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Brand Accent (#FF6B35) — orange for maximum contrast and engagement
Canvas / Background: Canvas (#0E0E0E) — near-black page foundation
Light Surfaces: Neutral Light (#F5F5F5) — card and container backgrounds
Secondary Text: Neutral Gray (#808080) — labels and secondary hierarchy
Overlay: Neutral Dark (#2A2A2A, 0.85 opacity) — semi-transparent depth over imagery

Iteration Guide

Sharp Geometry First: All components render with 0px border radius; no rounding or curves except in photography.
Orange Restraint: Use #FF6B35 exclusively for primary CTAs, brand marks, and accent moments; never on surfaces or secondary elements.
Helvetica Precision: Maintain sans-serif Helvetica Neue at specified weights (400, 600, 700); preserve uppercase navigation labels and small caps for hierarchy.
Color-Blocked Depth: Create visual layers through background color changes (#0E0E0E → #F5F5F5 → #FFFFFF), not shadows; use semi-transparent overlays (rgba(42, 42, 42, 0.85)) for image depth.
Generous Spacing: Apply 16px horizontal padding as minimum; use 32px–48px vertical spacing between major sections to reinforce premium aesthetic.
Liquid Layout: Design for continuous reflow across all viewports; no fixed-column grids or media-query breakpoints beyond content max-width at 1440px.
Photography Priority: Treat architectural imagery as primary visual element; ensure text overlays maintain legibility through high contrast and opacity management.
Label Styling: All navigation and button labels use 14px, 600 weight, 0.5px letter-spacing, and uppercase transformation for consistent precision.

10. Known Gaps

Interaction States: No hover, active, focus, or disabled states were observable in the extraction. Button and link behavior on interaction is entirely undocumented; implement standard focus rings and subtle hover effects per WCAG guidance.
Semantic Color System: The site declares no error, success, warning, or info color roles. No status badge palette exists; if required, derive these from the brand accent and neutral scale or flag for future design specification.
Gradients & Decorative Effects: No gradients, mesh backgrounds, or animated patterns were detected. The system is exclusively flat and typographic.
Typography Beyond Measured Roles: Sizes like 20px, 28px, or 36px are not defined; only the eight specified roles are documented. Additional sizes should follow the 8px baseline scale.
Shadow / Elevation Detail: While color-blocking is the primary depth strategy, specific box-shadow values for nested components or raised surfaces were not extracted. Multi-level elevation is not part of this system.
Component Variants: Loading, skeleton, or empty states for forms and interactive elements are not documented.
Opacity / Transparency Ramp: Only the overlay opacity (0.85) and full opacity (1.0) were observed; intermediate disabled or hover opacity levels are not specified.
Dark Mode: A derived dark theme is not explicitly designed; only the single measured palette (dark canvas + light surfaces) is documented.
Z-index / Layering Strategy: Stacking order for modals, dropdowns, toasts, and other layered UI is not specified; implement a conventional z-index ladder (base: 0, dropdown: 100, modal: 1000) per accessibility standards.
Animation & Transition: No motion, duration, or easing values were observed; transitions are undocumented.
Coverage: Analysis is based on 1 public page (Brixzon portfolio homepage). Authenticated surfaces, dynamic states, and multi-page interactions are outside the extraction scope.

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

Remixes of cdn.phototourl.com

Latest remixes

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

Remix it