Mohammad Kheirkhah

Generated Nov 6, 2026

DESIGN.md for www.niccolomiranda.com

www.niccolomiranda.com3 colors4 componentsCanopee + Editorial New

Remix

12 screenshots captured· www.niccolomiranda.com

1 / 12 · Miranda — Paper Portfolio · Above the fold

Preview

the generated design system

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

Design tokens

version: alpha
name: Niccolomiranda
description: |
  The Paper Portfolio presents a refined, editorial aesthetic rooted in
  classical typography and deliberate restraint. The system evokes the precision
  of print design — think high-end magazine layout, art book spreads, and
  gallery curation — translated to the digital canvas. Depth emerges through
  color-blocking and compositional hierarchy rather than shadow or gloss; every
  element has purpose, and empty space is respected as a design material. The
  palette is monochromatic with a single warm neutral accent, fostering an
  atmosphere of sophisticated minimalism punctuated by moments of intentional
  emphasis. This is a design system for portfolios, editorial projects, and
  brands confident enough to let content breathe.
source:
  url: "https://www.niccolomiranda.com/"
  pagesAnalyzed: 6
  extractedAt: 2026-11-06
  tokensMeasured: true
colors:
  primary: "#CDC6BE"
  ink: "#1D1D1B"
  hairline: "#000000"
typography:
  display-xxl:
    fontFamily: "Editorial New"
    fontSize: 105.12px
    fontWeight: 300
    lineHeight: 1.03
    letterSpacing: -5.26px
  display-xl:
    fontFamily: "Editorial New"
    fontSize: 86.4px
    fontWeight: 300
    lineHeight: 1.33
    letterSpacing: -3.46px
  display-lg:
    fontFamily: "Editorial New"
    fontSize: 79.2px
    fontWeight: 300
    lineHeight: 0.91
    letterSpacing: -2.38px
  display-md:
    fontFamily: "Editorial New"
    fontSize: 60.48px
    fontWeight: 300
    lineHeight: 1.02
    letterSpacing: -2.42px
  display-sm:
    fontFamily: "Editorial New"
    fontSize: 47.52px
    fontWeight: 300
    lineHeight: 1.09
    letterSpacing: -0.62px
  display-xs:
    fontFamily: "Editorial New"
    fontSize: 43.2px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -1.73px
  heading-xxl:
    fontFamily: "Editorial New"
    fontSize: 37.44px
    fontWeight: 300
    lineHeight: 1.15
    letterSpacing: -1.12px
  heading-xl:
    fontFamily: "Editorial New"
    fontSize: 32.4px
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: -0.62px
  heading-lg:
    fontFamily: "Editorial New"
    fontSize: 31.68px
    fontWeight: 300
    lineHeight: 1.36
    letterSpacing: -0.95px
  heading-md:
    fontFamily: "Editorial New"
    fontSize: 30.96px
    fontWeight: 300
    lineHeight: 1.16
    letterSpacing: -0.62px
  heading-sm:
    fontFamily: "Editorial New"
    fontSize: 28.8px
    fontWeight: 300
    lineHeight: 1.25
    letterSpacing: -0.62px
  heading-xs:
    fontFamily: "Editorial New"
    fontSize: 24.48px
    fontWeight: 300
    lineHeight: 1.18
    letterSpacing: -0.73px
    textTransform: uppercase
  body-xl:
    fontFamily: "Editorial New"
    fontSize: 20.16px
    fontWeight: 300
    lineHeight: 0.93
    letterSpacing: -0.2px
  body-lg:
    fontFamily: "Editorial New"
    fontSize: 18.72px
    fontWeight: 300
    lineHeight: 1.08
    letterSpacing: -0.62px
  body-md:
    fontFamily: "Editorial New"
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1
    letterSpacing: -0.18px
  body-md-strong:
    fontFamily: "Editorial New"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 2
    letterSpacing: -0.18px
  body-sm:
    fontFamily: "Editorial New"
    fontSize: 17.28px
    fontWeight: 300
    lineHeight: 1.25
    letterSpacing: -0.17px
  body-xs:
    fontFamily: "Editorial New"
    fontSize: 16.2px
    fontWeight: 300
    lineHeight: 1.11
    letterSpacing: 0px
rounded:
  none: 0px
  xs: 10px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 28px
  xxl: 36px
  xxxl: 44px
  section: 52px
  band: 56px
