Figma
monochrome chassis para sa chromatic chaos
Ang interface ay gumagana bilang isang mahigpit at mataas na contrast na istruktural na lalagyan, na nagbibigay ng kumpletong visual na pangingibabaw sa nilalamang binuo ng gumagamit. Ang baseline ay isang mahigpit na #000000 hanggang #ffffff palette, na umiiwas sa mga banayad na lilim ng kulay abo pabor sa ganap na maximum na contrast para sa mga pangunahing border at teksto. Ang typographic hierarchy ay halos ganap na nakabatay sa laki at agresibong negatibong espasyo ng mga letra sa halip na mga pagkakaiba-iba ng kulay, na nagbabago sa malalaking linya ng teksto tungo sa mga siksik na graphic block. Ang lohika ng border radius ay lumilikha ng isang malinaw na dichotomy: ang 50px na panlabas na "mga kuko" para sa mga pandaigdigang elemento ng nabigasyon ay sadyang nagko-contrast sa malinaw na 0px na sulok ng mga lalagyan ng nilalaman.
Ang mga komposisyon ay batay sa mga hangganan na may pinakamataas na lapad (1440px max) na nakasentro sa viewport at kinabibilangan ng mga siksik na kumpol ng nilalaman na pinaghihiwalay ng malawak na macro-space (96-120px ng whitespace sa pagitan ng mga seksyon). Ang archetype na "bayani" ay kadalasang gumagamit ng isang asymmetrical gallery ng mga imahe na dynamic na nakaangkla sa ilalim ng isang lumulutang, perpektong nakasentro na UI block. Sa ibaba ng fold, ang impormasyon ay agad na sumusunod sa isang mahigpit na grid na may apat na hanay na walang mga margin, na nagba-frame ng mga paulit-ulit na kumpol ng mga card, na nagpapalaki sa densidad ng object habang inaalis ang mga margin mula sa frame.
Ang biswal na disenyo ay batay sa mga resultang nakatuon sa gumagamit. Ang mga imahe ay ipinapakita bilang patag, walang balangkas na mga parisukat o nakakalat, magkakapatong na mga piraso, na nakapagpapaalaala sa mga pisikal na bagay, laban sa isang malinaw at walang laman na backdrop. Ang mga imahe ang tanging pinagmumulan ng kulay sa website. Walang mga elemento ng lifestyle photography o karaniwang mga ilustrasyon ng korporasyon—ang bawat elementong grapiko ay isang tumpak at literal na snapshot ng isang digital canvas, na sabay na gumagana bilang patunay ng produkto at isang pangunahing elemento ng estetika.
Paleta
Tatak
- Context Action Violet
#4d49fc— Lokalisadong pangunahing panawagan para sa aksyon sa loob ng mga sub-panel - isang interruptive na kulay ang tumutukoy sa focal point.
Neutral
- Absolute Canvas
#ffffff— Background ng pahina, mga lumulutang na toolbar, nakataas na mga base ng panel. - Structural Ink
#000000— Pangunahing font, solidong background na may mga butones, mga balangkas ng butones. - Graphite Metadata
#595959— Pangalawang teksto ng awtor, naisalokal na subteksto, mga halaga ng placeholder - Boundary Frame
#e2e2e2— Mga banayad na separator at mga hindi aktibong hangganan ng input field. - Angular Teal
#33dfdf— Mga pandekorasyon na epekto, mga tagapagpahiwatig ng pagkarga at aktibong biswalisasyon ng cursor.
Tipograpiya
mula 12 hanggang 72px · 6 na hakbang
- figmaSans — kapalit: Inter · mga balangkas 320, 330, 340, 400, 450, 480, 520, 700 · Isang maraming gamit na kagamitan na namamahala sa lahat mula sa mga pamagat ng display hanggang sa mga label ng nabigasyon. Lumilikha ito ng kakaibang hitsura sa pamamagitan ng pagbabago ng optical negative tracking.
- figmaMono — kapalit: JetBrains Mono · mga balangkas 400 · Mga microtag, pagsubaybay sa coordinate, at mga teknikal na overtone na mas gumagana bilang mga elemento ng user interface kaysa bilang nilalaman.
Mga pagitan at anyo
| Layunin | Kahulugan |
|---|---|
| Densidad | siksik |
| Pangunahing hakbang | 24px |
| Radius ng buton | 8px |
| Radius ng card | 12px |
| Mga anino | walang - mga hangganan sa halip na mga anino |
| Sa pagitan ng mga seksyon | 96-120px |
| Lapad ng pahina | 1440px |
Gagawa ang AI ng website mo sa estilong Figma 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
- Caldera — Magpanday ng apoy sa mainit na batong-apog. Ang kanbas ay hilaw at mainit na plaster, at ang bawat kulay kahel na elemento ay parang nagbabagang baga na idiniin sa ibabaw.
- Vercel — Terminal na nakalimbag sa puting papel
- Dylanbrouwer — Brutalist na pandayan sa paglubog ng araw
- Headspace — Isang maaraw na sulok para sa kalusugan sa mainit na papel
- WHOOP — Laboratoryo ng Pagtatanghal sa hatinggabi - mga puting mesa ng klinikal na laboratoryo sa ilalim ng itim na kawalan sa teatro, isang lilang pulso ng kuryente
- (dot)connect — Isang guhit ng inhinyeriya mula sa Switzerland na may isang piraso ng uling
- Together AI — Research console sa papel na glacial
- Vivid+Co — prismatikong liwanag sa pamamagitan ng obsidian
- Sequel — Ang pribadong pagpapalabas pagkatapos ng dilim ang tanging mainit na liwanag sa isang madilim na sinehan.
- v0 by Vercel — Pagguhit gamit ang lathe. Ang katumpakan at kakayahang magamit ay pinakamahalaga, kung saan ang bawat elemento ay nagsisilbi ng malinaw na layunin sa isang malinis at perpektong teknikal na ibabaw.
- ThoughtLab — Isang monumento ng obsidian na may pulang senyales. Isang kanbas ng itim na kawalan, kung saan ang tanging puspos na pulang bagay sa katedral, na nakalimbag sa malalaking puting letra, ay isang nag-iisang pigurang kromatiko.
- Dovetail — Isang blueprint sa ilalim ng itim na buwan—halos hindi nakikitang mga linya ng graph, puting font, isang lilang kislap