Recreating the album 'tiles' style found in Google Play Music using WPF

Question

I want to recreate the style of the music album tiles that can be found in Google Play Music. They look like this:

In the above image as you can see, there are 'tiles' which contain the album art, title and artists of the songs.

So far I have got to this:

Using this XAML style:

<Grid Cursor="Hand" HorizontalAlignment="Left" Height="218" Margin="10" VerticalAlignment="Top" Width="170" Background="Transparent">
    <Grid.Effect>
         <DropShadowEffect Opacity="0.4" Direction="230" ShadowDepth="2" BlurRadius="2" RenderingBias="Quality"/>
    </Grid.Effect>
    <Image RenderOptions.BitmapScalingMode="Fant" Source="{Binding AlbumArt}" VerticalAlignment="Top"/>
    <Grid Height="48" VerticalAlignment="Bottom" Background="White">
        <TextBlock Text="{Binding Title}" HorizontalAlignment="Left" VerticalAlignment="Top" FontFamily="Roboto" FontSize="15" Foreground="#FF2E2E2E" Margin="7,7,0,0" Width="140"/>
        <TextBlock Text="{Binding Artists}" VerticalAlignment="Bottom" HorizontalAlignment="Left" FontFamily="Roboto" Foreground="#FF6E6E6E" Margin="7,0,0,6"/>
        <TextBlock HorizontalAlignment="Right" Margin="0,8,7,0" TextWrapping="Wrap" Text="&#xF142;" VerticalAlignment="Top" FontFamily="FontAwesome" FontSize="17" Foreground="#FF9C9C9C" Width="3" Height="14"/>
    </Grid>
</Grid>

Now that might look just OK but I want to make it closer in resemblance. I want to know these as well:

• Have I used the correct font, i.e., are they using Roboto too? As far as I know Google uses Roboto in most of their apps and it looks quite good but in my app it looks a little thin. I guess I'm not using the correct font weight or it might be I'm using the wrong font.
• The shadow is probably the main thing wrong with my attempt. Seeking advice on that.

_{Thanks in advance.}

Answer 1

Card Shadow

.card-content {
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background: #fff;
    height: 100%;
    position: relative;
    text-decoration: none;
    vertical-align: top;
}

Font Title (Roboto - Light)

.card .title {
    color: #212121;
    display: block;
    font-size: 16px;
    line-height: 18px;
    max-height: 36px;
    min-height: 18px;
    overflow: hidden;
    text-decoration: none;
    position: relative;
    white-space: nowrap;
}

Font Subtitle (Roboto - Light)

.card .subtitle {
    color: #616161;
    display: inline-block;
    font-size: 13px;
    line-height: 16px;
    margin: 1px 0;
    max-width: 132px;
    overflow: hidden;
    white-space: nowrap;
}

Here is a rough example https://jsfiddle.net/qtx5acfL/4/

How I got the values

I went to the website https://play.google.com/store?hl=en. This website may not be available in all areas. Right click on the webpage and select Inspect Element. Hover over the part you want to know and on the right you will see all of the CSS rules.

If I didn't have access to the website

There are conversions for the dropshadow that you can find searching Google that were made for Photoshop/Illustrator but you can use the values in any program. I think this is a level 1 shadow.

Google uses the font Roboto for Android.