Alham Rizki

Generated Nov 3, 2026

DESIGN.md for zodiacjakarta.com

zodiacjakarta.com2 colors4 componentsHelvetica

Remix

12 screenshots captured· zodiacjakarta.com

1 / 12 · Zodiac · Above the fold

Preview

the generated design system

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

Design tokens

version: alpha
name: Zodiacjakarta
description: |
  Zodiac operates with a bold, contemporary aesthetic rooted in stark minimalism
  and high contrast. The design prioritizes typography and negative space,
  creating a clean, gallery-like environment where product imagery dominates.
  The palette is intentionally reduced to pure black and white, supported by
  vibrant accent colors (deep reds, sunny golds, rich browns) used strategically
  in product photography and branded content. The mood is avant-garde and edgy,
  drawing from streetwear and underground music culture—raw, unpolished, and
  unapologetically monochromatic. Interactive elements remain understated,
  allowing the brand's visual identity (via photography, prints, and
  merchandise) to be the primary storyteller.
source:
  url: "https://zodiacjakarta.com/"
  pagesAnalyzed: 6
  extractedAt: 2026-11-03
  tokensMeasured: true
colors:
  primary: "#000000"
  canvas: "#FFFFFF"
  on-primary: "#FFFFFF"
  ink: "#000000"
typography:
  display:
    fontFamily: Helvetica
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  heading:
    fontFamily: Helvetica
    fontSize: 23px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 2.3px
    textTransform: uppercase
  body-xl:
    fontFamily: Helvetica
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  body-lg:
    fontFamily: Helvetica
    fontSize: 18.75px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  body-md:
    fontFamily: Helvetica
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-sm:
    fontFamily: Helvetica
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-sm-strong:
    fontFamily: Helvetica
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  body-xs:
    fontFamily: Helvetica
    fontSize: 14px
    fontWeight: 400
    lineHeight: 3.93
    letterSpacing: 0px
  button:
    fontFamily: Helvetica
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 1.04px
    textTransform: uppercase
  label:
    fontFamily: Helvetica
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  caption:
    fontFamily: Helvetica
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
rounded:
  none: 0px
  xs: 2px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 32px
  xxxl: 36px
  section: 40px
  band: 44px
borderWidths:
  thin: 1px
elevationStrategy: color-blocking
themes:
  derived: dark   # the other theme is the site's measured palette
  light:
    bg: "#FFFFFF"
    surface: "#F7F7F7"
    surfaceRaised: "#EDEDED"
    text: "#000000"
    textMuted: "#595959"
    border: "#E0E0E0"
    accent: "#000000"
    accentFg: "#FFFFFF"
    focusRing: "#000000"
    elevation: shadow
  dark:
    bg: "#0F0F10"
    surface: "#1D1D1E"
    surfaceRaised: "#29292A"
    text: "#F5F5F5"
    textMuted: "#9E9E9E"
    border: "#353536"
    accent: "#858585"
    accentFg: "#0B0B0C"
    focusRing: "#666666"
    elevation: "border+surface"
components:
  button-text:
    typography: "{typography.body-sm}"
    textColor: "{colors.ink}"
    height: 25.5px
    padding: "0px 10px 3px 10px"
  footer:
    typography: "{typography.body-sm}"
    textColor: "{colors.ink}"
    padding: "45px 0px 35px 0px"
    backgroundColor: "{colors.canvas}"
  link:
    typography: "{typography.body-sm}"
    textColor: "{colors.ink}"
    backgroundColor: "{colors.primary}"
  link-sm:
    typography: "{typography.heading}"
    textColor: "{colors.ink}"
  card:
    typography: "{typography.body-xl}"
    textColor: "{colors.ink}"
