Letters
Isang appointment sa umaga sa isang open-air clinic—isang malinis at puting mesa sa ilalim ng malambot na asul na kisame, na puno ng mga asul na instrumento sa pag-opera
Ang Letters ay isang kagamitan sa pagsulat ng liham medikal na nagsisimula sa isang gradient open-sky header—isang malambot at atmospheric na asul na guhit na lumilikha ng isang kalmado at klinikal na kapaligiran—bago lumipat sa isang malinis at puting workspace. Ang sistema ay dinisenyo sa isang monochrome na istilo: isang malinis na puting canvas, halos itim na teksto (#070709), madilim na hugis-pill na mga panawagan para sa aksyon, at mga bilugan na card na lumulutang sa pinakamaliit na anino. Isang matingkad na asul (#2597d0) ang nakalaan para sa mga functional na bantas—mga icon, micrographic, waveform player—na hindi kailanman ginagamit para sa mga butones o malalaking fill. Ang tipograpiya ay gumagamit ng Open Runde, isang geometric humanist sans-serif na may agresibong negative letter spacing sa mas malalaking laki ng screen (-0.04em sa 80px), na pinagsasama-sama ang mga header sa mga kumpiyansang bloke. Ang mga bahagi ay magaan ang pakiramdam, tulad ng isang medikal na instrumento: manipis na bezel, malawak na spacing ng card, mga butones na hugis-pill, at isang maingat na paggamit ng elevation na nagbibigay-daan sa hugis-langit na header na gawin ang emosyonal na gawain.
Isang mala-langit na gradient na homepage ang sumasaklaw sa buong lapad ng pahina, na may nakasentrong pamagat at subtext, at isang call-to-action button sa ibaba. Maayos itong lumilipat sa isang puting content area na may malawak na espasyo sa pagitan ng mga seksyon (80-120px). Ang mga feature section ay gumagamit ng two-column grid ng malalaki at bilugan na mga card (18-32px radius) na may pantay na proporsyon. Ang mga heading ng seksyon ay palaging nakasentro, sa isang column, sa itaas ng card grid. Ang navigation ay isang nakapirming puting top bar na may nakasentrong kumpol ng mga link at mga right-align na login action. Ang pangkalahatang ritmo ay isang iisang at atmospheric na pangunahing guhit, pagkatapos ay naghahalili ng puti at #f5f5f5 na mga seksyon na may pare-parehong patayong espasyo sa paghinga. Walang sidebar, walang mega-menu, walang asymmetrical na layout—ang pahina ay parang isang kalmado at simetrikal na column.
Ang biswal na disenyo ay halos nakatuon sa user interface ng produkto—walang mga larawan ng pamumuhay, walang abstract 3D renders. Ang biswal na wika ay binuo sa paligid ng mga product card na nagpapakita ng katutubong interface ng app: isang paghahambing ng mga dokumento na "Bago" at "Pagkatapos", isang lugar ng paglo-load na may tuldok-tuldok na border, at isang audio player sa anyo ng isang waveform. Ang tanging atmospheric visual element ay ang gradient ng langit sa pangunahing larawan. Ang mga icon ay patag, iisang kulay na #2597d0 line icon (sobre, mikropono, checkmark) na may pare-parehong bigat ng linya, nang walang mga filled variation. Ang istilo ng ilustrasyon ay limitado: ang mga mockup ng produkto ay ipinapakita sa isang puting background, bahagyang iniikot upang lumikha ng lalim, hindi kailanman matalim na ikiling. Ang sulat-kamay na font (The Doctor) ang tanging organic/handcrafted na elemento, na ginagamit lamang upang pukawin ang klinikal na sulat-kamay sa "Bago" na card.
Paleta
Tatak
- Surgical Blue
#2597d0— Ang mga icon, icon ng mikropono, sound wave player, at maliliit na functional accent ay lumilikha ng iisang chromatic note sa buong interface.
Neutral
- Obsidian
#070709— Ang body copy, mga punong call-to-action button, at mga madilim na elemento ng UI—malapit sa itim ang pinili sa halip na purong #000 upang mapahina ang contrast laban sa puting background. - Paper White
#ffffff— Ang background ng pahina, mga ibabaw ng card, at teksto ng button ang pangunahing canvas para sa lahat ng seksyon sa ibaba ng pangunahing elemento. - Cloud Gray
#f5f5f5— Ang mga karagdagang ibabaw ng card at mga background ng seksyon ay naghihiwalay sa mga functional block mula sa pangunahing canvas. - Sky Tint
#d7e6f5— Ang lilim ng karton na frame at ang halos hindi napapansing asul na tono ng ibabaw ay lumilikha ng isang pakiramdam ng kapaligiran, sa halip na kulay abo. - Charcoal
#60606c— Pangunahing teksto, pangalawang teksto, at mga naka-mute na hangganan - isang nangingibabaw na neutral na kulay para sa nilalamang walang heading. - Slate
#8b8b8b— Minor na teksto at mga hindi aktibong estado sa hangganan - ginagamit upang ipahiwatig ang mga lokasyon at matiyak ang aksesibilidad para sa mga taong may kapansanan.
Tipograpiya
mula 12 hanggang 80px · 8 hakbang
- sans-serif — kapalit: Inter · mga balangkas 400, 700 · sans-serif - matatagpuan sa nakuha na datos ngunit hindi inilarawan ng AI.
- Open Runde — kapalit: Inter Tight · mga balangkas 400, 500, 600, 700, 900 · Ang pangunahing font para sa mga heading at nabigasyon ay isang geometric humanist, na may masikip na espasyo sa mga letra sa malalaking sukat; ang -0.04em sa 80px ay nagpi-compress ng heading sa isang solong bloke. Gamitin para sa lahat ng heading, nabigasyon, at malalaking teksto.
- Inter — kapalit: system-ui · mga balangkas 400, 500 · Pangalawang katawan at teksto ng UI – ginagamit para sa maliliit na heading, mga elemento ng nabigasyon, at mga inline na link kung saan ninanais ang mas neutral na ritmo ng pagbasa. Kapareha sa Open Runde upang lumikha ng hierarchical contrast.
Mga pagitan at anyo
| Layunin | Kahulugan |
|---|---|
| Densidad | siksik |
| Pangunahing hakbang | 12-16px |
| Radius ng buton | 100px |
| Radius ng card | 18px |
| Mga anino | walang - mga hangganan sa halip na mga anino |
| Sa pagitan ng mga seksyon | 80-120px |
| Lapad ng pahina | 1200px |
Gagawa ang AI ng website mo sa estilong Letters at pupunuin ito
- Punuin ng mga produkto at post gamit ang link - Instagram, TikTok, Facebook.
- Maglipat ng nilalaman mula sa iyong lumang site—tukuyin lamang ang address.
- Modernong disenyo gamit ang pinakamahusay na engine: React ( Next.js) na may kasamang server rendering at SEO optimization na agad-agad.
- Ganap na awtomatikong pag-optimize ng SEO para sa mga resulta ng paghahanap at mga rekomendasyon sa neural network.
Mga katulad na estilo
- Integrated Biosciences — laboratoryo ng bioluminescence sa hatinggabi
- Mintlify — Isang hardin ng ulap sa ibabaw ng isang mesang salamin. Ang iginuhit na langit at dokumentaryo ay magkakasamang naka-frame—ang tanging lugar kung saan nagtatagpo ang kulay at konsepto bago maglaho ang pahina at maging puting-puti ng monasteryo.
- Gleap — Isang workspace na pinalamutian ng maayang kulay krema na may mga graphite accents—isang studio kung saan tila lumulutang ang mga tuldok ng matte na itim na tinta sa ibabaw ng arkitekturang linen.
- Render — Ang disenyo ay gawa sa brushed aluminum. Ang interface ay parang isang malinis at geometric na dokumento ng inhenyeriya—puting espasyo, manipis na linya, at isang lilang linya na nakakakuha ng atensyon sa aksyon.
- Grafbase — pagguhit ng inhinyeriya sa malamig na marmol
- Slash — Hatinggabing vault na may ginintuang mga ledger
- Modal — Isang phosphorescent terminal sa isang madilim na silid ng server - ang tanging pinagmumulan ng liwanag ay isang matingkad na berdeng kulay
- Whimsical — Matingkad na tinta ng plum sa background na lavender—isang malikhaing studio notebook na nagsisilbing technical board.
- AgentQL — Mga Northern Lights sa ibabaw ng terminal sa gabi
- Alveos One — Isang maginhawang kanlungan na gawa sa mga batong pang-ilog – isang tahimik, may kremang ilaw na silid ng pagmumuni-muni kung saan ang isang bagay na grapayt ay nakapatong sa malambot na liwanag na kulay amber
- GitHub — Isang space command panel na may mga bioluminescent control point—isang madilim at maaliwalas na workspace kung saan ang isang berdeng liwanag ay nagtuturo sa daan pasulong.
- Buddy — Isang drowing sa inhinyeriya sa graph paper. Ang puting ibabaw ng drowing ay minarkahan ng halos hindi nakikitang grid, na inilapat gamit ang halos itim na tinta, na may mga fluorescent lime-green na marka at iridescent gradient strokes.