samad anoosheh

Generated Oct 27, 2026

DESIGN.md for 13designstudio.com

13designstudio.com/product/wooden-single-pendant-andromeda-1361/?fbclid=PAT01DUAVNIn1leHRuA2FlbQIxMABwZG9mAnNydGMGYXBwX2lkDzU2NzA2NzM0MzM1MjQyNwABp27hsyI1qhWvz7vtVdCycFe3uqIHFrFEPEfxeFMWMhg-Plw-sbvM6oQGXKc5_aem_o2Pc6P5Z6ngD2vaXcb4diw15 colors6 componentskalameh font

Remix

12 screenshots captured· 13designstudio.com

1 / 12 · چراغ آویز چوبی تکی مدل آندرومدا | کد 1361 - استودیو طراحی سیزده · Above the fold

Preview

the generated design system

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

Design tokens

version: alpha
name: 13designstudio
description: |
  13DesignStudio's design system embodies a warm, artisanal minimalism centered
  on natural materials and restrained elegance. The palette draws from timber,
  linen, and earth tones, creating a sophisticated yet organic aesthetic suited
  to decorative lighting products. The interface prioritizes clarity and
  craftsmanship details, with generous whitespace and a muted, nature-inspired
  color foundation. Typography feels refined but approachable, favoring the
  Kalameh font family to deliver a distinctly Persian-market sensibility. The
  overall mood is gallery-like—calm, exploratory, and inviting users to linger
  over product details and atmospheric photography.
source:
  url: "https://13designstudio.com/product/wooden-single-pendant-andromeda-1361/?fbclid=PAT01DUAVNIn1leHRuA2FlbQIxMABwZG9mAnNydGMGYXBwX2lkDzU2NzA2NzM0MzM1MjQyNwABp27hsyI1qhWvz7vtVdCycFe3uqIHFrFEPEfxeFMWMhg-Plw-sbvM6oQGXKc5_aem_o2Pc6P5Z6ngD2vaXcb4diw"
  pagesAnalyzed: 6
  extractedAt: 2026-10-27
  tokensMeasured: true
colors:
  primary: "#00312D"
  accent: "#423221"
  link: "#9B8063"
  canvas: "#F6F1E2"
  surface: "#FFFFFF"
  surface-alt: "#3E3E3E"
  on-primary: "#F6F1E2"
  ink: "#29221C"
  body: "#423221"
  muted: "#4F4F4F"
  faint: "#E2D9D0"
  accent-1: "#1F2124"
  accent-2: "#8B9478"
  accent-3: "#69727D"
  accent-4: "#EB0011"
  neutral-1: "#000000"
  neutral-2: "#777777"
typography:
  display-lg:
    fontFamily: "kalameh font"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 5.2px
    textTransform: uppercase
  display-lg-strong:
    fontFamily: "kalameh font"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 6px
    textTransform: uppercase
  display-lg-tight:
    fontFamily: "kalameh font"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0px
  heading-xl:
    fontFamily: "kalameh font"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0px
  heading-lg:
    fontFamily: "kalameh font"
    fontSize: 20.8px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0px
  heading-md:
    fontFamily: "kalameh font"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  heading-sm:
    fontFamily: "kalameh font"
    fontSize: 19px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0px
  heading-sm-strong:
    fontFamily: "kalameh font"
    fontSize: 19px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0px
  heading-xs:
    fontFamily: "kalameh font"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  body-xl:
    fontFamily: "kalameh font"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-lg:
    fontFamily: "kalameh font"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0px
  body-md:
    fontFamily: "kalameh font"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-sm:
    fontFamily: "kalameh font"
    fontSize: 14.4px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-sm-strong:
    fontFamily: "kalameh font"
    fontSize: 14.4px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  body-xs:
    fontFamily: "kalameh font"
    fontSize: 12.8px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-md:
    fontFamily: "kalameh font"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-sm:
    fontFamily: "kalameh font"
    fontSize: 14.4px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0px
  label-lg:
    fontFamily: "kalameh font"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  label-md:
    fontFamily: "kalameh font"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0px
  label-sm:
    fontFamily: "kalameh font"
    fontSize: 14.4px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0px
  label-sm-strong:
    fontFamily: "kalameh font"
    fontSize: 14.4px
    fontWeight: 700
    lineHeight: 2
    letterSpacing: 0px
  label-sm-kalameh:
    fontFamily: Kalameh
    fontSize: 14.4px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  label-xs:
    fontFamily: kalameh
    fontSize: 13px
    fontWeight: 500
    lineHeight: 2
    letterSpacing: 0px
  caption-md:
    fontFamily: "kalameh font"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  caption-sm:
    fontFamily: "kalameh font"
    fontSize: 11.2px
    fontWeight: 500
    lineHeight: 2.14
    letterSpacing: 0px
  caption-sm-strong:
    fontFamily: "kalameh font"
    fontSize: 11.2px
    fontWeight: 700
    lineHeight: 2.14
    letterSpacing: 0px
  caption-xs:
    fontFamily: "kalameh font"
    fontSize: 9.6px
    fontWeight: 400
    lineHeight: 2.5
    letterSpacing: 0px
