DESIGN.md · Analysis

BlockESG

blockesg.net · 14 Aug 2026 · 47 colors · tassista, Pretendard

BlockESG

BlockESG is a blockchain-powered ESG platform enabling transparent donations, social finance, and impact investing. The design system combines tech-forward minimalism with deep, immersive dark aesthetics—a 'Digital Transparency' movement that transforms complex social impact data into crystalline, navigable interfaces.

Colors

surface#0a0e14

surface-dim#050709

surface-bright#161c26

surface-container-lowest#030507

surface-container-low#0d1117

surface-container#13181f

surface-container-high#1a202b

surface-container-highest#242d3a

on-surface#e8eef5

on-surface-variant#b8c1cc

inverse-surface#f5f5f5

inverse-on-surface#1a1a1a

outline#7a8390

outline-variant#4a5260

surface-tint#13ae75

primary#13ae75

on-primary#ffffff

primary-container#0a594b

on-primary-container#5dd9a8

inverse-primary#0f8f63

secondary#00bcd4

on-secondary#000000

secondary-container#004d5c

on-secondary-container#4dd9e8

tertiary#ff6b9d

on-tertiary#ffffff

tertiary-container#8b3a5c

on-tertiary-container#ffb3d9

error#ff6b6b

on-error#ffffff

error-container#8b2e2e

on-error-container#ffb3b3

primary-fixed#5dd9a8

primary-fixed-dim#13ae75

on-primary-fixed#001f1a

on-primary-fixed-variant#0a594b

secondary-fixed#4dd9e8

secondary-fixed-dim#00bcd4

on-secondary-fixed#001a1f

on-secondary-fixed-variant#004d5c

tertiary-fixed#ffb3d9

tertiary-fixed-dim#ff6b9d

on-tertiary-fixed#3a0a1f

on-tertiary-fixed-variant#8b3a5c

background#0a0e14

on-background#e8eef5

surface-variant#2a3340

Typography

display: fontFamily: tassista · fontSize: 72px · fontWeight: 500 · lineHeight: 80px · letterSpacing: -0.03em
headline-lg: fontFamily: tassista · fontSize: 48px · fontWeight: 500 · lineHeight: 56px · letterSpacing: -0.02em
headline-md: fontFamily: tassista · fontSize: 36px · fontWeight: 500 · lineHeight: 44px · letterSpacing: -0.015em
title-lg: fontFamily: Pretendard · fontSize: 24px · fontWeight: 600 · lineHeight: 32px · letterSpacing: -0.01em
body-lg: fontFamily: Pretendard · fontSize: 18px · fontWeight: 400 · lineHeight: 28px · letterSpacing: 0em
body-md: fontFamily: Pretendard · fontSize: 16px · fontWeight: 400 · lineHeight: 24px · letterSpacing: 0em
label-md: fontFamily: Pretendard · fontSize: 14px · fontWeight: 600 · lineHeight: 20px · letterSpacing: 0.01em
label-sm: fontFamily: Pretendard · fontSize: 12px · fontWeight: 500 · lineHeight: 16px · letterSpacing: 0.02em

Design guidance

Overview

BlockESG represents a 'Digital Transparency' aesthetic—a design movement that merges blockchain's crystalline data structures with immersive dark interfaces. The platform serves impact investors, donors, and social enterprises seeking verifiable ESG outcomes. The UI evokes precision and trust through layered depth, glowing accents (cyan and emerald), and a tech-forward minimalism that never feels cold. Every interaction reveals data; every surface suggests immutable ledgers.

The brand voice is authoritative yet approachable: technical without jargon, optimistic without hype. Tone: measured, evidence-driven, action-oriented. Example: 'Your donation reaches verified recipients in 47 seconds—tracked on-chain, always.' The vocabulary emphasizes transparency, impact, and trust; animations are purposeful, never decorative.

Colors

BlockESG's color system anchors on a deep navy-black foundation (#0a0e14 surface, #050709 surface-dim) that evokes both the digital realm and the night sky—a canvas for data visualization. The primary accent is Emerald Green (#13ae75), used exclusively for CTAs, active states, and trust indicators. This color appears on primary buttons, focus rings (3px rgba(19, 174, 117, 0.12)), and hover states. Secondary accent Cyan (#00bcd4) supports data highlights and secondary interactions. Error states use a muted red (#ff6b6b) with container background #8b2e2e.