states:
  other-focus:
    target: other
    state: focus
    outline: none
  other-hover:
    target: other
    state: hover
    textColor: transparent
    backgroundColor: transparent
  button-hover:
    target: button
    state: hover
    opacity: 1
  link-focus:
    target: link
    state: focus
    textColor: "{colors.ink}"
    opacity: 1
    backgroundColor: "{colors.canvas}"
  link-hover:
    target: link
    state: hover
    textColor: "rgb(204, 0, 0)"
  input-focus:
    target: input
    state: focus
    borderColor: "rgb(123, 123, 123)"
  button-active:
    target: button
    state: active
    backgroundColor: "rgba(0, 0, 0, 0.6)"
  input-active:
    target: input
    state: active
    boxShadow: "rgba(0, 0, 0, 0.25) 0px 0px 0px 3px"
  other-active:
    target: other
    state: active
    textColor: "rgba(0, 0, 0, 0.55)"
    backgroundColor: "rgba(0, 0, 0, 0.05)"
  card-hover:
    target: card
    state: hover
    opacity: 0.8
  input-hover:
    target: input
    state: hover
    borderColor: "rgb(219, 219, 219)"
breakpoints:
  - width: 375
    containerWidth: 367
    gridColumns: 1
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 21
    bodyPx: 15
    sectionPaddingX: 0
  - width: 768
    containerWidth: 248
    gridColumns: 7
    navLinksVisible: 8
    menuToggleVisible: true
    headingPx: 23
    bodyPx: 15
    sectionPaddingX: 0
  - width: 1024
    containerWidth: 333
    gridColumns: 3
    navLinksVisible: 8
    menuToggleVisible: true
    headingPx: 23
    bodyPx: 15
    sectionPaddingX: 0
  - width: 1280
    containerWidth: 419
    gridColumns: 3
    navLinksVisible: 8
    menuToggleVisible: true
    headingPx: 23
    bodyPx: 15
    sectionPaddingX: 0
  - width: 1440
    containerWidth: 472
    gridColumns: 3
    navLinksVisible: 8
    menuToggleVisible: true
    headingPx: 23
    bodyPx: 15
    sectionPaddingX: 0
coverage:
  statesFound: 52
  gradientsFound: 0
  rolesUnassigned: 0
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: false

Design System Inspired by Zodiac

1. Visual Theme & Atmosphere

Zodiac operates with a bold, contemporary aesthetic rooted in stark minimalism and high contrast. The design prioritizes typography and negative space, creating a clean, gallery-like environment where product imagery dominates. The palette is intentionally reduced to pure black and white, supported by vibrant accent colors (deep reds, sunny golds, rich browns) used strategically in product photography and branded content. The mood is avant-garde and edgy, drawing from streetwear and underground music culture—raw, unpolished, and unapologetically monochromatic. Interactive elements remain understated, allowing the brand's visual identity (via photography, prints, and merchandise) to be the primary storyteller.

Key Characteristics

Stark black and white color blocking with zero gradients
Maximalist imagery set against minimalist UI chrome
Sharp corners and no border radius on interactive elements
Uppercase typography with generous letter-spacing on headings
Flat, shadowless surfaces; depth from contrast alone
Gallery-grid product layouts with generous whitespace
High-contrast text ensuring legibility across all sizes
Navigation designed for simplicity and scannability

2. Color Palette & Roles

Primary