rounded:
  none: 0px
  xs: 3px
  sm: 8px
  md: 15px
  lg: 16px
  xl: 20px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 32px
  xxxl: 36px
  section: 48px
  band: 52px
borderWidths:
  thin: 1px
  medium: 3px
elevationStrategy: color-blocking
themes:
  derived: dark   # the other theme is the site's measured palette
  light:
    bg: "#F6F1E2"
    surface: "#FFFFFF"
    surfaceRaised: "#F6F6F6"
    text: "#29221C"
    textMuted: "#423221"
    border: "#DDD8CA"
    accent: "#00312D"
    accentFg: "#FFFFFF"
    focusRing: "#00312D"
    elevation: shadow
  dark:
    bg: "#0D1112"
    surface: "#1C1F20"
    surfaceRaised: "#282B2C"
    text: "#F5F7F7"
    textMuted: "#9DA0A0"
    border: "#343738"
    accent: "#00978B"
    accentFg: "#0B0B0C"
    focusRing: "#006E65"
    elevation: "border+surface"
gradients:
  - context: section
    kind: linear
    value: "linear-gradient(rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0) 100%)"
components:
  button-primary:
    textColor: "{colors.surface}"
    border: "2px solid {colors.primary}"
    height: 38px
    padding: "5px 10px 5px 10px"
    fontSize: 14.4px
    fontFamily: "kalameh font"
    fontWeight: 500
    lineHeight: 1.67
    rounded: 30px
    backgroundColor: "{colors.primary}"
  button-primary-lg:
    typography: "{typography.button-sm}"
    textColor: "{colors.on-primary}"
    height: 38.4062px
    padding: "12px 40px 12px 40px"
    rounded: 30px
    backgroundColor: "{colors.primary}"
  button-text:
    typography: "{typography.button-md}"
    textColor: "{colors.on-primary}"
    height: 24px
    rounded: "{rounded.xs}"
  button-icon:
    typography: "{typography.label-md}"
    textColor: "{colors.body}"
    height: 16px
    rounded: "{rounded.lg}"
  button-icon-2:
    typography: "{typography.label-md}"
    textColor: "{colors.body}"
    height: 16px
  button-text-sm:
    textColor: "{colors.body}"
    height: 21.5938px
    fontSize: 14.4px
    fontFamily: Kalameh
    fontWeight: 500
    lineHeight: 1.5
    rounded: "{rounded.xs}"
    backgroundColor: "rgba(255, 255, 255, 0)"
  badge-text:
    textColor: "{colors.body}"
    height: 38.6094px
    fontSize: 14.4px
    fontFamily: Kalameh
    fontWeight: 400
    lineHeight: 1.4
  badge-text-sm:
    textColor: "{colors.link}"
    height: 18px
    fontSize: 18px
    fontFamily: "kalameh font"
    fontWeight: 400
    lineHeight: 1
    rounded: "50%"
    backgroundColor: "rgba(255, 255, 255, 0)"
  badge-icon:
    textColor: "{colors.link}"
    height: 18px
    fontSize: 18px
    fontFamily: "kalameh font"
    fontWeight: 400
    lineHeight: 1
  navigation:
    typography: "{typography.body-md}"
    textColor: "{colors.body}"
    height: 78px
  footer:
    typography: "{typography.body-md}"
    textColor: "{colors.body}"
    backgroundColor: "{colors.surface-alt}"
  link:
    typography: "{typography.body-md}"
    textColor: "{colors.link}"
  link-2:
    typography: "{typography.body-lg}"
    textColor: "{colors.on-primary}"
  card:
    typography: "{typography.body-md}"
    textColor: "{colors.body}"
    padding: "15px 15px 15px 15px"
    rounded: "{rounded.xl}"
    backgroundColor: "{colors.surface}"
  card-lg:
    typography: "{typography.body-md}"
    textColor: "{colors.body}"
    padding: "20px 20px 20px 20px"
    rounded: "{rounded.lg}"
    backgroundColor: "{colors.surface}"
