Dub
Panel rheoli papur reis matte Link
Mae gan system weledol Dub estheteg SaaS gymedrol, bron yn olygyddol: cynfas bron yn wyn wedi'i ddal ynghyd gan ffiniau tenau yn hytrach nag elfennau sy'n ymwthio allan, gyda theipograffeg monocrom dwys yn darparu cefnogaeth strwythurol ac un lliw glas llachar (#2563eb) yn gwneud datganiad. Mae arwynebau'n aros yn wastad ac yn ddi-ffrâm ar yr olwg gyntaf, ond mae gan bob cynhwysydd ymyl 1px #e5e5e5, gan ddeffro teimlad dogfen brintiedig. Cyflawnir personoliaeth trwy set fach o acenion "pilsen" lliw (oren, gwyrdd, porffor) sy'n arnofio uwchben y palet niwtral, a phenawdau sy'n teimlo'n hyderus ac yn fodern heb fod yn fflachlyd. Mae'r cydrannau'n gryno ac yn drwchus: cwteri 8px, radiws cerdyn 12px, labeli siâp pilsen ar 9999px, a rheolyddion anweledig yn lle botymau trwm, wedi'u llenwi.
Mae'r dudalen wedi'i hadeiladu ar gynllun canolog gyda lled mwyaf o tua 1200px. Y prif elfen yw bloc testun canolog gyda thri elfen arnofiol (Rhaglenni Cyswllt, Dadansoddeg Trosi, Dolenni Byr) wedi'u lleoli'n llorweddol uwchben cynllun cynnyrch mawr. Mae adrannau wedi'u trefnu'n fertigol gyda gwteri 64px cyson, gan newid rhwng cynfas gwyn a niwl papur #f5f5f5 ar gyfer gwahanu tonau. Mae'r adran waelod yn defnyddio cynllun siâp Z: mae testun golygyddol wedi'i ganoli yn y traean canol, ac mae cardiau UI arnofiol wedi'u hangori i'r ymylon chwith a dde, gan greu rhythm anghymesur, tebyg i gylchgrawn. Mae cwmwl y logo yn grid 5x2 syml, wedi'i ganoli ar y dudalen. Mae llywio yn far uchaf minimalist - logo ar y chwith, llywio yn y canol, grŵp o ddau fotwm (botwm "Mewngofnodi" ysbryd + botwm "Cofrestru" wedi'i lenwi) ar y dde - heb ddewislen sefydlog na mega-ddewislen. Mae cynllun dangosfwrdd y brif ffenestr yn arddangos cynllun ap clasurol dwy golofn: bar ochr sefydlog (tebyg i 240px) + ardal gynnwys sy'n diffinio dwysedd gwybodaeth cynnyrch i ymwelwyr cyn iddynt ddechrau sgrolio.
Mae'r delweddau'n canolbwyntio ar y cynnyrch, nid ar ffordd o fyw. Mae'r prif sgrin wedi'i chanoli ar sgrinlun dangosfwrdd mawr, sy'n cynrychioli model cynnyrch go iawn gyda llywio bar ochr, tabl data, ac elfennau UI arnofiol, wedi'u gosod fel panel gwastad ar gynfas gwyn. Mae logos cleientiaid yn cael eu harddangos mewn grid llwyd heb ei ddirlawn (beehiv, superpower, Chatbase, ac ati) i gydnabod eu perfformiad cyfryngau cymdeithasol, wedi'u tynnu o liw i ganiatáu i'r acen las sengl ar y dudalen aros yn drech. Mae cardiau partner arnofiol (proffiliau a theils bach gyda data refeniw/taliad) yn symud o amgylch blociau o destun golygyddol ar y gwaelod, gan greu ymdeimlad o ddyfnder heb ddefnyddio cysgodion ar y testun ei hun. Mae patrwm cefndir y grid dotiog yn nodwedd arbennig: mae rhes denau o ddotiau bach gydag anhryloywder isel iawn yn creu gwead a theimlad system ddylunio/arwyneb lluniadu, gan bwysleisio lleoliad y wefan fel "platfform priodoli cyswllt modern." Mae'r eiconograffeg yn finimalaidd, gydag amlinelliadau a llenwadau, ac mae'n defnyddio palet acen (oren tangerîn, porffor lafant, gwyrdd mintys) ar gyfer tagiau nodwedd. Ni ddefnyddir unrhyw ffotograffau, darluniau na modelau 3D—mae rhyngwyneb defnyddiwr y cynnyrch ei hun yn iaith weledol.
Palet
Brand
- Electric Blue
#2563eb— Defnyddir prif liw'r brand—y logo, dolenni, dangosyddion perfformiad allweddol, cyflyrau gweithredol, ac acenion eiconau. Glas cyfoethog ar gefndir gwyn sy'n creu unig apêl weledol y system. - Deep Sapphire
#1e40af— Defnyddir prif gefndir y botwm gweithredu, llenwad beiddgar yr alwad i weithredu—yr unig liw sy'n dynodi'r weithred—yn gynnil i ddenu sylw.
Niwtral
- Canvas White
#ffffff— Cefndir y dudalen, wyneb y cerdyn, a'r paneli naidlen yw sylfaen absoliwt pob sgrin. - Paper Mist
#f5f5f5— Newidiadau lliw hofran cynnil ar gyfer cardiau nythu, paneli ychwanegol, a llenwadau. - Ash
#e5e5e5— Y ffiniau tenau ar y cardiau, y cysylltwyr mewnbwn a'r rhannwyr yw'r llinell strwythurol sy'n dal y system at ei gilydd. - Smoke
#d4d4d4— Ffiniau mwy miniog ar gyfer cynwysyddion a ddewiswyd ac amlinelliadau botwm ychwanegol. - Pebble
#c8c8c8— Ffiniau, amlinelliadau rheoli, a rhannwyr strwythurol gyda chyferbyniad canolig. Ni ddylid defnyddio'r lliw hwn fel y prif liw ar gyfer galwadau i weithredu. - Midnight Ink
#0a0a0a— Mae prif destun y botymau, y botymau sydd wedi'u hamlygu, a'r testun llywio bron yn ddu er mwyn cael y cyferbyniad mwyaf posibl.
Teipograffeg
o 11 i 48px · 9 cam
- Satoshi — amnewid: Inter (weight 500 · amlinelliadau 500 · Penawdau Arddangos – a ddefnyddir mewn llinellau 36–48px yn unig ar gyfer teitlau penawdau ac adrannau. Pwysau ffont – 500 (canolig, nid trwm): Mae penawdau'n edrych yn hyderus ac yn fodern, ond byth yn ormesol. Mae cyfranneddau geometrig Satoshi yn rhoi teimlad golygyddol, modern i'r ffont na all copi corff Inter ei efelychu.
- Inter — amnewid: Inter (native) · amlinelliadau 400, 500, 600 · Copi corff, labeli UI, llywio, is-benawdau, a phenawdau bach. Inter yw'r prif waith, gan drin popeth o ficro-labeli 11px i benawdau eilaidd 30px. Pwysau o 400 yw'r rhagosodiad ar gyfer copi corff, 500 ar gyfer elfennau wedi'u hamlygu a labeli botymau, a 600 wedi'i gadw ar gyfer labeli UI pwysig. 16px gydag uchder llinell o 1.5 yw'r maint cam sengl a geir amlaf (1220 o ddigwyddiadau), gan gadarnhau mai 16px yw maint canonaidd copi corff.
- Geist Mono — amnewid: JetBrains Mono or IBM Plex Mono · amlinelliadau 400, 500 · Defnyddir darnau cod, metadata technegol, a thocynnau un-gofod mewnosodedig mewn blociau cod ar 12–14px ac mewn elfennau arddangos cod mawr ar 24px. Mae hyn yn sicrhau hygrededd yr offeryn datblygwr, yn gyson â lleoliad cynnyrch Dub.
Cyfnodau a ffurf
| Diben | Ystyr |
|---|---|
| Dwysedd | cyfartaledd |
| Cam sylfaenol | 8px |
| Radiws botwm | 8px |
| Radiws y cerdyn | 12px |
| Cysgodion | dim ffiniau yn lle cysgodion |
| Rhwng adrannau | 64px |
| Lled y dudalen | 1200px |
Bydd AI yn adeiladu eich gwefan yn null Dub ac yn ei llenwi
- Llenwch gyda chynhyrchion a phostiadau trwy'r ddolen - Instagram, TikTok, Facebook.
- Trosglwyddo cynnwys o'ch hen wefan—nodwch y cyfeiriad yn unig.
- Dyluniad modern ar yr injan orau: React ( Next.js) gyda rendro gweinydd ac optimeiddio SEO yn syth ar y bocs.
- Optimeiddio SEO cwbl awtomataidd ar gyfer canlyniadau chwilio ac argymhellion rhwydwaith niwral.
Arddulliau tebyg
- ElevenLabs — Traethawd llun mewn arlliwiau hufen cynnes gyda phenawdau cynnil. Llyfr nodiadau arddull Bauhaus—papur lliw plisgyn wy, inc du, ac acen borffor ac oren sengl ar gyfer arddangos cynnyrch.
- Awesomic — Rhwyll sinc olygyddol gyda marciau atalnodi oren yn atgoffa rhywun o gonffeti
- Monad — cyfnodolyn technegol golygyddol ar femrwn cynnes
- Seline Analytics — Tabl dadansoddol tawel ar bapur cynnes
- Notion — Llyfr nodiadau papur cynnes yn haul canol dydd
- Anthropic — Cylchgrawn maes gwyddonol ar femrwn cynnes—arwynebau ifori tawel, penawdau golygyddol â serifau, ac acen glai sengl sy'n ymddangos dim ond pan fo angen gweithredu.
- Calendly — Inc glas tywyll ar farmor oer
- Augen Pro — Mae cyflwyniad gwyn Apple yn cynnwys glas trydan clinigol, dibwysau fel yr unig acen mewn gofod monocrom.
- Antimetal — Cronicl golygyddol ar bapur hufen—bore tawel mewn cyfnodolyn gwyddonol, lle mae cymedroli yn cyfleu hyder a serifau yn gwneud y gwaith trwm
- Perk — Calch trydan ar bapur memrwn cynnes
- Ditto — Gweithdy heulog yn creu samplau o flodau gwyllt. Arwynebau hufen cynnes, lliw sylfaen melyn bywiog, inciau glas tywyll dwfn, ffurfiau lliw organig yn blodeuo y tu ôl i'r darn.
- Officevibe — Cylchgrawn golygyddol ar bapur lliw hufen cynnes. Dychmygwch draethawd meddylgar ar reoli AD, wedi'i gyflwyno fel cynnyrch—ffont serif cyrsif yn sibrwd trwy ryngwyneb glas modern.