Signal Mint
#3fe280Sole chromatic accent — active nav underline, primary CTA fills (Start Earning), and the highlight border on the TVL stat card. Appears sparingly so each instance reads as a live, money-moving action rather than decoration
Sandclock
sandclock.orgWebsite preview
The design language
Sandclock is a DeFi yield terminal dressed in matte black: near-zero chrome, one vivid mint-green signal color, and typography that does all the work. The interface reads like a Bloomberg terminal reimagined for DeFi — dark canvas (#0a0a0a), hairline graphite borders (#222222), flat surfaces with no decorative elevation, and Inter for utility text paired with a custom Aeonik display face for the rare 72px headline. Green (#3fe280) appears as functional punctuation only: active nav underline, primary CTAs, and accent borders on live stat cards. Every other surface stays achromatic so the green reads as a live signal, not decoration. Components feel like a trading dashboard — compact, information-dense in numbers, but breathing with generous section gaps. No gradients, no drop shadows beyond a single subtle button lift, no colorful illustration chrome. Trust is communicated through restraint: the design says 'your money is here' by staying quiet.
Color palette
brand
neutral
Abyss
#0a0a0aPage canvas and primary background — the entire site lives on this near-black surface so the mint accent reads as a live signal against pure darkness
Carbon
#171717Elevated card and panel surface — used for stat cards, security badges, and announcement containers that need to lift off the canvas without introducing color
Graphite
#222222Hairline borders, dividers, and the highest-frequency structural color in the system. Carries 356 borderColor uses — it is the wireframe that defines every container
Ash
#9b9b9bMuted secondary text, helper labels, and de-emphasized nav items. The only non-white text color — reserves #ffffff for content that must be read first
Chalk
#ffffffPrimary text, icons, and the Connect Wallet button fill. Maximum contrast against Abyss (19.8:1) ensures legibility on the darkest possible surface
Typography
Type scale
Minor Third (1.2) · 14px basedisplay
72px · 400 · 1 · -1.8px trackingThe quick brown fox jumps
heading
36px · 400 · 1.11 · 1.8px trackingThe quick brown fox jumps
heading-sm
24px · 400 · 1.33 · 1.2px trackingThe quick brown fox jumps
subheading
20px · 400 · 1.4 · 1px trackingThe quick brown fox jumps
body
16px · 400 · 1.5 · 0.8px trackingThe quick brown fox jumps
caption
14px · 500 · 1.43 · 0.7px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Aeonik
- Weights
- 400
- Sizes
- 72px
- Line height
- 1.00
- Letter spacing
- -0.025em
- Fallback
- Satoshi (Indian Type Foundry) or General Sans
Display headlines (hero). Used exactly once on the page at 72px — custom face with tight tracking makes the financial-app statement feel engineered rather than templated. The 400 weight at this size is the signature choice: other finance sites use 600-800 bold; Sandclock whispers authority instead.
Additional typeface
Inter
- Weights
- 400, 500
- Sizes
- 14px, 16px, 20px, 24px, 36px
- Line height
- 1.11, 1.33, 1.40, 1.43, 1.50
- Letter spacing
- 0.05em
- Fallback
- DM Sans or system-ui
All UI text — body, buttons, nav, card content, subheadings, and section headings. The positive 0.05em tracking on Inter is unusual for body copy and gives labels a slightly technical, instrument-panel quality rather than editorial warmth. Weight 500 is reserved for emphasis (CTA labels, section titles); 400 carries everything else.
Additional typeface
DM Sans
- Weights
- 500
- Sizes
- 16px
- Line height
- 1.20
- Fallback
- Inter
Minimal secondary usage — likely a single element or fallback. Not a primary type voice.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1200px
- Section gap
- 48-64px
- Card padding
- 16px
- Element gap
- 16px
Border radius
cards
12pxpills
9999pxbuttons
16pxheroButton
64pxSpacing scale
1px4px6px8px12px16px20px24px32px40px48px64px73px80px112pxGuidelines
Do
- Use Signal Mint #3fe280 only for: primary CTAs, active nav indicators, and the border on live-data stat cards. Every other surface stays achromatic.
- Set Inter letter-spacing to 0.05em on all text — this technical tracking is what differentiates the type from generic SaaS body copy.
- Use 12px border-radius for all cards and 16px for all buttons. Do not mix in 8px or 4px — the 12/16 split is the geometry signature.
- Use Aeonik 400 at 72px for hero-level display text only. Never use Aeonik for subheadings or body — it is reserved for the single statement moment per page.
- Default to #0a0a0a canvas with #171717 cards and #222222 hairline borders. Communicate layer depth with color shift, not shadow.
- Apply generous 48-64px section gaps. The density reads 'comfortable,' not compact — money products need breathing room.
- Place the Connect Wallet action as a white pill (9999px radius) in the top-right — it is the only inverted-color UI element allowed in nav.
Don’t
- Do not use Signal Mint for body text, icons, or decorative shapes. Green is a signal, not a theme color.
- Do not introduce drop shadows on cards, modals, or panels. Flat surfaces are a deliberate financial-trust convention.
- Do not use gradients. The system is deliberately flat; a gradient would break the terminal aesthetic.
- Do not set Inter letter-spacing to normal or negative. The 0.05em positive tracking is a signature choice.
- Do not use Ash #9b9b9b for anything longer than a short helper label — reserve it for de-emphasized text only.
- Do not apply border-radius below 12px on containers or below 16px on buttons. The system is geometrically opinionated.
- Do not use Aeonik weights above 400. The display face works at 400 because the size (72px) carries the weight; bolding would over-shout.
Components
Primary CTA Button
Filled button for the single most important action on a page (Start Earning, Connect)Background #3fe280 (Signal Mint), text #0a0a0a (Abyss) for inverted contrast. Inter 500 at 16px, letter-spacing 0.05em. Padding 12px 24px. Border-radius 16px. No shadow. Green-on-dark makes the button pop as the only colored element on screen — visual priority is immediate.
Ghost Button
Secondary action paired with a Primary CTA (Buy QUARTZ)Transparent background, 1px border in #222222 (Graphite), text #ffffff. Inter 500 at 16px. Padding 12px 24px. Border-radius 16px. A small icon precedes the label. Reads as a quiet companion to the green CTA — same shape, muted chrome.
Connect Wallet Button
Persistent wallet-connection action in the top-right navWhite fill #ffffff with #0a0a0a text — inverted from the rest of the dark UI. Inter 500 at 16px. Border-radius 9999px (full pill). The white pill in a sea of dark surfaces is the only high-contrast non-CTA on the page; it functions as a global utility, not a content action.
Navigation Link
Top-bar nav items (Home, Earn, Staking, Docs)Inter 400 at 16px, #ffffff text. Active state: 3px solid #3fe280 bottom border — the only place green appears in nav. Inactive links carry no underline. The green underline is a live signal that mirrors the mint CTAs below.
TVL Stat Card
Highlighted live-data card showing protocol metricsBackground #171717 (Carbon), 1px border #3fe280 (Signal Mint) — the green border is the signal. Internal layout: small Ash label (14px, uppercase tracking) above a large white value (36px Inter 500). Padding 16-24px. Border-radius 12px. The green border should be reserved for cards showing live, money-bearing numbers.
Generic Card
Default elevated container for content groupsBackground #171717 (Carbon), 1px border #222222 (Graphite). Border-radius 12px. Padding 16px. No shadow. Hairline border rather than elevation — the system communicates layer depth with color shift, not drop shadow.
Announcement Card
News/partner tiles with image hero and text bodyBackground #171717, border-radius 12px. Top half: full-bleed image or gradient artwork (allowed break from the no-imagery rule — external partnership visuals). Bottom half: small pill badge (Announcement / Security) in Graphite with white text, then heading (20px Inter 500, white) and body (14px Inter 400, Ash). Padding 16px on text block.
Security Badge Tile
Trust-signal cards (Safe data, SOC2 Compliant, Insured by Schwarzs child)Background #171717, border-radius 12px. Centered icon in a small circle at top, single line of white label text below. No border, no shadow. Icon color: #ffffff or accent blue (the SOC2 badge uses a brand-blue circle as the one permissible color exception for third-party certification marks).
Announcement Tag
Small pill badge above announcement card headingsBackground #222222 (Graphite), text #ffffff, Inter 500 at 12px. Padding 4px 12px. Border-radius 9999px (pill). Used to categorize cards (Announcement, Security) — never colored, always neutral.
Partner Logo Strip
Horizontal row of third-party protocol logos (AAVE, LIDO, Compound, Morpho)White logos (#ffffff) on Abyss canvas, evenly distributed across full width. No borders, no separators — just the logos and breathing room. Functions as a trust-by-association strip below the hero.
Feature Icon Block
Small icon-plus-label units used in feature listsWhite or Signal Mint icon (16-20px) paired with white label text (14px Inter 400). 4-8px gap between icon and text. Aligned to a vertical rhythm. No background or border — lives directly on the canvas.
Surfaces & elevation
Level 0
Abyss
#0a0a0aFull-bleed page canvas
Level 1
Carbon
#171717Cards, stat panels, and announcement containers
Level 2
Graphite
#222222Hairline borders and divider lines
Elevation is intentionally suppressed. The system uses a single near-invisible button shadow (rgba(24,39,75,0.08)) and otherwise relies on three surface tones (#0a0a0a → #171717 → #222222 borders) to communicate depth. No card shadows, no modals with lift — flat surfaces are a deliberate trust signal for a financial product where heavy shadow chrome would feel game-like.
Primary CTA Button
rgba(24, 39, 75, 0.08) 0px 2px 3px 0px
Layout & imagery
Layout
Max-width ~1200px centered container on a full-bleed Abyss canvas. Hero follows a two-column split: large 72px Aeonik headline left, supporting copy + dual CTA stack right. Below the hero, a partner logo strip spans full container width with even horizontal distribution. Content sections are single-column, centered headings, with feature/icon blocks in 2-3 column grids. The TVL stat card is full-width with green border emphasis. Announcement cards use a 3-column grid. Vertical rhythm is generous — 48-64px between major sections. Navigation is a minimal top bar with left-aligned logo, center-left nav links, and a right-aligned Connect Wallet pill. No sticky behavior is evident beyond the standard top bar.
Imagery
Imagery is minimal and used only for partnership/announcement content. The site has no product photography, no lifestyle imagery, no illustration chrome — it is a text-and-data UI. The only visual content comes from third-party announcement cards (earth/aurora gradients, certification marks) which are external assets, not system design. The hero and core product surfaces are pure typography on Abyss. Icons throughout are monochrome line icons in white, used sparingly as functional markers. The overall density is text-dominant with data (TVL, stETH Exposure) taking visual priority over decorative imagery.
Design notes
Agent Guide
Quick Color Reference: - canvas: #0a0a0a - card surface: #171717 - border: #222222 - primary text: #ffffff - muted text: #9b9b9b - accent: #3fe280 - primary action: #3fe280 (filled action) Example Component Prompts: 1. Create a Primary Action Button: #3fe280 background, #0a0a0a text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 2. Create a TVL stat card: #171717 background, 1px #3fe280 border, 12px radius, 24px padding. Small uppercase label in #9b9b9b 14px Inter 400 above a large value in #ffffff 36px Inter 500. 3. Create a generic content card: #171717 background, 1px #222222 border, 12px radius, 16px padding. White 20px Inter 500 heading, Ash #9b9b9b 14px Inter 400 body. 4. Create a security badge tile: #171717 background, 12px radius, centered layout. 24px white line icon at top, 14px Inter 400 white label below. No border. 5. Create a nav link with active state: 16px Inter 400 #ffffff text, 3px solid #3fe280 bottom border on active. Inactive links have no underline.
Similar brands
Aave
Same DeFi dark-mode terminal aesthetic with hairline borders, flat surfaces, and a single accent color reserved for live protocol signals
Lido Finance
Identical financial-product restraint — Abyss canvas, white-on-dark typography hierarchy, generous spacing, and zero decorative imagery
Yearn Finance
Same vault-product visual language: compact data cards, green as a money-movement signal, and Inter for utility text
Coinbase Advanced
Similar trading-desk dark UI with monospace-leaning typography and Signal-Mint-style accent for active actions
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