states:
  button-hover:
    target: button
    state: hover
    textDecoration: none
  nav-hover:
    target: nav
    state: hover
    textColor: "{colors.surface}"
    backgroundColor: "rgb(56, 63, 74)"
  link-hover:
    target: link
    state: hover
    textColor: "{colors.surface}"
  other-focus:
    target: other
    state: focus
    textColor: "rgb(68, 68, 68)"
    textDecoration: none
    backgroundColor: "rgb(221, 221, 221)"
  other-hover:
    target: other
    state: hover
    opacity: 1
    transform: "translateY(0px)"
  input-focus:
    target: input
    state: focus
    boxShadow: none
    borderColor: currentcolor
    borderWidth: medium
  other-active:
    target: other
    state: active
    opacity: 0.9
  button-disabled:
    target: button
    state: disabled
    opacity: 0.5
  input-focus-visible:
    target: input
    state: focus-visible
    outline: none
  other-focus-visible:
    target: other
    state: focus-visible
    outline: "rgb(76, 165, 21) solid 2px"
    outlineColor: "rgb(76, 165, 21)"
    outlineWidth: 2px
  button-focus:
    target: button
    state: focus
    borderColor: "rgb(206, 206, 206)"
    borderWidth: 1px
  nav-focus:
    target: nav
    state: focus
    outline: none
breakpoints:
  - width: 375
    containerWidth: 355
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 19
    bodyPx: 14
    sectionPaddingX: 0
  - width: 768
    containerWidth: 672
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 21
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1024
    containerWidth: 928
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 21
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1280
    containerWidth: 1040
    gridColumns: 0
    navLinksVisible: 7
    menuToggleVisible: true
    headingPx: 21
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1440
    containerWidth: 1200
    gridColumns: 0
    navLinksVisible: 7
    menuToggleVisible: true
    headingPx: 21
    bodyPx: 16
    sectionPaddingX: 0
coverage:
  statesFound: 83
  gradientsFound: 1
  rolesUnassigned: 6
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: false
  semanticRampDeclared: false

Design System Inspired by 13DesignStudio

1. Visual Theme & Atmosphere

13DesignStudio's design system embodies a warm, artisanal minimalism centered on natural materials and restrained elegance. The palette draws from timber, linen, and earth tones, creating a sophisticated yet organic aesthetic suited to decorative lighting products. The interface prioritizes clarity and craftsmanship details, with generous whitespace and a muted, nature-inspired color foundation. Typography feels refined but approachable, favoring the Kalameh font family to deliver a distinctly Persian-market sensibility. The overall mood is gallery-like—calm, exploratory, and inviting users to linger over product details and atmospheric photography.

