Remixes of tech-voice.net
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Tech-voice
description: |
TechVoice embodies a neo-brutalist, high-contrast editorial design rooted in
Arabic digital media. The aesthetic favors sharp corners, bold typography, and
deliberate graphic tension. A soft cream canvas (#FDFAF3) contrasts sharply
with jet-black accents and rich earth tones, creating a print-like quality on
screen. The design celebrates functional clarity over decoration: borders cut
hard angles, shadows push elements into distinct spatial planes, and colour
blocks define content hierarchy without ornament. Right-to-left text flows
naturally through a system that treats typography as a primary structural
element. The overall mood is authoritative yet approachable—content-first,
digitally mature, rooted in Middle Eastern editorial tradition.
source:
url: "https://tech-voice.net/"
pagesAnalyzed: 1
extractedAt: 2026-11-05
tokensMeasured: true
colors:
primary: "#000000"
canvas: "#FFFFFF"
surface: "#FDFAF3"
on-primary: "#FFFFFF"
ink: "#0C0805"
body: "#5C6060"
hairline: "#242424"
neutral-1: "#181818"
neutral-2: "#302D2C"
typography:
display-lg:
fontFamily: TechVoiceSite
fontSize: 48px
fontWeight: 800
lineHeight: 1
letterSpacing: 0px
display-lg-apple-color-emoji:
fontFamily: "Apple Color Emoji"
fontSize: 48px
fontWeight: 800
lineHeight: 1
letterSpacing: 0px
display-md:
fontFamily: TechVoiceSite
fontSize: 40px
fontWeight: 800
lineHeight: 1.2
letterSpacing: 0px
display-md-apple-color-emoji:
fontFamily: "Apple Color Emoji"
fontSize: 40px
fontWeight: 800
lineHeight: 1
letterSpacing: 0px
heading-md:
fontFamily: TechVoiceSite
fontSize: 38px
fontWeight: 800
lineHeight: 1.35
letterSpacing: 0px
heading-sm:
fontFamily: TechVoiceSite
fontSize: 14px
fontWeight: 800
lineHeight: 1.5
letterSpacing: 0px
body-xl:
fontFamily: TechVoiceSite
fontSize: 20px
fontWeight: 800
lineHeight: 1.3
letterSpacing: 0px
body-lg:
fontFamily: TechVoiceSite
fontSize: 18px
fontWeight: 400
lineHeight: 1.85
letterSpacing: 0px
body-md:
fontFamily: TechVoiceSite
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-sm:
fontFamily: TechVoiceSite
fontSize: 14px
fontWeight: 700
lineHeight: 1.5
letterSpacing: 0px
body-xs:
fontFamily: TechVoiceSite
fontSize: 13px
fontWeight: 400
lineHeight: 1.38
letterSpacing: 0px
body-xs-2:
fontFamily: TechVoiceSite
fontSize: 12px
fontWeight: 600
lineHeight: 1.33
letterSpacing: 0px
button-lg:
fontFamily: "Apple Color Emoji"
fontSize: 18px
fontWeight: 400
lineHeight: 1.3
letterSpacing: 0px
button-lg-strong:
fontFamily: TechVoiceSite
fontSize: 18px
fontWeight: 700
lineHeight: 1.85
letterSpacing: 0px
button-md:
fontFamily: TechVoiceSite
fontSize: 14px
fontWeight: 700
lineHeight: 1.43
letterSpacing: 0px
button-sm:
fontFamily: TechVoiceSite
fontSize: 13px
fontWeight: 700
lineHeight: 1.5
letterSpacing: 0px
caption-sm:
fontFamily: TechVoiceSite
fontSize: 12px
fontWeight: 700
lineHeight: 1.33
letterSpacing: 0px
caption-xs:
fontFamily: TechVoiceSite
fontSize: 11px
fontWeight: 400
lineHeight: 1.64
letterSpacing: 0px
rounded:
none: 0px
xs: 2px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 28px
xxxl: 32px
section: 36px
band: 48px
borderWidths:
thin: 2px
shadows:
sm: "rgb(24, 24, 24) -6px 6px 0px 0px"
md: "rgb(24, 24, 24) -3px 3px 0px 0px"
lg: "rgb(12, 8, 5) 0px 0px 0px 2px inset, rgb(16, 12, 7) -3px 3px 0px 0px"
elevationStrategy: progressive
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FFFFFF"
surface: "#FDFAF3"
surfaceRaised: "#F3F0E9"
text: "#0C0805"
textMuted: "#5C6060"
border: "#242424"
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"
gradients:
- context: hero
kind: radial
value: "radial-gradient(oklab(0.15758 0.00339037 0.0122368 / 0.14) 1px, rgba(0, 0, 0, 0) 1px)"
components:
button-outline:
typography: "{typography.button-sm}"
textColor: "rgb(16, 12, 7)"
border: "2px solid rgb(16, 12, 7)"
height: 44px
padding: "7px 12px 7px 12px"
backgroundColor: "oklch(0.9 0.05 195)"
button-primary:
typography: "{typography.button-lg-strong}"
textColor: "{colors.on-primary}"
border: "2px solid {colors.canvas}"
height: 57.2969px
padding: "10px 18px 10px 18px"
boxShadow: "{colors.canvas} -4px 4px 0px 0px"
backgroundColor: "{colors.primary}"
button-outline-2:
typography: "{typography.button-md}"
textColor: "rgb(16, 12, 7)"
border: "2px solid rgb(16, 12, 7)"
height: 44px
padding: "10px 18px 10px 18px"
backgroundColor: "oklch(0.9 0.05 195)"
button-filled:
typography: "{typography.body-lg}"
textColor: "{colors.ink}"
height: 44px
padding: "1px 6px 1px 6px"
boxShadow: "{colors.ink} 0px 0px 0px 2px inset, rgb(16, 12, 7) -3px 3px 0px 0px"
rounded: "{rounded.xs}"
backgroundColor: "{colors.surface}"
card:
typography: "{typography.body-lg}"
textColor: "{colors.ink}"
border: "2px solid {colors.hairline}"
boxShadow: "{colors.neutral-1} -6px 6px 0px 0px"
backgroundColor: "{colors.surface}"
card-featured:
typography: "{typography.body-lg}"
textColor: "{colors.on-primary}"
border: "2px solid rgb(16, 12, 7)"
backgroundColor: "{colors.neutral-2}"
card-sm:
typography: "{typography.body-lg}"
textColor: "{colors.ink}"
border: "2px solid {colors.hairline}"
backgroundColor: "color(srgb 0.935451 0.923451 0.896941)"
badge-text:
typography: "{typography.body-lg}"
textColor: "{colors.ink}"
height: 28px
navigation:
textColor: "{colors.ink}"
height: 44px
fontSize: 14px
fontFamily: TechVoiceSite
fontWeight: 400
lineHeight: 1.85
footer:
typography: "{typography.body-lg}"
textColor: "{colors.on-primary}"
border: "2px solid rgb(16, 12, 7)"
backgroundColor: "{colors.primary}"
link:
typography: "{typography.heading-md}"
textColor: "{colors.ink}"
link-2:
typography: "{typography.body-lg}"
textColor: "{colors.on-primary}"
states:
other-focus:
target: other
state: focus
textColor: "rgb(68, 68, 68)"
textDecoration: none
backgroundColor: "rgb(221, 221, 221)"
other-hover:
target: other
state: hover
boxShadow: "rgb(16, 12, 7) -4px 4px 0px"
textDecoration: none
link-hover:
target: link
state: hover
textDecoration: underline
backgroundColor: transparent
link-focus:
target: link
state: focus
textColor: "rgb(68, 68, 68)"
textDecoration: none
backgroundColor: "rgb(238, 238, 238)"
other-focus-visible:
target: other
state: focus-visible
outline: "currentcolor solid 3px"
outlineColor: currentcolor
outlineWidth: 3px
nav-focus-visible:
target: nav
state: focus-visible
outline: "currentcolor solid 2px"
outlineColor: currentcolor
outlineWidth: 2px
input-focus-visible:
target: input
state: focus-visible
outline: none
nav-hover:
target: nav
state: hover
textDecoration: none
card-focus-visible:
target: card
state: focus-visible
outline: "rgb(16, 12, 7) solid 3px"
outlineColor: "rgb(16, 12, 7)"
outlineWidth: 3px
card-hover:
target: card
state: hover
textDecoration: none
link-focus-visible:
target: link
state: focus-visible
outlineColor: "{colors.on-primary}"
button-disabled:
target: button
state: disabled
opacity: 0.4
transform: none
button-hover:
target: button
state: hover
textColor: "rgb(16, 12, 7)"
button-focus-visible:
target: button
state: focus-visible
outline: none
breakpoints:
- width: 375
containerWidth: 360
gridColumns: 5
navLinksVisible: 8
menuToggleVisible: true
headingPx: 28
bodyPx: 17
sectionPaddingX: 16
- width: 768
containerWidth: 753
gridColumns: 3
navLinksVisible: 8
menuToggleVisible: true
headingPx: 48
bodyPx: 18
sectionPaddingX: 24
- width: 1024
containerWidth: 1009
gridColumns: 3
navLinksVisible: 13
menuToggleVisible: true
headingPx: 48
bodyPx: 18
sectionPaddingX: 32
- width: 1280
containerWidth: 1265
gridColumns: 3
navLinksVisible: 13
menuToggleVisible: true
headingPx: 48
bodyPx: 18
sectionPaddingX: 32
- width: 1440
containerWidth: 1425
gridColumns: 3
navLinksVisible: 13
menuToggleVisible: true
headingPx: 48
bodyPx: 18
sectionPaddingX: 105
coverage:
statesFound: 61
gradientsFound: 1
rolesUnassigned: 2
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
TechVoice embodies a neo-brutalist, high-contrast editorial design rooted in Arabic digital media. The aesthetic favors sharp corners, bold typography, and deliberate graphic tension. A soft cream canvas ({colors.surface} — #FDFAF3) contrasts sharply with jet-black accents and rich earth tones, creating a print-like quality on screen. The design celebrates functional clarity over decoration: borders cut hard angles, shadows push elements into distinct spatial planes, and colour blocks define content hierarchy without ornament. Right-to-left text flows naturally through a system that treats typography as a primary structural element. The overall mood is authoritative yet approachable—content-first, digitally mature, rooted in Middle Eastern editorial tradition.
Key Characteristics
{colors.primary} — #000000): Core brand accent; button fills, active states, primary CTAs, hero emphasis, and brand mark. Pure black provides maximum contrast and authority.{colors.canvas} — #FFFFFF): Default page background; also serves as label and text colour on black brand surfaces. High contrast for readability.{colors.surface} — #FDFAF3): Card and panel backgrounds; warm off-white that softens pure white while maintaining brightness and legibility.{colors.ink} — #0C0805): Headings and primary body text; near-black with a hint of warmth for improved readability on cream surfaces.{colors.body} — #5C6060): Secondary text, captions, and reduced-emphasis copy. Mid-tone grey for visual hierarchy.{colors.hairline} — #242424): 1px borders, dividers, and structural lines. Dark enough to read clearly against light surfaces without black's severity.{colors.neutral-1} — #181818): Decorative dark tone; appears in card hover states and secondary surface fills.{colors.neutral-2} — #302D2C): Decorative mid-dark brown; used in featured card backgrounds and depth differentiation.Primary: TechVoiceSite (all display, heading, body, button, and caption roles)
Fallback stack: TechVoiceSite, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
Apple Color Emoji is declared for emoji rendering alongside TechVoiceSite text (display-lg and display-md sizes only).
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display LG | TechVoiceSite | 48px | 800 | 1 | 0px | Maximum impact headlines; tightly set. |
| Display MD | TechVoiceSite | 40px | 800 | 1.2 | 0px | Hero section and major section headers. |
| Heading MD | TechVoiceSite | 38px | 800 | 1.35 | 0px | Article titles and prominent content breaks. |
| Heading SM | TechVoiceSite | 14px | 800 | 1.5 | 0px | Card and section subheadings. |
| Body XL | TechVoiceSite | 20px | 800 | 1.3 | 0px | Emphasis blocks and featured copy. |
| Body LG | TechVoiceSite | 18px | 400 | 1.85 | 0px | Link and CTA text; generous leading for scanability. |
| Body MD | TechVoiceSite | 16px | 400 | 1.5 | 0px | Standard body copy and article text. |
| Body SM | TechVoiceSite | 14px | 700 | 1.5 | 0px | Secondary labels and emphasis. |
| Body XS | TechVoiceSite | 13px | 400 | 1.38 | 0px | Fine print and tertiary copy. |
| Body XS-2 | TechVoiceSite | 12px | 600 | 1.33 | 0px | Tight captions and metadata. |
| Button LG (Strong) | TechVoiceSite | 18px | 700 | 1.85 | 0px | Primary action buttons with heavyweight contrast. |
| Button MD | TechVoiceSite | 14px | 700 | 1.43 | 0px | Standard button text. |
| Button SM | TechVoiceSite | 13px | 700 | 1.5 | 0px | Compact button and tab labels. |
| Button LG (Regular) | TechVoiceSite | 18px | 400 | 1.3 | 0px | Secondary action buttons; lighter weight. |
| Caption SM | TechVoiceSite | 12px | 700 | 1.33 | 0px | Metadata and emphasized captions. |
| Caption XS | TechVoiceSite | 11px | 400 | 1.64 | 0px | Smallest read-aloud labels. |
Primary Button
{colors.primary} (#000000){colors.canvas} (#FFFFFF){typography.button-lg-strong} (18px, 700, 1.85)#FFFFFF{rounded.none} (0px)#FFFFFF -4px 4px 0px 0pxOutline Button
oklch(0.9 0.05 195) (light neutral wash)#100C07 (near-black){typography.button-sm} (13px, 700, 1.5)#100C07{rounded.none} (0px)#100C07 -3px 3px 0px 0pxOutline Button Secondary (outline-2)
oklch(0.9 0.05 195) (light neutral)#100C07{typography.button-md} (14px, 700, 1.43)#100C07{rounded.xs} (2px)#100C07 -3px 3px 0px 0pxFilled Button (Icon / Compact)
{colors.surface} (#FDFAF3)#0C0805 (ink){rounded.xs} (2px)#0C0805 0px 0px 0px 2px inset, #100C07 -3px 3px 0px 0pxCard – Default (Featured Article)
{colors.surface} (#FDFAF3)#0C0805#242424 (hairline){rounded.none} (0px)#181818 -6px 6px 0px 0px (progressive, dark offset)Card – Featured (Dark Variant)
#302D2C (neutral-2, warm dark brown){colors.canvas} (#FFFFFF)#100C07{rounded.none} (0px)Card – Small (default-sm)
color(srgb 0.935451 0.923451 0.896941) (very light warm cream)#0C0805#242424{rounded.none} (0px)Input Field (Focus State)
var(--neo-edge, #100C07) or var(--neo-sun) (context-dependent)var(--neo-edge, #100C07)Navigation – Default
#0C0805 (ink){typography.body-md} (14px, 400, 1.5)inherit or var(--neo-nav-ink, #100C07), optional box-shadow insetNavigation – On Black (Dark Background)
{colors.canvas} (#FFFFFF)Badge – Text
#0C0805{rounded.none} (0px)Footer – Default
{colors.primary} (#000000){colors.canvas} (#FFFFFF)#100C07{rounded.none} (0px){typography.body-lg} (18px, 400, 1.85)Link – Default
#0C0805#100C07, text-decoration underline, optional filter glow or background liftLink – Embedded (White on Dark)
{colors.canvas} (#FFFFFF)Base unit: 4px ({spacing.xxs})
Scale (cumulative from base):
{spacing.xxs} = 4px{spacing.xs} = 8px{spacing.sm} = 12px{spacing.md} = 16px{spacing.lg} = 20px{spacing.xl} = 24px{spacing.xxl} = 28px{spacing.xxxl} = 32px{spacing.section} = 36px{spacing.band} = 48pxUsage context:
{spacing.xs} (8px) – tight button padding, micro-spacing inside dense components{spacing.md} (16px) – standard card padding, internal gutters{spacing.lg} (20px) – block separation, moderate whitespace{spacing.xl} to {spacing.xxl} (24–28px) – headline spacing, component gaps{spacing.band} (48px) – section breaks, major vertical rhythmContent column widths (measured at key breakpoints):
Grid structure: 3-column layout is primary across desktop (1024px+); no grid system shifts occur at breakpoints. Cards and content block sizes scale but column count remains stable.
Container strategy: Full-width sections with symmetric padding applied at viewport edges. Max-content width inferred ~1425px (measured at 1440px).
Whitespace is generous and intentional, serving to isolate content blocks and guide focus. Vertical rhythm favors {spacing.band} (48px) between major sections. Horizontal padding scales with viewport: 16px at mobile (375px), 24px at tablet (768px), 32px+ at desktop (1024px+). No cramped or dense layouts observed; breathing room is a core value. The cream surface and soft shadows reinforce the impression of spatial separation without visual clutter.
{rounded.none} (0px) – Default: buttons, cards, badges, images, navigation, footer, links. Sharp corners are the system standard.{rounded.xs} (2px) – Accent (optional/rare): appears on filled icon buttons and one secondary button variant (outline-2). Subtle softening for compact interactive elements.No pill or circular radii observed across measured components.
Cards, navigation, and most structural elements use 2px borders consistently.
| Level | Treatment | Use |
|---|---|---|
| Flat / No shadow | No box-shadow | Small cards (default-sm), badges, some featured cards. Indicates secondary or contextual content. |
| Micro (MD) | #242424 -3px 3px 0px 0px | Secondary cards and components. Subtle lift, approachable. |
| Standard (SM) | #181818 -6px 6px 0px 0px | Primary featured cards. Clear spatial separation. |
| Pronounced (LG) | #100C07 -5px 5px 0px 0px | Modal and overlay contexts. Strong spatial authority. |
| Compound (XL) | #0C0805 0px 0px 0px 2px inset + #100C07 -3px 3px 0px 0px | Button (filled variant). Inset border plus external shadow for tactile emphasis. |
Shadow Philosophy
Shadows employ a progressive, offset-only strategy: no blur, no spread, pure displacement. The system avoids soft diffusion in favour of hard-edged, directional depth cues that evoke printing and material boards layered atop one another. Shadow colour darkens with elevation level (from #181818 at SM to #0C0805 at XL), anchoring depth perceptually. The consistent -3px to -6px horizontal and vertical offsets create a 45° south-east light direction across all elevations.
{rounded.none}) on all primary components (buttons, cards, inputs). Corners are a defining brand trait.{colors.surface}) backgrounds. Avoid pure white except in CTAs and high-contrast accents.{spacing.band} (48px) for major section breaks and {spacing.md} (16px) for internal card padding.{colors.ink} (#0C0805) for primary readability.| Viewport (px) | Breakpoint Name | Content Width | Grid Columns | Nav Visible Links | Menu Toggle | Heading LG | Body Copy | Section Padding-X |
|---|---|---|---|---|---|---|---|---|
| 375 | Mobile | 360px | 5 | 8 visible | Yes | 28px | 17px | 16px |
| 768 | Tablet | 753px | 3 | 8 visible | Yes | 48px | 18px | 24px |
| 1024 | Desktop | 1009px | 3 | 13 visible | Yes | 48px | 18px | 32px |
| 1280 | Desktop Large | 1265px | 3 | 13 visible | Yes | 48px | 18px | 32px |
| 1440 | Desktop XL | 1425px | 3 | 13 visible | Yes | 48px | 18px | 105px |
Key observations:
Minimum interactive element sizes inferred from measured components:
All measured components exceed 44px (mobile-safe minimum); no sub-40px targets observed.
Mobile (≤375px):
{typography.display-lg} (48px) but line-height tightens to 1.Tablet (768px):
Desktop (1024px+):
All breakpoints maintain the same navigation link count (8 or 13) and preserve component proportions. The design favors horizontal expansion over component hiding or collapsing.
{colors.primary} (#000000) – Pure black for maximum contrast and authority.{colors.surface} (#FDFAF3) – Warm cream, reduces eye strain.{colors.ink} (#0C0805) – Near-black with warmth for legibility.{colors.body} (#5C6060) – Mid-tone grey for visual hierarchy.{colors.hairline} (#242424) – Dark enough to read, softer than black.{colors.canvas} (#FFFFFF) – White for CTAs, critical text on brand surfaces.Corners are always sharp (0px): Every button, card, and interactive element uses {rounded.none}. Never add border-radius unless explicitly overridden (only {rounded.xs} at 2px appears on rare filled buttons).
Shadows use hard offsets: Apply box-shadow with -3px to -6px displacement and no blur. Format: {color} -{offset}px {offset}px 0px 0px. Dark shadow colour escalates with depth (SM: #181818, XL: #0C0805).
Borders are always 2px: All structural borders (cards, buttons, navigation, footer) use 2px solid stroke. No 1px or 3px+ widths exist.
Typography hierarchy lives in weight (800, 700, 400): Use 800-weight for headings, 700 for emphasis, 400 for body. Do not scale sizes to create hierarchy; weight changes are primary.
Spacing follows the scale: Reach for {spacing.md} (16px) for internal padding, {spacing.lg} (20px) for block gaps, {spacing.band} (48px) for section breaks. Never use values outside the defined scale.
Primary buttons are black with white text and white border: 18px, 700-weight, 2px white border, white shadow. Secondary buttons are light cream background with black text and black shadow.
Cards inherit shadow type from role: Featured/primary cards ({colors.surface}) get SM shadow (#181818 -6px 6px 0px 0px); small secondary cards get no shadow. Dark featured cards are shadowless.
Interaction states are limited: Hover adds underline to links, scale(1.05) to cards, and shadow lift to buttons. Focus-visible adds 2–3px outline in ink or accent. Disabled reduces opacity (0.4–0.65). No color shifts on interaction beyond outline and shadow.
Navigation and footer span full width: Do not constrain nav or footer to content column; they extend edge-to-edge with symmetric padding applied.
RTL support is baked in: If deploying with Arabic or Hebrew text, mirror all directional properties (padding, margin, border-right becomes border-left). Shadow offsets remain south-east (negative on both axes).
Semantic status colours (error, success, warning, info): The extraction detected no error, success, warning, or info colour states in the site's stylesheets or applied styles. If a semantic palette is needed, it does not exist in this design system and must be inferred from brand values or added separately.
Two decorative colours with no assigned role: {colors.neutral-1} (#181818) and {colors.neutral-2} (#302D2C) were measured but have no explicit semantic function. They appear in shadows and dark card backgrounds as visual depth; do not treat them as primary UI colours.
Light/dark mode not included: Only one theme was extracted (light, cream-dominant). Any dark-mode variant was not observed on the live site and is not documented here.
Interaction states on some components: Extraction captured focus-visible and hover states from stylesheets, but not all UI surfaces were inspected in real interaction. Undocumented states may exist on inputs, menus, or surfaces behind authentication.
Animation and transition timing: No CSS transitions, animation durations, or easing functions were extracted. The document does not cover motion design, micro-interactions, or state change timing.
Responsive imagery and picture srcset: Breakpoint table documents layout and spacing changes; image resolution, density, or responsive image strategies were not measured.
Form validation and error messaging: Input states capture focus-visible outlines but not validation states (invalid, required, success). Form error colour and messaging style are undocumented.
Accessibility tokens (ARIA, contrast ratios): The system does not measure or document WCAG contrast compliance, screen reader labelling, or ARIA roles. Contrast is implied by the black/white/cream palette but not formally validated.
Single page / surface analysed: Only the homepage (articles feed / hero section) was captured. Surfaces behind authentication, article detail pages, author bios, search results, and admin sections were not visited.