elevationStrategy: color-blocking
themes:
  derived: dark   # the other theme is the site's measured palette
  light:
    bg: "#FFFFFF"
    surface: "#F7F7F7"
    surfaceRaised: "#EEEEEE"
    text: "#1D1D1B"
    textMuted: "#6C6C6B"
    border: "#000000"
    accent: "#988979"
    accentFg: "#000000"
    focusRing: "#CDC6BE"
    elevation: shadow
  dark:
    bg: "#100F10"
    surface: "#1E1D1E"
    surfaceRaised: "#2A292A"
    text: "#FDFDFC"
    textMuted: "#A3A3A2"
    border: "#363536"
    accent: "#CDC6BE"
    accentFg: "#0B0B0C"
    focusRing: "#CDC6BE"
    elevation: "border+surface"
components:
  navigation:
    typography: "{typography.heading-md}"
    textColor: "{colors.ink}"
  link:
    typography: "{typography.heading-md}"
    textColor: "{colors.ink}"
    border: "1px solid rgba(29, 29, 27, 0.5)"
    rounded: "50%"
    backgroundColor: "rgb(211, 203, 194)"
  badge-icon:
    typography: "{typography.heading-md}"
    textColor: "{colors.ink}"
    height: 27px
    backgroundColor: "{colors.ink}"
  badge-icon-2:
    typography: "{typography.heading-md}"
    textColor: "{colors.ink}"
    height: 27px
  button-outline:
    typography: "{typography.heading-md}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.ink}"
    height: 43.75px
    padding: "2.88px 14.4px 2.88px 14.4px"
    rounded: 8.64px
    backgroundColor: "{colors.primary}"
states:
  other-focus:
    target: other
    state: focus
    outline: none
  other-hover:
    target: other
    state: hover
    backgroundColor: "rgb(216, 207, 197)"
breakpoints:
  - width: 375
    containerWidth: 345
    gridColumns: 1
    navLinksVisible: 1
    menuToggleVisible: false
    headingPx: 169
    bodyPx: 8
    sectionPaddingX: 0
  - width: 768
    containerWidth: 737
    gridColumns: 2
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 284
    bodyPx: 17
    sectionPaddingX: 0
  - width: 1024
    containerWidth: 983
    gridColumns: 2
    navLinksVisible: 1
    menuToggleVisible: false
    headingPx: 379
    bodyPx: 22
    sectionPaddingX: 0
  - width: 1280
    containerWidth: 1229
    gridColumns: 2
    navLinksVisible: 1
    menuToggleVisible: false
    headingPx: 474
    bodyPx: 28
    sectionPaddingX: 0
  - width: 1440
    containerWidth: 1382
    gridColumns: 2
    navLinksVisible: 1
    menuToggleVisible: false
    headingPx: 533
    bodyPx: 31
    sectionPaddingX: 0
coverage:
  statesFound: 2
  gradientsFound: 0
  rolesUnassigned: 0
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: false

Design System Inspired by The Paper Portfolio

1. Visual Theme & Atmosphere

The Paper Portfolio presents a refined, editorial aesthetic rooted in classical typography and deliberate restraint. The system evokes the precision of print design — think high-end magazine layout, art book spreads, and gallery curation — translated to the digital canvas. Depth emerges through color-blocking and compositional hierarchy rather than shadow or gloss; every element has purpose, and empty space is respected as a design material. The palette is monochromatic with a single warm neutral accent, fostering an atmosphere of sophisticated minimalism punctuated by moments of intentional emphasis. This is a design system for portfolios, editorial projects, and brands confident enough to let content breathe.

Key Characteristics

Editorial serif typography at monumental scale, favoring light weights and generous letter-spacing
Monochromatic foundation (near-black and warm beige) with sparing accent color
Compositional balance achieved through whitespace, not embellishment
Modular, grid-aware layouts that adapt fluidly across device sizes
Subtle interaction states (hover background shifts); no aggressive visual feedback
Print-influenced aesthetic applied to responsive web architecture

2. Color Palette & Roles

Primary / Brand

