A DesignMD user

Generated Nov 7, 2026

DESIGN.md for ported2browser.org

ported2browser.org16 colors6 componentsDM Sans

Remix

12 screenshots captured· ported2browser.org

1 / 12 · Ported 2 Browser — Discover Games That Run on the Web · Above the fold

Preview

the generated design system

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

Design tokens

version: alpha
name: Ported2browser
description: |
  Ported 2 Browser's design system embraces a playful, nostalgic gaming
  aesthetic rooted in retro arcade and browser culture. The visual identity
  combines bold, high-contrast elements with sharp edges, flat surfaces, and
  vibrant accent colors that evoke classic game interfaces. The design
  prioritizes clarity and accessibility through generous whitespace, strong
  typographic contrast, and intentional use of color blocks rather than
  gradients. Every interactive element has pronounced depth created through
  offset shadows and geometric scale changes—nothing is subtle. The overall mood
  is energetic, inviting, and unapologetically digital, celebrating the heritage
  of web-based gaming while maintaining modern usability.
source:
  url: "https://ported2browser.org/"
  pagesAnalyzed: 6
  extractedAt: 2026-11-07
  tokensMeasured: true
colors:
  primary: "#F8DB52"
  link: "#1E293B"
  canvas: "#F1F0EA"
  surface: "#FFFFFF"
  on-primary: "#0F0F14"
  ink: "#0F0F14"
  body: "#2C2A26"
  muted: "#3C3B35"
  faint: "#53534E"
  hairline: "#D4D2C7"
  accent-1: "#AEBED0"
  accent-2: "#64748B"
  accent-3: "#C2410C"
  accent-4: "#22B8CD"
  accent-5: "#D97757"
  accent-6: "#3186FF"
  neutral-1: "#DBE2ED"
typography:
  display:
    fontFamily: "Archivo Black"
    fontSize: 52px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -1.7px
  heading-xxl:
    fontFamily: "DM Sans"
    fontSize: 27px
    fontWeight: 800
    lineHeight: 1.25
    letterSpacing: -0.7px
  heading-xl:
    fontFamily: "DM Sans"
    fontSize: 19px
    fontWeight: 800
    lineHeight: 1.5
    letterSpacing: -0.5px
  heading-lg:
    fontFamily: "DM Sans"
    fontSize: 16px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0px
  heading-md:
    fontFamily: "DM Sans"
    fontSize: 13px
    fontWeight: 800
    lineHeight: 1.5
    letterSpacing: 0px
  heading-sm:
    fontFamily: "DM Sans"
    fontSize: 12px
    fontWeight: 800
    lineHeight: 1.3
    letterSpacing: 0px
  heading-xs:
    fontFamily: "DM Sans"
    fontSize: 10px
    fontWeight: 800
    lineHeight: 1.4
    letterSpacing: 1.7px
    textTransform: uppercase
  body-xl:
    fontFamily: "DM Sans"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0px
  body-lg:
    fontFamily: "DM Sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-md:
    fontFamily: "DM Sans"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.85
    letterSpacing: 0px
  body-sm:
    fontFamily: "DM Sans"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body-sm-strong:
    fontFamily: "DM Sans"
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  body-xs:
    fontFamily: "DM Sans"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button:
    fontFamily: "DM Sans"
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  label:
    fontFamily: "DM Sans"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  caption-xl:
    fontFamily: "DM Sans"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  caption-lg:
    fontFamily: "DM Sans"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0px
  caption-lg-strong:
    fontFamily: "DM Sans"
    fontSize: 11px
    fontWeight: 800
    lineHeight: 1.5
    letterSpacing: 0px
  caption-md:
    fontFamily: "DM Sans"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  caption-sm:
    fontFamily: "DM Sans"
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  caption-xs:
    fontFamily: "DM Sans"
    fontSize: 8px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  code-sm:
    fontFamily: monospace
    fontSize: 13px
    fontWeight: 400
    letterSpacing: 0px
  code-xs:
    fontFamily: "JetBrains Mono"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
rounded:
  none: 0px
  xs: 3px
  sm: 6px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 28px
  xxxl: 32px
  section: 36px
  band: 40px
borderWidths:
  thin: 1px
  medium: 2px
  thick: 3px
shadows:
  sm: "rgb(15, 15, 20) 2px 2px 0px 0px"
  md: "rgba(15, 23, 42, 0.07) 0px 8px 24px 0px"
  lg: "rgb(15, 15, 20) 4px 4px 0px 0px"
  xl: "rgb(15, 15, 20) 3px 3px 0px 0px"
elevationStrategy: progressive
themes:
  derived: dark   # the other theme is the site's measured palette
  light:
    bg: "#F1F0EA"
    surface: "#FFFFFF"
    surfaceRaised: "#F5F5F6"
    text: "#0F0F14"
    textMuted: "#2C2A26"
    border: "#D4D2C7"
    accent: "#A08506"
    accentFg: "#000000"
    focusRing: "#F8DB52"
    elevation: shadow
  dark:
    bg: "#13110C"
    surface: "#211F1B"
    surfaceRaised: "#2D2B27"
    text: "#FFFEF8"
    textMuted: "#A5A49E"
    border: "#393733"
    accent: "#F8DB52"
    accentFg: "#0B0B0C"
    focusRing: "#F8DB52"
    elevation: "border+surface"
