Remixes of studioisees.com
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Studioisees
description: |
I SEE STUDIO's design system embodies refined minimalism with a focus on
architectural and design content. The interface prioritizes clarity and
elegance through generous whitespace, a restrained neutral palette anchored by
stark black and white, and carefully chosen warm accent tones that evoke
natural materials and craftsmanship. The visual mood is sophisticated and
editorial—reminiscent of high-end design publications—with an emphasis on
letting photography and content breathe. Thin borders, sharp corners, and
intentional typography create a contemporary, gallery-like presentation that
positions the brand as a curated lens on interior design, architecture, and
creative spaces.
source:
url: "https://studioisees.com/tham-amp-videgard-arkitekter_houseonahill/"
pagesAnalyzed: 6
extractedAt: 2026-10-30
tokensMeasured: true
colors:
primary: "#FFFFFF"
link: "#CEA677"
surface-alt: "#F7F7F7"
on-primary: "#222222"
ink: "#000000"
body: "#313131"
muted: "#555555"
faint: "#999999"
hairline: "#DDDDDD"
accent-1: "#CE8633"
neutral-1: "#888888"
typography:
heading-xxl:
fontFamily: Arial
fontSize: 32px
fontWeight: 700
lineHeight: 1.3
letterSpacing: 0px
heading-xl:
fontFamily: Arial
fontSize: 26px
fontWeight: 700
letterSpacing: 0px
heading-lg:
fontFamily: Arial
fontSize: 20px
fontWeight: 700
lineHeight: 1.2
letterSpacing: 0px
textTransform: uppercase
heading-md:
fontFamily: Arial
fontSize: 18px
fontWeight: 700
letterSpacing: 0px
textTransform: uppercase
heading-sm:
fontFamily: Arial
fontSize: 14px
fontWeight: 700
lineHeight: 1.4
letterSpacing: 0px
heading-xs:
fontFamily: Arial
fontSize: 12px
fontWeight: 700
lineHeight: 1.3
letterSpacing: 0px
body-xl:
fontFamily: Arial
fontSize: 16px
fontWeight: 400
letterSpacing: 0px
body-lg:
fontFamily: Arial
fontSize: 15px
fontWeight: 400
lineHeight: 2
letterSpacing: 0px
body-md:
fontFamily: Arial
fontSize: 14px
fontWeight: 400
letterSpacing: 0px
body-sm:
fontFamily: Arial
fontSize: 13px
fontWeight: 400
lineHeight: 1.2
letterSpacing: 0px
body-sm-strong:
fontFamily: Arial
fontSize: 13px
fontWeight: 700
lineHeight: 1.54
letterSpacing: 0px
textTransform: uppercase
body-xs:
fontFamily: Arial
fontSize: 12px
fontWeight: 400
lineHeight: 1.7
letterSpacing: 0px
nav:
fontFamily: Nunito
fontSize: 12px
fontWeight: 600
lineHeight: 4.83
letterSpacing: 0px
textTransform: uppercase
caption-md:
fontFamily: Arial
fontSize: 13px
fontWeight: 400
lineHeight: 2
letterSpacing: 0px
caption-sm:
fontFamily: Arial
fontSize: 12px
fontWeight: 400
lineHeight: 1.4
letterSpacing: 0px
caption-sm-strong:
fontFamily: Arial
fontSize: 12px
fontWeight: 700
lineHeight: 1.3
letterSpacing: 0px
textTransform: uppercase
caption-xs:
fontFamily: Arial
fontSize: 11px
fontWeight: 400
lineHeight: 1.2
letterSpacing: 0px
textTransform: uppercase
rounded:
none: 0px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 28px
xxxl: 32px
section: 36px
band: 40px
borderWidths:
thin: 1px
shadows:
sm: "rgba(190, 190, 190, 0.153) 0px 0.33344px 1.6672px 0px"
md: "rgba(190, 190, 190, 0.008) 0px 0.0165525px 0.0827623px 0px"
lg: "rgba(190, 190, 190, 0.153) 0px 0.33345px 1.66725px 0px"
elevationStrategy: progressive
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FFFFFF"
surface: "#F7F7F7"
surfaceRaised: "#EDEDED"
text: "#000000"
textMuted: "#313131"
border: "#DDDDDD"
accent: "#BE894A"
accentFg: "#000000"
focusRing: "#CEA677"
elevation: shadow
dark:
bg: "#110F0D"
surface: "#1F1D1C"
surfaceRaised: "#2B2928"
text: "#FDFBFA"
textMuted: "#A3A1A0"
border: "#373534"
accent: "#CEA677"
accentFg: "#0B0B0C"
focusRing: "#CEA677"
elevation: "border+surface"
gradients:
- context: section
kind: linear
value: "linear-gradient(to left, rgb(245, 245, 245) 0%, rgb(239, 239, 239) 15%, rgb(245, 245, 245) 40%, rgb(245, 245, 245) 100%)"
- context: section
kind: linear
value: "linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0))"
- context: hero
kind: linear
value: "linear-gradient(to left, rgb(245, 245, 245) 0%, rgb(239, 239, 239) 15%, rgb(245, 245, 245) 40%, rgb(245, 245, 245) 100%)"
components:
button-outline:
typography: "{typography.caption-xs}"
textColor: "{colors.neutral-1}"
border: "1px solid {colors.hairline}"
height: 26.1875px
padding: "6px 12px 5px 12px"
button-filled:
typography: "{typography.nav}"
textColor: "{colors.link}"
height: 59.9531px
padding: "0px 15px 0px 15px"
backgroundColor: "rgb(234, 234, 234)"
button-outline-lg:
textColor: "{colors.neutral-1}"
border: "1px solid {colors.hairline}"
height: 30px
padding: "0px 5px 0px 5px"
fontSize: 14px
fontFamily: Arial
fontWeight: 700
lineHeight: 2
button-filled-lg:
typography: "{typography.nav}"
textColor: "{colors.link}"
height: 60px
padding: "0px 15px 0px 15px"
backgroundColor: "rgb(234, 234, 234)"
card:
textColor: "{colors.ink}"
fontSize: 12px
fontFamily: Arial
fontWeight: 400
card-2:
typography: "{typography.body-xl}"
textColor: "{colors.primary}"
badge-icon:
textColor: "{colors.body}"
border: "1px solid {colors.hairline}"
height: 36px
fontSize: 14px
fontFamily: FontAwesome
fontWeight: 400
lineHeight: 2.43
rounded: "50%"
navigation:
textColor: "{colors.ink}"
border: "1px solid rgb(201, 201, 201)"
height: 59.7031px
fontSize: 12px
boxShadow: "rgba(190, 190, 190, 0.067) 0px 0.147628px 0.738138px 0px"
fontFamily: Arial
fontWeight: 400
backgroundColor: "{colors.primary}"
navigation-lg:
textColor: "{colors.ink}"
border: "1px solid rgb(232, 232, 232)"
height: 59.9531px
fontSize: 12px
boxShadow: "rgba(190, 190, 190, 0.008) 0px 0.0165525px 0.0827623px 0px"
fontFamily: Arial
fontWeight: 400
backgroundColor: "{colors.primary}"
footer:
textColor: "{colors.faint}"
fontSize: 12px
fontFamily: Arial
fontWeight: 400
backgroundColor: "rgb(21, 21, 21)"
link:
textColor: "{colors.primary}"
fontSize: 12px
fontFamily: Arial
fontWeight: 400
backgroundColor: "rgb(245, 245, 245)"
link-sm:
textColor: "{colors.body}"
fontSize: 12px
fontFamily: Arial
fontWeight: 400
backgroundColor: "rgb(245, 245, 245)"
states:
other-hover:
target: other
state: hover
textDecoration: underline
link-hover:
target: link
state: hover
textColor: "{colors.primary}"
button-hover:
target: button
state: hover
opacity: 1
button-focus-visible:
target: button
state: focus-visible
outline: "-webkit-focus-ring-color auto 3px"
outlineColor: -webkit-focus-ring-color
outlineWidth: 3px
button-focus:
target: button
state: focus
opacity: 1
other-active:
target: other
state: active
textDecoration: underline
link-active:
target: link
state: active
textDecoration: none
other-focus:
target: other
state: focus
outline: none
button-disabled:
target: button
state: disabled
opacity: 0.3
other-focus-visible:
target: other
state: focus-visible
outline: "currentcolor solid 2px"
outlineColor: currentcolor
outlineWidth: 2px
button-active:
target: button
state: active
opacity: 0.6
borderColor: currentcolor
borderWidth: medium
nav-hover:
target: nav
state: hover
opacity: 0.66
link-focus:
target: link
state: focus
opacity: 0.2
breakpoints:
- width: 375
containerWidth: 355
gridColumns: 1
navLinksVisible: 9
menuToggleVisible: false
headingPx: 18
bodyPx: 12
sectionPaddingX: 0
- width: 768
containerWidth: 726
gridColumns: 1
navLinksVisible: 9
menuToggleVisible: false
headingPx: 26
bodyPx: 12
sectionPaddingX: 0
- width: 1024
containerWidth: 940
gridColumns: 7
navLinksVisible: 8
menuToggleVisible: false
headingPx: 26
bodyPx: 12
sectionPaddingX: 0
- width: 1280
containerWidth: 1240
gridColumns: 7
navLinksVisible: 8
menuToggleVisible: false
headingPx: 26
bodyPx: 12
sectionPaddingX: 0
- width: 1440
containerWidth: 1400
gridColumns: 7
navLinksVisible: 8
menuToggleVisible: false
headingPx: 26
bodyPx: 12
sectionPaddingX: 0
coverage:
statesFound: 61
gradientsFound: 3
rolesUnassigned: 2
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
I SEE STUDIO's design system embodies refined minimalism with a focus on architectural and design content. The interface prioritizes clarity and elegance through generous whitespace, a restrained neutral palette anchored by stark black and white, and carefully chosen warm accent tones that evoke natural materials and craftsmanship. The visual mood is sophisticated and editorial—reminiscent of high-end design publications—with an emphasis on letting photography and content breathe. Thin borders, sharp corners, and intentional typography create a contemporary, gallery-like presentation that positions the brand as a curated lens on interior design, architecture, and creative spaces.
Key Characteristics
#CEA677) used for links, CTAs, and highlights—evoking natural materials#DDDDDD) for subtle structure{colors.primary} — #FFFFFF): Used as primary CTA fill, brand accent surfaces, and active states. White serves both as the canvas and as an interactive accent depending on context.{colors.link} — #CEA677): Warm tan used for inline links, secondary CTAs, and highlighted category tags. Evokes natural wood and ceramic materials.{colors.accent-1} — #CE8633): Unassigned decorative accent; no measured interactive role—used for visual variety in editorial contexts.{colors.on-primary} — #222222): Label and text color when placed on white or light primary surfaces.{colors.ink} — #000000): Primary heading color; maximum contrast text.{colors.body} — #313131): Primary body copy color; slightly softened black for improved readability.{colors.muted} — #555555): Secondary text, captions, and metadata (dates, category labels).{colors.faint} — #999999): Tertiary text, placeholders, and very lightweight annotations.{colors.neutral-1} — #888888): Unassigned neutral; used for various mid-tone applications.{colors.surface-alt} — #F7F7F7): Alternating section bands and subtle background color shifts for content separation.{colors.hairline} — #DDDDDD): 1px borders and subtle dividers; the system's visual glue for structure without weight.Primary: Arial (sans-serif) — clean, neutral, editorial
Secondary: Nunito (sans-serif) — used for navigation and uppercase labels
Tertiary: Noto Sans (sans-serif) — system fallback
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XL | Arial | 32px | 700 | 1.3 | 0px | Large headings; used as h4 |
| Heading XL | Arial | 26px | 700 | not measured | 0px | Major section headings; measured on h1 |
| Heading LG | Arial | 20px | 700 | 1.2 | 0px | Uppercase; measured on h1 |
| Heading MD | Arial | 18px | 700 | not measured | 0px | Subheadings; standard and uppercase variants |
| Heading SM | Arial | 14px | 700 | 1.4 | 0px | Small headings; measured on h5 |
| Heading XS | Arial | 12px | 700 | 1.3 | 0px | Smallest headings; measured on h3 |
| Body XL | Arial | 16px | 400 | not measured | 0px | Large body copy |
| Body LG | Arial | 15px | 400 | 2 | 0px | Lead text or emphasis |
| Body MD | Arial | 14px | 400 | not measured | 0px | Standard body copy |
| Body SM | Arial | 13px | 400 | 1.2 | 0px | Small body copy and labels |
| Body SM Strong | Arial | 13px | 700 | 1.54 | 0px | Uppercase small labels and callouts |
| Body XS | Arial | 12px | 400 | 1.7 | 0px | Link text and tiny body copy |
| Caption MD | Arial | 13px | 400 | 2 | 0px | Captions and metadata |
| Caption SM | Arial | 12px | 400 | 1.4 | 0px | Small captions |
| Caption SM Strong | Arial | 12px | 700 | 1.3 | 0px | Uppercase strong captions |
| Caption XS | Arial | 11px | 400 | 1.2 | 0px | Tiny uppercase captions |
| Navigation | Nunito | 12px | 600 | 4.83 | 0px | Uppercase nav links |
1.3 to 2) to maintain readability and whitespace in body text.0px, maintaining tight, refined typography.400 for body and captions, 600 for navigation, 700 for headings and emphasis.Outline (Small)
11px, weight 400)6px 12px 5px 12px26.1875pxtransparent#888888 ({colors.neutral-1})1px solid #DDDDDD ({colors.hairline})0pxnone1, border color currentcolor, background rgba(90, 90, 90, 0.25)currentcolor solid 2px0.25Filled (Small)
12px, weight 6000px 15px59.9531px#EAEAEA ({colors.surface-alt})#CEA677 ({colors.link})none0px58pxnone#FFFFFF ({colors.primary}), opacity 10.60.3Outline Large
14px, weight 7000px 5px30px30pxtransparent#888888 ({colors.neutral-1})1px solid #DDDDDD ({colors.hairline})0px28pxscale(1.125), background #FFFFFF ({colors.primary})currentcolor solid 2pxFilled Large
12px, weight 6000px 15px60px#EAEAEA ({colors.surface-alt})#CEA677 ({colors.link})none0px58pxnone, opacity 1Default Card
transparent#000000 ({colors.ink})none0px0px12px, weight 400noneDefault Card (White Surface)
transparent#FFFFFF ({colors.primary})none0px0px16px, weight 400noneNavigation Bar (Default)
12px, weight 40059.7031px#FFFFFF ({colors.primary})#000000 ({colors.ink})1px solid #C9C9C90pxrgba(190, 190, 190, 0.067) 0px 0.147628px 0.738138px 0px0.66Navigation Bar (Large)
12px, weight 40059.9531px#FFFFFF ({colors.primary})#000000 ({colors.ink})1px solid #E8E8E80pxrgba(190, 190, 190, 0.008) 0px 0.0165525px 0.0827623px 0pxNavigation Links
12px, weight 600, uppercase#000000 ({colors.ink})0.66Text Input
12px1px solid #DDDDDD ({colors.hairline})0px#999999 ({colors.faint})transparent or #FFFFFF ({colors.primary})Icon Badge
14px, weight 40036px36px0px1px solid #DDDDDD ({colors.hairline})50% (fully rounded)transparent#313131 ({colors.body})34pxDefault Link
12px, weight 400#CEA677 ({colors.link})none#FFFFFF ({colors.primary}), opacity 0.85, text-decoration noneSmall Link
12px, weight 400#313131 ({colors.body})#F7F7F7 ({colors.surface-alt})#FFFFFF ({colors.primary}), background rgba(255, 255, 255, 0.1)Footer
12px, weight 40098.7969px#151515#999999 ({colors.faint})none0pxThe spacing system uses a base unit of 4px with an 8-step scale:
{spacing.xxs} = 4px — Micro spacing between tightly grouped elements{spacing.xs} = 8px — Tight spacing between small elements{spacing.sm} = 12px — Small spacing within components{spacing.md} = 16px — Standard spacing between elements{spacing.lg} = 20px — Comfortable spacing between sections{spacing.xl} = 24px — Large spacing between major sections{spacing.xxl} = 28px — Extra large spacing{spacing.xxxl} = 32px — Extra extra large spacing{spacing.section} = 36px — Major section spacing{spacing.band} = 40px — Full-width section band paddingUsage Context:
{spacing.xxs} – {spacing.xs}) for button padding and inline labels{spacing.sm} – {spacing.md}) for component internals{spacing.lg} – {spacing.xl}) for separating distinct content regions{spacing.section} – {spacing.band}) for full-width layout blocks355px (mobile, 375px viewport) to 1400px (desktop, 1440px viewport)0px horizontal padding in section layouts; content is full-bleed, relying on a centered max-width containerWhitespace is used generously to create visual breathing room and editorial clarity. The design avoids cramped layouts by:
The system employs strict geometric precision with two radius values:
{rounded.none} = 0px — All standard UI components (buttons, cards, inputs, navigation). Sharp corners reinforce the editorial, gallery aesthetic.{rounded.full} = 9999px — Icon badges and avatars only, rendering as perfect circles.Component-Level Application:
0px50% (fully rounded)0px1px): Hairline borders on inputs, navigation, and badge icon containers; the default structural border thickness throughout the system.| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Cards, buttons, default surfaces |
| Dropdown (SM) | rgba(190, 190, 190, 0.153) 0px 0.33344px 1.6672px 0px | Light dropdown menus, minimal lift |
| Dropdown (MD) | rgba(190, 190, 190, 0.008) 0px 0.0165525px 0.0827623px 0px | Subtle dropdown menus, barely perceptible |
| Dropdown (LG) | rgba(190, 190, 190, 0.153) 0px 0.33345px 1.66725px 0px | Standard dropdown depth |
| Dropdown (XL) | rgba(0, 0, 0, 0) 0px 0px 0px 0px | No shadow; flat overlay |
Shadow Philosophy: The elevation system uses minimal, color-blocked depth. Rather than stacking multiple shadow layers, the design relies on:
#F7F7F7 sections) create perceived depth0.008 to 0.153 opacity), barely noticeable at normal viewing distancebox-shadow: none, maintaining the clean, editorial aestheticmd) to slightly more noticeable (sm/lg) but never approach traditional UI "pop" effects65% (0.65) — Used for hover states and semi-transparent overlays90% (0.90) — Used for near-opaque interactive statesThe stacking scale is minimal but structured:
1, 3, 5 — Standard component layering10 — Navigation and menu dropdowns200 — Sticky headers and persistent UI9999 — Dialog and modal overlays99996, 99997 — Notification toasts and transient messages (reserved for future use; not currently observed in measurements)#CEA677) for interactive elements. Use it for links, secondary buttons, and category highlights to draw the eye and create visual continuity.#313131), headings should be bold and black (#000000).#DDDDDD) for subtle structure. Use 1px borders around inputs, badges, and cards to delineate regions without visual weight.#CEA677) is the only accent; decorative elements should use existing neutrals or the secondary accent (#CE8633) sparingly.700 weight; variations come from scale and line-height, not weight shifts.{spacing.section} (36px). The design depends on generous vertical rhythm; cramping sections breaks the editorial flow.| Viewport | Content Width | Grid Columns | Heading Size | Body Size | Section Padding X |
|---|---|---|---|---|---|
| 375px (Mobile) | 355px | 1 | 18px (Heading XL) | 12px | 0px |
| 768px (Tablet) | 726px | 1 | 26px (Heading XL) | 12px | 0px |
| 1024px (Desktop) | 940px | 7 | 26px (Heading XL) | 12px | 0px |
| 1280px (Wide Desktop) | 1240px | 7 | 26px (Heading XL) | 12px | 0px |
| 1440px (Full Width) | 1400px | 7 | 26px (Heading XL) | 12px | 0px |
Key Observations:
26px) scales down to 18px on mobile but returns to 26px at 768px and above.12px across all breakpoints; no size scaling occurs.0px horizontally, with a centered max-width container providing margins.Minimum interactive element sizes:
26px height (small), 60px height (large)36px × 36px{spacing.md} minimum around link text)12px (body) and 18px+ (headings); no text shrinks below these thresholds.When implementing UI components, refer to these semantic color roles:
#FFFFFF) — White backgrounds and primary interactive states#CEA677) — Warm tan for interactive highlights#000000) — Black for all headings and primary text#313131) — Softened black for readable body text#555555) — Mid-gray for metadata and captions#999999) — Light gray for hints and very secondary information#DDDDDD) — 1px hairline for subtle structure#F7F7F7) — Off-white for visual separation#222222) — Dark text over white backgroundsStart flat. All components default to box-shadow: none and border-radius: 0px. Add depth only if content hierarchy demands it, and always through color-blocking first (e.g., a #F7F7F7 section) before resorting to subtle shadows.
Typography drives hierarchy. Use font-weight (400 / 600 / 700) and size to distinguish heading levels, body, and interactive text. Do not use color saturation to create hierarchy; keep body text in neutral (#313131).
Whitespace is structure. Do not rely on borders or visual containers to define regions. Use section spacing ({spacing.section} = 36px minimum) and margin to create visual separation.
The warm accent is your only interactive color. Every link, secondary button, or highlighted category should use #CEA677 ({colors.link}). No other colors should be introduced for interactive elements.
Hairline borders are your friend. Use 1px solid #DDDDDD ({colors.hairline}) around inputs, badges, and subtle containment. It adds structure without visual weight.
Navigation is persistent and uppercase. The navigation bar uses Nunito, 12px, 600 weight, uppercase. It spans the full viewport width, has a 1px border, and a minimal drop shadow on scroll (SM shadow: rgba(190, 190, 190, 0.067) 0px 0.147628px 0.738138px 0px).
Button sizes are intentional. Small buttons are 26px tall; large buttons are 60px tall. Use filled buttons with #EAEAEA background and #CEA677 text for primary CTAs; use outline buttons with #DDDDDD border for secondary actions.
Opacity for hover states. When a button or link is hovered, shift opacity or apply a subtle background overlay (e.g., rgba(255, 255, 255, 0.1) or rgba(90, 90, 90, 0.25)). Avoid dramatic color shifts.
Images render full-bleed. All images in the content grid use border-radius: 0px and full-width layout. Respect aspect ratio; do not force images into fixed aspect containers.
Responsive scales linearly. Content width grows from 355px (mobile) to 1400px (desktop). Grid columns remain single-column until 1024px, then shift to 7-column. Font sizes do not scale; headings may shift size between mobile and tablet, but all other text is fixed.
{colors.accent-1} (#CE8633) and {colors.neutral-1} (#888888) are measured in the DOM but have no clear interactive or semantic role. They appear to be decorative or legacy values. Use the primary accent (#CEA677) and neutral scale for new implementations.150ms ease-out for interactive state changes.:hover { transform: scale(1.05) }, others record :hover { transform: none }. Standardize on a single approach (recommended: no transform, opacity or background shift only).rgba(255, 255, 255, 0.1), rgba(90, 90, 90, 0.25)), suggesting different contexts or legacy variants. Choose a consistent hover overlay approach per component type.#F5F5F5 to #EFEFEF), but these are visual embellishments not tied to semantic roles. Reproduce exactly if used; do not generalize to a gradient system.