Primary Accent ({colors.primary} — #CDC6BE): Warm beige used as brand accent in calls-to-action, active states, and highlight moments; often applied to button fills, accent strokes, and featured project backgrounds

Text & Ink

Ink ({colors.ink} — #1D1D1B): Primary text color for headings, body copy, and interactive elements; near-black for legibility and visual weight

Structural & Borders

Hairline ({colors.hairline} — #000000): 1px dividers, borders, and structural lines; pure black for maximum contrast on the neutral canvas

3. Typography Rules

Font Family

Primary: Editorial New (light and regular weights, fallback: serif)
Fallback stack: Georgia, Garamond, serif

The system uses Editorial New exclusively — a classical serif family selected for its editorial authority and elegance at large display scales.

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display XXL	Editorial New	105.12px	300	1.03	-5.26px	Hero statements, section openers
Display LG	Editorial New	79.2px	300	0.91	-2.38px	Major project titles
Display MD	Editorial New	60.48px	300	1.02	-2.42px	Featured work headers
Display SM	Editorial New	47.52px	300	1.09	-0.62px	Prominent section text
Display XS	Editorial New	43.2px	500	1.00	-1.73px	Secondary display, weight bump for contrast
Heading XXL	Editorial New	37.44px	300	1.15	-1.12px	Page sections, major headings
Heading XL	Editorial New	32.4px	300	1.20	-0.62px	Subsection titles
Heading LG	Editorial New	31.68px	300	1.36	-0.95px	Project cards, featured content
Heading MD	Editorial New	30.96px	300	1.16	-0.62px	Navigation links, secondary headings
Heading SM	Editorial New	28.8px	300	1.25	-0.62px	Card titles, tertiary headings
Heading XS	Editorial New	24.48px	300	1.18	-0.73px	Labels, metadata (often uppercase)
Body LG	Editorial New	20.16px	300	0.93	-0.2px	Large body text, intro paragraphs
Body MD Strong	Editorial New	18px	500	2.00	-0.18px	Emphasized body text, captions with weight
Body MD	Editorial New	18px	300	1.00	-0.18px	Default body copy, descriptions
Body LG	Editorial New	18.72px	300	1.08	-0.62px	Extended body text
Body SM	Editorial New	17.28px	300	1.25	-0.17px	Secondary body, fine print
Body XS	Editorial New	16.2px	300	1.11	0px	Smallest body text, footnotes

Principles

Negative tracking at display: Display sizes (above 40px) employ negative letter-spacing ranging from -0.62px to -5.26px, tightening letters for visual impact and editorial elegance.
Light weight dominant: Nearly all text uses weight 300 (light); weight 500 appears sparingly for emphasis or contrast.
Generous line-height on body: Body text maintains line-heights between 1.0 and 1.25, ensuring readability in long-form content.
Compact line-height on display: Display sizes compress to 0.91–1.09, allowing monumental letterforms to stack tightly without losing legibility.
All-serif family: Editorial New is the sole typeface; no sans-serif fallback, reinforcing print-to-web editorial coherence.

4. Component Stylings

Buttons

Outline Button

Background: #CDC6BE
Text Color: #1D1D1B
Border: 1px solid #1D1D1B
Padding: 2.88px 14.4px
Border Radius: 8.64px
Font: Editorial New, 30.96px, weight 300
Line Height: 36px
Box Shadow: None
Hover State: Background shifts to rgb(216, 207, 197) (darker beige)
Focus State: Outline removed (outline: none)

Navigation

Navigation Bar (Default)

Background: Transparent
Text Color: #1D1D1B
Font: Editorial New, 30.96px, weight 300
Height: 97.1875px
Border: None
Box Shadow: None
Padding: 0px (flush positioning)
Note: Links collapse to menu toggle below 768px viewport width

Badges

Badge Icon (Dark)

Background: #1D1D1B
Text Color: #1D1D1B (inherited)
Border: None
Border Radius: 0px
Font: Editorial New, 30.96px, weight 300
Height: 27px
Width: 32.8906px
Use: NEW/featured labels

Badge Icon (Outline)

Background: Transparent
Text Color: #1D1D1B
Border: None
Border Radius: 0px
Use: Secondary badge styling

5. Layout Principles

Spacing System

The system employs a 4px base unit scaled in 8px increments for larger values:

{spacing.xxs} = 4px — Tight internal padding, micro-spacing
{spacing.xs} = 8px — Small component gaps
{spacing.sm} = 12px — Compact sections
{spacing.md} = 16px — Standard padding, default gaps
{spacing.lg} = 20px — Breathing room between elements
{spacing.xl} = 28px — Section separation
{spacing.xxl} = 36px — Major segment breaks
{spacing.xxxl} = 44px — Large feature gaps
{spacing.section} = 52px — Section vertical padding
{spacing.band} = 56px — Full-width band gaps

Usage Context:

Component internal padding: {spacing.xs} to {spacing.md}
Card gaps: {spacing.md} to {spacing.lg}
Section vertical spacing: {spacing.section} to {spacing.band}
Whitespace between major compositional blocks: multiples of {spacing.xxxl}

Grid & Container

Container Width:

Max content width varies by breakpoint (375px → 1440px)
Content columns expand fluidly; grid is 2-column at medium and above, collapsing to 1 column on mobile

Grid Strategy:

Mobile (375px): 1-column layout, full-width content
Tablet (768px): 2-column grid emerges; content optimized for side-by-side layouts
Desktop (1024px+): 2-column grid maintained; typography scale increases

Section Patterns:

Hero band: Full-width, centered; uses display typography ({typography.display-xxl} to {typography.display-lg})
Feature cards: 2-column grid at desktop, single column on mobile
Text sections: Constrained column width for readability; generous left/right margin
Featured work: Image + metadata pair, often with circular badge overlay

Whitespace Philosophy

Whitespace is a first-class material. The design avoids filler; every gap has purpose. Section padding ({spacing.section} / 52px vertical) creates breathing room between major content areas. Interior component padding is conservative ({spacing.xs} to {spacing.md}), keeping text and elements tight within bounds. This creates visual rhythm: tightly-packed component interiors contrast with expansive inter-section gaps, guiding the eye through page hierarchy.

Border Radius Scale

{rounded.none} = 0px — Default; used on images, cards, badges, navigation, and buttons
{rounded.xs} = 10px — Subtle rounding; applied to outline buttons and select interactive elements

Component Application:

Images: {rounded.none} (sharp)
Cards: {rounded.none} (sharp edges)
Buttons (outline): {rounded.xs} (soft corner)
Badges: {rounded.none} (sharp)
Links (circular badges): 50% (full pill, not in the scale table)

The system favors sharp edges (0px) for structural integrity, reserving {rounded.xs} for soften-specific interactive elements.

6. Depth & Elevation

Elevation Strategy

The system employs color-blocking rather than layered shadows. Depth emerges from surface color changes and compositional layering, not z-depth shadow effects. A warm beige accent (#CDC6BE) lifts above the neutral canvas (#CDC6BE backgrounds for buttons, featured items) without shadow assistance. Dividing lines (1px in #000000) delineate zones. This approach maintains the print-like aesthetic while avoiding the slick, shadow-heavy appearance of material design.

No multi-tier shadow scale exists; the system is fundamentally flat with color-driven visual hierarchy.

Opacity Levels

5% (0.05) — Extremely subtle overlay, near-invisible; borders and faint dividers
30% (0.30) — Moderate transparency; semi-transparent strokes and overlay elements
50% (0.50) — Balanced transparency; interactive feedback, hover states

Z-index / Layering

Base layer (z: 1–4) — Page background, cards, standard content
Sticky layer (z: 998–999) — Navigation bar, persistent headers (collapsible at 768px)
Toast/Overlay layer (z: 99999) — Modals, alerts, transient notifications

The system maintains extreme separation between base content and overlays, ensuring toast/modal elements always appear above page chrome.

7. Do's and Don'ts

Do

Use Editorial New at light weight (300) for all text. The system's authority comes from this single serif family; substitute nothing.
Embrace negative letter-spacing on display sizes. Tighten letters on headings above 40px; it is a defining visual signature.
Preserve whitespace between sections. Use {spacing.section} (52px) minimum between major compositional blocks.
Apply color-blocking for depth. Lift featured items with the warm beige accent (#CDC6BE); avoid shadows.
Keep borders sharp (0px radius). Soft corners only on outline buttons ({rounded.xs} / 10px).
Respect the 2-column grid at desktop. Align cards, images, and text columns to the grid for visual cohesion.
Scale typography with viewport. Use the responsive breakpoint table to increase body and heading sizes as screen width grows.
Test interaction states minimally. Hover state shifts background slightly darker (to rgb(216, 207, 197)); do not invent additional states.

Don't

Do not add drop shadows or blur effects. The system is flat and color-driven; shadows contradict the editorial aesthetic.
Do not introduce sans-serif fonts. Editorial New is exclusive; no Helvetica, Inter, or system fonts.
Do not use rounded corners on cards, images, or structural elements. Reserve rounding for specific buttons only.
Do not invent semantic colors (error red, success green, warning amber). The site does not declare status states; stick to the three-color palette.
Do not collapse the 2-column grid to 3+ columns. Maintain 1-column on mobile (375px), 2-column on desktop and above.
Do not use positive letter-spacing on display text. Negative tracking is intentional; never reverse it.
Do not over-pad interior components. Keep button and badge padding conservative ({spacing.xxs} to {spacing.sm}).
Do not apply heavy weights (600+) to body text. Weight 300 is default; 500 is maximum and reserved for emphasis.

8. Responsive Behavior

Breakpoints

Breakpoint	Viewport	Content Width	Grid Columns	Nav Links Visible	Menu Toggle	Largest Heading	Body Font	Section Padding X
Mobile	375px	345px	1	1	No	169px (≈43.2px / display-xs)	8px	0px
Tablet	768px	737px	2	0	No	284px (≈71.6px)	17px	0px
Desktop	1024px	983px	2	1	No	379px (≈96px)	22px	0px
Wide	1280px	1229px	2	1	No	474px (≈120px)	28px	0px
Ultra-wide	1440px	1382px	2	1	No	533px (≈135px)	31px	0px

Key Transitions:

375px → 768px: Single to 2-column grid; typography scales; nav link count drops to 0 at the 768px threshold (menu toggle NOT visible in data, but collapse occurs here)
768px → 1024px: Nav links reappear (count: 1); heading and body font sizes continue scaling
1024px and above: Grid and layout stable; font sizes scale incrementally with viewport width

Touch Targets

Minimum interactive element size: 27–44px in height (measured from component data)

Buttons: 43.75px height minimum
Badge icons: 27px height
Links: 187.188px height (circular variant)

Ensure adequate spacing between touch targets to prevent accidental activation. Use {spacing.md} (16px) between adjacent buttons and links on mobile.

Collapsing Strategy

Mobile (375px):

Single-column layout; images and cards stack vertically
Navigation collapses to essential items (hamburger menu toggle presence inferred by nav link count dropping)
Typography scales down: Display XXL becomes ≈169–284px (responsive sizing within the heading)
Body text reduces to ≈8–17px

Tablet (768px):

2-column grid activates; cards and images pair side-by-side
Navigation link count drops to 0 (menu behavior inferred but not explicit in data)
Heading sizes jump (≈284px)
Body font: ≈17px

Desktop (1024px+):

2-column grid stable; maintained across all desktop sizes
Navigation links reappear (count: 1, suggesting primary nav visible)
Heading sizes scale continuously: 379px (1024px) → 533px (1440px)
Body font: 22–31px
Section padding-x remains 0px (full-width sections with internal margins)

9. Agent Prompt Guide

Quick Color Reference

Primary CTA / Accent: Primary Accent (#CDC6BE) — warm beige, used for button fills, badges, and feature highlights
Page Background / Canvas: Neutral (inferred as white/off-white, not explicitly sampled)
Heading Text: Ink (#1D1D1B) — near-black, primary text color
Body Text: Ink (#1D1D1B) — same as headings, no tonal separation
Borders / Dividers: Hairline (#000000) — pure black, 1px lines
Hover State: Darker beige (rgb(216, 207, 197)) — subtle button/link shift on interaction

Iteration Guide

Use Editorial New at weight 300 for all body, headings, and display text. Weight 500 is reserved for rare emphasis; all other text is light.
Apply negative letter-spacing to display sizes above 40px. Tighten headings and hero text; negative tracking is not optional—it is a signature trait.
Layout on a 2-column grid at desktop; collapse to 1 column on mobile (375px). Maintain 2-column at tablet (768px) and above.
Color-block for depth, not shadows. Lift featured items with #CDC6BE; avoid box-shadow entirely.
Preserve {spacing.section} (52px) or larger between major sections. Whitespace is compositional material, not filler.
Keep borders and corners sharp (0px radius) on all structural elements. Only outline buttons use {rounded.xs} (10px).
Scale typography responsively. Heading sizes grow from 169px (mobile) to 533px (ultra-wide); use the breakpoint table to interpolate sizes between measured points.
Test hover on interactive elements: background shifts to rgb(216, 207, 197). Do not invent additional states (no active, disabled, or focus rings).
Respect the 3-color palette. #CDC6BE (primary), #1D1D1B (ink), #000000 (hairline). No semantic colors; no gradients; no additional accents.
Stub z-index in three tiers: base (1–4), sticky (998–999), toast (99999). Do not add intermediate layers.

10. Known Gaps

Interaction states: Only hover (background color shift) and focus (outline removed) were explicitly extracted. Disabled, active, visited, and focus-visible states are not documented; implement conservatively.
Semantic color ramp: The site declares no error, success, warning, or info states. Do not invent a status palette; if UI feedback is needed, use opacity shifts on the primary accent.
Dark mode / theme variants: The extraction covers one theme only (light background, dark text). No dark-mode or multi-theme data was collected.
Gradient or decorative surfaces: No gradients, meshes, or background patterns were detected. The system is solid color only.
Secondary fonts (Canopee, Domaine Display): These font families were listed in the extracted data but never measured on active elements. Their role in the system, if any, is unknown; assume Editorial New is exclusive unless proven otherwise.
Shadow / elevation detail on specific components: The system classification is "color-blocking"; no individual component shadows were measured. If elevation is needed on overlays or modals, no reference values exist in the extraction.
Opacity on interactive elements: Opacity values (5%, 30%, 50%) were extracted globally but not mapped to specific component states (e.g., disabled button opacity). Apply conservatively.
Navigation menu behavior: Menu toggle presence and collapse logic inferred from link visibility changes but not explicitly documented. Hamburger menu implementation details are absent.
Cross-origin stylesheets: Some CSS may be unreadable; vendor prefixes, animation details, and transitions may not be fully captured.
Authenticated or gated content: 6 public pages were analyzed; surfaces behind login or paywalls were not visited.

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

Design tokens

Extracted from www.niccolomiranda.com

Primary

#CDC6BE

Primary CTA, brand accent, active state

Neutral

#1D1D1B

Headings / primary text

#000000

1px borders and dividers

Typography · Editorial New

link30.96px · 300 · 36px

h486.4px · 300 · 115.2px

h532.4px · 300 · 38.88px

body17.28px · 300 · 21.6px

heading37.44px · 300 · 43.2px

body16.2px · 300 · 18px

body18.72px · 300 · 20.16px

body18px · 300 · 18px

body18px · 500 · 36px

heading28.8px · 300 · 36px

heading31.68px · 300 · 43.2px

heading24.48px · 300 · 28.8px

body20.16px · 300 · 18.72px

display105.12px · 300 · 108px

display43.2px · 500 · 43.2px

display79.2px · 300 · 72px

display60.48px · 300 · 61.92px

body14.4px · 300 · 17.28px

body21.6px · 300 · 21.6px

body14.4px · 300 · 14.4px

display47.52px · 300 · 51.84px

h536px · 300 · 45.9px

body25.2px · 300 · 27px

heading36px · 300 · 45px

body22.5px · 300 · 27px

heading36px · 300 · 43.2px

Typography · Canopee

display86.4px · 400 · 57.6px

display64.8px · 400 · 64.8px

body21.6px · 400 · 21.6px

body17.28px · 400 · 21.6px

display86.4px · 400 · 86.4px

body23.04px · 400 · 18.72px

body20.16px · 400 · 20.16px

h2273.6px · 400 · 187.2px

display244.8px · 400 · 158.4px

body18.72px · 400 · 18.72px

display201.6px · 400 · 144px

body27px · 400 · 27px

h1532.8px · 400 · 345.6px

h2446.4px · 400 · 288px

h372px · 400 · 72px

display122.4px · 400 · 95.04px

display432px · 400 · 288px

display365.76px · 400 · 288px

display211.68px · 400 · 144px

display109.44px · 400 · 86.4px

display118.08px · 400 · 86.4px

display112.32px · 400 · 86.4px

heading31.68px · 400 · 28.8px

h1475.2px · 400 · 331.2px

h2558.72px · 400 · 388.8px

h3158.4px · 400 · 115.2px

display196.848px · 400 · 129.6px

display93.6px · 400 · 79.2px

h1216px · 400 · 153px

h2198px · 400 · 153px

display63px · 400 · 63px

Typography · Domaine Display

display64.8px · 500 · 43.2px

Spacing

12px

4px

8px

44px

28px

16px

20px

72px

Components · 4

Remixes of www.niccolomiranda.com

Latest remixes

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

Remix it