Primary / Brand Ink (#000000): Used for headings, body text, primary interactive states, active navigation, brand mark (ZODIAC logo), and CTA fills. Establishes the dominant visual voice and ensures maximum contrast on light surfaces.

Neutral Scale

Canvas / On Primary (#FFFFFF): Default page background and primary surface. Serves as the neutral field upon which all content sits. Also used as text color on dark/black surfaces, ensuring legibility in inverted contexts.

Accent & Editorial (observed in photography and product presentation)

While the site's core CSS palette contains only black and white, product photography and editorial hero imagery introduce vibrant secondary hues:

Deep Red (observed in hero imagery, brand mood): Conveys boldness and energy; used in dramatic lifestyle photography backdrops
Golden Yellow (observed in product variants, FED brand "Rooster T-shirt"): Bright, energetic accent for standout product options
Deep Brown (observed in product variants): Rich, neutral alternative to pure black; used on merchandise

These secondary colors exist primarily in product assets and lifestyle photography rather than the UI layer itself.

3. Typography Rules

Font Family

Primary: Helvetica, Helvetica Neue
Fallback Stack: Helvetica, Helvetica Neue, Arial, sans-serif

The system uses Helvetica exclusively across all roles, creating a cohesive, timeless appearance rooted in Swiss modernism.

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display	Helvetica	40px	400	1.2	0px	Large hero and feature headings
Heading (XL)	Helvetica	23px	400	1.2	2.3px	Uppercase section and brand headings; observed on `h1` and `h2`
Body XL	Helvetica	20px	700	1.2	0px	Bold body text for emphasis
Body LG	Helvetica	18.75px	700	1.5	0px	Bold subheading or label text
Body MD	Helvetica	16px	400	1.5	0px	Default paragraph and primary content text
Button	Helvetica	13px	400	1.4	1.04px	Interactive buttons; uppercase; tight tracking
Body SM	Helvetica	15px	400	1.5	0px	Link text, navigation items
Body SM Strong	Helvetica	15px	700	1.5	0px	Bold variant of body small
Label	Helvetica	15px	400	1.2	0px	Form labels and input hints
Body XS	Helvetica	14px	400	3.93	0px	Fine print, captions, metadata
Caption	Helvetica	12px	400	1.5	0px	Smallest text; image captions, footnotes

Principles

Weight discipline: System uses only 400 (regular) and 700 (bold). No intermediate weights.
Letter-spacing: Headings receive generous tracking (2.3px on large headings, 1.04px on buttons) to enhance legibility and create visual breathing room. Body text uses 0px tracking.
Line height: Headings cluster at 1.2 for tight, impactful stacking; body text defaults to 1.5 for readability. Exception: Body XS runs 3.93 line-height, suggesting loose stacking for very small text.
All-caps on interactive: Buttons and headings employ uppercase transformation, reinforcing hierarchy and brand voice.
Vertical rhythm: Consistent line heights support a predictable baseline grid.

4. Component Stylings

Buttons

Default (Text) Button

Background: transparent (rgba(0, 0, 0, 0))
Text Color: #000000
Font: Helvetica, 13px, weight 400, letter-spacing 1.04px, uppercase
Padding: 0px 10px 3px 10px
Height: 25.5px
Border: 0px none
Border-Radius: {rounded.none} (0px)
Box-Shadow: none
Hover State: Background transitions to #404040 (rgb(64, 64, 64)), text remains or shifts to #FFFFFF depending on variant
Active State: Background darkens to rgba(0, 0, 0, 0.6) or opacity reduces to 0.7
Focus State: Outline set to 0px (no visible focus ring on this component)

Variant: Outlined Button

Background: transparent
Text Color: #000000
Border: 1px solid #E6E6E6 (light gray observed in hover state)
Padding: 0px 10px 3px 10px
Hover: Text becomes #404040, border becomes #404040, background remains transparent
Active: Opacity 0.7 or background becomes rgba(0, 0, 0, 0.2)

Variant: Filled Button (Secondary)

Background: #404040 (dark gray, inferred from observed hover states)
Text Color: #FFFFFF
Padding: 0px 10px 3px 10px
Hover: Opacity reduces to 0.6 or 0.8
Border: 0px none
Border-Radius: {rounded.none} (0px)

Cards

Default Card

Background: transparent (rgba(0, 0, 0, 0))
Text Color: #000000
Font: Helvetica, 20px, weight 400, line-height 1.2
Padding: 0px (no internal padding; content spacing managed by parent grid)
Border: 0px none
Border-Radius: {rounded.none} (0px)
Box-Shadow: none (flat design; no elevation)
Hover State: Opacity transitions to 0.8, creating subtle visual feedback without movement or shadow

Product Card (Product Gallery)

Consists of stacked image container (no border) and text overlay below
Image: Full-width, no padding
Product Title: {typography.body-sm-strong} (15px, weight 700)
Price: {typography.body-sm} (15px, weight 400)
No card border or background; relies on image contrast and whitespace

Inputs & Forms

Input Field (Text, Search)

Background: transparent (default) or #F6F6F6 (light gray on some contexts)
Text Color: #000000
Font: Helvetica, 15px, weight 400
Padding: Variable; typically {spacing.xs} to {spacing.sm} horizontally and vertically
Border: 1px solid {hairline} (thin border; color unspecified in extraction, assume #999999 or #CCCCCC)
Border-Radius: {rounded.xs} (2px)
Focus State: Border-color becomes #7B7B7B (darker gray), or box-shadow rgba(0, 0, 0, 0.25) 0px 0px 0px 3px (dark outline ring)
Hover State: Border-color becomes #DBDBDB (light gray), background may remain transparent or shift to #F6F6F6
Active State: Box-shadow rgba(0, 0, 0, 0.25) 0px 0px 0px 3px or rgba(255, 255, 255, 0.25) 0px 0px 0px 3px (white ring for dark backgrounds)
Label: {typography.label} (15px, weight 400, line-height 1.2)

Navigation

Primary Navigation Bar

Background: #FFFFFF (white) or #000000 (black) depending on hero context
Text Color: #000000 (black on white) or #FFFFFF (white on black)
Font: Helvetica, {typography.body-sm} (15px, weight 400)
Padding: {spacing.md} to {spacing.lg} horizontally; {spacing.sm} vertically
Border: 0px none
Layout: Horizontal flexbox with gap {spacing.md} to {spacing.lg} between items
Active/Underline: Underline visible on current page link
Hover: Text color shifts or background dims slightly
Mobile Menu Toggle: Visible on viewports below 768px; typically three-line hamburger icon

Dropdown Navigation (Brands, Categories, etc.)

Background: #FFFFFF
Text Color: #000000
Z-Index: {z-index.dropdown} (10 or 11)
Border: 0px none (no visible border; shadow or background contrast separates from main surface)
Padding: {spacing.md} vertically between items; {spacing.lg} horizontally
Item Hover: Background becomes #F2F2F2 (very light gray) or text opacity increases
Font: Same as primary navigation

Footer

Footer Container

Background: #FFFFFF (white)
Text Color: #000000
Width: Full viewport width (1440px at desktop)
Padding: 45px 0px 35px 0px (top/bottom emphasis; sides handled by container)
Height: 207px (measured on full footer)
Font: Helvetica, 15px, weight 400, line-height 1.5
Border: 0px none
Border-Radius: 0px
Box-Shadow: none
Layout: Grid or flex layout with multiple columns for links, info, and copyright
Border-Top: Typically a hairline separator above footer (color: light gray, e.g., #E0E0E0)

5. Layout Principles

Spacing System

Base unit: 4px ({spacing.xxs})

Full scale:

{spacing.xxs} = 4px — Micro-adjustments between tightly grouped elements
{spacing.xs} = 8px — Icon spacing, tight button padding
{spacing.sm} = 12px — Input fields, form labels, small gaps
{spacing.md} = 16px — Standard navigation padding, moderate component spacing
{spacing.lg} = 20px — Subheading spacing, larger component gaps
{spacing.xl} = 24px — Card margins, medium section spacing
{spacing.xxl} = 32px — Large section separators
{spacing.xxxl} = 36px — Major section dividers
{spacing.section} = 40px — Primary content area margins and padding
{spacing.band} = 44px — Full-width hero/banner sections

Usage contexts:

Buttons and form elements: {spacing.xs} to {spacing.sm} internal padding
Navigation items: {spacing.md} horizontal gap
Product grid gaps: {spacing.md} to {spacing.lg}
Section padding (left/right): {spacing.section} at desktop; reduces on mobile
Section padding (top/bottom): {spacing.section} to {spacing.band}

Grid & Container

Max Width: 1440px (measured at desktop viewport)

Content Column Width by Viewport:

375px (mobile): 367px (full width minus small margins)
768px (tablet): 248px (suggests multi-column layout, approximately 3 columns)
1024px (desktop): 333px (approximately 3 columns)
1280px (large desktop): 419px (approximately 3 columns)
1440px (max): 472px (approximately 3 columns at full width)

Grid Strategy: Product grids use a 3-column layout at desktop (1024px and above), collapsing to fewer columns on tablet and single-column on mobile. Each column width accommodates product images, title, and price text without wrapping.

Section Patterns:

Hero/banner sections span full viewport width with centered content
Product grid sections use max-width container with uniform gutters ({spacing.md} to {spacing.lg})
Footer spans full width with content container inside
Navigation sticks to top (z-index: 999) and remains full-width across all breakpoints

Whitespace Philosophy

Zodiac embraces generous negative space as a core design principle. Large gaps between product tiles, ample margins around text, and uncluttered navigation create a gallery-like atmosphere. The system avoids cramping content; each element breathes independently. Sections are separated by significant vertical padding ({spacing.section} to {spacing.band}), allowing visual rest between major content blocks. This breathing room reinforces the premium, curated nature of the brand.

Border Radius Scale

{rounded.none} = 0px — All interactive elements (buttons, links, cards) use sharp corners
{rounded.xs} = 2px — Minimal softening on form inputs only; nearly invisible rounding

The system is fundamentally sharp-edged, reflecting the edgy, contemporary brand voice. Only form inputs receive any rounding, and even that is minimal (2px).

Border Widths

Thin = 1px — Input field borders, hairline separators in footer and between sections
No thicker stroke widths observed; system relies on color and shadow contrast for visual separation

6. Depth & Elevation

Level	Treatment	Use
Flat	No shadow, `box-shadow: none`, background either transparent or solid color	Default state for buttons, cards, form inputs, navigation
Hover (subtle)	Opacity reduction (`0.8`) or background color shift	Product cards, interactive elements on hover to signal affordance without lifting
Active (prominent)	Opacity `0.7`, or background darkens to `rgba(0, 0, 0, 0.6)`	Button active states, pressed inputs
Focus (outline)	`box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 0px 3px` (dark ring) or `rgba(255, 255, 255, 0.25) 0px 0px 0px 3px` (light ring on dark)	Form inputs and focusable elements for keyboard accessibility

Elevation Philosophy:

Zodiac uses color-blocking and contrast rather than shadows or layered elevation. Depth emerges from stark black-on-white or white-on-black contrasts, not from shadow complexity. Interactive states rely on opacity changes and color shifts—subtle, flat, and direct. This reinforces the minimalist aesthetic: no soft, diffused shadows; instead, bold, graphic changes signal interactivity. Even hover states prefer opacity reduction or color inversion over shadow lifting.

Opacity Levels

Opacity is used strategically for state feedback:

Full opacity (1 or 100%): Default, active, focused states
High opacity (0.8 or 80%): Hover state on cards and subtle interactive elements
Medium opacity (0.7 or 70%): Button active states and secondary feedback
Low opacity (0.6 or 60%): Button hover for secondary actions, disabled-like appearance
Very low opacity (0.55 or 55%), (0.4 or 40%): Decorative or disabled elements
Minimal opacity (0.05 or 5%), (0.2 or 20%): Background overlays on hover, subtle highlighting

Z-Index / Layering

Base (z-index: 1, 2, 7, 8): Default document flow, regular components
Dropdown (z-index: 10, 11): Navigation dropdowns, popovers, small overlays
Sticky (z-index: 999): Fixed/sticky navigation bar at top of viewport
Modal (z-index: 1000): Full-screen overlays, modal dialogs, notifications

The stacking scale is minimal and intentional; only three tiers above base (dropdown, sticky, modal) are needed for the site's interaction model.

7. Do's and Don'ts

Do

Use pure black (#000000) or white (#FFFFFF) for all UI surfaces and text; do not introduce mid-tones unless part of product photography
Maintain sharp corners (0px border-radius) on all interactive elements except form inputs (which use {rounded.xs} — 2px)
Apply generous letter-spacing (2.3px on headings, 1.04px on buttons) to emphasize uppercase typography
Use opacity changes and color shifts for interactive feedback; avoid shadows and gradients
Structure product grids in 3-column layouts at desktop; collapse to 1 column on mobile
Apply {spacing.section} (40px) or {spacing.band} (44px) between major content sections
Ensure all text meets WCAG contrast requirements on its background (black on white, white on black)
Use Helvetica exclusively across all text roles; no additional font families

Don't

Do not introduce gradients, mesh overlays, or multi-layer shadows; the system is flat and graphic
Do not use rounded corners on buttons or cards; reserve {rounded.xs} for form inputs only
Do not mix black and white with mid-tone grays in the core UI layer; grays are reserved for interactive states and edges
Do not use color alone to signal state; always pair with opacity, border, or text change
Do not add padding inside card containers; let product images and text sit at the edges
Do not reduce letter-spacing on headings; maintain the generous tracking for visual hierarchy and airiness
Do not add focus outlines beyond the box-shadow treatment on inputs; buttons omit visible focus rings
Do not use font weights other than 400 (regular) and 700 (bold); no intermediate weights

8. Responsive Behavior

Breakpoints

Viewport	Width	Content Column	Grid	Nav Links Visible	Menu Toggle	Key Changes
Mobile	375px	367px	1 column	0	Yes	Single-column product grid; hamburger menu; condensed spacing
Tablet	768px	248px	3 columns	8 links	Yes	Multi-column grid; menu toggle still visible; spacing adjusts
Desktop	1024px	333px	3 columns	8 links	Yes	3-column product grid solidified; full navigation visible; standard spacing
Large Desktop	1280px	419px	3 columns	8 links	Yes	Wider columns; increased breathing room; same layout
Max	1440px	472px	3 columns	8 links	Yes	Maximum content width; full spacing applied

Breakpoint Strategy: The system collapses at 768px, where the menu toggle transitions from hidden to visible. Navigation links remain visible on most breakpoints, but the primary layout shift is from 1-column (mobile) to 3-column (tablet and above). Section padding and margins scale linearly with viewport width; text sizes remain stable across breakpoints.

Touch Targets

While exact touch target measurements were not extracted, standard mobile-first principles apply:

Minimum touch target: 44px × 44px recommended (typical mobile standard)
Buttons observed at 25.5px height; these may be desktop-optimized and should scale up to 44px on touch devices
Navigation and menu items should maintain spacing of at least {spacing.md} (16px) between targets
Form inputs: 36px to 44px tall on mobile; padding adjusted accordingly
Link hit areas: Ensure whitespace around text links to prevent accidental taps on adjacent elements

Collapsing Strategy

Mobile (375px):

Single-column product grid
Navigation collapses into hamburger menu; main nav links hidden
Section padding reduces (inferred; no explicit mobile padding extracted)
Typography sizes remain stable (e.g., headings stay 23px)
Hero images scale to full viewport width with reduced height
Footer collapses to single-column stack

Tablet (768px to 1023px):

3-column product grid appears
Menu toggle remains visible; top nav links visible but may be in dropdown
Content column narrows; spacing maintained proportionally
Typography unchanged
Footer transitions to multi-column layout

Desktop (1024px and above):

3-column grid solidified; column widths increase with viewport
Full horizontal navigation visible; dropdown menus stable
Section padding at full {spacing.section} to {spacing.band}
Content max-width approaches 1440px
Footer multi-column with all links visible

9. Agent Prompt Guide

Quick Color Reference

Primary CTA / Heading Text / Brand Mark: Black (#000000)
Page Background / On-Dark Text: White (#FFFFFF)
Interactive Feedback (Hover): Dark Gray (#404040) or Deep Red (#CC0000) for links
Form Focus Ring: Dark Gray with opacity (rgba(0, 0, 0, 0.25))
Secondary Interactive: Light Gray (#F2F2F2) for hover backgrounds
Product Accent Colors (Editorial): Golden Yellow, Deep Brown, Deep Red (use in product imagery, not core UI)

Iteration Guide

All interactive elements are sharp-cornered (0px border-radius) except form inputs (2px). Do not round buttons, cards, or links.
Typography is Helvetica-only with two weights: 400 (regular) and 700 (bold). Headings use uppercase with 2.3px letter-spacing; buttons use 1.04px. Body text uses 0px tracking.
Color palette is black and white in the UI layer (#000000 and #FFFFFF). Do not introduce mid-tone grays as primary surfaces; reserve grays for hover states, borders, and disabled states.
Depth comes from contrast and opacity, not shadows. Hover states reduce opacity to 0.8 or shift colors; active states drop to 0.7. No box-shadow on components except focus rings on inputs.
Spacing follows the scale: {spacing.xxs} through {spacing.band}. Use {spacing.md} for navigation, {spacing.section} for section padding, and {spacing.lg} for product grid gaps.
Forms use thin 1px borders (#999999 or #CCCCCC inferred) and 2px border-radius on inputs only. Focus state applies a 3px box-shadow ring in semi-transparent black or white.
Layout is 3-column at desktop, collapsing to 1 column on mobile (375px). Viewport shifts occur at 768px (tablet) and 1024px (desktop).
Navigation sticks to top with z-index: 999; dropdowns use z-index: 10–11; modals use z-index: 1000.
Hover states on buttons: Text or background color shifts (to #404040 or #CC0000), or opacity reduces. No lift or shadow.
Product cards are borderless, with images full-width and text below in 15px bold. Hover reduces card opacity to 0.8 only; no card elevation or outline appears.

10. Known Gaps

Interactive state coverage: The extraction captured hover, active, and focus states for most components, but disabled states, loading states, and error indicators were not observed. Assume standard opacity reduction (0.6 or lower) and color desaturation for disabled elements.
Semantic color ramp: No error, success, warning, or info colors are declared in the site's stylesheets. A single unified palette of black and white dominates; secondary accent colors appear only in product photography, not in UI states.
Gradients and decorative effects: None were detected. If the site uses image overlays or animated mesh effects on hero sections, they exist within image assets, not CSS.
Shadow system: No layered elevation or complex shadow values were found. The site may use box-shadow for focus rings and overlay effects, but a structured shadow scale does not exist.
Dark mode / theme variants: The extraction identified one primary theme (black and white). No evidence of a shipped dark mode or dynamic theme switcher was found; any dark-mode CSS may exist off-site or behind client-side JavaScript.
Animation and transition details: Timing functions, duration, and easing curves were not captured. Interactions like button hover, link underline appearance, or menu open/close animations exist but their animation properties are not documented here.
Micro-interactions: Scroll behaviors, parallax, or other dynamic visual effects were not measured.
Third-party component libraries: The system may use external UI libraries (e.g., Shopify's theme system); CSS from those sources may not have been fully extracted.
Specific button and link variants: While several button and link styles were observed, not all possible combinations of states and sizes may be documented. Assume variants follow the principles outlined in Section 4.
Icon system: No icon sizing, stroke widths, or naming conventions were extracted.
Print or export styles: The documented styles apply to screen media only; print stylesheets and exported assets were not analyzed.

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

Remixes of zodiacjakarta.com

Latest remixes

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

Remix it