gradients:
  - context: section
    kind: radial
    value: "radial-gradient(rgba(21, 21, 21, 0.106) 0.8px, rgba(0, 0, 0, 0) 0.8px)"
components:
  button-filled:
    typography: "{typography.body-lg}"
    textColor: "{colors.ink}"
    border: "2px solid {colors.on-primary}"
    height: 71.5938px
    padding: "14px 13px 14px 13px"
    boxShadow: "{colors.on-primary} 3px 3px 0px 0px"
    backgroundColor: "{colors.surface}"
  button-primary:
    typography: "{typography.caption-lg-strong}"
    textColor: "{colors.ink}"
    border: "2px solid {colors.on-primary}"
    height: 40px
    padding: "9px 12px 9px 12px"
    boxShadow: "{colors.on-primary} 3px 3px 0px 0px"
    backgroundColor: "{colors.primary}"
  button-filled-sm:
    textColor: "{colors.ink}"
    border: "2px solid {colors.on-primary}"
    height: 40px
    padding: "0px 14px 0px 14px"
    fontSize: 13px
    boxShadow: "{colors.on-primary} 3px 3px 0px 0px"
    fontFamily: "Archivo Variable"
    fontWeight: 800
    lineHeight: 1.5
    backgroundColor: "{colors.surface}"
  button-secondary:
    textColor: "{colors.surface}"
    border: "2px solid {colors.on-primary}"
    height: 46px
    padding: "11px 18px 11px 18px"
    fontSize: 12px
    boxShadow: "{colors.on-primary} 3px 3px 0px 0px"
    fontFamily: "DM Sans"
    fontWeight: 800
    lineHeight: 1.5
    backgroundColor: "{colors.on-primary}"
  button-primary-lg:
    typography: "{typography.body-lg}"
    textColor: "{colors.ink}"
    height: 54px
    padding: "15px 15px 15px 15px"
    backgroundColor: "{colors.primary}"
  card:
    typography: "{typography.body-lg}"
    textColor: "{colors.ink}"
    border: "3px solid {colors.on-primary}"
    boxShadow: "{colors.on-primary} 4px 4px 0px 0px"
    backgroundColor: "{colors.surface}"
  card-sm:
    typography: "{typography.body-lg}"
    textColor: "{colors.ink}"
    border: "3px solid {colors.on-primary}"
    padding: "19px 16px 19px 16px"
    boxShadow: "{colors.on-primary} 4px 4px 0px 0px"
    backgroundColor: "rgb(221, 208, 250)"
  badge-icon:
    typography: "{typography.body-lg}"
    textColor: "{colors.ink}"
    border: "2px solid {colors.on-primary}"
    height: 39px
    backgroundColor: "rgb(234, 223, 249)"
  badge-icon-2:
    typography: "{typography.body-lg}"
    textColor: "{colors.ink}"
    border: "2px solid {colors.on-primary}"
    height: 39px
    backgroundColor: "rgb(248, 230, 171)"
  navigation:
    typography: "{typography.body-lg}"
    textColor: "{colors.ink}"
    height: 39.5px
  footer:
    typography: "{typography.body-lg}"
    textColor: "{colors.ink}"
    padding: "40px 0px 22px 0px"
  link:
    typography: "{typography.body-lg}"
    textColor: "{colors.ink}"
    border: "3px solid {colors.on-primary}"
    padding: "22px 26px 22px 26px"
    boxShadow: "{colors.on-primary} 4px 4px 0px 0px"
    backgroundColor: "{colors.primary}"
  link-sm:
    typography: "{typography.body-lg}"
    textColor: "{colors.ink}"
    border: "3px solid {colors.on-primary}"
    padding: "19px 16px 19px 16px"
    boxShadow: "{colors.on-primary} 4px 4px 0px 0px"
    backgroundColor: "rgb(204, 235, 214)"
states:
  button-disabled:
    target: button
    state: disabled
    opacity: 0.45
  button-focus-visible:
    target: button
    state: focus-visible
    outline: "rgb(108, 66, 211) solid 3px"
    outlineColor: "rgb(108, 66, 211)"
    outlineWidth: 3px
  button-hover:
    target: button
    state: hover
    transform: "translate(-2px, -2px)"
  button-active:
    target: button
    state: active
    transform: "translate(2px, 2px)"
  link-hover:
    target: link
    state: hover
    textDecoration: underline
  card-hover:
    target: card
    state: hover
    transform: "translate(-2px, -2px)"
  card-active:
    target: card
    state: active
    boxShadow: none
    transform: "translate(4px, 4px)"
  card-focus-visible:
    target: card
    state: focus-visible
    outline: "rgb(108, 66, 211) solid 3px"
    outlineColor: "rgb(108, 66, 211)"
    outlineWidth: 3px
  other-hover:
    target: other
    state: hover
    textDecoration: underline
  nav-hover:
    target: nav
    state: hover
    textColor: "{colors.surface}"
    backgroundColor: "rgba(255, 255, 255, 0.063)"
  link-active:
    target: link
    state: active
    boxShadow: none
    transform: "translate(3px, 3px)"
