North star · Let cinematic agricultural imagery and light editorial typography lead, while evergreen actions and softly tinted content bands keep the page grounded and legible.
The visual identity balances agricultural credibility with an editorial, premium feel. White is the main canvas, giving generous breathing room to the long-form page; deep evergreen (#07503f) anchors inverse content, calls to action, and the newsletter/footer, while warm ivory (#f1efdf), pale blue (#d7e6f5), and powder blue (#b2cee7) distinguish cards and section bands. Acid lime (#e8fe85) is a small, high-contrast accent for the announcement strip and impact badges rather than a dominant surface. Large, light Reckless-style serif headlines create a calm editorial voice against compact, neutral Inter interface text. The opening hero uses full-bleed field video with white centered type and pill actions. Below, paired image-and-copy cards, measured statistics, partner testimonials, and a three-column news feed keep content varied without losing structure. Rounded corners and soft boundaries temper the modular grid; generous vertical intervals preserve a spacious, unhurried rhythm.
Body copy, navigation, buttons, and editorial link text.
Aa 设计
Reckless
网络字体 · 字重 300 / 500 · 占比 12%
免费替代：Instrument Serif
Editorial serif display and headline styling.
Aa 设计
RecklessLight
网络字体 · 字重 300 / 100 · 占比 6%
免费替代：Instrument Serif
Large display and page headings.
Aa 设计
Helvetica
系统字体 · 字重 300 / 700 · 占比 4%
免费替代：Arial
Occasional legacy form and interface fallback.
Aa 设计
RecklessMedium
网络字体 · 字重 400 · 占比 2%
免费替代：Instrument Serif
Small instances of stronger editorial serif emphasis.
Aa 设计
FKGrotesk
网络字体 · 字重 300 · 占比 1%
免费替代：Inter
Compact uppercase badge labels.
角色
示例
字号
字重
行高
字距
特大标题
Oversized editorial hero headline over the opening field video.
Arva
65px
100
1.06
0
一级标题
Primary page or major section heading.
Arva
40px
300
1.22
0
二级标题
Section headings such as partner stories and latest news.
The quick brown fox 敏捷的狐狸
25px
300
1.22
0
三级标题
Subheads for feature cards and supporting content.
The quick brown fox 敏捷的狐狸
24px
300
1.22
0
正文
Explanatory copy, benefit descriptions, and news summaries.
The quick brown fox 敏捷的狐狸
14px
400
1.47
0
辅助文字
Compact secondary details and image-related supporting text.
The quick brown fox 敏捷的狐狸
13px
300
1.5
0
按钮
Pill CTA labels and other action text.
The quick brown fox 敏捷的狐狸
14.5px
400
normal
0
导航
Top-level navigation links.
The quick brown fox 敏捷的狐狸
15px
400
1.1
0
间距与布局
基准单位 2px · 密度：宽松
140px版块间距
20px元素间距
—卡片内边距
1320px内容最大宽度
6px
8px
10px
12px
15px
17px
20px
24px
27px
30px
36px
37px
40px
48px
The desktop page uses a spacious central content frame capped at 1320px, with media-led sections sometimes extending nearly edge to edge. The hero centers its headline and actions over video; subsequent content alternates image-and-copy feature cards, broad impact content, centered testimonial and news headings, and a full-width CTA band. The benefits area uses paired columns, while impact metrics and news are arranged in multi-column groupings. Section gaps are notably generous; internal elements remain compact, giving the long page an unhurried editorial rhythm rather than a dense dashboard feel.
圆角与层次
按钮 · 9999px
输入框 · 9999px
卡片 · 15px
徽标 · 9999px
导航 · 9999px
链接 · 26px
sm · footer
hairline · button
The page is mostly flat, relying on background bands, whitespace, and rounded card edges rather than strong shadows. Borders are restrained and hairline-like; the measured eucalyptus border appears in footer details. A small footer shadow is an exception, while pill buttons and cards remain visually simple and cleanly layered.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Announcement strip
A narrow lime-highlighted message bar sits above navigation, with dark green text and an emphasized inline link.
Hero navigation
Transparent navigation overlays the field video, with links arranged around the centered Arva mark and a light pill contact action.
Pill CTA
Rounded action controls use evergreen with white text for company actions; the farmer-facing action can use a pale blue fill.
Benefit cards
Rounded image and copy panels alternate agricultural photography with dark evergreen or warm ivory feature content.
Impact badges
Compact uppercase labels use the lime accent or a subdued pale surface above impact and global-connection content.
Testimonial cards
Partner stories use pale blue or ivory panels, combining concise copy and attribution with partner photography or landscape imagery.
News cards
The warm ivory news section presents a three-column feed with press labels, dates, headlines, summaries, and a quiet view-more action.
Newsletter form
A dark evergreen footer-area panel pairs concise newsletter messaging with rounded input controls and a submit action.
Imagery · Real agricultural photography and video define the page: broad aerial field views in the hero, farmers and crops in feature cards, and partner portraits or landscapes in testimonials. Images are rectangular with rounded corners and appear naturally lit rather than heavily stylized. The map graphic is a supporting explanatory illustration; image-derived dark greens in the hero are photographic content, not extra brand palette colors.
Use white as the default canvas and reserve tinted backgrounds for distinct content bands.
Set major headlines in a light editorial serif and supporting interface copy in Inter.
Use #07503f for important actions and dark inverse sections.
Keep #e8fe85 to small announcement, badge, or inline highlight moments.
Pair farm photography with concise, clearly grouped explanatory copy.
Use rounded cards and pill actions to soften the modular layout.
Preserve generous gaps between major sections.
✕ 不该做
Do not turn lime into a large background or dominant brand color.
Do not replace agricultural photography with generic corporate stock imagery.
Do not use heavy shadows, dense borders, or sharp card geometry.
Do not crowd the hero with extra copy or competing actions.
Do not set long body paragraphs in the display serif.
Do not introduce gradients or unsupported palette colors.
Do not compress the page into a dense dashboard grid.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new Arva-style page with a spacious white canvas, agricultural credibility, and a calm editorial voice. Use Gallery White (#ffffff) as the base, Field Evergreen (#07503f) for primary actions and inverse panels, Harvest Ivory (#f1efdf) and Sky Wash (#d7e6f5) for softly differentiated cards, and reserve Citrus Signal (#e8fe85) for small highlights. Set large headings in a light Reckless-like serif and interface/body copy in Inter. Lead with authentic field photography or video, then organize content into rounded image-and-copy cards, measurable impact, partner stories, and a clear CTA. Keep section transitions generous and layouts simple, centered, and responsive. Prefer flat surfaces and subtle boundaries over shadows. Use concise copy, pill-shaped actions, and strong contrast over media; avoid adding colors or decorative effects not supported by the palette.
