There are 4 levels of buttons, form primary to quaternary:

[ R10.Button.primary []
    { label =
        row [ spacing 15, centerX ]
            [ R10.Paragraph.normal [] [ text "Primary button" ]
            , R10.Svg.Icons.cart_f [] (R10.Color.Svg.fontButtonPrimary theme) 18
            ]
    , libu = R10.Libu.Li "https://r10.netlify.app"
    , theme = theme
    }
, R10.Button.secondary []
    { label = R10.Paragraph.normal [] [ text "Secondary button" ]
    , libu = R10.Libu.Li "https://r10.netlify.app"
    , theme = theme
    }
, R10.Button.tertiary []
    { label =
        R10.Paragraph.normal []
            [ text "Tertiary "
            , el (R10.Link.attrs theme) <| text "button"
            ]
    , libu = R10.Libu.Li "https://r10.netlify.app"
    , theme = theme
    }
, row [ width fill ]
    [ R10.Button.quaternary [ moveLeft 13 ]
        { label = R10.Paragraph.normal [] [ text "Quaternary button" ]
        , libu = R10.Libu.Li "https://r10.netlify.app"
        , theme = theme
        }
    , R10.Button.quaternary [ alignRight, moveRight 13 ]
        { label = R10.Paragraph.normal [] [ text "Quaternary button" ]
        , libu = R10.Libu.Li "https://r10.netlify.app"
        , theme = theme
        }
    ]
]

[ el [ R10.FontSize.xxlarge ] <| text "Font size: XX Large"
, el [ R10.FontSize.xlarge ] <| text "Font size: X Large"
, el [ R10.FontSize.large ] <| text "Font size: Large"
, el [ R10.FontSize.normal ] <| text "Font size: Normal"
, el [ R10.FontSize.small ] <| text "Font size: Small"
, el [ R10.FontSize.xsmall ] <| text "Font size: X Small"
, el [ R10.FontSize.xxsmall ] <| text "Font size: XX Small"
]

Forms have two different styles: Outlined and Filled:

Forms are defined by two things: Configuration and State. This is an example of configuration:

[ R10.Form.entity.field
    { id = "userId"
    , idDom = Nothing
    , type_ = R10.FormTypes.inputField.textUsername
    , label = "User ID"
    , helperText = Nothing
    , requiredLabel = Just "Required"
    , validationSpecs =
        Just
            { showPassedValidationMessages = False
            , hidePassedValidationStyle = True
            , validationIcon = R10.FormTypes.NoIcon
            , validation =
                R10.Form.validation.allOf
                    [ R10.Form.validation.required
                    , R10.Form.validation.minLength 6
                    , R10.Form.validation.maxLength 128
                    , R10.Form.validation.withMsg
                        { ok = "INVALID_FORMAT_INVALID_CHARACTERS"
                        , err = "INVALID_FORMAT_INVALID_CHARACTERS"
                        }
                        (R10.Form.validation.regex "^((?!(/|\\))[\x21-\x7F])+$")
                    ]
            }
    }
]

To translate some text:

R10.I18n.t language R10.Translations.signInHeader

Where signInHeader is defined as

signInHeader : Translations
signInHeader =
    { key = "signInHeader"
    , en_us = "Sign in to your Rakuten account"
    , zh_tw = "會員登入"
    , ja_jp = "楽天会員 ログイン"
    ...
    }

R10.Okaimonopanda.view
    { mouse = mouse
    , screen = windowSize
    }

More about colors

Material Design Colors

Overview Colors

System Colors

Palette

Theme

UI.Theme.Theme`contains two values:

• "primaryColor" (pink, red, etc.)
• "mode" (light or dark)

UI.Theme.Theme is generated from flags using UI.Theme.fromFlags

About Dark mode

• https://material.io/design/color/dark-theme.html
• http://rex.public.rakuten-it.com/design/mobile/mobile-apps/dark-mode/
• https://uxplanet.org/8-tips-for-dark-theme-design-8dfc2f8f7ab6
• https://material.io/design/color/the-color-system.html#color-usage-and-palettes
• https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=6002ee

Other Design Frameworks

• Material: https://material.io/components
• Using Material Density on the Web: https://material.io/blog/material-density-web
• Tailwind: https://tailwindui.com/components
• Semantic: https://semantic-ui.com/elements/button.html
• Ant: https://ant.design/components/button/
• Onsen: https://onsen.io/theme-roller/
• Apple: https://developer.apple.com/design/human-interface-guidelines/
• noredink-ui: https://package.elm-lang.org/packages/NoRedInk/noredink-ui/latest/

ReX Links

• ReX on github: https://github.com/rakuten-rex
• ReX on zeroheight: https://zeroheight.com/390c074f3/p/080991-
• ReX icons: https://rakuten-rex.github.io/icons
• ReX text field: https://rakuten-rex.github.io/text-field/
• Rex button: https://rakuten-rex.github.io/button/
• ReX demo booking: https://rakuten-rex.github.io/demo-booking/
• ReX demo registration: https://rakuten-rex.github.io/demo-register/
• ReX demo sign-up: https://rakuten-rex.github.io/demo-sign-up/
• ReX CSS framework: https://rakuten-frontend.github.io/rex-css-framework/

Rakuten Branding Tram

• Brand Guideline: https://global.rakuten.com/corp/brand/
• Logos (internal): https://global.rakuten.com/corp/brand/logos_temp_visual/logos/files/subbrand_japan_logos.html

Elm open source projects in Rakuten

• R10: https://github.com/rakutentech/r10/
• http-trinity: https://github.com/rakutentech/http-trinity
• rakutentech.github.io: https://github.com/rakutentech/rakutentech.github.io
• Elm projects: https://rakutentech.github.io/#/filter/elm

Others

• https://github.com/NoRedInk/noredink-ui
• https://github.com/rakutentech/http-trinity/commits/master
• https://elm.dmy.fr/packages/NoRedInk/noredink-ui/latest/