Key Characteristics

Earth-toned palette anchored in deep teals, warm browns, and cream neutrals
Generous whitespace with occasional warm grey section bands for visual rhythm
Pill-shaped button corners ({rounded.full}) contrasting with sharp input fields ({rounded.none})
Persian typeface throughout; display headings use uppercase letterforms with tracked spacing
Minimal shadows; depth achieved through surface color change and figure-ground contrast
Product-centric layout; large image galleries with small supplementary thumbnails
RTL-aware navigation and labeling (Persian interface)

2. Color Palette & Roles

Primary

Primary / Brand ({colors.primary} — #00312D): Primary call-to-action buttons, active states, and brand accent marks. Deep teals and forest tones convey trust and premium positioning.
Link ({colors.link} — #9B8063): Inline links and interactive text, a warm tan that bridges body text and the accent palette.

Accent Colors (Decorative)

Accent ({colors.accent} — #423221): Secondary accent used in hero bands, body copy containers, and supporting visual elements. A mid-brown that grounds the palette.
Accent Decorative 1 ({colors.accent-1} — #1F2124): Unassigned decorative accent; charcoal-dark tone for editorial or product-specific highlighting.
Accent Decorative 2 ({colors.accent-2} — #8B9478): Unassigned decorative accent; sage-grey for contextual product photography or secondary bands.
Accent Decorative 3 ({colors.accent-3} — #69727D): Unassigned decorative accent; steel grey for tonal depth in layouts or image overlays.
Accent Decorative 4 ({colors.accent-4} — #EB0011): Unassigned decorative accent; bright red reserved for product-specific badges or highlight calls (e.g., "FULL SPECTRUM" product labels).

Interactive

Primary Button Background ({colors.primary} — #00312D): Solid fill for primary CTAs; transitions to on-hover state via opacity/transform.
Link Interactive ({colors.link} — #9B8063): Underline on hover; may brighten or shift hue on focus (see Interaction States).

Neutral Scale

Canvas / Default Background ({colors.canvas} — #F6F1E2): Default page background; warm cream that sets the primary stage. Also used as label text on primary-colored surfaces.
Surface ({colors.surface} — #FFFFFF): Card and panel backgrounds; pure white for figure-ground clarity and product presentation.
Surface Alt ({colors.surface-alt} — #3E3E3E): Alternating section bands; dark charcoal for footer areas and secondary content zones.
Ink / Primary Text ({colors.ink} — #29221C): Headings and primary body text; near-black with warm undertones.
Muted / Secondary Text ({colors.muted} — #4F4F4F): Captions, metadata, and supporting copy; mid-grey for visual hierarchy.
Faint / Tertiary Text ({colors.faint} — #E2D9D0): Placeholder text, disabled states, and very subtle overlays; near-cream for minimal contrast.

Neutral Decorative

Neutral Black ({colors.neutral-1} — #000000): Unassigned; used for strong contrast in limited contexts (e.g., text overlay shadows).
Neutral Grey ({colors.neutral-2} — #777777): Unassigned; fallback mid-grey for interactive borders or dividers.

3. Typography Rules

Font Family

Primary: Kalameh (Persian font stack; fontFamily: "kalameh font")
Secondary: Kalameh (consistent throughout; no distinct secondary family declared)
Fallback: Sans-serif (system default if Kalameh unavailable)

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display Large Tight	Kalameh	40px	700	1.4	0px	Bold display heading; reserved impact
Display Large	Kalameh	40px	400	1.5	5.2px	Uppercase display with moderate tracking
Display Large Strong	Kalameh	40px	500	1.5	6px	Uppercase display with strong tracking
Heading Large	Kalameh	20.8px	700	1.4	0px	Bold product titles and section headers
Heading XL	Kalameh	24px	600	1.4	0px	Semi-bold larger headings (h3)
Heading MD	Kalameh	20px	500	1.5	0px	Medium-weight subheading (h4)
Heading SM Strong	Kalameh	19px	700	1.4	0px	Bold smaller heading (h2)
Heading SM	Kalameh	19px	600	1.4	0px	Semi-bold smaller heading; tab labels
Heading XS	Kalameh	18px	500	1.5	0px	Extra-small heading (h5); filter tabs
Label Large	Kalameh	18px	700	1.5	0px	Bold form labels and product specs
Label MD	Kalameh	16px	400	1	0px	Regular form labels and input help text
Label SM Kalameh	Kalameh	14.4px	700	1.5	0px	Bold small label; table headers
Label SM Strong	Kalameh	14.4px	700	2	0px	Bold small label with tall line-height
Label SM	Kalameh	14.4px	400	1.7	0px	Regular small label; input hint text
Label XS	Kalameh	13px	500	2	0px	Extra-small input label
Button MD	Kalameh	16px	500	1.5	0px	Primary button text; nav links
Button SM	Kalameh	14.4px	400	1	0px	Small button text
Body XL	Kalameh	19px	400	1.5	0px	Extra-large body; links and long-form
Body LG	Kalameh	17px	400	1	0px	Large body text
Body MD	Kalameh	16px	400	1.5	0px	Standard body text; input content; links
Body SM Strong	Kalameh	14.4px	500	1.5	0px	Medium-weight small body
Body SM	Kalameh	14.4px	400	1.5	0px	Small body text; metadata
Body XS	Kalameh	12.8px	400	1.5	0px	Extra-small body; dense content
Caption MD	Kalameh	12px	400	1.5	0px	Medium-weight caption text
Caption SM Strong	Kalameh	11.2px	700	2.14	0px	Bold small caption
Caption SM	Kalameh	11.2px	500	2.14	0px	Regular small caption; image alt text
Caption XS	Kalameh	9.6px	400	2.5	0px	Extra-small caption; fine print

Principles

Kalameh is a Persian typeface and the only declared family; all text uses its weight and size variants for consistent cultural and regional alignment.
Display sizes employ uppercase and tracked letterforms (letter-spacing: 5.2px to 6px) for impactful visual breaks.
Body text defaults to {typography.body-md} (16px, 400 weight, 1.5 line-height) for clarity and accessibility.
Button and nav link text use {typography.button-md} (16px, 500 weight) for tactile affordance.
Headings employ a bold-to-semi-bold weight progression (700, 600, 500) to establish hierarchy without size alone.
Line-height ranges from 1 (tight, display and button text) to 2.5 (very open, captions and metadata) to match content density and scanning patterns.
Labels and input hints step down to {typography.label-sm} (14.4px, 400 weight) and smaller for compact forms.

4. Component Stylings

Buttons

Primary Button

Background: {colors.primary} (#00312D)
Text color: {colors.canvas} (#F6F1E2)
Padding: {spacing.xs} vertical (8px), {spacing.sm} horizontal (12px)
Border radius: {rounded.full} (9999px — pill shape)
Border: 2px solid {colors.primary} (#00312D)
Height: 38px
Font: {typography.button-md} (16px, weight 500, line-height 1.5)
Font family: Kalameh font
Box-shadow: none
Hover state: text-decoration: none (text remains white; implicit opacity/transform applied per interaction data)

Primary Button Large

Background: {colors.primary} (#00312D)
Text color: {colors.canvas} (#F6F1E2)
Padding: {spacing.md} vertical (16px), {spacing.lg} horizontal (20px)
Border radius: {rounded.full} (9999px)
Border: none
Height: 38.4px
Font: {typography.button-md} (14.4px, weight 400, line-height 1.4)
Font family: Kalameh font
Box-shadow: none
Hover state: text-decoration: none

Button Text (Minimal)

Background: transparent
Text color: {colors.canvas} (#F6F1E2)
Padding: 0
Border radius: {rounded.xs} (3px)
Border: none
Font: {typography.button-md} (16px, weight 500)
Box-shadow: none
Hover state: text-decoration: none

Button Icon

Background: transparent
Text color: {colors.accent} (#423221)
Width/Height: 16px
Padding: 0
Border radius: {rounded.full} (9999px)
Border: none
Font: icon (16px, weight 400)
Box-shadow: none

Button Icon Squared

Background: transparent
Text color: {colors.accent} (#423221)
Width/Height: 16px
Padding: 0
Border radius: {rounded.none} (0px — sharp corners)
Border: none
Font: icon (16px, weight 400)
Box-shadow: none

Button Text Small

Background: transparent
Text color: {colors.accent} (#423221)
Padding: 0
Border radius: {rounded.xs} (3px)
Border: none
Font: {typography.button-sm} (14.4px, weight 500)
Font family: Kalameh
Box-shadow: none
Hover state: text-decoration: none

Cards & Containers

Card Default (Standard Product Card)

Background: {colors.surface} (#FFFFFF)
Text color: {colors.accent} (#423221)
Padding: {spacing.md} (16px on all sides)
Border radius: {rounded.xl} (20px)
Border: none
Width: 533px (responsive)
Height: 240px
Font: {typography.body-md} (16px, weight 400, line-height 1.5)
Font family: Kalameh font
Box-shadow: none

Card Large (Gallery/Product Detail Card)

Background: {colors.surface} (#FFFFFF)
Text color: {colors.accent} (#423221)
Padding: {spacing.lg} (20px on all sides)
Border radius: {rounded.lg} (16px)
Border: none
Width: 310px (responsive)
Height: 463px
Font: {typography.body-md} (16px, weight 400, line-height 1.5)
Font family: Kalameh font
Box-shadow: none

Inputs & Forms

Input / Text Field (Focus State)

Background: initial / transparent
Text color: inherit
Border: medium (3px solid) of current color on focus
Border radius: {rounded.none} (0px — sharp corners)
Font: {typography.body-md} (16px, weight 400, line-height 1.5)
Font family: Kalameh font
Box-shadow: none (explicit box-shadow: none on focus)
Outline: none
Focus-visible behavior: outline removed; border-color shifts to current color

Input / Text Field (Default State)

Border: thin (1px solid) or none (layout-dependent)
Background: transparent
Border radius: {rounded.none} (0px)
Text color: inherit
Font: {typography.label-sm} (14.4px, weight 400, line-height 1.7)
Box-shadow: none
Label: {typography.label-sm} or {typography.label-xs} (14.4px or 13px, weight 400–500)

Input Quantity Spinner

Increment/Decrement button styling: minimal (text/icon buttons with no background)
Border around input: thin (1px) or minimal stroke
Height: ~38–40px (standard form control)
Padding: {spacing.xs} to {spacing.md} (8–16px)

Navigation

Navigation Default

Background: transparent (header area) or {colors.surface-alt} (#3E3E3E for footer)
Text color: {colors.accent} (#423221) in header; {colors.canvas} (#F6F1E2) in footer
Height: 78px (header)
Font: {typography.button-md} (16px, weight 400, line-height 1.5)
Font family: Kalameh font
Border radius: {rounded.none} (0px)
Box-shadow: none
Padding: 0 (flush with viewport)
Hover state: color: white (header links turn white on hover); backgroundColor: rgb(56, 63, 74) (dark grey hover overlay)
Active/focus: outline: none (no visible outline; color and opacity changes only)

Navigation Menu Toggle (Responsive)

Appears at viewport widths below 1280px (when nav link count drops to 0)
Icon button with transparent background
Text/icon color: {colors.accent} (#423221)
Font size: icon (16px or smaller)
Border radius: {rounded.none} (0px)

Badges

Badge Text

Background: transparent
Text color: {colors.accent} (#423221)
Padding: 0
Border radius: {rounded.none} (0px)
Font: {typography.button-md} (14.4px, weight 400, line-height 1.4)
Font family: Kalameh
Border: none

Badge Icon / Circular

Background: transparent
Text color: {colors.link} (#9B8063)
Padding: 0
Border radius: {rounded.full} (50% — circle)
Font: icon (18px)
Font family: Kalameh font
Border: none

Badge Icon Squared

Background: transparent
Text color: {colors.link} (#9B8063)
Padding: 0
Border radius: {rounded.none} (0px)
Font: icon (18px)
Border: none

Footer

Footer Default

Background: {colors.surface-alt} (#3E3E3E)
Text color: {colors.accent} (#423221)
Height: 608px (full section)
Font: {typography.body-md} (16px, weight 400, line-height 1.5)
Font family: Kalameh font
Padding: 0 (flush)
Border: none
Box-shadow: none

5. Layout Principles

Spacing System

The system uses a base unit of 4px with a geometric scale:

{spacing.xxs} = 4px — micro spacing (icon gaps, tight controls)
{spacing.xs} = 8px — extra-small (button padding, tight margins)
{spacing.sm} = 12px — small (padding in cards, form gaps)
{spacing.md} = 16px — medium (standard padding, body margins)
{spacing.lg} = 20px — large (section margins, heading gaps)
{spacing.xl} = 24px — extra-large (container padding, section separators)
{spacing.xxl} = 32px — double (major breaks between sections)
{spacing.xxxl} = 36px — triple (emphatic spacing in full-width layouts)
{spacing.section} = 48px — section break (between major content blocks)
{spacing.band} = 52px — band break (between full-width colored sections)

Usage Context:

Padding within cards and components: {spacing.md} to {spacing.lg} (16–20px)
Margins between inline elements: {spacing.xs} to {spacing.md} (8–16px)
Section-level breaks: {spacing.section} to {spacing.band} (48–52px)
Form input vertical gaps: {spacing.md} (16px)

Grid & Container

Max Width: 1200px (measured at 1440px viewport)
Content Column: 1040px (measured at 1280px viewport); 928px at 1024px; 672px at 768px; 355px at 375px
Column Strategy: Single-column layout across all measured breakpoints; no multi-column grid declared.
Gutter: 0px horizontal padding at section level (content flush to viewport edges); internal spacing handled via {spacing.md} and {spacing.lg}.

Section Patterns:

Hero/banner: full-width, single column, tall image or text section
Product detail: two-column on desktop (image left, specs/controls right); collapses to single-column on mobile
Gallery: horizontal carousel or grid-like arrangement (scrollable on small viewports)
Footer: full-width band with multi-line text, icons, and links; collapses to stacked sections on mobile

Whitespace Philosophy

The design prioritizes breathing room to convey premium, gallery-like presentation. Large image areas dominate; text sits below or beside in measured blocks. Sections are separated by {spacing.section} (48px) minimum to create visual pauses and guide scanning. Card padding is generous ({spacing.md} to {spacing.lg}), avoiding cramped layouts. In forms, input fields are spaced {spacing.md} apart vertically, with labels sitting above and hints below in smaller type.

Border Radius Scale

{rounded.none} = 0px — sharp, minimal corners (inputs, icons, sharp affordance)
{rounded.xs} = 3px — very subtle roundness (button text, minimal UI hints)
{rounded.sm} = 8px — soft roundness (reserved for future use; not actively measured on components)
{rounded.md} = 15px — moderate roundness (reserved; not actively measured)
{rounded.lg} = 16px — rounded cards and image containers (gallery thumbnails, large product cards)
{rounded.xl} = 20px — premium roundness (primary card containers, product showcases)
{rounded.full} = 9999px — pill/circle (primary button shapes, icon badges)

Component Application:

Buttons: {rounded.full} (pill)
Cards: {rounded.xl} (20px) or {rounded.lg} (16px) depending on size
Inputs: {rounded.none} (0px — sharp bottom border on focus)
Images: {rounded.lg} (16px for gallery thumbnails)
Icons (badges): {rounded.full} (circle) or {rounded.none} (square)

Border Widths

Thin: 1px — default input borders, hairline dividers
Medium: 3px — input focus state, accent strokes

Usage:

Input borders (default state): thin (1px) or none (layout-dependent)
Input borders (focus state): medium (3px solid) current color
Primary button borders: 2px solid {colors.primary} (custom, not part of scale)
Dividers and hairlines: thin (1px)

6. Depth & Elevation

The design system employs a color-blocking strategy rather than layered shadows.

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

Design tokens

Extracted from 13designstudio.com/product/wooden-single-pendant-andromeda-1361/?fbclid=PAT01DUAVNIn1leHRuA2FlbQIxMABwZG9mAnNydGMGYXBwX2lkDzU2NzA2NzM0MzM1MjQyNwABp27hsyI1qhWvz7vtVdCycFe3uqIHFrFEPEfxeFMWMhg-Plw-sbvM6oQGXKc5_aem_o2Pc6P5Z6ngD2vaXcb4diw

Primary

#00312D

Primary CTA, brand accent, active state

#423221

Secondary accent / hero band; Body copy

#9B8063

Inline link colour

#1F2124

Accent / decorative

#8B9478

Accent / decorative

#69727D

Accent / decorative

#EB0011

Accent / decorative

Neutral

#F6F1E2

Default page background; label colour on brand surfaces

#FFFFFF

Card / panel background

#3E3E3E

Alternating section band

#29221C

Headings / primary text

#4F4F4F

Captions, secondary text

#E2D9D0

Tertiary / placeholder text

#000000

Neutral

#777777

Neutral

Typography · kalameh font

body14.4px · 400 · 21.6px

body14.4px · 500 · 21.6px

body17px · 400 · 17px

caption11.2px · 500 · 24px

caption9.6px · 400 · 24px

heading19px · 600 · 26.6px

list-item16px · 400 · 24px

body19px · 400 · 28.5px

button16px · 500 · 24px

h120.8px · 700 · 29.12px

h324px · 600 · 33.6px

label18px · 700 · 27px

nav-link16px · 500 · 24px

table-header14.4px · 700 · 28.8px

body12.8px · 400 · 19.2px

button14.4px · 400 · 14.4px

body12.8px · 400 · 23.04px

body16px · 700 · 24px

h420px · 500 · 30px

body20px · 700 · 30px

body14px · 400 · 24px

h312.8px · 400 · 23.04px

body24px · 600 · 33.6px

caption11.2px · 700 · 24px

body24px · 900 · 33.6px

h518px · 500 · 27px

body11.2px · 500 · 24px

link12.8px · 400 · 17.92px

label16px · 400 · 16px

input16px · 400 · 24px

display40px · 500 · 60px

display40px · 400 · 60px

body16px · 100 · 24px

body16px · 900 · 24px

h219px · 700 · 26.6px

body16px · 400 · 32px

link19px · 400 · 28.5px

heading32px · 700 · 32px

h140px · 700 · 56px

h219px · 400 · 26.6px

h320px · 700 · 28px

link16px · 400 · 24px

input14.4px · 400 · 24.48px

list-item14px · 400 · 24px

body17.6px · 400 · 26.4px

body20px · 400 · 28px

heading19px · 700 · 28.5px

caption12px · 400 · 18px

Typography · Kalameh

body16px · 400 · 24px

h219px · 500 · 26.6px

link14.4px · 500 · 21.6px

label14.4px · 700 · 21.6px

body14.4px · 400 · 21.6px

body16px · 700 · 24px

body16px · 900 · 16px

heading19px · 500 · 26.6px

h219px · 700 · 28.5px

body14.4px · 500 · 24px

body20px · 700 · 30px

body16px · 500 · 24px

Typography · kalameh

input13px · 500 · 26px

Typography · Kalameh Font

body20px · 700 · 24px

Spacing

20px

12px

4px

32px

16px

8px

52px

24px

Components · 6

Remixes of 13designstudio.com

Latest remixes

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

Remix it