Design System Preview
KUBOTA (lorem)

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. computed style lorem ipsum dolor.

lorem ipsum DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Primary (lorem ipsum)
Kubota Teal
#008486
CTA / lorem / lorem ipsum / lorem ipsum
Kubota Teal Light
#339d9e
lorem ipsum dolor sit
Accent
Light Blue
#cddcf2
lorem ipsum dolor / lorem ipsum
Overlay
Teal Overlay
rgba(0,132,134,0.86)
lorem ipsum dolor sit amet consectetur
Text
Text Primary
#333333
lorem ipsum dolor
Text Secondary
#666666
lorem ipsum dolor
Text on Teal
#ffffff
lorem ipsum dolor sit amet
Surface & Border
Background
#ffffff
lorem ipsum
Surface Light
#f1f1f1
lorem ipsum dolor sit
Surface Alt
#f5f5f5
lorem ipsum dolor sit
Surface Medium
#dedede
lorem ipsum dolor
Border Cookie
#d1d1d1
lorem ipsum dolor sit
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur
H2 Focus / 34px / 400 / line-height: 1.4 / letter-spacing: nonelorem ipsum dolor sit
lorem / lorem / lorem ipsum dolor sit
H1 / 20px / 400 / line-height: 1.7 / letter-spacing: 0.03emlorem ipsum dolor
lorem ipsum dolor sit
H3 Card / 18px / 400 / line-height: 1.4 / letter-spacing: 0.03emlorem ipsum dolor
lorem / lorem ipsum dolor
Nav Heading / 18px / 400 / line-height: 1.4 / color: #008486lorem ipsum
Highlight Topics
H2 Section / 15px / 400 / line-height: 1.7 / letter-spacing: 0.03emlorem ipsum dolor
lorem ipsum dolor sit amet
Nav Sub / 14px / 400 / line-height: 1.4 / letter-spacing: 0.03emlorem ipsum
lorem ipsum dolor Bold lorem
Nav Bold / 14px / 700 / line-height: 1.4lorem span
lorem ipsum dolor / lorem ipsum dolor
Utility / 14px / 400 / color: #666666lorem
MENU
Menu Button / Helvetica Neue / 14px / 700 / color: #008486lorem ipsum dolor sit
03 / Article

lorem ipsum dolor sit amet

lorem / lorem / lorem ipsum dolor sit amet

lorem ipsum, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit. lorem ipsum 130 lorem ipsum dolor sit amet consectetur adipiscing, lorem / lorem / lorem ipsum dolor sit amet consectetur adipiscing elit sed.

lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor. lorem ipsumlorem ipsum dolorlorem ICT lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing. GPS lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet. lorem ipsum dolor sit amet, lorem, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor 70 lorem ipsum dolor sit amet consectetur.

04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary CTA
#008486 / radius: 2px / 700
lorem ipsum dolor
Secondary (Outline)
transparent / border: #008486
lorem
Back Button
#dedede / radius: 0px
Cookie lorem ipsum
Cookie CTA
#008486 / 14.4px / 700
Hero lorem ipsum(lorem / lorem ipsum dolor)
lorem ipsum
On Teal Background
05 / Cards

lorem ipsum dolor sit

lorem ipsum dolor sit

lorem ipsum / lorem ipsum / lorem ipsum, lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor

lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur, lorem 70 lorem ipsum dolor sit amet.

lorem ipsum dolor sit

lorem ipsum / lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.

lorem ipsum: lorem ipsum + rgba(0,132,134,0.86) lorem ipsum dolor sit / lorem 18px 400 lorem / line-height 1.4
06 / Forms

lorem ipsum dolor

lorem ipsum -- font-size: 26px / border: none / border-bottom: 2px solid #008486
lorem ipsum -- border: 1px solid #d1d1d1 / radius: 0px
lorem ipsum -- border-color: #008486 / shadow: rgba(0,132,134,0.15)
lorem -- border-color: #cc3333 / shadow: rgba(204,51,51,0.15)
lorem -- border-radius: 50px / border: 1px solid #d1d1d1
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem ipsum dolor sit amet. lorem ipsum dolor.
Nav Shadow
0px 2px 4px rgba(0,0,0,0.08)
Teal Overlay
rgba(0,132,134,0.86) -- lorem ipsum dolor sit amet consectetur
Focus / Active
#008486 (Kubota Teal)
lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. lorem ipsum dolor sit (opacity: 0.86) lorem ipsum dolor sit amet consectetur.
08 / Layout

lorem ipsum & lorem ipsum dolor

lorem ipsum dolor sit amet
11px
14px
lorem ipsum dolor padding: 11px 14px
lorem ipsum dolor sit amet
64px
48px
32px
24px
16px
8px
lorem ipsum dolor
Full Width 100%
Content Width 940px
Article Width 640px
lorem ipsum dolor sit(lorem ipsum)
1/3
1/3
1/3
lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur.