Егор Котилевский

Generated Oct 22, 2026

DESIGN.md for www.refokus.com

www.refokus.com6 colors5 componentsGeneralsans Variable

Remix

12 screenshots captured· www.refokus.com

1 / 12 · Branding & Web Design for B2B Tech Startups | Refokus · Above the fold

Preview

the generated design system

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

Design tokens

version: alpha
name: Refokus
description: |
  Refokus embodies a bold, forward-thinking digital aesthetic designed for
  ambitious B2B tech startups. The system embraces high contrast and dramatic
  depth, combining a near-black primary canvas with vibrant purple accents to
  create visual tension and energy. The design philosophy prioritizes clarity
  and impact—using generous whitespace, oversized typography, and purposeful
  color blocking to guide attention without relying on subtle gradients or soft
  shadows. The overall mood is modern, confident, and unapologetically
  tech-forward, with an emphasis on clean geometry and intentional motion. The
  brand's visual language avoids ornamentation in favor of structural boldness:
  pill-shaped buttons, sharp or minimal borders, and a restrained but deliberate
  palette that commands presence on screen.
source:
  url: "https://www.refokus.com/"
  pagesAnalyzed: 6
  extractedAt: 2026-10-22
  tokensMeasured: true
colors:
  primary: "#000000"
  link: "#7542FF"
  canvas: "#FFFFFF"
  surface: "#0F1215"
  on-primary: "#FFFFFF"
  ink: "#000000"
  body: "#0F1215"
  muted: "#727A83"
  faint: "#F8F5FF"
typography:
  display-xxl:
    fontFamily: "Generalsans Variable"
    fontSize: 230px
    fontWeight: 400
    lineHeight: 1.07
    letterSpacing: -5.29px
  display-xl:
    fontFamily: Featuredeck
    fontSize: 128px
    fontWeight: 400
    lineHeight: 0.9
    letterSpacing: 0px
  display-lg:
    fontFamily: Featuredeck
    fontSize: 88px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0px
  display-md:
    fontFamily: Featuredeck
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0px
  heading-lg:
    fontFamily: "Generalsans Variable"
    fontSize: 36.8px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px
  heading-lg-featuredeck:
    fontFamily: Featuredeck
    fontSize: 36.8px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px
  heading-md:
    fontFamily: "Generalsans Variable"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.35
    letterSpacing: 0px
  heading-md-strong:
    fontFamily: "Generalsans Variable"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: 0px
  heading-sm:
    fontFamily: "Generalsans Variable"
    fontSize: 20.8px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  heading-xs:
    fontFamily: "Generalsans Variable"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.36px
    textTransform: uppercase
  body-xl:
    fontFamily: "Generalsans Variable"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body-lg:
    fontFamily: "Generalsans Variable"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-md:
    fontFamily: "Generalsans Variable"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0px
  body-md-loose:
    fontFamily: "Generalsans Variable"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px
  body-sm:
    fontFamily: "Generalsans Variable"
    fontSize: 14.08px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body-xs:
    fontFamily: "Generalsans Variable"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  label:
    fontFamily: "Generalsans Variable"
    fontSize: 18.0046px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
rounded:
  none: 0px
  xs: 8px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 36px
  xxxl: 40px
  section: 48px
  band: 64px
borderWidths:
  thin: 1px
elevationStrategy: color-blocking
themes:
  derived: dark   # the other theme is the site's measured palette
  light:
    bg: "#FFFFFF"
    surface: "#0F1215"
    surfaceRaised: "#0E1114"
    text: "#000000"
    textMuted: "#0F1215"
    border: "#E0E0E0"
    accent: "#7542FF"
    accentFg: "#FFFFFF"
    focusRing: "#7542FF"
    elevation: shadow
  dark:
    bg: "#0D0A14"
    surface: "#1C1922"
    surfaceRaised: "#28252E"
    text: "#F9F7FF"
    textMuted: "#9F9DA6"
    border: "#34313A"
    accent: "#936BFF"
    accentFg: "#0B0B0C"
    focusRing: "#7542FF"
    elevation: "border+surface"
  contrastFailures:
    - "light: text on surface = 1.12:1 (needs 4.5:1)"
gradients:
  - context: hero
    kind: mixed
    value: "radial-gradient(circle at 100% 70%, rgb(15, 18, 21) 22%, rgba(0, 0, 0, 0) 67%), radial-gradient(circle at 15% 75%, rgb(15, 18, 21) 23%, rgba(0, 0, 0, 0) 50%), linear-gradient(rgba(0, 0, 0, 0) 20%, rgb(15, 18, 21) 40%)"
components:
  button-primary:
    textColor: "{colors.on-primary}"
    border: "1px solid {colors.canvas}"
    height: 32.4062px
    padding: "8px 16px 8px 16px"
    fontSize: 14px
    fontFamily: "Generalsans Variable"
    fontWeight: 500
    lineHeight: 1.3
    rounded: 320px
    backgroundColor: "rgba(0, 0, 0, 0.3)"
  button-primary-2:
    typography: "{typography.body-md}"
    textColor: "{colors.on-primary}"
    border: "1px solid {colors.canvas}"
    height: 32.4062px
    padding: "8px 16px 8px 16px"
    rounded: 320px
    backgroundColor: "rgba(0, 0, 0, 0.3)"
  button-text:
    typography: "{typography.body-md}"
    height: 40px
    padding: "1px 6px 1px 6px"
  button-filled:
    textColor: "rgb(22, 22, 24)"
    border: "1px solid {colors.surface}"
    height: 32.4062px
    padding: "8px 16px 8px 16px"
    fontSize: 14px
    fontFamily: "Generalsans Variable"
    fontWeight: 500
    lineHeight: 1.3
    rounded: 320px
    backgroundColor: "rgba(255, 255, 255, 0.3)"
  button-filled-2:
    typography: "{typography.body-md}"
    textColor: "{colors.body}"
    border: "1px solid {colors.surface}"
    height: 32.4062px
    padding: "8px 16px 8px 16px"
    rounded: 320px
    backgroundColor: "rgba(255, 255, 255, 0.3)"
  card:
    typography: "{typography.body-md}"
    textColor: "{colors.on-primary}"
  card-featured:
    typography: "{typography.body-md}"
    textColor: "{colors.on-primary}"
    padding: "240px 0px 60px 0px"
    backgroundColor: "{colors.surface}"
  navigation:
    typography: "{typography.body-md}"
    textColor: "{colors.body}"
  footer:
    typography: "{typography.body-md}"
    textColor: "{colors.ink}"
    padding: "36px 0px 0px 0px"
  link:
    typography: "{typography.body-md}"
    textColor: "{colors.on-primary}"
    padding: "24px 20px 24px 20px"
    rounded: "{rounded.xs}"
    backgroundColor: "rgb(70, 40, 154)"
  link-2:
    typography: "{typography.body-md}"
    textColor: "{colors.on-primary}"
    padding: "24px 20px 24px 20px"
    rounded: "{rounded.xs}"
    backgroundColor: "{colors.link}"
states:
  other-focus:
    target: other
    state: focus
    outline: none
  input-focus:
    target: input
    state: focus
    borderColor: "rgb(56, 152, 236)"
  other-hover:
    target: other
    state: hover
    opacity: 1
  button-hover:
    target: button
    state: hover
    backgroundColor: "rgb(226, 226, 228)"
  link-hover:
    target: link
    state: hover
    textColor: "rgb(104, 104, 117)"
    transform: "translate(3px)"
  nav-hover:
    target: nav
    state: hover
    backgroundColor: white
breakpoints:
  - width: 375
    containerWidth: 1920
    gridColumns: 0
    navLinksVisible: 8
    menuToggleVisible: false
    headingPx: 37
    bodyPx: 5
    sectionPaddingX: 0
  - width: 768
    containerWidth: 1920
    gridColumns: 0
    navLinksVisible: 8
    menuToggleVisible: false
    headingPx: 64
    bodyPx: 9
    sectionPaddingX: 0
  - width: 1024
    containerWidth: 1920
    gridColumns: 2
    navLinksVisible: 9
    menuToggleVisible: false
    headingPx: 63
    bodyPx: 11
    sectionPaddingX: 0
  - width: 1280
    containerWidth: 1920
    gridColumns: 2
    navLinksVisible: 9
    menuToggleVisible: false
    headingPx: 78
    bodyPx: 14
    sectionPaddingX: 0
  - width: 1440
    containerWidth: 912
    gridColumns: 3
    navLinksVisible: 9
    menuToggleVisible: false
    headingPx: 88
    bodyPx: 16
    sectionPaddingX: 0
coverage:
  statesFound: 46
  gradientsFound: 1
  rolesUnassigned: 0
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: false

Design System Inspired by Refokus

1. Visual Theme & Atmosphere

Refokus embodies a bold, forward-thinking digital aesthetic designed for ambitious B2B tech startups. The system embraces high contrast and dramatic depth, combining a near-black primary canvas with vibrant purple accents to create visual tension and energy. The design philosophy prioritizes clarity and impact—using generous whitespace, oversized typography, and purposeful color blocking to guide attention without relying on subtle gradients or soft shadows. The overall mood is modern, confident, and unapologetically tech-forward, with an emphasis on clean geometry and intentional motion. The brand's visual language avoids ornamentation in favor of structural boldness: pill-shaped buttons, sharp or minimal borders, and a restrained but deliberate palette that commands presence on screen.

Key Characteristics

High-contrast, dark-first aesthetic with bright purple accent
Large-scale, confident typography with prominent negative tracking
Geometric precision: pill-shaped interactive elements, sharp corner overlays
Color blocking and surface-switching for depth rather than shadows
Minimal borders; when present, subtle and precise (1px hairlines)
Generous spacing and breathing room around content
Motion and transformation as primary interactive language
Refokus purple ({colors.link} — #7542FF) used strategically for links and CTAs
Pure black ({colors.primary} — #000000) as primary ink and brand anchor

2. Color Palette & Roles

Primary

Primary / Brand / Ink ({colors.primary} — #000000): Headings, primary text, brand mark, active states, filled button text on light surfaces

Accent Colors

Link / Brand Accent ({colors.link} — #7542FF): Inline links, interactive highlights, secondary CTAs, decorative accent on hero sections

Neutral Scale

Canvas / On Primary ({colors.canvas} — #FFFFFF): Default page background, overlay surfaces, label text on dark backgrounds, filled button backgrounds
Surface / Body ({colors.surface} — #0F1215): Card and panel backgrounds, dark section backgrounds, body copy containers
Muted ({colors.muted} — #727A83): Secondary text, captions, disabled states, reduced-prominence labels
Faint ({colors.faint} — #F8F5FF): Tertiary / placeholder text, very light backgrounds, hint text in form fields

3. Typography Rules

Font Family

Primary: Generalsans Variable

Fallback stack: 'Generalsans Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
Used for all body, heading, label, and interactive text

Secondary (Display): Featuredeck

Fallback stack: 'Featuredeck', Georgia, serif
Used exclusively for large display/hero headings to create visual distinction

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display XXL	Generalsans Variable	230px	400	1.07	-5.29px	Hero statements; extreme compression
Display XL	Featuredeck	128px	400	0.9	0px	Maximum impact headings
Display LG	Featuredeck	88px	400	1.0	0px	Large section headers
Display MD	Featuredeck	72px	400	1.0	0px	Medium display size
Heading LG	Generalsans Variable	36.8px	400	1.1	0px	Major section titles
Heading MD (Strong)	Generalsans Variable	28px	500	1.35	0px	Strong subsection headers
Heading MD	Generalsans Variable	28px	400	1.35	0px	Standard subsection headers
Heading SM	Generalsans Variable	20.8px	400	1.4	0px	Small headers
Heading XS (Label)	Generalsans Variable	12px	500	1.2	0.36px	Form labels, uppercase captions
Body XL	Generalsans Variable	24px	400	1.4	0px	Large body paragraphs
Body LG	Generalsans Variable	18px	400	1.5	0px	Medium body text
Body MD	Generalsans Variable	16px	400	1.0	0px	Standard body, links
Body MD (Loose)	Generalsans Variable	16px	400	1.1	0px	Relaxed body copy
Body SM	Generalsans Variable	14.08px	400	1.3	0px	Small body, captions
Body XS	Generalsans Variable	14px	400	1.4	0px	Extra-small text
Label	Generalsans Variable	18px	400	1.43	0px	Input labels and form text

Principles

Dramatic Scale: The system uses extreme size jumps (230px → 88px → 36px) to create visual hierarchy and draw focus.
Negative Tracking on Display: Display sizes compress letter-spacing (e.g., Display XXL uses -5.29px) for a bold, connected feel; this is intentional and defines brand voice.
Weight Restraint: The system favors 400 weight (regular) and uses 500 only for labels and strong callouts; bold (700+) is not part of the palette.
Tight Line Heights: Display and heading sizes use 0.9–1.1 line heights for compact, impactful stacking; body copy relaxes to 1.3–1.5 for readability.
Uppercase for Metadata: Small labels and captions use uppercase + 0.36px letter-spacing for distinction and structure.

4. Component Stylings

Buttons

Primary (Ghost on Dark)

Background: rgba(0, 0, 0, 0.3) (semi-transparent black)
Text color: #FFFFFF
Border: 1px solid #FFFFFF
Padding: 8px 16px
Border radius: {rounded.full} (320px / pill-shaped)
Font: {typography.heading-xs} (12px, weight 500)
Line height: 18.2px

Primary Variant 2

Background: rgba(0, 0, 0, 0.3)
Text color: #FFFFFF
Border: 1px solid #FFFFFF
Padding: 8px 16px
Border radius: {rounded.full} (320px)
Font: {typography.body-md} (16px, weight 400)
Line height: 16px
Hover: backgroundColor: rgba(250, 250, 250, 0.1)

Filled (Ghost on Light)

Background: rgba(255, 255, 255, 0.3) (semi-transparent white)
Text color: #161618 (near-black)
Border: 1px solid #0F1215
Padding: 8px 16px
Border radius: {rounded.full} (320px)
Font: {typography.heading-xs} (12px, weight 500)
Line height: 18.2px
Hover: backgroundColor: rgba(255, 255, 255, 0.08), transform: translateX(100%) or other directional transforms

Filled Variant 2

Background: rgba(255, 255, 255, 0.3)
Text color: #0F1215
Border: 1px solid #0F1215
Padding: 8px 16px
Border radius: {rounded.full}
Font: {typography.body-md} (16px, weight 400)
Line height: 16px
Hover: backgroundColor: rgba(255, 255, 255, 0.08), transform: translateY(-100%)

Text (Minimal)

Background: rgba(0, 0, 0, 0) (transparent)
Text color: rgba(0, 0, 0, 0) (hidden; interactive via element bounds)
Border: none
Padding: 1px 6px
Border radius: 0px
Font: {typography.body-md} (16px, weight 400)
Hover: opacity: 1, various transform states

Cards & Containers

Default Card

Background: rgba(0, 0, 0, 0) (transparent)
Text color: #FFFFFF
Border: none
Padding: 0px
Border radius: 0px
Font: {typography.body-md} (16px, weight 400)
Box shadow: none

Featured Card (Dark Section)

Background: {colors.surface} (#0F1215)
Text color: #FFFFFF
Border: none
Padding: 240px 0px 60px 0px
Border radius: 0px
Font: {typography.body-md}
Box shadow: none
Used for hero and full-width dark bands

Large Card

Background: rgba(0, 0, 0, 0) (transparent)
Text color: #FFFFFF
Border: none
Padding: 0px
Border radius: 0px
Font: {typography.body-md}
Box shadow: none

Link Cards / Nested Content

Link Card (Purple Accent)

Background: #7942A7 or #7542FF (brand purple, mixed usage)
Text color: #FFFFFF
Border: none
Padding: 24px 20px
Border radius: {rounded.xs} (8px)
Font: {typography.body-md} (16px, weight 400)
Hover: transform: scale(1.05) or transform: translate(-50%, -50%) rotate(5deg) scale(1.1)

Inputs & Forms

Text Input / Form Field

Background: rgba(0, 0, 0, 0) or transparent
Text color: #FFFFFF or {colors.primary}
Border: 1px solid (hairline, appears as subtle underline in measured examples)
Border color: dark/neutral on light, light/neutral on dark
Padding: varies; label text typically padded {spacing.md} (16px)
Border radius: 0px (sharp; no rounding on form fields)
Font: {typography.label} (18px, weight 400) or {typography.body-md} (16px)
Placeholder: {colors.faint} (#F8F5FF)
Focus: outline 0px, borderColor: #3898EC, no visible outline ring

Dropdown / Select

Uses similar structure to text inputs
Focus: outline 0px

Navigation

Default Navigation

Background: rgba(0, 0, 0, 0) (transparent)
Text color: {colors.primary} (#000000)
Border: none
Padding: 0px
Border radius: 0px
Font: {typography.body-md} (16px, weight 400)
Hover: color: #000000, backgroundColor: #FFFFFF

5. Layout Principles

Spacing System

The Refokus system uses an 8px-based scale with clear contextual progression:

{spacing.xxs} = 4px — micro gaps, inline spacing
{spacing.xs} = 8px — tight component spacing
{spacing.sm} = 12px — small gaps within components
{spacing.md} = 16px — standard padding, button internals
{spacing.lg} = 24px — card padding, moderate section gaps
{spacing.xl} = 32px — generous component spacing
{spacing.xxl} = 36px — header/footer padding
{spacing.xxxl} = 40px — large section padding
{spacing.section} = 48px — medium section dividers
{spacing.band} = 64px — large section/band spacing

Usage Context:

Padding within buttons: {spacing.md} (16px)
Internal card padding: {spacing.lg} (24px)
Section vertical separation: {spacing.section} (48px) to {spacing.band} (64px)
Top padding on featured dark sections: 240px (custom, larger than scale)

Grid & Container

Maximum content width: 1440px (measured at desktop breakpoint)
Full-bleed sections: Many components stretch edge-to-edge (width: 1440px or 100vw) with no horizontal padding, emphasizing color-blocking over containment
Column strategy: At 1440px, the system supports 3-column layouts; at smaller screens, content linearizes to single or double columns
Section patterns: Hero sections, testimonial bands, and form sections use full-width color-blocking with internal padding ({spacing.xxxl} = 40px or custom larger values)

Whitespace Philosophy

The design system prioritizes aggressive negative space and breathing room around major content. Sections are separated by substantial vertical gaps ({spacing.band} = 64px or larger), and full-width color blocks serve as visual dividers. Horizontal padding is often zero (full-bleed), with internal breathing room created through font scale and top/bottom padding rather than side margins. This approach keeps the layout feeling open and scannable while maintaining the dramatic visual impact of color transitions.

Border Radius Scale

{rounded.none} = 0px — images, form fields, most structural elements (sharp geometry)
{rounded.xs} = 8px — overlay cards, link containers, subtle rounding
{rounded.full} = 9999px — all interactive buttons and pill-shaped elements (defining trait of button design)

Border Widths

Thin = 1px — used on button borders (both ghost and filled variants); hairline strokes on form field underlines; creates visual definition without bulk

6. Depth & Elevation

Elevation Strategy

The Refokus system uses color blocking rather than shadow-based depth. Depth is communicated through:

Surface color changes: Dark (#0F1215) sections sit prominently against light (#FFFFFF) backgrounds and vice versa
Opacity layers: Semi-transparent overlays (rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3)) create subtle lift on button backgrounds
Flatness as default: No drop shadows, box-shadows: none throughout the system
Motion for depth: Hover states use transform (scale, translate, rotate) rather than shadow elevation

No measured elevation table applies here because the system declares no multi-level shadow structure. Depth is purely chromatic and kinetic.

Opacity Levels

The system defines discrete opacity states for layering and state management:

100% (1.00) — fully opaque, primary content
99% (0.99) — near-full, imperceptible difference (used in refinement states)
95% (0.95) — slightly translucent, subtle reduction
80% (0.80) — visible but muted, secondary content
20% (0.20) — very faint, background layers, hints
10% (0.10) — barely perceptible, micro-interactions

Typical use: Buttons at rgba(0, 0, 0, 0.3) (30% opacity) create a frosted-glass effect on dark backgrounds; form inputs use opacity shifts on focus/hover.

Z-index / Layering

The system defines discrete stacking contexts for predictable layering:

Base: z-index 1, 2, 5 — default content flow and structural elements
Dropdown: z-index 10, 20, 50 — menus, popovers, local floating elements
Overlay: z-index 60, 99 — modals, top-level overlays, critical attention elements

These values ensure navigation dropdowns sit above base content, modals sit above all dropdowns, and avoid arbitrary high values (1000+).

7. Do's and Don'ts

Do

Use color blocking for depth: Switch surface colors to create visual separation; avoid stacking shadows.
Prioritize pill-shaped buttons: All interactive buttons use border-radius: 9999px for brand consistency.
Employ dramatic typography: Use the full scale from 230px display down to 14px body; don't shy away from size contrast.
Respect negative tracking on large text: Display sizes use negative letter-spacing (-5.29px on Display XXL); this is intentional and part of the brand voice.
Use motion on hover: Transform, translate, scale, and rotate elements on :hover to communicate interactivity without shadow lifts.
Keep borders minimal: Use 1px hairline borders on buttons and form fields only; avoid thick strokes or multiple borders.
Implement full-width color sections: Let dark and light backgrounds extend edge-to-edge to maximize visual impact.
Use semi-transparent overlays sparingly: Ghost buttons with rgba(0, 0, 0, 0.3) and rgba(255, 255, 255, 0.3) are the primary use case.
Apply uppercase labels: Form labels and captions use uppercase + 0.36px letter-spacing for structured metadata.

Don't

Don't use shadow elevation: The system has no box-shadow values for depth; rely on color, opacity, and transform instead.
Don't invent button shapes: Buttons must be pill-shaped (border-radius: 9999px); no rectangular buttons with corners.
Don't mix font families lightly: Generalsans Variable is the system default; reserve Featuredeck only for display-size hero headings (128px+).
Don't add rounding to form fields: Inputs, selects, and text areas use border-radius: 0px (sharp edges).
Don't use faint colors for primary content: {colors.faint} (#F8F5FF) is reserved for placeholder text and tertiary hints.
Don't create custom opacity values: Stick to the defined scale (100%, 99%, 95%, 80%, 20%, 10%).
Don't forget outline removal on focus: Form elements and buttons explicitly set outline: 0px on :focus; use a custom border-color change instead (e.g., #3898EC).
Don't use thick borders: Strokes are 1px only; no 2px or 3px borders.
Don't over-space content: While negative space is valued, avoid padding beyond {spacing.band} (64px) unless a full-width hero or section demands it.
Don't combine multiple transforms: Use one primary transform per hover state (e.g., translateX(100%) or scale(1.05)), not stacked transforms.

8. Responsive Behavior

Breakpoints

Viewport	Max Content Width	Grid Columns	Nav Behavior	Largest Display Heading	Body Text Size	Section Padding-X
375px (Mobile)	1920px	Single column	8 links visible	37px	~5px	0px (full-bleed)
768px (Tablet)	1920px	Single column	8 links visible	64px	~9px	0px (full-bleed)
1024px (Tablet Large)	1920px	2 columns	9 links visible	63px	~11px	0px (full-bleed)
1280px (Desktop Small)	1920px	2 columns	9 links visible	78px	~14px	0px (full-bleed)
1440px+ (Desktop)	912px	3 columns	9 links visible	88px	16px	0px (full-bleed)

Key Observations:

Content max-width appears constant at measured breakpoints (1920px or 1440px) suggesting a viewport-driven design with minimal responsive rewrapping.
Display heading sizes scale progressively (37px → 64px → 88px) as viewport grows.
Body text follows a similar scaling curve for proportional hierarchy.
Navigation remains visible across all breakpoints; no hamburger menu toggle is employed.
Horizontal padding is consistently 0px, indicating full-bleed color sections and internal padding-based breathing room.

Touch Targets

Interactive elements (buttons, links, form fields) measure approximately 32px minimum height and 40px height in measured examples. The pill-shaped buttons with padding: 8px 16px and border-radius: 9999px naturally expand to touch-friendly sizes. Form field vertical padding follows consistent spacing to ensure tappable heights on mobile. Recommend maintaining at least 44px touch target height on mobile-critical interfaces (confirmed minimum from button height measurements: 32.4px, which is at the lower bound; consider 40–48px for safety on small screens).

Collapsing Strategy

Typography scaling: Heading sizes reduce proportionally at smaller breakpoints (Display XL: 88px at 1440px → 37px–64px at 375px–768px). Body text remains readable but compact (14–16px range).
Full-bleed sections remain: Color-blocked sections (dark/light backgrounds) continue edge-to-edge across all breakpoints, maintaining dramatic visual impact.
Layout linearization: Multi-column grids (2–3 columns at 1024px+) collapse to single-column flow on mobile, with components stacking vertically.
Navigation consolidation: All breakpoints measured preserve the full nav link set (8–9 visible); no collapse to hamburger menu observed in data. If mobile redesign adds a menu toggle, ensure it follows pill-button styling (border-radius: 9999px, 1px border, semi-transparent background).

9. Agent Prompt Guide

Quick Color Reference

Primary CTA / Brand Accent: Link Purple ({colors.link} — #7542FF)
Primary Text / Brand Mark: Pure Black ({colors.primary} — #000000)
Page Background: Canvas White ({colors.canvas} — #FFFFFF)
Dark Section / Card: Surface Dark ({colors.surface} — #0F1215)
Secondary Text: Muted Gray ({colors.muted} — #727A83)
Placeholder / Hint Text: Faint Lavender ({colors.faint} — #F8F5FF)

Iteration Guide

All buttons are pill-shaped: border-radius: 9999px; no rectangular buttons.
Ghost buttons on dark backgrounds: Use background: rgba(0, 0, 0, 0.3), color: white, border: 1px solid white.
Filled buttons on light backgrounds: Use background: rgba(255, 255, 255, 0.3), color: #161618, border: 1px solid #0F1215.
No box-shadows anywhere: Depth comes from color blocking, opacity shifts, and motion transforms—never use box-shadow.
Form inputs are sharp: border-radius: 0px on all inputs, selects, textareas.
Display headings use Featuredeck: Only at 128px+ (Display XL); all smaller text uses Generalsans Variable.
Negative tracking on Display XXL: -5.29px letter-spacing on 230px headlines is intentional; preserve it.
Hover states use transform: scale(), translate(), rotate()—avoid shadow shifts or color pops.
Focus states remove outlines: outline: 0px; use border-color or box-shadow: 0 0 0 2px for focus indicators instead.
Full-width sections are common: Let dark (#0F1215) and light (#FFFFFF) backgrounds stretch edge-to-edge; padding is top/bottom, not left/right.

10. Known Gaps

Interaction state completeness: The extraction identified many :hover, :focus, and partial :active CSS values, but not all states were present in captured stylesheets. Specific missing states: explicit :disabled styling for buttons, confirmed :active feedback, and :visited styling for links. Implement following the color-blocking and transform philosophy observed in available states.
Semantic color ramp absent: The site does not expose error, success, warning, or info colors in its declared styles. No semantic status palette exists; if these states are needed, design and document them following the brand's contrast and opacity principles.
Dark mode / theme toggle: The extraction observed only one theme (light and dark sections, but not a global theme toggle). If the site ships a dark/light mode switcher, its specific behavior is not documented here.
Animation/transition timings: Hover states reveal transforms (translate, scale, rotate) but no transition or animation-duration values were extracted. Implement smooth transitions (recommend 200–300ms) using standard easing (ease-in-out).
Accessible focus indicators: The extracted :focus styles set outline: 0px; a custom focus indicator (e.g., box-shadow: 0 0 0 2px white or border highlight) should be added for keyboard navigation accessibility and was not measurable from CSS alone.
Print stylesheet: No print styles were captured; assume defaults or design print-specific reductions if needed.
Surfaces behind authentication: The extraction analyzed only 6 public pages; dashboards, user settings, or gated content behind login may have distinct components or color roles.
Component animation/micro-interactions: Transforms are declared in :hover states, but no scroll animations, scroll-linked effects, intersection observers, or gesture interactions are documented; these may exist on the live site but were not statically extractable.
Container queries / responsive component logic: Responsive breakpoints were derived from viewport resizing, not CSS container queries; if the site uses modern container queries, they are not reflected here.
Icon set / symbol library: No icon styling or SVG symbol data was extracted; the brand uses a minimal mark (Refokus "R" logo) but a full icon inventory is not documented.
Form validation states: Success, error, and warning styling for form fields beyond basic focus (border-color: #3898EC) are not present in extracted data.

Token Reference

colors:
  primary:
    value: '#000000'
    description: Primary brand, ink, headings, active states
  link:
    value: '#7542FF'
    description: Link color, brand accent, secondary CTA
  canvas:
    value: '#FFFFFF'
    description: Default page background, light surfaces
  surface:
    value: '#0F1215'
    description: Dark card and section background
  muted:
    value: '#727A83'
    description: Secondary text, captions
  faint:
    value: '#F8F5FF'
    description: Placeholder text, hints, tertiary
    
typography:
  display-xxl:
    font: Generalsans Variable
    size: 230px
    weight: 400
    lineHeight: 1.07
    letterSpacing: -5.29px
  display-xl:
    font: Featuredeck
    size: 128px
    weight: 400
    lineHeight: 0.9
    letterSpacing: 0px
  display-lg:
    font: Featuredeck
    size: 88px
    weight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  display-md:
    font: Featuredeck
    size: 72px
    weight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  heading-lg:
    font: Generalsans Variable
    size: 36.8px
    weight: 400
    lineHeight: 1.1
    letterSpacing: 0px
  heading-md-strong:
    font: Generalsans Variable
    size: 28px
    weight: 500
    lineHeight: 1.35
    letterSpacing: 0px
  heading-md:
    font: Generalsans Variable
    size: 28px
    weight: 400
    lineHeight: 1.35
    letterSpacing: 0px
  heading-sm:
    font: Generalsans Variable
    size: 20.8px
    weight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  heading-xs:
    font: Generalsans Variable
    size: 12px
    weight: 500
    lineHeight: 1.2
    letterSpacing: 0.36px
    textTransform: uppercase
  body-xl:
    font: Generalsans Variable
    size: 24px
    weight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body-lg:
    font: Generalsans Variable
    size: 18px
    weight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-md:
    font: Generalsans Variable
    size: 16px
    weight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  body-md-loose:
    font: Generalsans Variable
    size: 16px
    weight: 400
    lineHeight: 1.1
    letterSpacing: 0px
  body-sm:
    font: Generalsans Variable
    size: 14.08px
    weight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body-xs:
    font: Generalsans Variable
    size: 14px
    weight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  label:
    font: Generalsans Variable
    size: 18px
    weight: 400
    lineHeight: 1.43
    letterSpacing: 0px

spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 36px
  xxxl: 40px
  section: 48px
  band: 64px

rounded:
  none: 0px
  xs: 8px
  full: 9999px

borders:
  thin: 1px

opacity:
  full: 1.0
  near-full: 0.99
  high: 0.95
  medium: 0.8
  low: 0.2
  minimal: 0.1

zIndex:
  base: 1
  base-raised: 2
  base-float: 5
  dropdown: 10
  dropdown-raised: 20
  dropdown-high: 50
  overlay: 60
  modal: 99

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

Design tokens

Extracted from www.refokus.com

Primary

#000000

Primary CTA, brand accent, active state; Headings / primary text

#7542FF

Inline link colour

Neutral

#FFFFFF

Default page background; label colour on brand surfaces

#0F1215

Card / panel background; Body copy

#727A83

Captions, secondary text

#F8F5FF

Tertiary / placeholder text

Typography · Generalsans Variable

link16px · 400 · 16px

body14.08px · 400 · 18.304px

body16px · 400 · 17.6px

body24px · 400 · 33.6px

body18px · 400 · 27px

heading36.8px · 400 · 40.48px

heading28px · 500 · 37.8px

heading12px · 500 · 14.4px

body14px · 400 · 19.6px

caption12px · 500 · 14.4px

h120.8px · 400 · 29.12px

display230px · 400 · 246.1px

heading28px · 400 · 37.8px

body18px · 600 · 25.2px

body16px · 500 · 20.8px

h318px · 400 · 27px

label12px · 500 · 14.4px

input18.0046px · 400 · 25.7209px

body18px · 600 · 27px

body12.8px · 500 · 20.48px

h136.8px · 400 · 40.48px

h228px · 400 · 37.8px

Typography · Featuredeck

display72px · 400 · 72px

h188px · 400 · 88px

h288px · 400 · 88px

heading36.8px · 400 · 40.48px

hero-display128px · 400 · 115.2px

h388px · 400 · 88px

h1128px · 400 · 115.2px

Spacing

8px

24px

16px

36px

32px

12px

4px

80px

Components · 5

Remixes of www.refokus.com

Latest remixes

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

Remix it