breakpoints:
  - width: 375
    containerWidth: 357
    gridColumns: 3
    navLinksVisible: 74
    menuToggleVisible: true
    headingPx: 24
    bodyPx: 16
    sectionPaddingX: 16
  - width: 768
    containerWidth: 738
    gridColumns: 4
    navLinksVisible: 19
    menuToggleVisible: true
    headingPx: 27
    bodyPx: 16
    sectionPaddingX: 22
  - width: 1024
    containerWidth: 988
    gridColumns: 3
    navLinksVisible: 74
    menuToggleVisible: false
    headingPx: 27
    bodyPx: 16
    sectionPaddingX: 28
  - width: 1280
    containerWidth: 1244
    gridColumns: 4
    navLinksVisible: 77
    menuToggleVisible: false
    headingPx: 27
    bodyPx: 16
    sectionPaddingX: 28
  - width: 1440
    containerWidth: 1404
    gridColumns: 4
    navLinksVisible: 77
    menuToggleVisible: false
    headingPx: 27
    bodyPx: 16
    sectionPaddingX: 28
coverage:
  statesFound: 20
  gradientsFound: 1
  rolesUnassigned: 7
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: false
  semanticRampDeclared: false

Design System Inspired by Ported 2 Browser

1. Visual Theme & Atmosphere

Ported 2 Browser's design system embraces a playful, nostalgic gaming aesthetic rooted in retro arcade and browser culture. The visual identity combines bold, high-contrast elements with sharp edges, flat surfaces, and vibrant accent colors that evoke classic game interfaces. The design prioritizes clarity and accessibility through generous whitespace, strong typographic contrast, and intentional use of color blocks rather than gradients. Every interactive element has pronounced depth created through offset shadows and geometric scale changes—nothing is subtle. The overall mood is energetic, inviting, and unapologetically digital, celebrating the heritage of web-based gaming while maintaining modern usability.

Key Characteristics