Surface stack: surface-container (#13181f) for cards and panels; surface-container-high (#1a202b) for elevated hover states; surface-container-highest (#242d3a) for modals. On-surface text is light (#e8eef5) for readability over dark backg

Typography

The type system pairs tassista (a geometric, tech-forward display font at 500 weight) for headlines and CTAs with Pretendard (a humanist sans-serif at 400–700 weights) for body and UI text. Display (72px, -0.03em letter-spacing) anchors hero sections with commanding presence. Headline-lg (48px, -0.02em) and headline-md (36px, -0.015em) establish section hierarchy. Body-lg (18px, 28px line-height) and body-md (16px, 24px line-height) ensure legibility over dark backgrounds. Label-md (14px, 600 weight, 0.01em tracking) and label-sm (12px, 500 weight, 0.02em tracking) are used for UI labels and badges. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) on small labels over animated or busy backgrounds to maintain contrast during video playback.

Layout

BlockESG uses a fluid 12-column grid with a max-width of 1280px (1416px on ultra-wide displays). The page rhythm relies on lg spacing (40px) for section separation and md spacing (24px) for component padding. Container widths scale responsively: 1160px on desktop, 980px on tablet, 800px on mobile. The hero section spans full viewport with a video background (main.mp4) overlaid with white text (display weight) and emerald accents. Content sections use gutter spacing (24px) for breathing room. Sticky header (100px height, fixed positioning, z-index: 9999) transitions from transparent (dark background) to white background on scroll (background-color: #fff, transition: background 0.3s). Footer uses 90px top padding with 105px bottom padding.

Elevation & Depth

Depth is conveyed through layered shadows and glass effects rather than flat color shifts. Level 1 (Base): dark video background with subtle grain texture. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), background: {colors.surface-container}, border-radius: 1rem. Level 3 (Elevated/Modals): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), background: {colors.surface-container-high}, with optional backdrop-filter: blur(12px). Glass surfaces (used for data overlays) combine rgba(19, 174, 117, 0.08) background, backdrop-filter: blur(12px), and 1px border at rgba(19, 174, 117, 0.15)

Shapes

The design philosophy is 'Architectural Precision'—sharp, intentional corners that suggest digital structures and blockchain blocks. Buttons and inputs use rounded: lg (1rem / 16px) for primary CTAs and rounded: DEFAULT (0.5rem / 8px) for secondary inputs. Cards and modals use rounded: xl (1.5rem / 24px) to soften the tech aesthetic slightly. Badge and pill components use rounded: full (9999px) for maximum softness, creating visual contrast with rigid button shapes. Border-radius: 10px appears frequently in legacy components (custom selects, dropdowns) and is maintained for consistency. The re

Components

