Qyphera / Design system 01Clarity under
scrutiny.
A quiet interface for consequential decisions. Warm charcoal, readable evidence, and a restrained accent that makes the next action clear.
This is a living design reference. All component examples below are specimens, not security findings, customer activity, or service guarantees.
01 / ColorNeutral by default. Color with a purpose.
Mint identifies primary actions. Cyan marks informational evidence. Amber asks for review; coral calls out risk. Labels always carry the meaning too. An accent color never implies that a wallet is safe.
Raised panel#202929--surface-raised
Secondary text#B2BFB9--muted
Mineral mint#C8F5C5--mint
Evidence cyan#91D4DD--cyan
Review amber#F6C47E--warning
Risk coral#FFAAA5--danger
Control border#697A74--border-control
Quiet divider#354242--line
Input canvas#101716--surface-input
02 / TypographyHuman explanations. Exact evidence.
Geist Sans makes the interface readable. Geist Mono separates addresses, amounts, code and source metadata. Both are self-hosted; visiting this site sends no font requests to a third party.
Display / 44–80 px / Geist Sans 520Autonomy needs boundaries.
Body / 16 px / 1.6 line heightShow what was checked, the evidence behind each result, and what remains unknown.
Evidence / Geist Mono / no ligatures1000000000000000001 wei
0x0000000000000000000000000000000000000001
Type specimen only. Exact amounts never use rounded floating-point displays.
03 / ComponentsEvery state has a clear meaning.
Messages / specimensReview required: one source is unavailable. Coverage is incomplete.
Request denied: the destination is outside the permitted list.
Configuration saved. This confirms the save, not the security of a wallet.
InformationalReviewHigh risk
Finding anatomy / synthetic specimenApproval requires review
- Category
- Token allowance
- Evidence
- Example allowance value exceeds a defined review threshold.
- Source
- Synthetic design specimen — no live blockchain query.
- Confidence
- Not evaluated. This demonstrates placement only.
- Response
- Verify the spender and current allowance before deciding whether an approval is still needed.
04 / Layout & behaviorSpace to read. Structure to act.
| Foundation | Rule |
|---|
| Spacing | 4, 8, 12, 16, 24, 32, 48, 64, 96 px |
| Shape | 6 px controls · 12 px panels · circles reserved for score displays |
| Reading width | 720 px body measure · 1,220 px workspace · 1,440 px marketing maximum |
| Interaction | 48 px primary controls · 44 px navigation targets · visible 2 px focus outline |
| Motion | 140 ms color transitions. No decorative looping motion. Reduced motion respected. |
| Evidence | Wrap long addresses; preserve exact values; show missing data explicitly. |
Typography and color rules improve readability; they do not constitute an accessibility certification. Keyboard and responsive checks remain part of release review.
05 / ResearchDesigned for the work, not the spectacle.
The direction draws on technical clarity in Vercel’s typography, explicit trust information in Linear’s security page, and distinct security product framing in Blockaid’s platform. These are references, not partners or endorsements. No external branding or artwork is used.
Research accessed October 8, 2026. Geist is licensed under SIL Open Font License 1.1. Sans license · Mono license