Sharp, square corners across all UI elements (0px border-radius on cards, buttons, badges)
High-contrast monochromatic ink ({colors.on-primary} — #0F0F14) for typography and borders
Offset shadow effects ({rounded.none} with 3px or 4px drops) creating tactile depth
Bold, prominent color blocks for cards and collection sections
Warm, beige canvas ({colors.canvas} — #F1F0EA) as default page background
Primary yellow accent ({colors.primary} — #F8DB52) for CTAs, active states, and brand highlights
Decorative rainbow palette for themed content sections (pink, cyan, gold, orange, rust, blue)
Sans-serif typography dominance (DM Sans, Archivo Black, JetBrains Mono) with tight, intentional tracking
Generous padding and spacing creating breathing room within dense layouts
Flat design language with no gradients; color and shadow alone convey hierarchy

2. Color Palette & Roles

Primary

Primary / Brand ({colors.primary} — #F8DB52): Primary call-to-action fill, brand accent, active navigation states, hero band highlights. Warm yellow used for maximum visibility and playful energy.
Link ({colors.link} — #1E293B): Inline link colour for navigation and referenced content.

Interactive

On Primary ({colors.on-primary} — #0F0F14): Text and label colour on brand surfaces; primary heading color and highest-contrast ink.
Body ({colors.body} — #2C2A26): Body copy and standard text content.

Neutral Scale

Canvas ({colors.canvas} — #F1F0EA): Default page background, providing warm off-white base.
Surface ({colors.surface} — #FFFFFF): Card and panel backgrounds, white for maximum contrast against dark text.
Muted ({colors.muted} — #3C3B35): Captions and secondary text, muted brown-gray tone.
Faint ({colors.faint} — #53534E): Tertiary text and placeholder content, lowest contrast in readable range.

Surface & Borders

Hairline ({colors.hairline} — #D4D2C7): 1px borders and dividers, subtle beige-gray stroke.
Neutral-1 ({colors.neutral-1} — #DBE2ED): Neutral accent surface (light blue-gray), used for secondary panels and metadata backgrounds.

Accent Colors (Decorative)

Accent-1 ({colors.accent-1} — #AEBED0): Decorative; pale blue-gray.
Accent-2 ({colors.accent-2} — #64748B): Decorative; slate gray.
Accent-3 ({colors.accent-3} — #C2410C): Decorative; rust orange.
Accent-4 ({colors.accent-4} — #22B8CD): Decorative; bright cyan, used for collection hero sections.
Accent-5 ({colors.accent-5} — #D97757): Decorative; warm terracotta, used for collection hero sections.
Accent-6 ({colors.accent-6} — #3186FF): Decorative; vibrant blue, used for collection hero sections.

3. Typography Rules

Font Family

Primary: DM Sans (body, buttons, navigation, labels, captions)
Display / Headlines: Archivo Black (oversize hero displays)
Code / Technical: JetBrains Mono (code blocks, technical content)
Fallback stacks:
- DM Sans: "DM Sans", "Trebuchet MS", sans-serif
- Archivo Black: "Archivo Black", impact, sans-serif
- JetBrains Mono: "JetBrains Mono", "Courier New", monospace

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display	Archivo Black	52px	400	1.05	−1.7px	Ultra-large hero headings; dramatic negative tracking
Heading XXL	DM Sans	27px	800	1.25	−0.7px	Page titles and major section heads; bold with negative tracking
Heading XL	DM Sans	19px	800	1.5	−0.5px	Section subheadings; strong weight with tight tracking
Heading LG	DM Sans	16px	800	1.2	0px	Card titles and prominent labels
Heading MD	DM Sans	13px	800	1.5	0px	Subsection headers and list titles
Heading SM	DM Sans	12px	800	1.3	0px	Sidebar labels and metadata headers
Heading XS	DM Sans	10px	800	1.4	1.7px	Uppercase labels and tag headers; tracked open
Body XL	DM Sans	17px	400	1	0px	Large body paragraphs
Body LG	DM Sans	16px	400	1.5	0px	Standard body text and larger descriptions
Body MD	DM Sans	14px	400	1.85	0px	Primary body copy; loose line height for readability
Body SM	DM Sans	13px	400	1.65	0px	Secondary body text
Body SM Strong	DM Sans	13px	700	1.5	0px	Emphasized secondary text
Body XS	DM Sans	11px	400	1.5	0px	Small body annotations
Button	DM Sans	11px	700	1.5	0px	Interactive button text; bold weight for prominence
Label	DM Sans	14px	400	1.5	0px	Form labels and input placeholders
Caption XL	DM Sans	12px	400	1.5	0px	Large captions and metadata
Caption LG	DM Sans	11px	400	1.7	0px	Standard captions with open line height
Caption LG Strong	DM Sans	11px	800	1.5	1.8px	Bold captions and tag labels; open tracking
Caption MD	DM Sans	10px	400	1.5	0px	Small captions
Caption SM	DM Sans	9px	400	1.5	0px	Smallest captions and timestamps
Caption XS	DM Sans	8px	400	1.6	0px	Minimal captions
Code XS	JetBrains Mono	12px	600	1.2	0px	Technical code snippets; monospace
Code SM	monospace	13px	400	—	0px	Secondary code blocks

Principles

Display sizes employ negative letter-spacing (−1.7px and −0.5px) to tighten the visual presence and add sophistication.
Open line heights on body (1.85 for Body MD) ensure comfortable reading at standard sizes; captions use tighter spacing (1.5).
Tracked-open uppercase labels (Heading XS, Caption LG Strong) signal hierarchy and scannability in dense layouts.
Weight hierarchy is binary in most roles: 400 regular for neutral content, 700–800 bold for emphasis and interaction.
Monospace code is preserved at 12–13px with elevated weight (600) for legibility in technical contexts.

4. Component Stylings

Buttons

Primary Button

Background: {colors.primary} (#F8DB52)
Text Color: {colors.on-primary} (#0F0F14)
Padding: 9px 12px
Font: {typography.button} (11px, weight 700)
Border: 2px solid {colors.on-primary} (#0F0F14)
Border Radius: {rounded.none} (0px)
Box Shadow: {colors.on-primary} 3px 3px 0px 0px
Width: 132px
Height: 40px
Hover: Box shadow increases to 5px 5px 0 var(--ink), transform translate(-2px, -2px)
Active: Box shadow collapses to 0 0 0 var(--ink), transform translate(2px, 2px)
Focus-Visible: outline: 3px solid rgb(108, 66, 211)
Disabled: opacity: 0.45

Secondary Button

Background: {colors.on-primary} (#0F0F14)
Text Color: #FFFFFF
Padding: 11px 18px
Font: {typography.caption-lg-strong} (12px, weight 800)
Border: 2px solid {colors.on-primary} (#0F0F14)
Border Radius: {rounded.none} (0px)
Box Shadow: {colors.on-primary} 3px 3px 0px 0px
Width: 159px
Height: 46px

Filled Button (Large)

Background: {colors.surface} (#FFFFFF)
Text Color: {colors.on-primary} (#0F0F14)
Padding: 14px 13px
Font: {typography.body-lg} (16px, weight 400)
Border: 2px solid {colors.on-primary} (#0F0F14)
Border Radius: {rounded.none} (0px)
Box Shadow: {colors.on-primary} 3px 3px 0px 0px
Width: 278px
Height: 71.5938px

Filled Button (Small)

Background: {colors.surface} (#FFFFFF)
Text Color: {colors.on-primary} (#0F0F14)
Padding: 0px 14px
Font: {typography.body-sm-strong} (13px, weight 800)
Border: 2px solid {colors.on-primary} (#0F0F14)
Border Radius: {rounded.none} (0px)
Box Shadow: {colors.on-primary} 3px 3px 0px 0px
Width: 122.094px
Height: 40px

Primary Button (Large, No Border)

Background: {colors.primary} (#F8DB52)
Text Color: {colors.on-primary} (#0F0F14)
Padding: 15px 15px
Font: {typography.body-lg} (16px, weight 400)
Border: 0px
Border Radius: {rounded.none} (0px)
Box Shadow: none
Width: 141px
Height: 54px

Cards & Containers

Card (Default)

Background: {colors.surface} (#FFFFFF)
Text Color: {colors.on-primary} (#0F0F14)
Padding: 0px
Border: 3px solid {colors.on-primary} (#0F0F14)
Border Radius: {rounded.none} (0px)
Box Shadow: {colors.on-primary} 4px 4px 0px 0px
Width: 151.984px
Height: 287.922px
Hover: Box shadow increases to 6px 6px 0 var(--ink), transform translate(-2px, -2px)
Active: Box shadow collapses to none, transform translate(4px, 4px)
Focus-Visible: outline: 3px solid rgb(108, 66, 211)

Card (Small)

Background: #DDD8FA (light purple/lavender)
Text Color: {colors.on-primary} (#0F0F14)
Padding: 19px 16px
Border: 3px solid {colors.on-primary} (#0F0F14)
Border Radius: {rounded.none} (0px)
Box Shadow: {colors.on-primary} 4px 4px 0px 0px
Width: 275px
Height: 142px

Collection Hero Card (Themed Variants)

Padding: 19px 16px
Border: 3px solid {colors.on-primary} (#0F0F14)
Border Radius: {rounded.none} (0px)
Box Shadow: {colors.on-primary} 4px 4px 0px 0px
Width: 275px
Height: 142px
Variants use {colors.accent-4} (cyan), {colors.accent-5} (terracotta), or {colors.primary} (yellow) for background

Badges

Icon Badge

Background: #EADBF9 (pale purple)
Text Color: {colors.on-primary} (#0F0F14)
Border: 2px solid {colors.on-primary} (#0F0F14)
Border Radius: {rounded.none} (0px)
Box Shadow: none
Width: 39px
Height: 39px
Padding: 0px
Font: {typography.body-lg} (16px, weight 400)

Icon Badge Variant

Background: #F8E6AB (pale yellow)
Text Color: {colors.on-primary} (#0F0F14)
Border: 2px solid {colors.on-primary} (#0F0F14)
Border Radius: {rounded.none} (0px)
Box Shadow: none
Width: 39px
Height: 39px
Padding: 0px

Inputs & Forms

Form Label

Font: {typography.label} (14px, weight 400)
Color: {colors.body} (#2C2A26)
Line Height: 1.5

Navigation

Navigation Link (Default)

Background: rgba(0, 0, 0, 0) (transparent)
Text Color: {colors.on-primary} (#0F0F14)
Font: {typography.body-lg} (16px, weight 400)
Border: 0px
Border Radius: {rounded.none} (0px)
Box Shadow: none
Padding: 0px
Width: 206px
Height: 39.5px
Hover: color: rgb(255, 255, 255), backgroundColor: rgba(255, 255, 255, 0.063)

Link with Box Shadow

Background: {colors.primary} (#F8DB52)
Text Color: {colors.on-primary} (#0F0F14)
Padding: 22px 26px
Border: 3px solid {colors.on-primary} (#0F0F14)
Border Radius: {rounded.none} (0px)
Box Shadow: {colors.on-primary} 4px 4px 0px 0px
Font: {typography.body-lg} (16px, weight 400)
Hover: textDecoration: underline, box shadow 5px 5px 0 var(--ink), transform translate(-2px, -2px)
Active: Box shadow collapses to none, transform translate(3px, 3px)
Focus-Visible: outline: 2px solid var(--ink)

Link (Inline, No Box)

Text Color: {colors.link} (#1E293B)
Hover: textDecoration: underline, color: var(--ink), or box shadow and transform applied
Background on Hover: rgb(248, 250, 252) (very light blue)

Footer

Footer Container

Background: rgba(0, 0, 0, 0) (transparent)
Text Color: {colors.on-primary} (#0F0F14)
Font: {typography.body-lg} (16px, weight 400)
Padding: 40px 0px 22px 0px
Border: 0px
Width: 1160px
Height: 592.047px

5. Layout Principles

Spacing System

Base unit: {spacing.xs} = 8px. All spacing values scale predictably:

{spacing.xxs} = 4px — Minimal gaps between inline elements
{spacing.xs} = 8px — Small internal padding, tight grouping
{spacing.sm} = 12px — Standard padding within components
{spacing.md} = 16px — Medium spacing between sections
{spacing.lg} = 20px — Large gaps for visual breathing
{spacing.xl} = 24px — Prominent spacing between major sections
{spacing.xxl} = 28px — Extra-large spacing for visual hierarchy
{spacing.xxxl} = 32px — Generous spacing between page sections
{spacing.section} = 36px — Section header to content separation
{spacing.band} = 40px — Large horizontal section padding

Usage Context:

Card internal padding: {spacing.md} (16px)
Button internal padding: {spacing.xs} to {spacing.sm} (8–12px)
Hero section padding: {spacing.band} (40px)
Body paragraph margins: {spacing.md} (16px) bottom

Grid & Container

Max content width: 1160px (measured at 1440px viewport)
Content column width at desktop: 1244px (includes side margins)
Grid columns (adaptive):
- 375px (mobile): 3 columns
- 768px (tablet): 4 columns
- 1024px (desktop): 3 columns
- 1280px+ (large desktop): 4 columns
Section padding (horizontal):
- 375px: 16px
- 768px: 22px
- 1024px+: 28px
Strategy: Fluid width with fixed side gutters; grid columns adapt to viewport but remain consistent within viewport ranges.

Whitespace Philosophy

Whitespace is used deliberately to create rhythm and focus. Large cards and hero sections are surrounded by generous margins ({spacing.band}, 40px), while internal component spacing is tight ({spacing.sm}, 12px). The off-white canvas background ({colors.canvas} — #F1F0EA) provides natural breathing room without requiring additional margin. Dark ink text on light backgrounds ensures contrast even in sparse layouts. Vertical rhythm is maintained through consistent heading-to-body spacing ratios.

Border Radius Scale

{rounded.none} = 0px — Primary system radius; all buttons, cards, badges, and major components
{rounded.xs} = 3px — Minimal rounding, rarely used; very subtle softening
{rounded.sm} = 6px — Secondary radius, used on specific component corners

Component-specific radius:

Buttons: {rounded.none} (0px, sharp corners)
Cards: {rounded.none} (0px, sharp corners)
Badges: {rounded.none} (0px, sharp corners)
Form inputs: Measured at 6px (secondary radius)

Border Widths

Thin (1px): Applied to navigation, subtle dividers
Medium (2px): Button borders, badge borders, form element strokes
Thick (3px): Card borders, major container outlines, primary visual hierarchy

Component usage:

Buttons: 2px border
Cards: 3px border
Badges: 2px border
Navigation: 0px (no border, transparent background)
Links with boxes: 3px border

6. Depth & Elevation

Level	Treatment	Use
Base / Flat	`box-shadow: none`	Default surfaces, text, backgrounds
Dropdown (Small)	`rgb(15, 15, 20) 2px 2px 0px 0px`	Subtle menu panels, secondary overlays
Dropdown (Medium)	`rgba(15, 23, 42, 0.07) 0px 8px 24px 0px`	Navigation popovers, sticky elements
Card / Interactive	`rgb(15, 15, 20) 4px 4px 0px 0px`	Default card depth, primary containers
Button / Pressed	`rgb(15, 15, 20) 3px 3px 0px 0px`	Interactive buttons, emphasis

Shadow Philosophy: Depth is achieved through hard offset shadows, not soft blurs. Every shadow uses the ink color ({colors.on-primary} — #0F0F14) at full opacity, creating a bold, printed aesthetic reminiscent of vintage screens. Shadows never fade; they are crisp offsets that make elements appear lifted. On hover, shadows grow from 3px or 4px to 5px or 6px, with simultaneous upward transform (translate(-2px, -2px)), creating a tactile press-and-lift interaction. On active press, shadows collapse to near-zero, and the element moves down (translate(2px, 2px)), simulating a button being held down.

Opacity Levels

100% (1.0): Standard, all interactive and surface elements
60% (0.60): Disabled button state; opacity: 0.45 on disabled buttons (slightly more aggressive than 60%)

Z-index / Layering

Base: z-index: 1 — Standard page elements, cards
Base+: z-index: 2 — Slightly elevated surfaces
Dropdown: z-index: 55, 60 — Menu panels, popovers
Dropdown (High): z-index: 90, 99 — Modal backdrops, high-level overlays
Sticky: z-index: 100 — Sticky headers, persistent navigation

7. Do's and Don'ts

Do

Use {colors.primary} (#F8DB52) for all primary CTAs — buttons, active states, and brand highlights. It is the system's visual anchor.
Apply 3px or 4px hard offset shadows to cards and buttons, always in {colors.on-primary} (#0F0F14). Never use soft blurs.
Stack spacing in {spacing.md} (16px) increments for margins, padding, and gaps. Respect the 8px baseline.
Bold uppercase labels (using {typography.heading-xs}) for section headers and tag indicators; apply 1.7px letter spacing for openness.
Use {rounded.none} (0px) for all interactive elements. Sharp corners are the system's identity.
Maintain high contrast: dark {colors.on-primary} on light {colors.surface} or {colors.primary}; light text only on dark backgrounds.
Hover states must include both shadow growth and upward transform — shadow +2px in each direction, transform: translate(-2px, -2px).
Apply {colors.canvas} (#F1F0EA) as the default page background for consistency and warmth.
Use decorative accent colors ({colors.accent-4} cyan, {colors.accent-5} terracotta) only for thematic collection hero cards, not for status or interaction.
Limit button padding to {spacing.xs} to {spacing.md} (8–16px); oversized padding diminishes visual punch.

Don't

Don't use soft shadows or blurs. All shadows must be hard, offset, and in {colors.on-primary}.
Don't apply border-radius to buttons, cards, or badges. The system is strictly sharp-cornered (0px).
Don't invent new colors. Stick to the primary (#F8DB52), neutrals, and decorative accent roles. No custom gradient fills.
Don't use light text on light backgrounds. Contrast must always meet WCAG AA or better.
Don't center-align large bodies of text. Center only headings and short labels.
Don't nest shadows. Use exactly one shadow per element; layering multiple shadows weakens the aesthetic.
Don't apply opacity to colors to create new roles. Use the provided palette; opacity is reserved for disabled states.
Don't exceed 1.85 line-height on body text — the system is designed for tight, scannable paragraphs.
Don't forget hover transforms. Motion (translate + shadow growth) is integral to interactivity; a static hover state feels broken.
Don't exceed 3 levels of visual hierarchy. Use heading sizes, weight, and color; avoid excessive sizing or shadow stacking.

8. Responsive Behavior

Breakpoints

Viewport	Content Width	Grid Columns	Nav Links Visible	Menu Toggle	Largest Heading	Body Font	Section Padding X
375px (Mobile)	357px	3	74	Yes	24px	16px	16px
768px (Tablet)	738px	4	19	Yes	27px	16px	22px
1024px (Desktop)	988px	3	74	No	27px	16px	28px
1280px (Large)	1244px	4	77	No	27px	16px	28px
1440px (XL)	1404px	4	77	No	27px	16px	28px

Key Changes Across Breakpoints:

Mobile (375px): Single-column or 3-column grid; menu toggle present; all padding reduced to {spacing.md} (16px).
Tablet (768px): 4-column grid introduced; navigation collapses to menu toggle; section padding increases to 22px.
Desktop (1024px+): Grid reverts to 3 columns; menu toggle hidden; navigation expanded; padding stabilizes at 28px.
Heading sizes remain stable at 27px from tablet onward; only mobile displays 24px.
Body font size fixed at 16px across all breakpoints (measured as 14px secondary, 16px primary).

Touch Targets

Minimum touch target size: 40px × 40px (measured on primary buttons and interactive elements).
Button height on mobile: 40–54px.
Icon badges: 39px × 39px (meets minimum).
Navigation links: 39.5px height minimum; clickable area padded to at least 44px.
Spacing between touch targets: At least {spacing.md} (16px) to prevent mis-taps.

Collapsing Strategy

Cards collapse vertically from 2–4 column layouts to single column on mobile; width adapts to viewport minus gutters.
Navigation transforms to hamburger menu when viewport falls below 768px; menu toggle appears, inline nav links hidden.
Hero heading scales down from 27px to 24px on mobile ({typography.heading-xxl} at 27px, small form at 24px).
Padding reduces uniformly: {spacing.md} (16px) on mobile, {spacing.section} (36px) or {spacing.band} (40px) on desktop.
Multi-column grids collapse to 3 columns on tablet, revert to mobile single/3-column on small screens.
Button widths remain fixed (132px, 159px, etc.) on desktop; on mobile, buttons expand to fill container minus gutters or remain at minimum 100px.
Sticky elements (z-index 100) remain top-fixed across all breakpoints, but nav link visibility toggles based on breakpoint.

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Brand Yellow ({colors.primary} — #F8DB52) — use for all primary call-to-action buttons and active states
Text / Ink: On-Primary Black ({colors.on-primary} — #0F0F14) — headings, body text, labels, borders
Background: Canvas Beige ({colors.canvas} — #F1F0EA) — default page background
Card/Surface: Surface White ({colors.surface} — #FFFFFF) — card and panel backgrounds
Body Copy: Body Brown ({colors.body} — #2C2A26) — standard paragraph text
Secondary Text: Muted Brown ({colors.muted} — #3C3B35) — captions and metadata
Borders/Dividers: Hairline Beige ({colors.hairline} — #D4D2C7) — thin strokes and lines
Link: Link Navy ({colors.link} — #1E293B) — inline hyperlinks
Decorative Accents: Cyan (#22B8CD), Terracotta (#D97757), Blue (#3186FF) — collection hero backgrounds only

Iteration Guide

All corners are sharp (0px border-radius) — buttons, cards, badges, inputs. No rounding anywhere except measured 6px on form inputs (secondary).
Hard shadows always in ink color — never soft blurs. Card shadows: 4px 4px, button shadows: 3px 3px. Grow on hover by 2px in each direction.
Hover includes upward motion — box-shadow grows and transform: translate(-2px, -2px). Active press moves down: translate(2px, 2px).
Padding scale: 8px, 12px, 16px, 20px, 24px — no arbitrary values. Buttons get 9–15px, cards get 16–19px padding.
Typography is DM Sans by default — use Archivo Black only for ultra-large display (52px). Tracking is negative on display sizes (−1.7px, −0.7px, −0.5px).
Primary CTA is always yellow (#F8DB52) with dark text; secondary CTA is dark (#0F0F14) with white text. No other color swap.
Grid is 3 or 4 columns depending on viewport; mobile is single column or tight 3-column. Section padding is 16px (mobile), 28px (desktop).
Disabled state is opacity: 0.45 — slightly reduced opacity, no color change.
Decorative accent colors are for collection hero cards only — cyan, terracotta, blue. Never use for warnings, errors, or info.
Link hover states underline + optional box shadow and transform (same press/lift pattern as buttons). Focus-visible is always a 3px solid outline in rgb(108, 66, 211) (purple).

10. Known Gaps

No semantic status colors: The site does not declare error, success, warning, or info states in its CSS or markup. Do not invent an error/success ramp; the design system does not expose one.
7 decorative accent colors lack assigned roles: {colors.accent-1} through {colors.accent-6} have no measured semantic function. They appear in collection hero backgrounds but are not labeled or constrained to specific use cases.
No interaction states for disabled, focus, or loading: Only button, link, card, and navigation :hover, :active, and :focus-visible states are documented. Other pseudo-classes (e.g., :invalid, :required) were not observed in the extraction.
No dark-mode or theme variants: Only one theme was measured. The design system does not expose a published dark mode.
Form validation and error states not measured: Input focus, error, and success styles were not extracted. Assume {rounded.sm} (6px) is the input radius, but border and shadow details under error conditions are unknown.
Animation / transition timings not specified: The extraction captured motion (transform + shadow on hover) but not easing functions, durations, or delay values. Implement standard 0.2s ease-out transitions as reasonable defaults.
No responsive typography sizing rules: Heading sizes shift only slightly (27px → 24px) from tablet to mobile; exact breakpoint triggers and intermediate sizes are not fully specified.
Breakpoint-specific component variants not exhaustive: Buttons, cards, and badges may adapt further on very small screens, but only primary and small variants were measured.
No print or high-contrast mode specifications: The extraction is screen-only.
Authentication-gated surfaces not visited: The Guides section and potentially other protected areas were not captured, so their design may diverge from this system.

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

Design tokens

Extracted from ported2browser.org

Primary

#F8DB52

Primary CTA, brand accent, active state

#1E293B

Inline link colour

#AEBED0

Accent / decorative

#64748B

Accent / decorative

#C2410C

Accent / decorative

#22B8CD

Accent / decorative

#D97757

Accent / decorative

#3186FF

Accent / decorative

Neutral

#F1F0EA

Default page background

#FFFFFF

Card / panel background

#0F0F14

Headings / primary text; label colour on brand surfaces

#2C2A26

Body copy

#3C3B35

Captions, secondary text

#53534E

Tertiary / placeholder text

#D4D2C7

1px borders and dividers

#DBE2ED

Neutral

Typography · DM Sans

caption10px · 400 · 15px

body14px · 400 · 25.9px

body13px · 400 · 21.45px

caption11px · 800 · 16.5px

caption11px · 400 · 18.7px

caption8px · 400 · 12.8px

heading10px · 800 · 14px

body16px · 400 · 24px

body13px · 700 · 19.5px

caption9px · 400 · 13.5px

link11px · 400 · 16.5px

button11px · 700 · 16.5px

input14px · 400 · 21px

caption12px · 400 · 18px

caption12px · 800 · 18px

caption11px · 800 · 16.5px

caption8px · 800 · 12px

heading13px · 800 · 19.5px

h313px · 800 · 19.5px

body17px · 400 · 17px

caption9px · 700 · 13.5px

caption8px · 800

h127px · 800 · 33.75px

heading19px · 800 · 28.5px

heading12px · 800 · 15.6px

caption9px · 800 · 13.5px

heading16px · 800 · 19.2px

body12px · 400 · 20.4px

heading23px · 800 · 34.5px

body11px · 400 · 18.7px

link12px · 400 · 18px

button12px · 800 · 18px

caption8px · 700 · 12px

caption11px · 700 · 16.5px

caption8px · 700 · 12px

Typography · Archivo Black

h152px · 400 · 54.6px

body17px · 400 · 14.96px

body15px · 400 · 13.2px

heading24px · 400

h224px · 400

h325px · 400 · 28.75px

h226px · 400 · 28.6px

Typography · JetBrains Mono

code12px · 600 · 14.4px

Typography · monospace

code13px · 400

Typography · Archivo Variable

h224px · 900 · 24px

list-item11px · 700 · 11px

body15px · 800 · 17.25px

body13px · 800 · 19.5px

caption12px · 800 · 12px

h315px · 800 · 17.25px

Spacing

12px

8px

4px

20px

28px

16px

24px

32px

Elevation

rgb(15, 15, 20) 2px 2px 0px 0px

rgba(15, 23, 42, 0.07) 0px 8px 24px 0px

rgb(15, 15, 20) 4px 4px 0px 0px

rgb(15, 15, 20) 3px 3px 0px 0px

Components · 6

Remixes of ported2browser.org

Latest remixes

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

Remix it