Action Elements Primary buttons (button-primary) use {colors.primary} (#13ae75) background, white text, 48px height, 12px 24px padding, and rounded: lg. Hover state brightens to #0f8f63 with box-shadow: 0 6px 16px rgba(19, 174, 117, 0.25) and 200ms transition. Active state darkens to #0a594b with reduced shadow (0 2px 4px rgba(0, 0, 0, 0.2)). Secondary buttons are transparent with 1px emerald border and text color {colors.primary}; hover adds rgba(19, 174, 117, 0.08) background. All buttons use label-md typography (14px, 600 weight).

Containers & Surfaces Cards (card component) use {colors.surface-container} background, rounded: lg, padding: 24px, and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Hover state (card-hover) transitions background to surface-container-high and shadow to

Do's and Don'ts

**Do**

Do use {colors.primary} (#13ae75) exclusively for CTAs, focus states, and trust indicators—never for decorative elements or backgrounds.
Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and 0 8px 24px rgba(0, 0, 0, 0.25) to elevated surfaces to maintain depth hierarchy.
Do pair tassista (display/headlines) with Pretendard (body/UI) to balance tech-forward precision with human readability.
Do use glass surfaces (backdrop-filter: blur(12px), rgba(19, 174, 117, 0.08)) over video backgrounds to suggest transparency and layered data.
Do maintain 40px lg spacing between major sections and 24px md spacing within component groups for consistent rhythm.

**Don't**

Don't use primary color (#13ae75) for body text, backgrounds, or non-interactive elements—reserve it for high-priority actions.
Don't apply shadows smaller than 0 3px 8px rgba(0, 0, 0, 0.15) on dark surfaces; insufficient contrast will flatten the interface.
Don't mix rounded: full (badges) with rounded: lg (buttons) in the same interaction group without clear semantic distinction.
Don't use system fonts or sans-serif fallbacks for display text; always load tassista via Typekit to maintain brand precision.
Don't animate transitions faster than 200ms or slower than 500ms for hover/focus states; maintain snappy, responsive feel without jarring motion.

---
version: alpha
name: BlockESG
description: >-
  BlockESG is a blockchain-powered ESG platform enabling transparent donations, social finance, and impact investing.
  The design system combines tech-forward minimalism with deep, immersive dark aesthetics—a 'Digital Transparency'
  movement that transforms complex social impact data into crystalline, navigable interfaces.
logo:
  src: https://blockesg.net/img/logo.svg
colors:
  surface: '#0a0e14'
  surface-dim: '#050709'
  surface-bright: '#161c26'
  surface-container-lowest: '#030507'
  surface-container-low: '#0d1117'
  surface-container: '#13181f'
  surface-container-high: '#1a202b'
  surface-container-highest: '#242d3a'
  on-surface: '#e8eef5'
  on-surface-variant: '#b8c1cc'
  inverse-surface: '#f5f5f5'
  inverse-on-surface: '#1a1a1a'
  outline: '#7a8390'
  outline-variant: '#4a5260'
  surface-tint: '#13ae75'
  primary: '#13ae75'
  on-primary: '#ffffff'
  primary-container: '#0a594b'
  on-primary-container: '#5dd9a8'
  inverse-primary: '#0f8f63'
  secondary: '#00bcd4'
  on-secondary: '#000000'
  secondary-container: '#004d5c'
  on-secondary-container: '#4dd9e8'
  tertiary: '#ff6b9d'
  on-tertiary: '#ffffff'
  tertiary-container: '#8b3a5c'
  on-tertiary-container: '#ffb3d9'
  error: '#ff6b6b'
  on-error: '#ffffff'
  error-container: '#8b2e2e'
  on-error-container: '#ffb3b3'
  primary-fixed: '#5dd9a8'
  primary-fixed-dim: '#13ae75'
  on-primary-fixed: '#001f1a'
  on-primary-fixed-variant: '#0a594b'
  secondary-fixed: '#4dd9e8'
  secondary-fixed-dim: '#00bcd4'
  on-secondary-fixed: '#001a1f'
  on-secondary-fixed-variant: '#004d5c'
  tertiary-fixed: '#ffb3d9'
  tertiary-fixed-dim: '#ff6b9d'
  on-tertiary-fixed: '#3a0a1f'
  on-tertiary-fixed-variant: '#8b3a5c'
  background: '#0a0e14'
  on-background: '#e8eef5'
  surface-variant: '#2a3340'
typography:
  display:
    fontFamily: tassista
    fontSize: 72px
    fontWeight: '500'
    lineHeight: 80px
    letterSpacing: '-0.03em'
  headline-lg:
    fontFamily: tassista
    fontSize: 48px
    fontWeight: '500'
    lineHeight: 56px
    letterSpacing: '-0.02em'
  headline-md:
    fontFamily: tassista
    fontSize: 36px
    fontWeight: '500'
    lineHeight: 44px
    letterSpacing: '-0.015em'
  title-lg:
    fontFamily: Pretendard
    fontSize: 24px
    fontWeight: '600'
    lineHeight: 32px
    letterSpacing: '-0.01em'
  body-lg:
    fontFamily: Pretendard
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
    letterSpacing: 0em
  body-md:
    fontFamily: Pretendard
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
    letterSpacing: 0em
  label-md:
    fontFamily: Pretendard
    fontSize: 14px
    fontWeight: '600'
    lineHeight: 20px
    letterSpacing: 0.01em
  label-sm:
    fontFamily: Pretendard
    fontSize: 12px
    fontWeight: '500'
    lineHeight: 16px
    letterSpacing: 0.02em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 8px
  xs: 4px
  sm: 12px
  md: 24px
  lg: 40px
  xl: 64px
  gutter: 24px
  container-max: 1280px
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.3)
  md: 0 3px 8px rgba(0, 0, 0, 0.15)
  lg: 0 8px 24px rgba(0, 0, 0, 0.25)
layout:
  containerMaxWidth: 1280px
  gridColumns: 12
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: 12px 24px
    height: 48px
    boxShadow: 0 3px 8px rgba(0, 0, 0, 0.15)
  button-primary-hover:
    backgroundColor: '#0f8f63'
    boxShadow: 0 6px 16px rgba(19, 174, 117, 0.25)
  button-primary-active:
    backgroundColor: '#0a594b'
    boxShadow: 0 2px 4px rgba(0, 0, 0, 0.2)
  button-secondary:
    backgroundColor: transparent
    textColor: '{colors.primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: 12px 24px
    height: 48px
    border: 1px solid {colors.primary}
  button-secondary-hover:
    backgroundColor: rgba(19, 174, 117, 0.08)
  card:
    backgroundColor: '{colors.surface-container}'
    rounded: '{rounded.lg}'
    padding: '{spacing.md}'
    boxShadow: '{elevation.md}'
  card-hover:
    backgroundColor: '{colors.surface-container-high}'
    boxShadow: '{elevation.lg}'
  input-field:
    backgroundColor: '{colors.surface-container-low}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.DEFAULT}'
    padding: 12px 16px
    border: 1px solid {colors.outline-variant}
  input-field-focus:
    borderColor: '{colors.primary}'
    boxShadow: 0 0 0 3px rgba(19, 174, 117, 0.12)
  list-item:
    backgroundColor: transparent
    rounded: '{rounded.md}'
    padding: 12px 16px
  list-item-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.primary}'
  badge:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.primary-fixed}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: 4px 12px
  modal-overlay:
    backgroundColor: rgba(0, 0, 0, 0.6)
    backdropFilter: blur(4px)
  glass-surface:
    backgroundColor: rgba(19, 174, 117, 0.08)
    backdropFilter: blur(12px)
    border: 1px solid rgba(19, 174, 117, 0.15)
    rounded: '{rounded.xl}'
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
Primary buttons (button-primary) use {colors.primary} (#13ae75) background, white text, 48px height, 12px 24px padding, and rounded: lg. Hover state brightens to #0f8f63 with box-shadow: 0 6px 16px rgba(19, 174, 117, 0.25) and 200ms transition. Active state darkens to #0a594b with reduced shadow (0 2px 4px rgba(0, 0, 0, 0.2)). Secondary buttons are transparent with 1px emerald border and text color {colors.primary}; hover adds rgba(19, 174, 117, 0.08) background. All buttons use label-md typography (14px, 600 weight).

### Containers & Surfaces
Cards (card component) use {colors.surface-container} background, rounded: lg, padding: 24px, and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Hover state (card-hover) transitions background to surface-container-high and shadow to

## Do's and Don'ts

**Do**
- Do use {colors.primary} (#13ae75) exclusively for CTAs, focus states, and trust indicators—never for decorative elements or backgrounds.
- Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and 0 8px 24px rgba(0, 0, 0, 0.25) to elevated surfaces to maintain depth hierarchy.
- Do pair tassista (display/headlines) with Pretendard (body/UI) to balance tech-forward precision with human readability.
- Do use glass surfaces (backdrop-filter: blur(12px), rgba(19, 174, 117, 0.08)) over video backgrounds to suggest transparency and layered data.
- Do maintain 40px lg spacing between major sections and 24px md spacing within component groups for consistent rhythm.

**Don't**
- Don't use primary color (#13ae75) for body text, backgrounds, or non-interactive elements—reserve it for high-priority actions.
- Don't apply shadows smaller than 0 3px 8px rgba(0, 0, 0, 0.15) on dark surfaces; insufficient contrast will flatten the interface.
- Don't mix rounded: full (badges) with rounded: lg (buttons) in the same interaction group without clear semantic distinction.
- Don't use system fonts or sans-serif fallbacks for display text; always load tassista via Typekit to maintain brand precision.
- Don't animate transitions faster than 200ms or slower than 500ms for hover/focus states; maintain snappy, responsive feel without jarring motion.

Edit, then copy or download.